/analyzer-ui

UI for analysis features

Primary LanguageJavaScriptApache License 2.0Apache-2.0

analyzer-ui

Deploying

Docker Build

  • docker build -t hyperpilot/analyzer-ui:alpha .

Running on a tech-demo cluster

  • Deploy a cluster using deployer through executing ./deploy-gcp <username> no-snap under hyperpilot-demo/workloads/tech-demo
  • Deploy HyperPilot components through executing kubectl create -f hyperpilot-install.yaml under hyperpilot-install
  • Run load controllers through demo-ui:
    • kubectl create -f scripts/load-controller-deployment.json
    • kubectl create -f scripts/spark-load-controller-deployment.json
  • Set up GoDDD application
    • You have to at least select goddd deployment under default namespace as a microservice
    • Select goddd deployment as SLO source service, with the port of 8080
    • Select api_booking_service_request_latency_microseconds as the metric, with tag summary=quantile_90, value set to 0.1 seconds

This repository consists of three JavaScript apps:

  • alpha
  • interference-analysis
  • sizing-analysis

Requirements

  • Node.js
  • npm or yarn

Instructions for Developing

  • yarn install
  • yarn dev-server (npm run dev-server) to start webpack for server side code
  • yarn dev (npm run dev) to run server.js and start the development server for client side code

Configurations (Environment Variables)

  • ANALYSIS_APP: Any of alpha, sizing-analysis, interference-analysis, default to alpha
  • NODE_ENV: Can be production or any thing else, setting it to production triggers webpack to build for production
  • ANALYZER_HOST, ANALYZER_PORT: Configurations for connecting to analyzer
  • OPERATOR_HOST, OPERATOR_PORT: Configurations for connecting to operator
  • MONGO_HOST, MONGO_PORT, MONGO_USERNAME, MONGO_PASSWORD: Configurations for connecting to Mongo
  • CONFIGDB_NAME, METRICDB_NAME: Mongo database names configurations
  • INFLUXDB_HOST, INFLUXDB_PORT, INFLUXDB_USERNAME, INFLUXDB_PASSWORD: Configurations for connecting to InfluxDB

Building Production Bundle

  • yarn build-server or npm run build-server
  • yarn build or npm run build
  • yarn serve or npm run serve to serve the app

Linting

  • yarn lint (Runs eslint)

File Descriptions:

  • package.json: Dependencies and useful scripts
  • yarn.lock: Auto-generated lock file produced by yarn
  • .eslintrc.js: Eslint configurations

Server Side

  • config.js: Configurations for application, such as Mongo URL, analyzer URL etc., they are almost always configurable through environment variables
  • server.js: A Node.js script that imports the corresponding router module from routers/ according to the ANALYSIS_APP environment variable. However it behaves differently when it's in development and production mode:
    • NODE_ENV=development (NODE_ENV is not production): Launches webpack dev middleware and hot middleware that not only builds the client side JavaScript code, but also hot reloading it
    • NODE_ENV=production: Serves the files under dist/static/ directory as static assets, and serves all the other routes with the corresponding HTML file according to ANALYSIS_APP
  • webpack.server.config.js: Webpack configuration for server side code, builds the server.js file into dist/server.bundle.js

Client Side

  • webpack.client.config.js: Webpack configuration for client side code
  • alpha/ The app for Alpha 2 UI
  • sizing-analysis/: The app for sizing analysis UI
  • interference-analysis/: The app for interference analysis UI
  • commons/: Shared components and stylesheets across different apps
  • assets/: App's static assets such as images and fonts

Stylesheet / Styleguide

  • npm run styleguide: Run styleguide server to see all UI componennets at localhost:6060
  • styles/: master stylesheets => Sizing + Interference (Sass or Scss)
  • commons/components: UI components w/component based sass