Add device pod monitor

Signed-off-by: rovast <rovast@163.com>
stc-community · Sep 4, 2023 · 92969e0 · 92969e0
1 parent 1c23d50
commit 92969e0
Showing 1 changed file with 23 additions and 38 deletions.
diff --git a/src/views/iot/device/detail/metrics.vue b/src/views/iot/device/detail/metrics.vue
@@ -1,73 +1,58 @@
 <script setup lang="ts">
+import { useRoute } from "vue-router";
 import { useLang } from "@/hooks/useLang";
-import { useDeploymentCPU } from "@/hooks/useDeploymentCPU";
-import { useDeploymentMem } from "@/hooks/useDeploymentMem";
-import { useDeploymentNetReceived } from "@/hooks/useDeploymentNetReceived";
-import { useDeploymentNetSent } from "@/hooks/useDeploymentNetSent";
+import { usePod } from "@/hooks/usePod";
 
+const route = useRoute();
 const { t } = useLang();
-const { loadingCPU, cpuCharts, getDeploymentCPUChartData } = useDeploymentCPU();
-const { loadingMem, memCharts, getDeploymentMemChartData } = useDeploymentMem();
-const {
-  loadingNetReceived,
-  getDeploymentNetReceivedChartData,
-  netReceivedCharts
-} = useDeploymentNetReceived();
-const { loadingNetSent, getDeploymentNetSentChartData, netSentCharts } =
-  useDeploymentNetSent();
-
-getDeploymentCPUChartData();
-getDeploymentMemChartData();
-getDeploymentNetReceivedChartData();
-getDeploymentNetSentChartData();
+const { loading, charts, getPodMonitorChartData } = usePod();
+getPodMonitorChartData({
+  metadata: {
+    namespace: "deviceshifu",
+    name: (route.params.name || "undefined") + "-0"
+  }
+});
 </script>
 <template>
   <h2>{{ t("iot.summary") }}</h2>
   <p class="text-slate-500 mt-2">{{ t("iot.summaryTips") }}</p>
 
-  <div class="grid grid-cols-1 text-xs gap-5 mt-10">
+  <progress v-if="loading" class="progress max-w-md mt-5" />
+  <div class="grid grid-cols-2 text-xs mt-5 gap-5" v-else>
     <div>
-      <p>Pod CPU Usage {{ t("container.usage") }}</p>
-      <progress v-if="loadingCPU" class="progress max-w-md mt-5" />
+      <p>Pod CPU {{ t("container.usage") }}</p>
       <apexchart
-        v-else
         type="area"
         height="250"
-        :options="cpuCharts.options"
-        :series="cpuCharts.series"
+        :options="charts.cpu.options"
+        :series="charts.cpu.series"
       />
     </div>
     <div>
       <p>Pod {{ t("container.memory") }} {{ t("container.usage") }}</p>
-      <progress v-if="loadingMem" class="progress max-w-md mt-5" />
       <apexchart
-        v-else
         type="area"
         height="250"
-        :options="memCharts.options"
-        :series="memCharts.series"
+        :options="charts.memory.options"
+        :series="charts.memory.series"
       />
     </div>
     <div>
-      <p>{{ t("container.Pod Net Bytes Received") }}</p>
-      <progress v-if="loadingNetReceived" class="progress max-w-md mt-5" />
+      <p>{{ t("container.Pod Net Bytes Transmitted") }}</p>
       <apexchart
-        v-else
         type="area"
         height="250"
-        :options="netReceivedCharts.options"
-        :series="netReceivedCharts.series"
+        :options="charts.net_transmit.options"
+        :series="charts.net_transmit.series"
       />
     </div>
     <div>
-      <p>{{ t("container.Pod Net Bytes Transmitted") }}</p>
-      <progress v-if="loadingNetSent" class="progress max-w-md mt-5" />
+      <p>{{ t("container.Pod Net Bytes Received") }}</p>
       <apexchart
-        v-else
         type="area"
         height="250"
-        :options="netSentCharts.options"
-        :series="netSentCharts.series"
+        :options="charts.net_receive.options"
+        :series="charts.net_receive.series"
       />
     </div>
   </div>