update

src/components/Graph.vue

@@ -50,7 +50,7 @@ import { useI18n } from "vue-i18n";
 import { EventParams } from "@/types/app";
 import { useECharts } from "@/hooks/useEcharts";
 import { addResizeListener, removeResizeListener } from "@/utils/event";
-import Trace from "@/views/dashboard/controls/Trace.vue";
+import Trace from "@/views/dashboard/related/trace/Index.vue";
 import associateProcessor from "@/hooks/useAssociateProcessor";
 
 /*global Nullable, defineProps, defineEmits*/

src/graphql/query/selector.ts

@@ -32,6 +32,6 @@ export const queryInstances = `query queryInstances(${Instances.variable}) {${In
 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 queryEndpoint = `query queryEndpoint(${getEndpoint.variable}) {${getEndpoint.query}}`;
 export const queryProcesses = `query queryProcesses(${Processes.variable}) {${Processes.query}}`;
 export const queryProcess = `query queryProcess(${getProcess.variable}) {${getProcess.query}}`;

src/views/dashboard/graphs/TopList.vue

@@ -46,7 +46,6 @@ limitations under the License. -->
     </div>
     <el-drawer
       v-model="showTrace"
-      :title="t('trace')"
       size="100%"
       :destroy-on-close="true"
       :before-close="() => (showTrace = false)"
@@ -63,7 +62,7 @@ import { useI18n } from "vue-i18n";
 import { computed, ref } from "vue";
 import copy from "@/utils/copy";
 import { TextColors } from "@/views/dashboard/data";
-import Trace from "../controls/Trace.vue";
+import Trace from "@/views/dashboard/related/trace/Index.vue";
 /*global defineProps */
 const props = defineProps({
   data: {

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

@@ -16,10 +16,21 @@ limitations under the License. -->
   <div class="flex-h">
     <ConditionTags :type="'TRACE'" @update="updateTags" />
   </div>
+  <div class="mr-10">
+    <el-button
+      size="small"
+      type="primary"
+      @click="queryTraces"
+      class="search-btn"
+    >
+      {{ t("search") }}
+    </el-button>
+  </div>
 </template>
 <script lang="ts" setup>
 import { ref, reactive, onUnmounted } from "vue";
 import type { PropType } from "vue";
+import { useI18n } from "vue-i18n";
 import { Option, DurationTime } from "@/types/app";
 import { useTraceStore } from "@/store/modules/trace";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -38,6 +49,7 @@ const props = defineProps({
     default: () => ({ graph: {} }),
   },
 });
+const { t } = useI18n();
 const filters = reactive<Recordable>(props.data.filters || {});
 const traceId = ref<string>(filters.traceId || "");
 const appStore = useAppStoreWithOut();
@@ -64,8 +76,10 @@ async function init() {
   if (dashboardStore.entity === EntityType[0].value) {
     state.service = selectorStore.currentService.id;
     await getInstance();
+    if (!state.instance) {
       await getEndpoint();
     }
+  }
   await queryTraces();
 }
 async function getService() {
@@ -74,7 +88,7 @@ async function getService() {
     ElMessage.error(resp.errors);
     return;
   }
-  state.service = resp.data.service;
+  state.service = (resp.data.service && resp.data.service) || "";
 }
 async function getEndpoint() {
   const resp = await traceStore.getEndpoint(filters.id);
@@ -82,7 +96,7 @@ async function getEndpoint() {
     ElMessage.error(resp.errors);
     return;
   }
-  state.endpoint = resp.data.endpoint.id;
+  state.endpoint = (resp.data.endpoint && resp.data.endpoint.id) || "";
 }
 async function getInstance() {
   const resp = await traceStore.getInstance(filters.id);
@@ -90,7 +104,7 @@ async function getInstance() {
     ElMessage.error(resp.errors);
     return;
   }
-  state.instance = resp.data.instance.id;
+  state.instance = (resp.data.instance && resp.data.instance.id) || "";
 }
 function setCondition() {
   if (filters.queryOrder) {

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

@@ -0,0 +1,63 @@
+<!-- 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="trace-wrapper flex-v">
+    <div class="header">
+      <Header :data="data" />
+    </div>
+    <div class="trace flex-h">
+      <TraceList />
+      <TraceDetail />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { provide } from "vue";
+import type { PropType } from "vue";
+import Header from "./Header.vue";
+import TraceList from "./TraceList.vue";
+import TraceDetail from "./Detail.vue";
+
+/*global defineProps */
+const props = defineProps({
+  data: {
+    type: Object as PropType<any>,
+    default: () => ({ graph: {} }),
+  },
+});
+provide("options", props.data);
+</script>
+<style lang="scss" scoped>
+.trace-wrapper {
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  position: relative;
+  overflow: auto;
+}
+
+.header {
+  padding: 10px;
+  font-size: 12px;
+  border-bottom: 1px solid #dcdfe6;
+  min-width: 1200px;
+}
+
+.trace {
+  width: 100%;
+  overflow: auto;
+  min-width: 1200px;
+}
+</style>