fix: update filters

src/store/modules/trace.ts

@@ -16,7 +16,7 @@
  */
 import { defineStore } from "pinia";
 import { Duration } from "@/types/app";
-import { Instance, Endpoint } from "@/types/selector";
+import { Instance, Endpoint, Service } from "@/types/selector";
 import { Trace, Span } from "@/types/trace";
 import { store } from "@/store";
 import graphql from "@/graphql";
@@ -25,6 +25,7 @@ import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
 
 interface TraceState {
+  services: Service[];
   instances: Instance[];
   endpoints: Endpoint[];
   traceList: Trace[];
@@ -44,8 +45,9 @@ interface TraceState {
 export const traceStore = defineStore({
   id: "trace",
   state: (): TraceState => ({
-    instances: [],
-    endpoints: [],
+    services: [{ value: "0", label: "All" }],
+    instances: [{ value: "0", label: "All" }],
+    endpoints: [{ value: "0", label: "All" }],
     traceList: [],
     traceSpans: [],
     traceTotal: 0,
@@ -71,6 +73,19 @@ export const traceStore = defineStore({
     setTraceSpans(spans: Span) {
       this.traceSpans = spans;
     },
+    async getServices(layer: string) {
+      const res: AxiosResponse = await graphql.query("queryServices").params({
+        layer,
+      });
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.services = [
+        { value: "0", label: "All" },
+        ...res.data.data.services,
+      ] || [{ value: "0", label: "All" }];
+      return res.data;
+    },
     async getInstances() {
       const res: AxiosResponse = await graphql.query("queryInstances").params({
         serviceId: this.selectorStore.currentService.id,

src/types/selector.d.ts

@@ -15,25 +15,25 @@
  * limitations under the License.
  */
 export type Service = {
-  id: string;
+  id?: string;
   label: string;
   value: string;
-  layers: string[];
-  normal: boolean;
-  group: string;
+  layers?: string[];
+  normal?: boolean;
+  group?: string;
 };
 
 export type Instance = {
   value: string;
   label: string;
-  layer: string;
-  language: string;
-  instanceUUID: string;
-  attributes: { name: string; value: string }[];
+  layer?: string;
+  language?: string;
+  instanceUUID?: string;
+  attributes?: { name: string; value: string }[];
 };
 
 export type Endpoint = {
-  id: string;
+  id?: string;
   label: string;
   value: string;
 };

src/views/dashboard/related/trace/Filter.vue

@@ -14,7 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h row">
-    <div class="mr-5" v-if="dashboardStore.entity === EntityType[0].value">
+    <div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value">
+      <span class="grey mr-5">{{ t("service") }}:</span>
+      <Selector
+        size="small"
+        :value="state.service.value"
+        :options="traceStore.services"
+        placeholder="Select a service"
+        @change="changeField('service', $event)"
+      />
+    </div>
+    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
       <span class="grey mr-5">{{ t("instance") }}:</span>
       <Selector
         size="small"
@@ -24,7 +34,7 @@ limitations under the License. -->
         @change="changeField('instance', $event)"
       />
     </div>
-    <div class="mr-5" v-if="dashboardStore.entity === EntityType[0].value">
+    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
       <span class="grey mr-5">{{ t("endpoint") }}:</span>
       <Selector
         size="small"
@@ -48,12 +58,6 @@ limitations under the License. -->
       <span class="grey mr-5">{{ t("traceID") }}:</span>
       <el-input v-model="traceId" class="traceId" />
     </div>
-    <div class="mr-5">
-      <span class="sm b grey mr-5">{{ t("duration") }}:</span>
-      <el-input class="inputs mr-5" v-model="minTraceDuration" />
-      <span class="grey mr-5">-</span>
-      <el-input class="inputs" v-model="maxTraceDuration" />
-    </div>
   </div>
   <div class="flex-h">
     <!-- <div class="mr-5">
@@ -65,6 +69,12 @@ limitations under the License. -->
         @input="changeTimeRange"
       />
     </div> -->
+    <div class="mr-5">
+      <span class="sm b grey mr-5">{{ t("duration") }}:</span>
+      <el-input class="inputs mr-5" v-model="minTraceDuration" />
+      <span class="grey mr-5">-</span>
+      <el-input class="inputs" v-model="maxTraceDuration" />
+    </div>
     <ConditionTags :type="'TRACE'" @update="updateTags" />
     <el-button
       class="search-btn"
@@ -101,8 +111,9 @@ const tagsList = ref<string[]>([]);
 const tagsMap = ref<Option[]>([]);
 const state = reactive<any>({
   status: { label: "All", value: "ALL" },
-  instance: { label: "", value: "" },
-  endpoint: { label: "", value: "" },
+  instance: { value: "0", label: "All" },
+  endpoint: { value: "0", label: "All" },
+  service: { value: "0", label: "All" },
 });
 
 // const dateTime = computed(() => [
@@ -111,11 +122,32 @@ const state = reactive<any>({
 // ]);
 init();
 function init() {
-  if (dashboardStore.entity === EntityType[0].value) {
-    getEndpoints();
-    getInstances();
-  }
   searchTraces();
+  if (dashboardStore.entity === EntityType[1].value) {
+    getServices();
+    return;
+  }
+  if (dashboardStore.entity === EntityType[2].value) {
+    getInstances();
+    return;
+  }
+  if (dashboardStore.entity === EntityType[3].value) {
+    getEndpoints();
+    return;
+  }
+  if (dashboardStore.entity === EntityType[0].value) {
+    getInstances();
+    getEndpoints();
+  }
+}
+
+async function getServices() {
+  const resp = await traceStore.getServices(dashboardStore.layerId);
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.service = traceStore.services[0];
 }
 
 async function getEndpoints() {
@@ -135,13 +167,21 @@ async function getInstances() {
   state.instance = traceStore.instances[0];
 }
 function searchTraces() {
+  let endpoint = "",
+    instance = "";
+  if (dashboardStore.entity === EntityType[2].value) {
+    endpoint = selectorStore.currentPod.id;
+  }
+  if (dashboardStore.entity === EntityType[3].value) {
+    instance = selectorStore.currentPod.id;
+  }
   traceStore.setTraceCondition({
     serviceId: selectorStore.currentService
       ? selectorStore.currentService.id
-      : "",
+      : state.service.id,
     traceId: traceId.value || undefined,
-    endpointId: state.endpoint.id || undefined,
-    serviceInstanceId: state.instance.id || undefined,
+    endpointId: endpoint || state.endpoint.id || undefined,
+    serviceInstanceId: instance || state.instance.id || undefined,
     traceState: state.status.value || "ALL",
     queryDuration: appStore.durationTime,
     minTraceDuration: appStore.minTraceDuration || undefined,
@@ -160,6 +200,10 @@ async function queryTraces() {
 }
 function changeField(type: string, opt: any[]) {
   state[type] = opt[0];
+  if (type === "service") {
+    getEndpoints();
+    getInstances();
+  }
 }
 function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) {
   tagsList.value = data.tagsList;
@@ -189,7 +233,7 @@ watch(
 }
 
 .search-btn {
-  margin-left: 50px;
+  margin-left: 20px;
   cursor: pointer;
 }
 </style>