update

src/components/Graph.vue

@@ -167,6 +167,7 @@ function viewTrace() {
     filters: item,
   };
   showTrace.value = true;
+  visMenus.value = true;
 }
 
 watch(

src/hooks/useAssociateProcessor.ts

@@ -18,8 +18,8 @@ import { Option } from "@/types/app";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import dateFormatStep from "@/utils/dateFormat";
 import getLocalTime from "@/utils/localtime";
-import { QueryOrders } from "@/views/dashboard/data";
 import { EventParams } from "@/types/app";
+import { QueryOrders, Status } from "@/views/dashboard/data";
 
 export default function associateProcessor(props: any) {
   function eventAssociate() {
@@ -92,18 +92,13 @@ export default function associateProcessor(props: any) {
         step,
       };
     }
-    let queryOrder = QueryOrders[1].value;
-    let status = undefined;
-    let latency = undefined;
-    if (currentParams.seriesName.includes("_sla")) {
-      queryOrder = QueryOrders[0].value;
-      status = "ERROR";
-    }
-    if (currentParams.seriesName.includes("_apdex")) {
-      status = "ERROR";
-    }
-    if (props.option.series) {
-      latency = props.option.series.map(
+    const relatedTrace = props.relatedTrace || {};
+    const status = relatedTrace.status;
+    const queryOrder = relatedTrace.queryOrder;
+    const { latency } = relatedTrace;
+    let latencyList = undefined;
+    if (latency && props.option.series) {
+      latencyList = props.option.series.map(
         (d: { name: string; data: number[][] }) => {
           return { [d.name]: d.data[currentParams.dataIndex] };
         }
@@ -113,7 +108,7 @@ export default function associateProcessor(props: any) {
       duration,
       queryOrder,
       status,
-      latency,
+      latency: latencyList,
     };
     return item;
   }

src/locales/lang/en.ts

@@ -160,6 +160,7 @@ const msg = {
   viewTrace: "View related trace",
   relatedTraceOptions: "Related Trace Options",
   setLatencyDuration: "Set Latency Range",
+  queryOrder: "Query Order",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",

src/locales/lang/es.ts

@@ -157,6 +157,7 @@ const msg = {
   postgreSQL: "PostgreSQL",
   endpointTips: "Aquí, la tabla muestra hasta 20 punto final.",
   apisix: "APISIX",
+  queryOrder: "Orden de consulta",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",

src/locales/lang/zh.ts

@@ -157,6 +157,7 @@ const msg = {
   viewTrace: "查看相关Trace",
   relatedTraceOptions: "相关的Trace选项",
   setLatencyDuration: "设置延时范围",
+  queryOrder: "查询顺序",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

src/views/dashboard/configuration/Widget.vue

@@ -65,7 +65,11 @@ limitations under the License. -->
         >
           <AssociateOptions />
         </el-collapse-item>
-        <el-collapse-item :title="t('relatedTraceOptions')" name="5">
+        <el-collapse-item
+          :title="t('relatedTraceOptions')"
+          name="5"
+          v-if="hasAssociate"
+        >
           <RelatedTraceOptions />
         </el-collapse-item>
       </el-collapse>

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

@@ -20,7 +20,7 @@ limitations under the License. -->
       :value="status"
       :options="Status"
       placeholder="Select a status"
-      @change="updateConfig({ status })"
+      @change="updateConfig({ status: $event[0].value })"
     />
   </div>
   <div class="item">
@@ -30,25 +30,16 @@ limitations under the License. -->
       :value="queryOrder"
       :options="QueryOrders"
       placeholder="Select a option"
-      @change="updateConfig({ queryOrder })"
+      @change="updateConfig({ queryOrder: $event[0].value })"
     />
   </div>
-  <!-- <div class="item">
-    <span class="label">{{ t("setDuration") }}</span>
-    <el-switch
-      v-model="setDuration"
-      active-text="Yes"
-      inactive-text="No"
-      @change="updateConfig({ setDuration })"
-    />
-  </div> -->
   <div class="item">
     <span class="label">{{ t("setLatencyDuration") }}</span>
     <el-switch
-      v-model="setLatencyDuration"
+      v-model="latency"
       active-text="Yes"
       inactive-text="No"
-      @change="updateConfig({ setLatencyDuration })"
+      @change="updateConfig({ latency })"
     />
   </div>
 </template>
@@ -56,16 +47,14 @@ limitations under the License. -->
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { Status } from "../../data";
-import { QueryOrders } from "../../data";
+import { Status, QueryOrders } from "../../data";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const traceOpt = dashboardStore.selectedGrid.relatedTrace;
+const traceOpt = dashboardStore.selectedGrid.relatedTrace || {};
 const status = ref<string>(traceOpt.status || Status[0].value);
 const queryOrder = ref<string>(traceOpt.queryOrder || QueryOrders[0].value);
-// const setDuration = ref<boolean>(traceOpt.setDuration || false);
-const setLatencyDuration = ref<boolean>(traceOpt.setLatencyDuration || false);
+const latency = ref<boolean>(traceOpt.setLatencyDuration || false);
 
 function updateConfig(param: { [key: string]: unknown }) {
   const relatedTrace = {
@@ -83,10 +72,6 @@ function updateConfig(param: { [key: string]: unknown }) {
   margin-bottom: 5px;
 }
 
-.input {
-  width: 500px;
-}
-
 .item {
   margin-bottom: 10px;
 }

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

@@ -81,15 +81,19 @@ const state = reactive<Recordable>({
   endpoint: "",
   service: "",
 });
-const items = Object.keys(filters).map((d: string) => {
-  return { key: d, value: filtersKeys[d] };
-});
-const conditions = ref(items[0].key);
+const conditions = ref<string>("");
+const items = ref<{ key: string; value: string }[]>([]);
 
 init();
 
 async function init() {
   if (!filters.id) {
+    for (const d of Object.keys(filters)) {
+      if (filters[d]) {
+        items.value.push({ key: d, value: filtersKeys[d] });
+      }
+    }
+    conditions.value = (items.value[0] && items.value[0].key) || "";
     state.service = selectorStore.currentService.id;
     if (dashboardStore.entity === EntityType[2].value) {
       state.instance = selectorStore.currentPod.id;
@@ -154,8 +158,8 @@ function setCondition() {
   };
   // echarts
   if (!filters.id) {
-    for (const k of items) {
-      if (k.key === conditions.value) {
+    for (const k of items.value) {
+      if (k.key === conditions.value && filters[k.key]) {
         params[k.value] = filters[k.key];
       }
     }