From fcd031ff49a1cace5184bcbe8e9f42dafdcc3edc Mon Sep 17 00:00:00 2001
From: gitsrc <corerman@gmail.com>
Date: Fri, 30 Jun 2023 18:23:12 +0800
Subject: [PATCH 1/4] feat(site):upgrade

---
 public/serverConfig.json | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/public/serverConfig.json b/public/serverConfig.json
index 2757f2e..ddc14f9 100644
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -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"
     }
   ]
 }

From 25406021dbc6d102713b7eeda1e8d8f11ff76dfd Mon Sep 17 00:00:00 2001
From: gitsrc <corerman@gmail.com>
Date: Fri, 30 Jun 2023 18:24:53 +0800
Subject: [PATCH 2/4] feat(site):upgrade

---
 public/serverConfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/serverConfig.json b/public/serverConfig.json
index ddc14f9..edb80e0 100644
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -1,6 +1,6 @@
 {
   "Version": "0.0.1",
-  "Title": "web3-ui",
+  "Title": "CloudX3",
   "Theme": "light",
   "Relay": [
     {

From b93021a01e601e8f96fc7d186ace407588373a7e Mon Sep 17 00:00:00 2001
From: rovast <rovast@163.com>
Date: Wed, 5 Jul 2023 11:05:10 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E7=9B=91=E6=8E=A7=E7=9A=84=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: rovast <rovast@163.com>
---
 locales/en.yaml                               |   2 +
 locales/zh-CN.yaml                            |   2 +
 src/App.vue                                   |   2 +
 .../Modal/service-monitor-modal.vue           | 173 ++++++++++++++++++
 src/utils/event-bus.ts                        |   2 +
 src/views/mesh/services/index.vue             |  19 ++
 src/views/mesh/services/type.ts               |  19 ++
 7 files changed, 219 insertions(+)
 create mode 100644 src/components/Modal/service-monitor-modal.vue
 create mode 100644 src/views/mesh/services/type.ts

diff --git a/locales/en.yaml b/locales/en.yaml
index 9a743cd..bda6ca6 100644
--- a/locales/en.yaml
+++ b/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
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index 3ccd26b..00c2fa1 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -170,6 +170,8 @@ mesh:
   "Enabled this rule": 启用这个规则
   "Pick your rate limit status": 选择限流状态
 
+  "service monitor": 服务监控
+
 wasm:
   Information: 信息
   arch: 架构
diff --git a/src/App.vue b/src/App.vue
index 93b6f56..a24575d 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/Modal/service-monitor-modal.vue b/src/components/Modal/service-monitor-modal.vue
new file mode 100644
index 0000000..9010b00
--- /dev/null
+++ b/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(false);
+const data = reactive({});
+const loadingMem = ref(false);
+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: "yy-MM-dd HH:mm"
+        }
+      }
+    }
+  };
+};
+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>
diff --git a/src/utils/event-bus.ts b/src/utils/event-bus.ts
index 07fbdb8..3b5edb1 100644
--- a/src/utils/event-bus.ts
+++ b/src/utils/event-bus.ts
@@ -1,5 +1,6 @@
 import mitt from "mitt";
 import { Pod } from "@/views/container/pods/type";
+import type { Service } from "@/views/mesh/services/type";
 
 type Events = {
   deploymentSuccess: boolean;
@@ -7,6 +8,7 @@ type Events = {
   currentService: any;
   refreshServices: boolean;
   showPodMonitor: Pod;
+  showServiceMonitor: Service;
 };
 
 const emitter = mitt<Events>(); // inferred as Emitter<Events>
diff --git a/src/views/mesh/services/index.vue b/src/views/mesh/services/index.vue
index 81abe23..9bb425f 100644
--- a/src/views/mesh/services/index.vue
+++ b/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>
diff --git a/src/views/mesh/services/type.ts b/src/views/mesh/services/type.ts
new file mode 100644
index 0000000..9408bae
--- /dev/null
+++ b/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;
+    };
+  }>;
+}

From b28f11414e56a4077563ca3aa521c5804adbb48f Mon Sep 17 00:00:00 2001
From: rovast <rovast@163.com>
Date: Wed, 5 Jul 2023 15:28:20 +0800
Subject: [PATCH 4/4] Fix charts xaxis display

Signed-off-by: rovast <rovast@163.com>
---
 src/components/Modal/service-monitor-modal.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Modal/service-monitor-modal.vue b/src/components/Modal/service-monitor-modal.vue
index 9010b00..8b311d2 100644
--- a/src/components/Modal/service-monitor-modal.vue
+++ b/src/components/Modal/service-monitor-modal.vue
@@ -6,9 +6,9 @@ import { useLang } from "@/hooks/useLang";
 const { t } = useLang();
 import dayjs from "dayjs";
 
-const loading = ref(false);
+const loading = ref(true);
 const data = reactive({});
-const loadingMem = ref(false);
+const loadingMem = ref(true);
 const memData = reactive({});
 onBeforeUnmount(() => {
   EventBus.off("showServiceMonitor");
@@ -108,7 +108,7 @@ const makeData = arr => {
       },
       tooltip: {
         x: {
-          format: "yy-MM-dd HH:mm"
+          format: "yyyy-MM-dd HH:mm:ss"
         }
       }
     }