Add datapath visualizaiton

[denis-tingaikin]

Overview

Link to the Google Docs document

https://docs.google.com/document/d/1PruQ8zEo6KMc3_CmpRoazlFw5wbU9dNqWk6H6knj0sg/edit#heading=h.kvacwaylps7p

Defenition of done

1. Run examples for Kiali , WeaveScope
2. Investigate how is Kiali work a. If Kiali works vis Prometheus then we need to investigate what format of entries Kiali uses for drawing. b. if Kiali works without Prometeus then we should investigate what data is Kiali using for drawing.
3. Provide PRs into SDK if needed for Kiali
4. Add example in deployment-k8s, NSM + Kiali
5. Write article and post on dev.to

[bellycat77]

Weave Scope is not supported anymore: https://www.weave.works/blog/weave-cloud-end-of-service https://github.com/weaveworks/scope#please-note-this-project-is-no-longer-maintained-more-details-available-here

Kiali is a management console for Istio service mesh: https://github.com/kiali/kiali#introduction And don't have plans to support other meshes: https://github.com/kiali/kiali/issues/2962 Also, Kiali is highly integrated with Istio in code: https://github.com/search?q=repo%3Akiali%2Fkiali+istio&type=code

I think both solutions are not suitable.

[bellycat77]

There are three options for solving the issue: 1. Using Grafana Features Pro: well-known product with rich functionality Cons: node graph display capabilities do not meet our requirements 2. Continue searching for a system that meets our requirements Pro: no creation costs Cons: The result is not guaranteed. Possible costs for integration and integration support 3. Create our own system (recommended) Pro: Flexibility. Xored has engineers with experience building such a system Cons: The resources for support are required

[denis-tingaikin]

TODO:

1. add color scheme
2. display all ifaces on graph (switch to cytoscape.js for graph if needed)
3. Consult about UX/UI
4. add fields panel (ip context + metrics)
5. add menu panel (overview (empty), graph)
6. overview ( stats: number of nses, number of ns, 3 graphs (1. tx_bytes, 2. rx_bytes, 3. error_packets)
7. try use 'get' (https://github.com/networkservicemesh/api/blob/main/pkg/api/networkservice/connection.proto#L80) via grpc client
8. use cytoscape.js for graph
9. Consult about UX/UI

[bellycat77]

Action plan:

• [x] Investigate exiting solutions if they can be used
• [x] Create Demo of solution
• [x] Create presentation of Demo
• [ ] Create proposals/specifications for NSM Dashboard
  • [ ] Overview
  • [ ] Methodology overview
  • [ ] Data model description
  • [ ] Dataplane view mockups and description
    • [x] Learn the basics of Figma
    • [x] Create components for mock-ups
    • [x] Create mock-up
    • [ ] Address comments
  • [ ] Controlplane view mockups and description
  • [ ] Services view mockups and description
  • [ ] Overview view mockups and description
  • [ ] RnD High-level Architecture
  • [ ] API description
  • [ ] Detailed description
  • [ ] ROM & Decomposition
• [ ] Develop NSM Dashboard
  • [ ] Develop Dashboard frontend
  • [ ] Develop Dashboard backend
  • [ ] Develop tests
• [ ] Manual testing
• [ ] Fix Eds comments
• [ ] Add example in deployment-k8s
• [ ] Write article and post on dev.to