From 993a0ca0eb010013f9892fd339dc4e5bc9144c52 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Mon, 5 Jun 2023 16:00:59 +0800
Subject: [PATCH] feat: add loading

---
 src/store/modules/continous-profiling.ts               |  8 ++++++++
 .../dashboard/related/continuous-profiling/Content.vue |  5 ++++-
 .../continuous-profiling/components/InstanceList.vue   |  7 ++++---
 .../continuous-profiling/components/PolicyList.vue     |  2 +-
 .../dashboard/related/continuous-profiling/data.ts     | 10 +++++-----
 5 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/store/modules/continous-profiling.ts b/src/store/modules/continous-profiling.ts
index fe6700f3..1dcf06bd 100644
--- a/src/store/modules/continous-profiling.ts
+++ b/src/store/modules/continous-profiling.ts
@@ -43,6 +43,8 @@ interface ContinousProfilingState {
   analyzeTrees: AnalyzationTrees[];
   ebpfTips: string;
   aggregateType: string;
+  instancesLoading: boolean;
+  policyLoading: boolean;
 }
 
 export const continousProfilingStore = defineStore({
@@ -62,6 +64,8 @@ export const continousProfilingStore = defineStore({
     analyzeTrees: [],
     aggregateType: "COUNT",
     instance: null,
+    instancesLoading: false,
+    policyLoading: false,
   }),
   actions: {
     setSelectedStrategy(task: Recordable<StrategyItem>) {
@@ -103,8 +107,10 @@ export const continousProfilingStore = defineStore({
       if (!params.serviceId) {
         return new Promise((resolve) => resolve({}));
       }
+      this.policyLoading = true;
       const res: AxiosResponse = await graphql.query("getStrategyList").params(params);
 
+      this.policyLoading = false;
       if (res.data.errors) {
         return res.data;
       }
@@ -127,6 +133,7 @@ export const continousProfilingStore = defineStore({
       return res.data;
     },
     async getMonitoringInstances(serviceId: string): Promise<Nullable<AxiosResponse>> {
+      this.instancesLoading = true;
       if (!serviceId) {
         return null;
       }
@@ -134,6 +141,7 @@ export const continousProfilingStore = defineStore({
         serviceId,
         target: this.selectedStrategy.type,
       });
+      this.instancesLoading = false;
       if (!res.data.errors) {
         this.instances = res.data.data.instances || [];
         this.instance = this.instances[0] || null;
diff --git a/src/views/dashboard/related/continuous-profiling/Content.vue b/src/views/dashboard/related/continuous-profiling/Content.vue
index 54beef6a..52d62322 100644
--- a/src/views/dashboard/related/continuous-profiling/Content.vue
+++ b/src/views/dashboard/related/continuous-profiling/Content.vue
@@ -15,16 +15,19 @@ limitations under the License. -->
 <template>
   <div class="flex-h content">
     <policy-list />
-    <div class="instance-list">
+    <div class="instance-list" v-loading="continousProfilingStore.instancesLoading">
       <instance-list />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
   import type { PropType } from "vue";
+  import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
   import PolicyList from "./components/PolicyList.vue";
   import InstanceList from "./components/InstanceList.vue";
 
+  const continousProfilingStore = useContinousProfilingStore();
+
   /*global defineProps */
   defineProps({
     config: {
diff --git a/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue b/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
index d07683d5..ae6e4f3c 100644
--- a/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <el-table :data="currentInstances" style="width: 100%">
+  <el-table :data="currentInstances" style="width: 99%">
     <el-table-column type="expand">
       <template #default="props">
         <div class="child">
@@ -21,13 +21,14 @@ limitations under the License. -->
           <div v-for="(attr, index) in props.row.attributes" :key="index">
             {{ `${attr.name}: ${attr.value}` }}
           </div>
-          <div class="title mt-20">Processes</div>
-          <el-table :data="props.row.processes" size="small">
+          <div class="title mt-10">Processes</div>
+          <el-table :data="props.row.processes" size="small" max-height="300">
             <el-table-column
               v-for="item in HeaderChildLabels"
               :key="item.value"
               :label="item.label"
               :prop="item.value"
+              :width="item.width"
             />
           </el-table>
         </div>
diff --git a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
index fabc8b92..695828bc 100644
--- a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="profile-task-list flex-v">
+  <div class="profile-task-list flex-v" v-loading="continousProfilingStore.policyLoading">
     <div class="profile-task-wrapper flex-v">
       <div class="profile-t-tool">
         <span>{{ t("policyList") }}</span>
diff --git a/src/views/dashboard/related/continuous-profiling/data.ts b/src/views/dashboard/related/continuous-profiling/data.ts
index a59f9b3e..e2e96eed 100644
--- a/src/views/dashboard/related/continuous-profiling/data.ts
+++ b/src/views/dashboard/related/continuous-profiling/data.ts
@@ -32,15 +32,15 @@ export const TargetTypes = [
 export const ComponentType = "CONTINOUS_PROFILING";
 
 export const HeaderLabels = [
-  { value: "name", label: "Name", width: 400 },
+  { value: "name", label: "Name" },
   { value: "triggeredCount", label: "Triggered Count", width: 150 },
-  { value: "lastTriggerTime", label: "Last Trigger Time", width: 150 },
+  { value: "lastTriggerTime", label: "Last Trigger Time", width: 170 },
 ];
 
 export const HeaderChildLabels = [
   { value: "name", label: "Name" },
-  { value: "detectType", label: "Detect Type" },
-  { value: "triggeredCount", label: "Triggered Count" },
+  { value: "detectType", label: "Detect Type", width: 100 },
+  { value: "triggeredCount", label: "Triggered Count", width: 120 },
   { value: "labels", label: "Labels" },
-  { value: "lastTriggerTime", label: "Last Trigger Time" },
+  { value: "lastTriggerTime", label: "Last Trigger Time", width: 160 },
 ];