networkservicemesh/cmd-dashboard-ui

Network Service Mesh Dashboard UI

NSM dashboard UI part working in conjunction with the backend part

Written in React using libraries:

• Typescript
• Redux
• Cytoscape
• Chart.js

The entire NSM dashboard deployment info see here

Dev/debug

To run dashboard UI locally:

1. git clone [email protected]:networkservicemesh/cmd-dashboard-ui.git
2. cd cmd-dashboard-ui
3. nvm install (Node.js version specified in the .nvmrc file will be installed)
4. npm install
5. npm run dev
6. Open http://localhost:3000 in the browser
7. The demo data from cmd-dashboard-ui/src/model.ts can be used for debugging

cmd-dashboard-ui's Issues

Implement dashboard for NSM

Specification: https://docs.google.com/document/u/1/d/1oMQEtbfhShSAAsjUbc5T8a7JQIK1bBFP0BXdIkjXBHw/edit#heading=h.vmf79znr2vme

TODO:

• Dataplane
• Get feedback from folks
• Overview
• Controlplane
• Network Services
• Healing

Implement reusable “Display” top panel with a variable set of options

Implement reusable “Display” top panel with a variable set of options

• the panel should expand when you hover over “Display” and minimize when you move the cursor away
• Dataplane page checkbox: “Looped connections” (disabled by default)
• bind the options state to the global Redux store (must be preserved when moving between pages)
• add filtering of connections and interfaces based on the option state

Mockup: