update config

src/components/Graph.vue

@@ -19,7 +19,11 @@ limitations under the License. -->
       <div class="tools" @click="associateMetrics">
         {{ t("associateMetrics") }}
       </div>
-      <div class="tools" @click="viewTrace">
+      <div
+        class="tools"
+        @click="viewTrace"
+        v-if="props.relatedTrace && props.relatedTrace.enableRelate"
+      >
         {{ t("viewTrace") }}
       </div>
     </div>

src/locales/lang/en.ts

@@ -163,6 +163,7 @@ const msg = {
   queryOrder: "Query Order",
   latency: "Latency",
   metricValues: "Metric Values",
+  enableRelatedTrace: "Enable Related Trace",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",

src/locales/lang/es.ts

@@ -167,6 +167,7 @@ const msg = {
   viewTrace: "Ver trazas relacionadas",
   relatedTraceOptions: "Opciones de seguimiento relacionadas",
   setLatencyDuration: "Establecer el rango de retardo",
+  enableRelatedTrace: "Activar trazas relacionadas",
   second: "s",
   yearSuffix: "Año",
   monthsHead: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Set_Oct_Nov_Dic",

src/locales/lang/zh.ts

@@ -160,6 +160,7 @@ const msg = {
   queryOrder: "查询顺序",
   latency: "延迟",
   metricValues: "指标值",
+  enableRelatedTrace: "启用相关Trace",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

src/types/dashboard.d.ts

@@ -47,7 +47,8 @@ export type RelatedTrace = {
   duration: DurationTime;
   status: string;
   queryOrder: string;
-  latency: any;
+  latency: boolean;
+  enableRelate: boolean;
 };
 
 export type Filters = {

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

@@ -14,34 +14,45 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="item">
-    <span class="label">{{ t("status") }}</span>
+    <span class="label">{{ t("enableRelatedTrace") }}</span>
-    <Selector
-      size="small"
-      :value="status"
-      :options="Status"
-      placeholder="Select a status"
-      @change="updateConfig({ status: $event[0].value })"
-    />
-  </div>
-  <div class="item">
-    <span class="label">{{ t("queryOrder") }}</span>
-    <Selector
-      size="small"
-      :value="queryOrder"
-      :options="QueryOrders"
-      placeholder="Select a option"
-      @change="updateConfig({ queryOrder: $event[0].value })"
-    />
-  </div>
-  <div class="item">
-    <span class="label">{{ t("setLatencyDuration") }}</span>
     <el-switch
-      v-model="latency"
+      v-model="enableRelate"
       active-text="Yes"
       inactive-text="No"
-      @change="updateConfig({ latency })"
+      @change="updateConfig({ enableRelate })"
     />
   </div>
+  <div v-show="enableRelate">
+    <div class="item">
+      <span class="label">{{ t("status") }}</span>
+      <Selector
+        size="small"
+        :value="status"
+        :options="Status"
+        placeholder="Select a status"
+        @change="updateConfig({ status: $event[0].value })"
+      />
+    </div>
+    <div class="item">
+      <span class="label">{{ t("queryOrder") }}</span>
+      <Selector
+        size="small"
+        :value="queryOrder"
+        :options="QueryOrders"
+        placeholder="Select a option"
+        @change="updateConfig({ queryOrder: $event[0].value })"
+      />
+    </div>
+    <div class="item">
+      <span class="label">{{ t("setLatencyDuration") }}</span>
+      <el-switch
+        v-model="latency"
+        active-text="Yes"
+        inactive-text="No"
+        @change="updateConfig({ latency })"
+      />
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
@@ -55,6 +66,7 @@ const traceOpt = dashboardStore.selectedGrid.relatedTrace || {};
 const status = ref<string>(traceOpt.status || Status[0].value);
 const queryOrder = ref<string>(traceOpt.queryOrder || QueryOrders[0].value);
 const latency = ref<boolean>(traceOpt.setLatencyDuration || false);
+const enableRelate = ref<boolean>(traceOpt.enableRelate || false);
 
 function updateConfig(param: { [key: string]: unknown }) {
   const relatedTrace = {