[GSoC] [UI] Dashboard Page

docs/observability.md

@@ -4,12 +4,33 @@ This document outlines the observability features of BanyanDB, which include met
 
 ## Metrics
 
-BanyanDB has built-in support for metrics collection. Currently, there is only one supported metrics provider: `Prometheus`. It is auto enabled at run time through `observability-modes` flag. 
+BanyanDB has built-in support for metrics collection. Currently, there are two supported metrics provider: `prometheus` and `native`. These can be enabled through `observability-modes` flag. 
+
+### Prometheus
+
+Prometheus is auto enabled at run time, if no flag is passed or if `promethus` is set in `observability-modes` flag.
 
 When the Prometheus metrics provider is enabled, the metrics server listens on port `2121`. This allows Prometheus to scrape metrics data from BanyanDB for monitoring and analysis.
 
 The Docker image is tagged as "prometheus" to facilitate cloud-native operations and simplify deployment on Kubernetes. This allows users to directly deploy the Docker image onto their Kubernetes cluster without having to rebuild it with the "prometheus" tag.
 
+### Self-observability 
+
+If the `observability-modes` flag is set to `native`, the self-observability metrics provider will be enabled. The metrics will be displayed in the dashboard of [skywalking-banyandb-webapp](http://localhost:17913/) 
+
+![dashboard](https://skywalking.apache.org/doc-graph/banyandb/v0.7.0/dashboard.png)
+
+#### Metrics storage 
+
+In self-observability, the metrics data is stored in BanyanDB within the ` _monitoring` internal group. Each metric will be created as a new `measure` within this group.
+
+#### Write Flow
+
+![self-observability-write](https://skywalking.apache.org/doc-graph/banyandb/v0.7.0/self-observability-write.png)
+
+#### Read Flow
+The read flow is the same as reading data from `measure`, with each metric being a new measure.
+
 ## Profiling
 
 Banyand, the server of BanyanDB, supports profiling automatically. The profiling data is collected by the `pprof` package and can be accessed through the `/debug/pprof` endpoint. The port of the profiling server is `2122` by default.

test/docker/base-compose.yml

@@ -32,7 +32,7 @@ services:
       - 17912
       - 2121
       - 6060
-    command: liaison --etcd-endpoints=http://etcd:2379 
+    command: liaison --etcd-endpoints=http://etcd:2379
     healthcheck:
       test: ["CMD", "./bydbctl", "health", "--addr=http://liaison:17913"]
       interval: 30s
@@ -45,7 +45,7 @@ services:
       - 17912
       - 2121
       - 6060
-    command: data --etcd-endpoints=http://etcd:2379 
+    command: data --etcd-endpoints=http://etcd:2379
     healthcheck:
       test: ["CMD", "./bydbctl", "health", "--grpc-addr=data:17912"]
       interval: 30s

ui/src/components/Header/components/header.vue

@@ -117,20 +117,30 @@ initData()
 
 <style lang="scss" scoped>
 .image {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     width: 665px;
     height: 100%;
 
     .el-image {
         width: 59px;
         height: 59px;
+        flex-shrink: 0;
+        flex-grow: 0;
     }
 
     .title {
         height: 100%;
         line-height: 59px;
+        flex-shrink: 0;
+        flex-grow: 0;
+        white-space: nowrap;
+        margin-left: 10px; 
     }
 }
 
+
 .el-menu-item {
     font-weight: var(--weight-lt);
     font-size: var(--size-lt);

ui/src/components/Header/index.vue

@@ -27,7 +27,7 @@ import Header from './components/header.vue'
             <el-header>
                 <Header class="size"></Header>
             </el-header>
-            <el-main>
+            <el-main class="no-scroll">
                 <RouterView></RouterView>
             </el-main>
         </el-container>
@@ -37,6 +37,10 @@ import Header from './components/header.vue'
 
 
 <style lang="scss" scoped>
+.no-scroll {
+  overflow: hidden;
+}
+
 .el-container {
   height: 100%;
   padding: 0;

ui/src/components/Read/index.vue

@@ -413,28 +413,28 @@ function changeFields() {
                 </div>
             </template>
             <el-row>
-                <el-col :span="12">
+                <el-col :span="16">
                     <div class="flex align-item-center" style="height: 40px; width: 100%;">
                         <el-select v-model="data.tagFamily" @change="changeTagFamilies" filterable
-                            placeholder="Please select">
+                            placeholder="Please select" style="flex: 0 0 300px;">
                             <el-option v-for="item in data.options" :key="item.value" :label="item.label"
                                 :value="item.value">
                             </el-option>
                         </el-select>
                         <el-select v-if="data.type == 'measure'" v-model="data.handleFields" collapse-tags
-                            style="margin: 0 0 0 10px; width: 400px;" @change="changeFields" filterable multiple
+                            style="margin: 0 0 0 10px; flex: 0 0 300px;" @change="changeFields" filterable multiple
                             placeholder="Please select Fields">
                             <el-option v-for="item in data.fields" :key="item.name" :label="item.name" :value="item.name">
                             </el-option>
                         </el-select>
-                        <el-date-picker @change="changeDatePicker" @visible-change="resetDatePicker" style="margin: 0 10px 0 10px" v-model="data.timeValue"
+                        <el-date-picker @change="changeDatePicker" @visible-change="resetDatePicker" style="margin: 0 10px 0 10px; flex: 1 1 0;" v-model="data.timeValue"
                             type="datetimerange" :shortcuts="shortcuts" range-separator="to" start-placeholder="begin"
                             end-placeholder="end" align="right">
                         </el-date-picker>
-                        <el-button :icon="Search" @click="searchTableData" color="#6E38F7" plain></el-button>
+                        <el-button :icon="Search" @click="searchTableData" style="flex: 0 0 auto;" color="#6E38F7" plain></el-button>
                     </div>
                 </el-col>
-                <el-col :span="12">
+                <el-col :span="8">
                     <div class="flex align-item-center justify-end" style="height: 30px;">
                         <el-button :icon="RefreshRight" @click="getTableData" plain></el-button>
                     </div>

ui/src/styles/elementPlus.scss

@@ -253,4 +253,32 @@
     --el-checkbox-checked-bg-color: var(--color-main) !important;
     --el-checkbox-checked-input-border-color: var(--color-main) !important;
     --el-checkbox-input-border-color-hover: var(--color-main) !important;
-}
+}
+
+/*==================
+    el-date-picker
+===================*/
+.el-picker-panel__sidebar {
+    width: 120px !important;
+}
+
+.el-date-range-picker .el-picker-panel__body {
+    margin-left: 120px !important;
+}
+
+/*==================
+    el-table in dashboard
+===================*/
+.dashboard .el-table {
+    max-width: 100%;
+    width: auto;
+    margin: 0 auto;
+}
+
+/*==================
+    el-card in dashboard
+===================*/
+.dashboard .el-card {
+    margin: 15px;
+    padding: 0;
+}