[GSoC] [UI] Dashboard Page

[Sylvie-Wxr]

• If this is non-trivial feature, paste the links/URLs to the design doc.
• Update the documentation to include this new feature.
• Tests(including UT, IT, E2E) are added to verify the new feature.
• If it's UI related, attach the screenshots below.
• If this pull request closes/resolves/fixes an existing issue, replace the issue number. Fixes [GsoC][BanyanDB] Add Overview page in UI skywalking#10634.
• Update the CHANGES log.

Dashboard Page Preview:

Auto Refresh Seletion:

When the page opens, the default is off, if select any option for auto refresh, the end time of datepicker will change every selected time frame, as well as the page.

Date Picker:

User can choose from different period of time as start time to current time as end time.

Path display:

if the path is too long (over than 35 characters, it will show the first 5 and last 30 characters with '..." in the middle.

Smaller window display:


When the window is sizing down, the table dynamically sizes down. When it reaches certain pixel, the text in Memory and Disk Details will not be displayed, and at a more smaller pixel, the time componenents will be in shown in seperate lines to avoid messiness.

Table scroll with fixed time components:

Make the table scroll and time components fixed so that users can still monitor or choose different time if there are more lines of nodes.

Color display of the bar in CPU, Memory and Disk:

(The picture is only for display only here). In actual code, the bar will be green when CPU/Memory/Disk is less tan 50%, will be Yellow from 50%-80%, red over 80%

No data display:

If there is no data written in the backend, there will be no data displayed like this.

[hanahmily]

@Sylvie-Wxr Would you introduce the Dashboard in observablity.md#metrics and add brief introduction and screenshot in cluster.md

First, explain how to enable the collection of self-observability metrics. To illustrate the flow of metrics data, insert the diagram from your design into the observability. Md file.

Next, it's important to specify the location where the metrics are stored. Lastly, ensure that the screenshot is included on the page.

[wu-sheng]

png file should be hosted in the website repo to keep codes repo volume controllable.

[wu-sheng]

Consider adding here, https://github.com/apache/skywalking-website/tree/master/static/doc-graph/banyandb/v0.7.0

Note, this is for 0.7 BanyanDB doc only.

[Sylvie-Wxr]

Consider adding here, https://github.com/apache/skywalking-website/tree/master/static/doc-graph/banyandb/v0.7.0

Note, this is for 0.7 BanyanDB doc only.

Understood. Removed PNG from this repo.

[hanahmily]

@Sylvie-Wxr Would you please attach the Dashboard screenshot at cluster installation

[Sylvie-Wxr]

@Sylvie-Wxr Would you please attach the Dashboard screenshot at cluster installation

@hanahmily Updated.