(skywalking-banyandb) branch main updated: [GSoC][UI] Fix and show message when group is not exist and native is turned off (#515)

[hanahmily]

This is an automated email from the ASF dual-hosted git repository.

hanahmily pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-banyandb.git


The following commit(s) were added to refs/heads/main by this push:
     new 8bcc5f97 [GSoC][UI] Fix and show message when group is not exist and 
native is turned off (#515)
8bcc5f97 is described below

commit 8bcc5f9795b5ae13b3b5947df715f9bd4b3cf0eb
Author: Sylvie-Wxr <129717259+sylvie-...@users.noreply.github.com>
AuthorDate: Tue Aug 20 06:34:37 2024 +0800

    [GSoC][UI] Fix and show message when group is not exist and native is 
turned off (#515)
    
    * Update ui/src/views/Dashboard/index.vue
    
    Co-authored-by: Gao Hongtao <hanahm...@gmail.com>
    ---------
    
    Co-authored-by: Xinrui Wu <xinruiwu@Xinrui-Wus-Mac.local>
    Co-authored-by: Gao Hongtao <hanahm...@gmail.com>
---
 ui/src/views/Dashboard/index.vue | 41 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/ui/src/views/Dashboard/index.vue b/ui/src/views/Dashboard/index.vue
index 681f0327..f2b3b469 100644
--- a/ui/src/views/Dashboard/index.vue
+++ b/ui/src/views/Dashboard/index.vue
@@ -19,12 +19,14 @@
 
 <script setup>
 import { ref, watchEffect, computed } from 'vue';
-import { getTableList } from '@/api/index'
+import { getGroupList, getTableList } from '@/api/index'
 
 const tableLayout = ref('auto')
 
 const autoRefresh = ref('off');
 
+const hasMonitoring = ref(true);
+
 const options = ref([
     { value: 'off', label: 'Off' },
     { value: 15000, label: '15 seconds' },
@@ -169,7 +171,25 @@ function formatBytes(bytes) {
     return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + ' ' + sizes[i];
 }
 
+function checkMonitoring(data) {
+    if (!data.group || !Array.isArray(data.group)) {
+        return false;
+    }
+    for (let item of data.group) {
+        if (item.metadata && item.metadata.name === "_monitoring") {
+            return true;
+        }
+    }
+    return false;
+}
+
 async function fetchNodes() {
+    const groupList = await fetchGroupList()
+    if (!checkMonitoring(groupList)) {
+        hasMonitoring.value = false;
+        return;
+    }
+
     getCurrentUTCTime()
     const [upTimeDataPoints, cpuDataPoints, memoryDataPoints, diskDataPoints] 
= await Promise.all([
         fetchDataPoints("up_time", tagProjectionUptime),
@@ -223,7 +243,6 @@ async function fetchNodes() {
             }
         }
     });
-
     // Post-process row data
     rows.forEach(row => {
         row.uptime = formatUptime(row.uptime);
@@ -254,6 +273,14 @@ async function fetchDataPoints(type, tagProjection) {
     return null;
 }
 
+async function fetchGroupList() {
+    const res = await getGroupList();
+    if (res.status === 200) {
+        return res.data;
+    }
+    return null;
+}
+
 function groupBy(data, key) {
     return data.reduce((acc, obj) => {
         const keyValue = obj.tagFamilies[0].tags.find(tag => tag.key === 
key).value.str.value;
@@ -360,7 +387,12 @@ watchEffect(() => {
                 </el-select>
             </span>
         </div>
-
+        <div class="error-alert">
+            <!-- Conditionally display the alert if hasMonitoring is false -->
+            <el-alert v-if="!hasMonitoring"
+                title="Self-monitoring not available, please turn it on by 
setting &quot;--observability-modes=native&quot;."
+                type="error" center show-icon :closable="false" />
+        </div>
         <el-card shadow="always">
             <template #header>
                 <div class="card-header">
@@ -460,6 +492,9 @@ watchEffect(() => {
     position: relative;
 }
 
+.error-alert {
+    margin: 20px 15px 5px 15px;
+}
 
 .header-container {
     display: flex;