update

src/views/dashboard/configuration/Widget.vue

@@ -124,7 +124,7 @@ export default defineComponent({
     const title = computed(() => encodeURIComponent(widget.value.title || ""));
     const tips = computed(() => encodeURIComponent(widget.value.tips || ""));
     const hasAssociate = computed(() =>
-      ["Bar", "Line", "Area"].includes(
+      ["Bar", "Line", "Area", "TopList"].includes(
         dashboardStore.selectedGrid.graph &&
           dashboardStore.selectedGrid.graph.type
       )

src/views/dashboard/configuration/widget/RelatedTraceOptions.vue

@@ -13,7 +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="item">
+  <div v-if="type === 'TopList'" class="item">
+    <span class="label">RefId</span>
+    <Selector
+      size="small"
+      :value="refIdType"
+      :options="RefIdTypes"
+      placeholder="Select a refId"
+      @change="updateConfig({ refIdType: $event[0].value })"
+      class="selector"
+    />
+  </div>
+  <div v-else class="item">
     <span class="label">{{ t("enableRelatedTrace") }}</span>
     <el-switch
       v-model="enableRelate"
@@ -22,7 +33,7 @@ limitations under the License. -->
       @change="updateConfig({ enableRelate })"
     />
   </div>
-  <div v-show="enableRelate">
+  <div v-if="enableRelate">
     <div class="item">
       <span class="label">{{ t("status") }}</span>
       <Selector
@@ -60,15 +71,18 @@ limitations under the License. -->
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { Status, QueryOrders } from "../../data";
+import { Status, QueryOrders, RefIdTypes } from "../../data";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const traceOpt = dashboardStore.selectedGrid.relatedTrace || {};
+const { graph, relatedTrace } = dashboardStore.selectedGrid;
+const traceOpt = (relatedTrace && relatedTrace.traceOpt) || {};
 const status = ref<string>(traceOpt.status || Status[0].value);
 const queryOrder = ref<string>(traceOpt.queryOrder || QueryOrders[0].value);
 const latency = ref<boolean>(traceOpt.latency || false);
 const enableRelate = ref<boolean>(traceOpt.enableRelate || false);
+const type = ref<string>((graph && graph.type) || "");
+const refIdType = ref<string>(traceOpt.refIdType || "traceId");
 
 function updateConfig(param: { [key: string]: unknown }) {
   const relatedTrace = {

src/views/dashboard/data.ts

@@ -298,3 +298,4 @@ export const CalculationOpts = [
   { label: "Seconds to days", value: "secondToDay" },
   { label: "Nanoseconds to milliseconds", value: "nanosecondToMillisecond" },
 ];
+export const RefIdTypes = [{ label: "Trace ID", value: "traceId" }];

src/views/dashboard/graphs/TopList.vue

@@ -32,7 +32,11 @@ limitations under the License. -->
           <div class="operation" @click="handleClick(i.name)">
             <span>{{ t("copy") }}</span>
           </div>
-          <div class="operation" @click="viewTrace(i)">
+          <div
+            class="operation"
+            @click="viewTrace(i)"
+            v-show="refIdType === RefIdTypes[0].value"
+          >
             <span>{{ t("viewTrace") }}</span>
           </div>
         </el-popover>
@@ -63,7 +67,7 @@ import { computed, ref } from "vue";
 import copy from "@/utils/copy";
 import { TextColors } from "@/views/dashboard/data";
 import Trace from "@/views/dashboard/related/trace/Index.vue";
-import { QueryOrders, Status } from "../data";
+import { QueryOrders, Status, RefIdTypes } from "../data";
 /*global defineProps */
 const props = defineProps({
   data: {
@@ -73,7 +77,11 @@ const props = defineProps({
     default: () => ({}),
   },
   config: {
-    type: Object as PropType<{ color: string; metrics: string[] }>,
+    type: Object as PropType<{
+      color: string;
+      metrics: string[];
+      relatedTrace: any;
+    }>,
     default: () => ({ color: "purple" }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
@@ -83,6 +91,10 @@ const showTrace = ref<boolean>(false);
 const traceOptions = ref<{ type: string; filters?: unknown }>({
   type: "Trace",
 });
+const refIdType = ref<string>(
+  (props.config.relatedTrace && props.config.relatedTrace.refIdType) ||
+    RefIdTypes[0].value
+);
 const key = computed(() => Object.keys(props.data)[0] || "");
 const available = computed(
   () =>

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

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div v-if="filters.id" class="conditions flex-h">
-    <div class="label grey">TraceId ( refId ):</div>
+    <div class="label grey">TraceId:</div>
     <el-input size="small" v-model="traceId" class="trace-id" />
   </div>
   <div class="conditions flex-h" v-else>