feat: add selectors

src/store/modules/continous-profiling.ts

@@ -15,8 +15,10 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
+import { useAppStoreWithOut } from "@/store/modules/app";
 import type { StrategyItem, CheckItems } from "@/types/continous-profiling";
 import type { ProcessNode, EBPFTaskList } from "@/types/ebpf";
+import type { Instance, Process } from "@/types/selector";
 import { store } from "@/store";
 import graphql from "@/graphql";
 import type { AxiosResponse } from "axios";
@@ -32,6 +34,8 @@ interface ContinousProfilingState {
   selectedContinousTask: Recordable<EBPFTaskList>;
   errorTip: string;
   errorReason: string;
+  processes: Process[];
+  instances: Instance[];
   nodes: ProcessNode[];
   calls: Call[];
   node: Nullable<ProcessNode>;
@@ -52,6 +56,8 @@ export const continousProfilingStore = defineStore({
     selectedContinousTask: {},
     errorReason: "",
     errorTip: "",
+    processes: [],
+    instances: [],
     nodes: [],
     calls: [],
     node: null,
@@ -192,6 +198,32 @@ export const continousProfilingStore = defineStore({
       }
       return res.data;
     },
+    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 || [];
+      }
+      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 getProcessTopology(params: { duration: DurationTime; serviceInstanceId: string }) {
       this.loadNodes = true;
       const res: AxiosResponse = await graphql.query("getProcessTopology").params(params);

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

@@ -18,7 +18,7 @@ limitations under the License. -->
       <PolicyList />
       <TaskList />
     </div>
-    <div>graph</div>
+    <GraphPanel />
   </div>
 </template>
 <script lang="ts" setup>
@@ -26,6 +26,7 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import PolicyList from "./components/PolicyList.vue";
   import TaskList from "./components/TaskList.vue";
+  import GraphPanel from "./components/GraphPanel.vue";
   /*global defineProps */
   defineProps({
     config: {

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

@@ -0,0 +1,79 @@
+<!-- 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="policy-graph flex-v">
+    <div class="header">
+      <span class="label mr-5">{{ t("instance") }}</span>
+      <Selector
+        class="selector"
+        size="small"
+        :value="instanceId"
+        :options="continousProfilingStore.instances"
+        placeholder="Select a instance"
+        @change="changeInstance"
+      />
+      <span class="label mr-5">{{ t("process") }}</span>
+      <Selector
+        class="selector"
+        size="small"
+        :value="processId"
+        :options="continousProfilingStore.processes"
+        placeholder="Select a process"
+        @change="changeProcess"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { useSelectorStore } from "@/store/modules/selectors";
+  import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
+
+  const continousProfilingStore = useContinousProfilingStore();
+  const selectorStore = useSelectorStore();
+  const { t } = useI18n();
+  const processId = ref<string>("");
+  const instanceId = ref<string>("");
+
+  getSelectors();
+  function changeInstance(opt: { id: string }[]) {
+    instanceId.value = opt[0].id;
+  }
+
+  function changeProcess(opt: { id: string }[]) {
+    processId.value = opt[0].id;
+  }
+
+  async function getSelectors() {
+    const serviceId = (selectorStore.currentService && selectorStore.currentService.id) || "";
+    await continousProfilingStore.getServiceInstances(serviceId.value);
+    await continousProfilingStore.getProcesses(instanceId.value);
+  }
+</script>
+<style lang="scss" scoped>
+  .header {
+    margin: 10px;
+  }
+
+  .label {
+    font-size: 14px;
+  }
+
+  .selector {
+    width: 220px;
+  }
+</style>

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

@@ -83,13 +83,13 @@ limitations under the License. -->
   const { t } = useI18n();
   const states = reactive<StrategyItem>(props.data);
 
-  function changeType(opt: any[]) {
-    states.type = (opt.map((d) => d.value)[0] || {}).value;
+  function changeType(opt: { value: string }[]) {
+    states.type = opt[0].value;
     emits("edit", states, props.order);
   }
 
-  function changeMonitorType(opt: any[], index: number) {
-    states.checkItems[index].type = (opt.map((d) => d.value)[0] || {}).value;
+  function changeMonitorType(opt: { value: string }[], index: number) {
+    states.checkItems[index].type = opt[0].value;
     emits("edit", states, props.order);
   }