0.9.46 • Published 7 months ago
claiops-src-idp-frontend-proxy v0.9.46
nclaiops-src-idp-frontend
ReactJS frontend (+ Proxy) for https://github.com/ClaionSolution/nexclipper-api
Table of Contents
- Quick start for Developer
- Overview
- For Pipeline
1. Quick Start: Developer
- Install packages for /server (expressjs proxy server)
$ npm install
- Install packages for /client (create-react-app)
$ cd client
$ npm install
- Create a
.env
file in the root
NODE_ENV=development
NC_CLIENT_PORT="3030"
NC_CLIENT_API_ENDPOINT=http://ns-idp-back-claiops-src--57c3a-20327064-754c95efcec8.kr.lb.naverncp.com:7001
NC_CLIENT_CORS_CREDENTIALS="true"
NC_CLIENT_CORS_ORIGIN="true"
NC_CLIENT_GRAFANA_ENDPOINT=http://olly-dev-gra.claion.io
NC_CLIENT_WS_ENDPOINT=ws://ns-idp-back-claiops-src--57c3a-20327064-754c95efcec8.kr.lb.naverncp.com:7001
- Create a
.env
in the client folder
REACT_APP_URL=http://localhost:3039
REACT_APP_ENV=dev
REACT_APP_USE_KEY_CLOACK=false
REACT_APP_URL: Proxy를 사용하지 않고 외부 URL로 API를 호출하고자 할 때 사용. local에서도 Proxy를 사용할 경우 root 경로의 .env 파일에 NC_CLIENT_API_ENDPOINT 값을 셋팅. local test 일 경우 외부 URL 입력해야함. REACT_APP_USE_KEY_CLOACK: Keycloack 로그인을 사용하고자 할때 true, local에서 Keycloack 없이 로그인하고자 할때 false
- Run
// run both client and server at the same time
// we need to run the code in sudo because /server writes logs /var/log
$ sudo npm run dev
OR you can run serpately
$ npm run dev:client // run client
$ sudo npm run dev:server // run server
2. For Pipeline
- Build
$ npm run build
- Environmental variables
NODE_ENV=development
NC_CLIENT_PORT=3030
NC_CLIENT_API_ENDPOINT=http://localhost:5002
NC_CLIENT_CORS_ORIGIN=true
NC_CLIENT_CORS_CREDENTIALS=true
3. Overview
- The Proxy Server at
/server
serves static frontend code
- The Proxy Server works as a proxy handling Frontend <-> Backend API requests
- nexclipper-client/client/src
.
├── assets
│ ├── resourceProviderIcon
│ └── resourceTypeIcon
├── atoms
├── common
│ ├── const
│ └── manifest
├── components
│ ├── chartjs
│ │ └── transformers
│ ├── charts
│ │ ├── ChartAdaptors
│ │ │ ├── ApiAdaptor
│ │ │ │ └── ApiHookWrappers
│ │ │ ├── MetricAdaptor
│ │ │ └── RawChartAdaptor
│ │ ├── DashboardController
│ │ ├── DashboardItems
│ │ ├── DashboardSettings
│ │ └── utils
│ ├── drawers
│ ├── layout
│ ├── pages
│ │ ├── 404
│ │ ├── AccessGroups
│ │ ├── Alerts
│ │ ├── CatalogPlans
│ │ ├── Clusters
│ │ │ ├── ClusterEvents
│ │ │ ├── ClusterK8sTopology
│ │ │ ├── ClusterLogs
│ │ │ ├── ClusterNetworks
│ │ │ ├── ClusterNodes
│ │ │ ├── ClusterNsServices
│ │ │ ├── ClusterOverview
│ │ │ ├── ClusterPods
│ │ │ ├── ClusterPvPvc
│ │ │ ├── ClusterTopology
│ │ │ │ └── Elements
│ │ │ ├── ClusterWorkloads
│ │ │ ├── DashboardSettings
│ │ │ └── Grafana
│ │ ├── Debug
│ │ ├── Experimental
│ │ │ └── ThreeOverview
│ │ ├── Home
│ │ ├── Incidents
│ │ ├── Login
│ │ ├── MetricOps
│ │ │ ├── BayesianModel
│ │ │ ├── Evaluations
│ │ │ ├── MetricOpsSideView
│ │ │ ├── MonitoringTarget
│ │ │ ├── ResolutionAction
│ │ │ └── RuleGroup
│ │ ├── NetworkDetail
│ │ ├── Operation
│ │ │ ├── OperationChannel
│ │ │ ├── OperationConfiguration
│ │ │ │ ├── OperationGrafanaConfig
│ │ │ │ └── OperationPrometheusConfig
│ │ │ ├── OperationExecutor
│ │ │ ├── OperationExporters
│ │ │ ├── OperationSchedules
│ │ │ └── Operations
│ │ ├── ResourceDetail
│ │ │ ├── NodeDetail
│ │ │ ├── PodDetail
│ │ │ ├── PvcDetail
│ │ │ └── ServiceDetail
│ │ ├── Settings
│ │ ├── Subscriptions
│ │ └── customerAccount
│ ├── tables
│ ├── topology
│ │ ├── AlertRuleTopology
│ │ ├── K8sTopology
│ │ ├── Popups
│ │ └── ResourceTopology
│ ├── ui
│ │ ├── DataFormat
│ │ ├── Dropdown
│ │ ├── FormGen
│ │ ├── FormInput
│ │ ├── Gauge
│ │ ├── Grafana
│ │ ├── Layout
│ │ ├── Sortable
│ │ ├── TableCell
│ │ ├── assets
│ │ └── minigraph
│ │ └── utils
│ │ └── svgPathCommands
│ └── utils
├── config
├── hooks
│ ├── api
│ │ ├── Alert
│ │ ├── AlertRule
│ │ ├── BayesianModel
│ │ ├── CommonService
│ │ ├── CustomerAccount
│ │ ├── Evaluation
│ │ ├── Events
│ │ ├── Executor
│ │ ├── Exporters
│ │ ├── Grafana
│ │ ├── Incident
│ │ ├── K8s
│ │ ├── Messaging
│ │ ├── Metric
│ │ ├── MonitoringTargets
│ │ ├── Party
│ │ ├── ProductCatalog
│ │ ├── ResolutionAction
│ │ ├── Resources
│ │ ├── RuleGroup
│ │ ├── Scheduler
│ │ ├── SocialLogin
│ │ ├── Subscriptions
│ │ ├── SudoryTemplate
│ │ ├── UserTenancy
│ │ ├── Webhooks
│ │ └── Workloads
│ ├── user
│ └── util
├── locales
│ ├── en
│ └── kr
├── socket
├── style
└── types
0.9.46
7 months ago