nclaiops-src-idp-frontend

ReactJS frontend (+ Proxy) for https://github.com/ClaionSolution/nexclipper-api

Table of Contents

1. Quick start for Developer
2. Overview
3. For Pipeline

1. Quick Start: Developer

1. Install packages for /server (expressjs proxy server)

$ npm install

2. Install packages for /client (create-react-app)

$ cd client
$ npm install

3. 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

4. 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

5. 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

1. Build

$ npm run build

2. 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

1. The Proxy Server at /server serves static frontend code

2. 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