add process entity

src/graphql/fragments/selector.ts

@@ -58,6 +58,23 @@ export const Endpoints = {
     }
 `,
 };
+export const Processes = {
+  variable: "$instanceId: ID!, $duration: Duration!",
+  query: `
+  processes: listProcesses(instanceId: $instanceId, duration: $duration) {
+    id
+    value: name
+    label: name
+    serviceId
+    serviceName
+    instanceId
+    instanceName
+    agentId
+    detectType
+    attributes
+    labels
+`,
+};
 
 export const getService = {
   variable: "$serviceId: String!",
@@ -102,3 +119,22 @@ export const getEndpoint = {
   }
   `,
 };
+
+export const getProcess = {
+  variable: "$processId: ID!",
+  query: `
+  process: getProcess(processId: $processId) {
+    id
+    value: name
+    label: name
+    serviceId
+    serviceName
+    instanceId
+    instanceName
+    agentId
+    detectType
+    attributes
+    labels
+  }
+  `,
+};

src/graphql/query/selector.ts

@@ -22,6 +22,8 @@ import {
   getService,
   getInstance,
   getEndpoint,
+  Processes,
+  getProcess,
 } from "../fragments/selector";
 
 export const queryServices = `query queryServices(${Services.variable}) {${Services.query}}`;
@@ -31,3 +33,5 @@ export const queryLayers = `query listLayer {${Layers.query}}`;
 export const queryService = `query queryService(${getService.variable}) {${getService.query}}`;
 export const queryInstance = `query queryInstance(${getInstance.variable}) {${getInstance.query}}`;
 export const queryEndpoint = `query queryInstance(${getEndpoint.variable}) {${getEndpoint.query}}`;
+export const queryProcesses = `query queryProcesses(${Processes.variable}) {${Processes.query}}`;
+export const queryProcess = `query queryProcess(${getProcess.variable}) {${getProcess.query}}`;

src/store/modules/selectors.ts

@@ -1,3 +1,4 @@
+import { getProcess } from "./../../graphql/fragments/selector";
 /**
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with
@@ -15,7 +16,7 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { Service, Instance, Endpoint } from "@/types/selector";
+import { Service, Instance, Endpoint, Process } from "@/types/selector";
 import { store } from "@/store";
 import graphql from "@/graphql";
 import { AxiosResponse } from "axios";
@@ -24,11 +25,15 @@ interface SelectorState {
   services: Service[];
   destServices: Service[];
   pods: Array<Instance | Endpoint>;
+  processes: Process[];
+  destProcesses: Process[];
   currentService: Nullable<Service>;
   currentPod: Nullable<Instance | Endpoint>;
+  currentProcess: Nullable<Process>;
   currentDestService: Nullable<Service>;
   currentDestPod: Nullable<Instance | Endpoint>;
   destPods: Array<Instance | Endpoint>;
+  currentDestProcess: Nullable<Process>;
 }
 
 export const selectorStore = defineStore({
@@ -38,10 +43,14 @@ export const selectorStore = defineStore({
     destServices: [],
     pods: [],
     destPods: [],
+    processes: [],
+    destProcesses: [],
     currentService: null,
     currentPod: null,
+    currentProcess: null,
     currentDestService: null,
     currentDestPod: null,
+    currentDestProcess: null,
   }),
   actions: {
     setCurrentService(service: Nullable<Service>) {
@@ -56,6 +65,12 @@ export const selectorStore = defineStore({
     setCurrentDestPod(pod: Nullable<Instance | Endpoint>) {
       this.currentDestPod = pod;
     },
+    setCurrentProcess(process: Nullable<Process>) {
+      this.currentPod = process;
+    },
+    setCurrentDestProcess(process: Nullable<Process>) {
+      this.currentDestPod = process;
+    },
     async fetchLayers(): Promise<AxiosResponse> {
       const res: AxiosResponse = await graphql.query("queryLayers").params({});
 
@@ -93,6 +108,27 @@ export const selectorStore = defineStore({
       }
       return res.data;
     },
+    async getProcesses(param?: {
+      instanceId: string;
+      isRelation: boolean;
+    }): Promise<Nullable<AxiosResponse>> {
+      const instanceId = param ? param.instanceId : this.currentPod?.id;
+      if (!instanceId) {
+        return null;
+      }
+      const res: AxiosResponse = await graphql.query("queryInstances").params({
+        instanceId,
+        duration: useAppStoreWithOut().durationTime,
+      });
+      if (!res.data.errors) {
+        if (param && param.isRelation) {
+          this.destProcesses = res.data.data.processes || [];
+          return res.data;
+        }
+        this.processes = res.data.data.processes || [];
+      }
+      return res.data;
+    },
     async getEndpoints(params: {
       keyword?: string;
       serviceId?: string;
@@ -176,6 +212,25 @@ export const selectorStore = defineStore({
         this.pods = [res.data.data.endpoint];
       }
 
+      return res.data;
+    },
+    async getProcess(instanceId: string, isRelation?: boolean) {
+      if (!instanceId) {
+        return;
+      }
+      const res: AxiosResponse = await graphql.query("queryProcess").params({
+        instanceId,
+      });
+      if (!res.data.errors) {
+        if (isRelation) {
+          this.currentDestProcess = res.data.data.process || null;
+          this.destProcesses = [res.data.data.process];
+          return;
+        }
+        this.currentProcess = res.data.data.process || null;
+        this.processes = [res.data.data.process];
+      }
+
       return res.data;
     },
   },

src/types/ebpf.d.ts

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+import { Process } from "./selector";
 export interface EBPFTaskCreationRequest {
   serviceId: string;
   processLabels: string[];
@@ -43,18 +44,7 @@ export interface EBPFProfilingSchedule {
   startTime: number;
 }
 
-export type Process = {
+export type Process = Process;
-  id: string;
-  name: string;
-  serviceId: string;
-  serviceName: string;
-  instanceId: string;
-  instanceName: string;
-  agentId: string;
-  detectType: string;
-  attributes: { name: string; value: string }[];
-  labels: string[];
-};
 export type StackElement = {
   id: string;
   originId: string;

src/types/selector.d.ts

@@ -46,3 +46,16 @@ export type Service = {
   layers: string[];
   shortName: string;
 };
+
+export type Process = {
+  id: string;
+  name: string;
+  serviceId: string;
+  serviceName: string;
+  instanceId: string;
+  instanceName: string;
+  agentId: string;
+  detectType: string;
+  attributes: { name: string; value: string }[];
+  labels: string[];
+};

src/views/dashboard/data.ts

@@ -159,6 +159,7 @@ export const EntityType = [
     key: 4,
   },
   { value: "EndpointRelation", label: "Endpoint Relation", key: 4 },
+  { value: "ProcessRelation", label: "Process Relation", key: 5 },
 ];
 export const ListEntity: any = {
   InstanceList: EntityType[3].value,

src/views/dashboard/panel/Tool.vue

@@ -26,7 +26,7 @@ limitations under the License. -->
           class="selectors"
         />
       </div>
-      <div class="selectors-item" v-if="key === 3 || key === 4">
+      <div class="selectors-item" v-if="key === 3 || key === 4 || key === 5">
         <span class="label">
           {{
             ["EndpointRelation", "Endpoint"].includes(dashboardStore.entity)
@@ -47,7 +47,18 @@ limitations under the License. -->
           "
         />
       </div>
-      <div class="selectors-item" v-if="key === 2 || key === 4">
+      <div class="selectors-item" v-if="key === 5">
+        <span class="label"> $Process </span>
+        <Selector
+          v-model="states.currentDestPod"
+          :options="selectorStore.destPods"
+          size="small"
+          placeholder="Select a data"
+          @change="changeDestPods"
+          class="selectors"
+        />
+      </div>
+      <div class="selectors-item" v-if="key === 2 || key === 4 || key === 5">
         <span class="label">$DestinationService</span>
         <Selector
           v-model="states.currentDestService"
@@ -58,7 +69,7 @@ limitations under the License. -->
           class="selectors"
         />
       </div>
-      <div class="selectors-item" v-if="key === 4">
+      <div class="selectors-item" v-if="key === 4 || key === 5">
         <span class="label">
           {{
             dashboardStore.entity === "EndpointRelation"
@@ -77,6 +88,17 @@ limitations under the License. -->
           :isRemote="dashboardStore.entity === 'EndpointRelation'"
         />
       </div>
+      <div class="selectors-item" v-if="key === 5">
+        <span class="label"> $DestinationProcess </span>
+        <Selector
+          v-model="states.currentDestPod"
+          :options="selectorStore.destPods"
+          size="small"
+          placeholder="Select a data"
+          @change="changeDestPods"
+          class="selectors"
+        />
+      </div>
     </div>
     <div class="flex-h tools" v-loading="loading" v-if="!appStore.isMobile">
       <div class="tool-icons flex-h" v-if="dashboardStore.editMode">

src/views/dashboard/related/network-profiling/components/metrics-panel/Index.vue

@@ -1,68 +0,0 @@
-<!-- Licensed to the Apache Software Foundation (ASF) under one or more
-contributor license agreements.  See the NOTICE file distributed with
-this work for additional information regarding copyright ownership.
-The ASF licenses this file to You under the Apache License, Version 2.0
-(the "License"); you may not use this file except in compliance with
-the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-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>
-  <grid-layout
-    v-model:layout="layout"
-    :col-num="24"
-    :row-height="10"
-    :is-draggable="false"
-    :is-resizable="false"
-    v-if="layout.length"
-  >
-    <grid-item
-      v-for="item in layout"
-      :x="item.x"
-      :y="item.y"
-      :w="item.w"
-      :h="item.h"
-      :i="item.i"
-      :key="item.i"
-      @click="clickGrid(item)"
-      :class="{ active: networkProfilingStore.activeMetricIndex === item.i }"
-    >
-      <metric-widget
-        :data="item"
-        :activeIndex="networkProfilingStore.activeMetricIndex"
-      />
-    </grid-item>
-  </grid-layout>
-  <div class="no-data-tips" v-else>{{ t("noWidget") }}</div>
-</template>
-<script lang="ts" setup>
-import type { PropType } from "vue";
-import { onBeforeUnmount, defineProps, ref } from "vue";
-import { useI18n } from "vue-i18n";
-import { LayoutConfig } from "@/types/dashboard";
-import MetricWidget from "./MetricWidget.vue";
-import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
-
-const props = defineProps({
-  widgets: {
-    type: Array as PropType<LayoutConfig[]>,
-    default: () => [],
-  },
-});
-const { t } = useI18n();
-const networkProfilingStore = useNetworkProfilingStore();
-const layout = ref<LayoutConfig[]>(props.widgets || []);
-
-function clickGrid(item: LayoutConfig) {
-  networkProfilingStore.setActiveItem(item.i);
-  networkProfilingStore.setSelectedMetric(item);
-}
-onBeforeUnmount(() => {
-  networkProfilingStore.setMetricsLayout([]);
-});
-</script>

src/views/dashboard/related/network-profiling/components/metrics-panel/MetricWidget.vue

@@ -1,218 +0,0 @@
-<!-- Licensed to the Apache Software Foundation (ASF) under one or more
-contributor license agreements.  See the NOTICE file distributed with
-this work for additional information regarding copyright ownership.
-The ASF licenses this file to You under the Apache License, Version 2.0
-(the "License"); you may not use this file except in compliance with
-the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-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="widget">
-    <div class="header flex-h">
-      <div>
-        <span>
-          {{ widget.title || "" }}
-        </span>
-      </div>
-      <div>
-        <el-tooltip :content="widget.tips || ''">
-          <span>
-            <Icon
-              iconName="info_outline"
-              size="sm"
-              class="operation"
-              v-show="widget.tips"
-            />
-          </span>
-        </el-tooltip>
-        <el-popover
-          placement="bottom"
-          trigger="click"
-          :width="100"
-          v-if="dashboardStore.editMode"
-        >
-          <template #reference>
-            <span>
-              <Icon iconName="ellipsis_v" size="middle" class="operation" />
-            </span>
-          </template>
-          <div class="tools" @click="editConfig">
-            <span>{{ t("edit") }}</span>
-          </div>
-          <div class="tools" @click="removeWidget">
-            <span>{{ t("delete") }}</span>
-          </div>
-        </el-popover>
-      </div>
-    </div>
-    <div class="body" v-if="graph.type" v-loading="loading">
-      <component
-        :is="graph.type"
-        :intervalTime="appStore.intervalTime"
-        :data="state.source"
-        :config="{
-          ...data.graph,
-          metrics: data.metrics || [''],
-          metricTypes: data.metricTypes || [''],
-          i: data.i,
-          id: data.id,
-          metricConfig: data.metricConfig,
-          filters: data.filters || {},
-        }"
-        :needQuery="needQuery"
-      />
-    </div>
-    <div v-else class="no-data">{{ t("noGraph") }}</div>
-  </div>
-</template>
-<script lang="ts">
-import { toRefs, reactive, defineComponent, ref, computed } from "vue";
-import type { PropType } from "vue";
-import { LayoutConfig } from "@/types/dashboard";
-import { useDashboardStore } from "@/store/modules/dashboard";
-import { useAppStoreWithOut } from "@/store/modules/app";
-import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
-import graphs from "../../../../graphs/topology";
-import { useI18n } from "vue-i18n";
-import {
-  useQueryProcessor,
-  useSourceProcessor,
-  useGetMetricEntity,
-} from "@/hooks/useProcessor";
-
-const props = {
-  data: {
-    type: Object as PropType<LayoutConfig>,
-    default: () => ({ widget: {}, graph: {} }),
-  },
-  activeIndex: { type: String, default: "" },
-  needQuery: { type: Boolean, default: false },
-};
-
-export default defineComponent({
-  name: "Metric",
-  components: { ...graphs },
-  props,
-  setup(props) {
-    const { t } = useI18n();
-    const loading = ref<boolean>(false);
-    const state = reactive<{ source: { [key: string]: unknown } }>({
-      source: {},
-    });
-    const { data } = toRefs(props);
-    const appStore = useAppStoreWithOut();
-    const dashboardStore = useDashboardStore();
-    const networkProfilingStore = useNetworkProfilingStore();
-    const graph = computed(() => props.data.graph || {});
-    const widget = computed(() => props.data.widget || {});
-
-    queryMetrics();
-
-    async function queryMetrics() {
-      const metricTypes = props.data.metricTypes || [];
-      const metrics = props.data.metrics || [];
-      const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
-      const params = await useQueryProcessor({ ...props.data, catalog });
-
-      if (!params) {
-        state.source = {};
-        return;
-      }
-      loading.value = true;
-      const json = await dashboardStore.fetchMetricValue(params);
-      loading.value = false;
-      if (!json) {
-        return;
-      }
-      const d = {
-        metrics: props.data.metrics || [],
-        metricTypes: props.data.metricTypes || [],
-        metricConfig: props.data.metricConfig || [],
-      };
-      state.source = useSourceProcessor(json, d);
-    }
-
-    function removeWidget() {
-      networkProfilingStore.removeControls(props.data);
-    }
-    function editConfig() {
-      networkProfilingStore.setConfigPanel(true);
-      networkProfilingStore.setSelectedMetric(props.data);
-      if (props.activeIndex) {
-        networkProfilingStore.setActiveItem(props.activeIndex);
-      } else {
-        networkProfilingStore.setActiveItem(props.data.i);
-      }
-    }
-
-    return {
-      state,
-      appStore,
-      removeWidget,
-      editConfig,
-      data,
-      loading,
-      dashboardStore,
-      t,
-      graph,
-      widget,
-    };
-  },
-});
-</script>
-<style lang="scss" scoped>
-.widget {
-  font-size: 12px;
-  height: 100%;
-}
-
-.header {
-  height: 30px;
-  padding: 5px;
-  width: 100%;
-  border-bottom: 1px solid #eee;
-  justify-content: space-between;
-}
-
-.operation {
-  cursor: pointer;
-}
-
-.tools {
-  padding: 5px 0;
-  color: #999;
-  cursor: pointer;
-  position: relative;
-  text-align: center;
-
-  &:hover {
-    color: #409eff;
-    background-color: #eee;
-  }
-}
-
-.body {
-  padding: 5px 10px;
-  width: 100%;
-  height: calc(100% - 30px);
-}
-
-.no-data {
-  font-size: 14px;
-  color: #888;
-  width: 100%;
-  text-align: center;
-  padding-top: 20px;
-}
-
-.unit {
-  display: inline-block;
-  margin-left: 5px;
-}
-</style>