fix: bugs fix and polish components for continue profiling (#281)

src/store/modules/continous-profiling.ts

@@ -20,7 +20,9 @@ import type { EBPFTaskList, EBPFProfilingSchedule, AnalyzationTrees } from "@/ty
 import type { Instance } from "@/types/selector";
 import { store } from "@/store";
 import graphql from "@/graphql";
+import type { MonitorInstance, MonitorProcess } from "@/types/continous-profiling";
 import type { AxiosResponse } from "axios";
+import { dateFormat } from "@/utils/dateFormat";
 
 interface ContinousProfilingState {
   strategyList: Array<Recordable<StrategyItem>>;
@@ -106,16 +108,20 @@ export const continousProfilingStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.strategyList = (res.data.data.strategyList || []).map((d: StrategyItem, index: number) => {
+      const list = res.data.data.strategyList || [];
+      if (!list.length) {
+        this.taskList = [];
+        this.instances = [];
+        this.instance = null;
+      }
+      const arr = list.length ? res.data.data.strategyList : [{ type: "", checkItems: [{ type: "" }] }];
+      this.strategyList = arr.map((d: StrategyItem, index: number) => {
         return {
           ...d,
           id: index,
         };
       });
-      this.setSelectedStrategy(this.strategyList[0] || {});
-      if (!this.strategyList.length) {
-        this.taskList = [];
-      }
+      this.setSelectedStrategy(list[0] || {});
       if (!this.selectedStrategy.type) {
         return res.data;
       }
@@ -132,10 +138,29 @@ export const continousProfilingStore = defineStore({
         target: this.selectedStrategy.type,
       });
       this.instancesLoading = false;
-      if (!res.data.errors) {
-        this.instances = res.data.data.instances || [];
-        this.instance = this.instances[0] || null;
+      if (res.data.errors) {
+        return res.data;
       }
+      this.instances = (res.data.data.instances || [])
+        .map((d: MonitorInstance) => {
+          const processes = (d.processes || [])
+            .sort((c: MonitorProcess, d: MonitorProcess) => d.lastTriggerTimestamp - c.lastTriggerTimestamp)
+            .map((p: MonitorProcess) => {
+              return {
+                ...p,
+                lastTriggerTime: d.lastTriggerTimestamp ? dateFormat(d.lastTriggerTimestamp) : "",
+                labels: p.labels.join("; "),
+              };
+            });
+
+          return {
+            ...d,
+            processes,
+            lastTriggerTime: d.lastTriggerTimestamp ? dateFormat(d.lastTriggerTimestamp) : "",
+          };
+        })
+        .sort((a: MonitorInstance, b: MonitorInstance) => b.lastTriggerTimestamp - a.lastTriggerTimestamp);
+      this.instance = this.instances[0] || null;
       return res.data;
     },
   },

src/types/components.d.ts

@@ -22,6 +22,7 @@ declare module '@vue/runtime-core' {
     ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']

src/views/dashboard/controls/Tab.vue

@@ -285,7 +285,7 @@ limitations under the License. -->
     }
 
     .tab-name {
-      max-width: 110px;
+      max-width: 130px;
       height: 20px;
       line-height: 20px;
       outline: none;
@@ -348,7 +348,7 @@ limitations under the License. -->
 
   .vue-grid-item:not(.vue-grid-placeholder) {
     background: #fff;
-    box-shadow: 0px 1px 4px 0px #00000029;
+    box-shadow: 0 1px 4px 0 #00000029;
     border-radius: 3px;
   }
 

src/views/dashboard/related/continuous-profiling/components/InstanceList.vue

@@ -68,14 +68,14 @@ limitations under the License. -->
     background
     layout="prev, pager, next"
     :page-size="pageSize"
-    :total="instances.length"
+    :total="continousProfilingStore.instances.length"
     @current-change="changePage"
     @prev-click="changePage"
     @next-click="changePage"
   />
 </template>
 <script lang="ts" setup>
-  import { ref, computed, watch } from "vue";
+  import { ref, watch } from "vue";
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
   import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
@@ -85,7 +85,6 @@ limitations under the License. -->
   import router from "@/router";
   import { HeaderLabels, HeaderChildLabels } from "../data";
   import { EntityType } from "../../../data";
-  import { dateFormat } from "@/utils/dateFormat";
 
   /*global defineProps */
   const props = defineProps({
@@ -99,23 +98,6 @@ limitations under the License. -->
   const selectorStore = useSelectorStore();
   const continousProfilingStore = useContinousProfilingStore();
   const pageSize = 10;
-  const instances = computed(() => {
-    return continousProfilingStore.instances
-      .map((d: MonitorInstance) => {
-        const processes = (d.processes || [])
-          .sort((c: MonitorProcess, d: MonitorProcess) => d.lastTriggerTimestamp - c.lastTriggerTimestamp)
-          .map((p: MonitorProcess) => {
-            return {
-              ...p,
-              lastTriggerTime: d.lastTriggerTimestamp ? dateFormat(d.lastTriggerTimestamp) : "",
-              labels: p.labels.join("; "),
-            };
-          });
-
-        return { ...d, processes, lastTriggerTime: d.lastTriggerTimestamp ? dateFormat(d.lastTriggerTimestamp) : "" };
-      })
-      .sort((a: MonitorInstance, b: MonitorInstance) => b.lastTriggerTimestamp - a.lastTriggerTimestamp);
-  });
   const currentInstances = ref<MonitorInstance[]>([]);
 
   function viewProcessDashboard(process: MonitorProcess, instance: MonitorInstance) {
@@ -137,7 +119,7 @@ limitations under the License. -->
   }
 
   async function changePage(pageIndex: number) {
-    currentInstances.value = instances.value.filter((d: unknown, index: number) => {
+    currentInstances.value = continousProfilingStore.instances.filter((d: unknown, index: number) => {
       if (index >= (pageIndex - 1) * pageSize && index < pageIndex * pageSize) {
         return d;
       }
@@ -145,9 +127,11 @@ limitations under the License. -->
   }
 
   watch(
-    () => instances.value,
+    () => continousProfilingStore.instances,
     () => {
-      currentInstances.value = instances.value.filter((_: unknown, index: number) => index < pageSize);
+      currentInstances.value = continousProfilingStore.instances.filter(
+        (_: unknown, index: number) => index < pageSize,
+      );
     },
   );
 </script>

src/views/dashboard/related/continuous-profiling/components/PolicyList.vue

@@ -37,6 +37,7 @@ limitations under the License. -->
               :class="{
                 selected: continousProfilingStore.selectedStrategy.id === i.id,
               }"
+              v-if="i.type"
             >
               <div class="ell">
                 <span class="sm">

src/views/dashboard/related/task-timeline/Content.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="flex-v content">
+  <div class="content">
     <Timeline />
     <ProfilingPanel :config="config" />
   </div>