Merge branch 'main' of https://github.com/stc-community/GlobalDevDao

locales/en.yaml

@@ -170,6 +170,8 @@ mesh:
   "Enabled this rule": Enabled this rule
   "Pick your rate limit status": Pick your rate limit status
 
+  "service monitor": Service Monitor
+
 wasm:
   "Information": Information
   arch: ARCH

locales/zh-CN.yaml

@@ -170,6 +170,8 @@ mesh:
   "Enabled this rule": 启用这个规则
   "Pick your rate limit status": 选择限流状态
 
+  "service monitor": 服务监控
+
 wasm:
   Information: 信息
   arch: 架构

public/serverConfig.json

@@ -1,6 +1,6 @@
 {
   "Version": "0.0.1",
-  "Title": "web3-ui",
+  "Title": "CloudX3",
   "Theme": "light",
   "Relay": [
     {
@@ -10,14 +10,6 @@
       "long": 113.722,
       "city": "Shanghai",
       "flag": "twemoji:flag-china"
-    },
-    {
-      "name": "gw106",
-      "url": "wss://nostr.gw106.oneitfarm.com",
-      "lat": 1.2929,
-      "long": 103.8547,
-      "city": "Singapore",
-      "flag": "twemoji:flag-singapore"
     }
   ]
 }

src/App.vue

@@ -16,6 +16,7 @@ import NewPod from "./components/Modal/new-pod.vue";
 import MonitorModal from "./components/Modal/monitor-modal.vue";
 import newFuseRule from "./components/Modal/new-fuse-rule.vue";
 import newRateLimitRule from "./components/Modal/new-rate-limit-rule.vue";
+import ServiceMonitorModal from "./components/Modal/service-monitor-modal.vue";
 
 defineOptions({
   name: "app"
@@ -46,4 +47,5 @@ onBeforeMount(async () => {
   <MonitorModal />
   <newFuseRule />
   <newRateLimitRule />
+  <ServiceMonitorModal />
 </template>

src/components/Modal/service-monitor-modal.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { loadData } from "@/utils/shared";
+import EventBus from "@/utils/event-bus";
+import { reactive, onBeforeUnmount, ref } from "vue";
+import { useLang } from "@/hooks/useLang";
+const { t } = useLang();
+import dayjs from "dayjs";
+
+const loading = ref(true);
+const data = reactive({});
+const loadingMem = ref(true);
+const memData = reactive({});
+onBeforeUnmount(() => {
+  EventBus.off("showServiceMonitor");
+});
+
+const RESOURCE_TYPE = {
+  SIDECAR_CPU: 1, // 1.sideCar cpu;
+  SIDECAR_MEM_USAGE_MB: 2, // 2.sideCar进程使用内存(MB);
+  SIDECAR_CONTAINER_MEM_USAGE_PERCENT: 3, // 3.sideCar容器使用内存(百分比);
+  SIDECAR_CONTAINER_MEM_LEFT_MB: 4, // 4.sieCar容器剩余可用内存
+  SERVICE_CPU: 5, // 5.service cpu;
+  SERVICE_MEM_USAGE_PERCENT: 6, // 6.service使用内存(百分比);
+  SERVICE_MEM_LEFT_MB: 7, // 7.service剩余内存(MB)
+  SIDECAR_DISK_READ_SPEED: 8, // 8.sideCar磁盘读取速率;
+  SIDECAR_DISK_WRITE_SPEED: 9, // 9.sideCar磁盘写入速率;
+  SERVICE_DISK_READ_SPEED: 10, // 10.service磁盘读取速率;
+  SERVICE_DISK_WRITE_SPEED: 11, // 11.service磁盘写入速率;
+  SERVICE_NETWORK_RX_BYTES: 12, // 12.network_rx_bytes 网卡接收流量速率;
+  SERVICE_NETWORK_TX_BYTES: 13, // 13.network_tx_bytes 网卡发送流量速率;
+  NETSTAT: 14, // 14.netstat
+  SERVICE_MEM_USAGE_MB: 15 // 16 服务内存使用(字节);
+};
+
+EventBus.on("showServiceMonitor", service => {
+  loading.value = true;
+  loadData(
+    data,
+    "govern.resource.trend",
+    {
+      start_time: dayjs(new Date()).subtract(1, "hour").unix(),
+      end_time: dayjs(new Date()).unix(),
+      unique_id: service.unique_id,
+      resource_type: RESOURCE_TYPE.SERVICE_CPU
+    },
+    loading,
+    makeChartData
+  );
+
+  loadData(
+    memData,
+    "govern.resource.trend",
+    {
+      start_time: dayjs(new Date()).subtract(15, "minute").unix(),
+      end_time: dayjs(new Date()).unix(),
+      unique_id: service.unique_id,
+      resource_type: RESOURCE_TYPE.SERVICE_MEM_USAGE_MB
+    },
+    loadingMem,
+    makeMemChartData
+  );
+});
+
+const charts = reactive({
+  cpu: { series: [], options: {} },
+  mem: { series: [], options: {} }
+});
+
+const makeData = arr => {
+  const categories = [];
+
+  const series = arr.map(({ metric, values }) => {
+    const data = [];
+    const shouldMakeCategories = categories.length === 0;
+    values.forEach(d => {
+      if (shouldMakeCategories) {
+        // categories.push(new Date(d[0] * 1000).toISOString());
+        categories.push(
+          dayjs(d[0] * 1000).format("YYYY-MM-DDTHH:mm:ss.SSS[Z]")
+        );
+      }
+      data.push(d[1]);
+    });
+
+    return {
+      name: metric.host_name,
+      data
+    };
+  });
+
+  return {
+    series,
+    options: {
+      chart: {
+        height: 200,
+        type: "area",
+        toolbar: { show: false }
+      },
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        curve: "smooth"
+      },
+      xaxis: {
+        type: "datetime",
+        categories
+      },
+      tooltip: {
+        x: {
+          format: "yyyy-MM-dd HH:mm:ss"
+        }
+      }
+    }
+  };
+};
+const makeChartData = () => {
+  charts.cpu = makeData(data.data);
+};
+
+const makeMemChartData = () => {
+  charts.mem = makeData(memData.data);
+};
+</script>
+<template>
+  <!-- Put this part before </body> tag -->
+  <input type="checkbox" id="service-monitor-modal" class="modal-toggle" />
+  <div class="modal">
+    <div class="modal-box w-9/12 max-w-4xl">
+      <label
+        for="service-monitor-modal"
+        class="btn btn-sm btn-circle absolute right-2 top-2"
+        >✕</label
+      >
+
+      <div class="flex items-center">
+        <IconifyIconOnline
+          class="mr-2"
+          icon="ph:chart-line-bold"
+          width="25px"
+          height="25px"
+        />
+        <h3>{{ t("mesh.service monitor") }}</h3>
+      </div>
+
+      <progress v-if="loading" class="progress max-w-md mt-5" />
+      <div class="grid grid-cols-1 text-xs mt-5 gap-5" v-else>
+        <div>
+          <p>CPU {{ t("container.usage") }}</p>
+          <apexchart
+            type="area"
+            height="250"
+            :options="charts.cpu.options"
+            :series="charts.cpu.series"
+          />
+        </div>
+      </div>
+
+      <progress v-if="loadingMem" class="progress max-w-md mt-5" />
+      <div class="grid grid-cols-1 text-xs mt-5 gap-5" v-else>
+        <div>
+          <p>Memory {{ t("container.usage") }} MB</p>
+          <apexchart
+            type="area"
+            height="250"
+            :options="charts.mem.options"
+            :series="charts.mem.series"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/utils/event-bus.ts

@@ -1,12 +1,14 @@
 import mitt from "mitt";
 import { Pod } from "@/views/container/pods/type";
+import type { Service } from "@/views/mesh/services/type";
 
 type Events = {
   deploymentSuccess: boolean;
   podSuccess: boolean;
   currentService: any;
   refreshServices: boolean;
   showPodMonitor: Pod;
+  showServiceMonitor: Service;
 };
 
 const emitter = mitt<Events>(); // inferred as Emitter<Events>

src/views/mesh/services/index.vue

@@ -65,6 +65,11 @@ onMounted(async () => {
 onUnmounted(() => {
   bus.off("refreshServices");
 });
+
+// 监控相关
+const onMonitor = service => {
+  bus.emit("showServiceMonitor", service);
+};
 </script>
 <template>
   <h2>{{ t("nav." + $route.meta.title.toLowerCase()) }}</h2>
@@ -115,6 +120,20 @@ onUnmounted(() => {
         </h2>
         <p class="text-sm text-slate-400">{{ s.unique_id }}</p>
 
+        <label
+          for="service-monitor-modal"
+          class="btn btn-primary w-[150px]"
+          @click="onMonitor(s)"
+        >
+          <IconifyIconOnline
+            icon="ph:chart-line-bold"
+            class="mr-2"
+            width="25px"
+            height="25px"
+          />
+          {{ t("container.monitor") }}</label
+        >
+
         <p class="text-sm font-semibold mt-5">{{ t("mesh.metadata") }}</p>
         <div class="leading-5 text-xs">
           <p class="text-slate-500">Version:</p>

src/views/mesh/services/type.ts

@@ -0,0 +1,19 @@
+import type { Event } from "nostr-tools";
+
+export interface Service {
+  event: Event;
+  unique_id: string;
+  ca_active: boolean;
+  ca_pending: boolean;
+  listen_mode_pending: boolean;
+  info: Array<{
+    [key: string]: any;
+    region: string;
+    zone: string;
+    hostname: string;
+    metadata: {
+      service_name: string;
+      mode: string;
+    };
+  }>;
+}