feat: view process dashboard

src/router/dashboard.ts

@@ -128,6 +128,27 @@ export const routesDashboard: Array<RouteRecordRaw> = [
           },
         ],
       },
+      {
+        path: "",
+        redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:name",
+        component: () => import("@/views/dashboard/Edit.vue"),
+        name: "ViewProcess",
+        meta: {
+          notShow: true,
+        },
+        children: [
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:name",
+            component: () => import("@/views/dashboard/Edit.vue"),
+            name: "ViewProcess",
+          },
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:name/tab/:activeTabIndex",
+            component: () => import("@/views/dashboard/Edit.vue"),
+            name: "ViewProcessActiveTabIndex",
+          },
+        ],
+      },
       {
         path: "",
         redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",

src/store/modules/ebpf.ts

@@ -105,7 +105,7 @@ export const ebpfStore = defineStore({
       if (!params.taskId) {
         return new Promise((resolve) => resolve({}));
       }
-      params.taskId = "808b68c847a4de58c3d068b1d62e0c93428cd3b7a9ae64952b52f3503b663fe9";
+
       const res: AxiosResponse = await graphql.query("getEBPFSchedules").params({ ...params });
 
       if (res.data.errors) {

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

@@ -28,7 +28,10 @@ limitations under the License. -->
           <el-table :data="props.row.processes" size="small" max-height="300">
             <el-table-column prop="name" label="Name">
               <template #default="scope">
-                <span :class="config.processDashboardName ? 'link' : ''">
+                <span
+                  :class="config.processDashboardName ? 'link' : ''"
+                  @click="viewProcessDashboard(scope, props.row)"
+                >
                   {{ scope.row.name }}
                 </span>
               </template>
@@ -46,7 +49,7 @@ limitations under the License. -->
     </el-table-column>
     <el-table-column prop="name" label="Name">
       <template #default="scope">
-        <span :class="config.instanceDashboardName ? 'link' : ''">
+        <span :class="config.instanceDashboardName ? 'link' : ''" @click="viewInstanceDashboard(scope)">
           {{ scope.row.name }}
         </span>
       </template>
@@ -76,18 +79,24 @@ limitations under the License. -->
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
   import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
+  import { useDashboardStore } from "@/store/modules/dashboard";
+  import { useSelectorStore } from "@/store/modules/selectors";
   import type { MonitorInstance, MonitorProcess } from "@/types/continous-profiling";
+  import router from "@/router";
   import { HeaderLabels, HeaderChildLabels } from "../data";
+  import { EntityType } from "../../../data";
   import { dateFormat } from "@/utils/dateFormat";
 
   /*global defineProps */
-  defineProps({
+  const props = defineProps({
     config: {
       type: Object as PropType<any>,
       default: () => ({}),
     },
   });
   const { t } = useI18n();
+  const dashboardStore = useDashboardStore();
+  const selectorStore = useSelectorStore();
   const continousProfilingStore = useContinousProfilingStore();
   const pageSize = 10;
   const instances = computed(() => {
@@ -109,6 +118,24 @@ limitations under the License. -->
   });
   const currentInstances = ref<MonitorInstance[]>([]);
 
+  function viewProcessDashboard(scope: any, instance: MonitorInstance) {
+    if (!props.config.processDashboardName) {
+      return;
+    }
+    router.push(
+      `/dashboard/${dashboardStore.layer}/${EntityType[8].value}/${selectorStore.currentService.id}/${instance.id}/${scope.row.id}/${props.config.processDashboardName}`,
+    );
+  }
+
+  function viewInstanceDashboard(scope: any) {
+    if (!props.config.instanceDashboardName) {
+      return;
+    }
+    router.push(
+      `/dashboard/${dashboardStore.layer}/${EntityType[3].value}/${selectorStore.currentService.id}/${scope.row.id}/${props.config.instanceDashboardName}`,
+    );
+  }
+
   async function changePage(pageIndex: number) {
     currentInstances.value = instances.value.filter((d: unknown, index: number) => {
       if (index >= (pageIndex - 1) * pageSize && index < pageIndex * pageSize) {
@@ -137,7 +164,7 @@ limitations under the License. -->
   .header {
     font-size: 13px;
     font-weight: bold;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    border-bottom: 1px solid rgb(0 0 0 / 7%);
     padding: 10px 20px;
     background-color: #f3f4f9;
   }

src/views/dashboard/related/task-timeline/components/ProfilingPanel.vue

@@ -13,12 +13,18 @@ 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="content" v-if="taskTimelineStore.selectedTask.targetType === TargetTypes[2].value">
+  <div
+    class="content"
+    v-if="taskTimelineStore.selectedTask.targetType === TargetTypes[2].value && networkProfilingStore.nodes.length"
+  >
     <process-topology v-if="networkProfilingStore.nodes.length" :config="config" />
   </div>
   <div
     class="content"
-    v-if="[TargetTypes[1].value, TargetTypes[0].value].includes(taskTimelineStore.selectedTask.targetType)"
+    v-if="
+      [TargetTypes[1].value, TargetTypes[0].value].includes(taskTimelineStore.selectedTask.targetType) &&
+      ebpfStore.analyzeTrees.length
+    "
   >
     <div class="schedules">
       <EBPFSchedules />