feat: sort and translation

src/locales/lang/en.ts

@@ -399,5 +399,6 @@ const msg = {
   uriRegex: "URI Regex",
   uriList: "URI List",
   processes: "Processes",
+  monitorInstances: "Monitor Instances",
 };
 export default msg;

src/locales/lang/es.ts

@@ -397,5 +397,7 @@ const msg = {
   uriRegex: "Lista URI",
   uriList: "Lista URI",
   processes: "Proceso",
+  attributes: "Atributos",
+  monitorInstances: "Ejemplo de Monitor",
 };
 export default msg;

src/locales/lang/zh.ts

@@ -395,5 +395,7 @@ const msg = {
   uriRegex: "URI规则",
   uriList: "URI列表",
   processes: "进程",
+  attributes: "属性",
+  monitorInstances: "监视实例",
 };
 export default msg;

src/store/modules/continous-profiling.ts

@@ -35,7 +35,6 @@ interface ContinousProfilingState {
   selectedTask: Recordable<EBPFTaskList>;
   errorTip: string;
   errorReason: string;
-  processes: Process[];
   instances: Instance[];
   instance: Nullable<Instance>;
   eBPFSchedules: EBPFProfilingSchedule[];
@@ -57,7 +56,6 @@ export const continousProfilingStore = defineStore({
     errorReason: "",
     errorTip: "",
     ebpfTips: "",
-    processes: [],
     instances: [],
     eBPFSchedules: [],
     currentSchedule: {},
@@ -185,33 +183,6 @@ export const continousProfilingStore = defineStore({
         await this.preAnalyzeTask();
       }
     },
-    async getServiceInstances(serviceId: string): Promise<Nullable<AxiosResponse>> {
-      if (!serviceId) {
-        return null;
-      }
-      const res: AxiosResponse = await graphql.query("queryInstances").params({
-        serviceId,
-        duration: useAppStoreWithOut().durationTime,
-      });
-      if (!res.data.errors) {
-        this.instances = res.data.data.pods || [];
-        this.instance = this.instances[0] || null;
-      }
-      return res.data;
-    },
-    async getProcesses(instanceId: string): Promise<Nullable<AxiosResponse>> {
-      if (!instanceId) {
-        return null;
-      }
-      const res: AxiosResponse = await graphql.query("queryProcesses").params({
-        instanceId,
-        duration: useAppStoreWithOut().durationTime,
-      });
-      if (!res.data.errors) {
-        this.processes = res.data.data.processes || [];
-      }
-      return res.data;
-    },
     async getTopology() {
       const networkProfilingStore = useNetworkProfilingStore();
       const appStore = useAppStoreWithOut();

src/views/dashboard/related/continuous-profiling/Content.vue

@@ -15,18 +15,23 @@ limitations under the License. -->
 <template>
   <div class="flex-h content">
     <policy-list />
-    <div class="instance-list" v-loading="continousProfilingStore.instancesLoading">
+    <div class="flex-v list">
-      <instance-list />
+      <div class="title">{{ t("monitorInstances") }}</div>
+      <div class="instance-list" v-loading="continousProfilingStore.instancesLoading">
+        <instance-list />
+      </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
   import type { PropType } from "vue";
+  import { useI18n } from "vue-i18n";
   import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
   import PolicyList from "./components/PolicyList.vue";
   import InstanceList from "./components/InstanceList.vue";
 
   const continousProfilingStore = useContinousProfilingStore();
+  const { t } = useI18n();
 
   /*global defineProps */
   defineProps({
@@ -42,10 +47,24 @@ limitations under the License. -->
     width: 100%;
   }
 
-  .instance-list {
+  .list {
     height: 100%;
     flex-grow: 2;
     min-width: 600px;
+    overflow: hidden;
+  }
+
+  .instance-list {
+    height: 100%;
+    width: 100%;
     overflow: auto;
   }
+
+  .title {
+    font-size: 13px;
+    font-weight: bold;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    padding: 10px 20px;
+    background-color: #f3f4f9;
+  }
 </style>

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

@@ -17,11 +17,11 @@ limitations under the License. -->
     <el-table-column type="expand">
       <template #default="props">
         <div class="child">
-          <div class="title">Attributes</div>
+          <div class="title">{{ t("attributes") }}</div>
           <div v-for="(attr, index) in props.row.attributes" :key="index">
             {{ `${attr.name}: ${attr.value}` }}
           </div>
-          <div class="title mt-10">Processes</div>
+          <div class="title mt-10">{{ t("processes") }}</div>
           <el-table :data="props.row.processes" size="small" max-height="300">
             <el-table-column
               v-for="item in HeaderChildLabels"
@@ -56,25 +56,31 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
   import { ref, computed, watch } from "vue";
+  import { useI18n } from "vue-i18n";
   import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
   import type { MonitorInstance, MonitorProcess } from "@/types/continous-profiling";
   import { HeaderLabels, HeaderChildLabels } from "../data";
   import { dateFormat } from "@/utils/dateFormat";
 
+  const { t } = useI18n();
   const continousProfilingStore = useContinousProfilingStore();
-  const pageSize = 12;
+  const pageSize = 10;
   const instances = computed(() => {
-    return continousProfilingStore.instances.map((d: MonitorInstance) => {
+    return continousProfilingStore.instances
-      const processes = (d.processes || []).map((p: MonitorProcess) => {
+      .map((d: MonitorInstance) => {
-        return {
+        const processes = (d.processes || [])
-          ...p,
+          .sort((c: MonitorProcess, d: MonitorProcess) => d.lastTriggerTimestamp - c.lastTriggerTimestamp)
-          lastTriggerTime: d.lastTriggerTimestamp ? dateFormat(d.lastTriggerTimestamp) : "",
+          .map((p: MonitorProcess) => {
-          labels: p.labels.join("; "),
+            return {
-        };
+              ...p,
-      });
+              lastTriggerTime: d.lastTriggerTimestamp ? dateFormat(d.lastTriggerTimestamp) : "",
+              labels: p.labels.join("; "),
+            };
+          });
 
-      return { ...d, processes, lastTriggerTime: d.lastTriggerTimestamp ? dateFormat(d.lastTriggerTimestamp) : "" };
+        return { ...d, processes, lastTriggerTime: d.lastTriggerTimestamp ? dateFormat(d.lastTriggerTimestamp) : "" };
-    });
+      })
+      .sort((a: MonitorInstance, b: MonitorInstance) => b.lastTriggerTimestamp - a.lastTriggerTimestamp);
   });
   const currentInstances = ref<MonitorInstance[]>([]);
 

src/views/dashboard/related/continuous-profiling/data.ts

@@ -41,6 +41,6 @@ export const HeaderChildLabels = [
   { value: "name", label: "Name" },
   { value: "detectType", label: "Detect Type", width: 100 },
   { value: "triggeredCount", label: "Triggered Count", width: 120 },
-  { value: "labels", label: "Labels" },
   { value: "lastTriggerTime", label: "Last Trigger Time", width: 160 },
+  { value: "labels", label: "Labels" },
 ];