vis conditions

src/assets/icons/conditions.svg

@@ -0,0 +1,16 @@
+<!-- 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. -->
+
+<svg t="1666624449554" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2649" width="48" height="48"><path d="M381.482667 673.877333a90.389333 90.389333 0 0 1 85.226666 60.245334H853.333333v64H465.28a90.389333 90.389333 0 0 1-167.573333 0H170.666667v-64h125.610666a90.389333 90.389333 0 0 1 85.205334-60.245334z m0 64a26.346667 26.346667 0 1 0 0 52.693334 26.346667 26.346667 0 0 0 0-52.693334z m261.034666-304.938666a90.389333 90.389333 0 0 1 85.205334 60.245333H853.333333v64h-127.04a90.389333 90.389333 0 0 1-167.573333 0H170.666667v-64h386.624a90.389333 90.389333 0 0 1 85.226666-60.245333z m0 64a26.346667 26.346667 0 1 0 0 52.693333 26.346667 26.346667 0 0 0 0-52.693333zM381.482667 192a90.389333 90.389333 0 0 1 85.226666 60.224H853.333333v64H465.28a90.389333 90.389333 0 0 1-167.573333 0H170.666667v-64h125.610666A90.389333 90.389333 0 0 1 381.482667 192z m0 64a26.346667 26.346667 0 1 0 0 52.693333 26.346667 26.346667 0 0 0 0-52.693333z" p-id="2650"></path></svg>

src/hooks/useAssociateProcessor.ts

@@ -127,6 +127,7 @@ export default function associateProcessor(props: any) {
           label: d.name,
           value: String(index),
           data: d.data[currentParams.dataIndex][1],
+          date: d.data[currentParams.dataIndex][0],
         };
       }
     );

src/locales/lang/en.ts

@@ -163,7 +163,10 @@ const msg = {
   queryOrder: "Query Order",
   latency: "Latency",
   metricValues: "Metric Values",
+  queryConditions: "Query Conditions",
   enableRelatedTrace: "Enable Related Trace",
+  maxTraceDuration: "Maximum Duration",
+  minTraceDuration: "Minimum Duration",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",

src/locales/lang/es.ts

@@ -168,6 +168,9 @@ const msg = {
   relatedTraceOptions: "Opciones de seguimiento relacionadas",
   setLatencyDuration: "Establecer el rango de retardo",
   enableRelatedTrace: "Activar trazas relacionadas",
+  queryConditions: "Condiciones de consulta",
+  maxTraceDuration: "Duración máxima",
+  minTraceDuration: "Duración mínima",
   second: "s",
   yearSuffix: "Año",
   monthsHead: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Set_Oct_Nov_Dic",

src/locales/lang/zh.ts

@@ -161,6 +161,9 @@ const msg = {
   latency: "延迟",
   metricValues: "指标值",
   enableRelatedTrace: "启用相关Trace",
+  queryConditions: "查询条件",
+  maxTraceDuration: "最大持续时间",
+  minTraceDuration: "最小持续时间",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

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

@@ -32,6 +32,25 @@ limitations under the License. -->
       @change="changeLatency"
       class="ml-10"
     />
+    <el-popover trigger="hover" width="250" placement="bottom" effect="light">
+      <template #reference>
+        <div class="cp conditions-popup">
+          <Icon iconName="conditions" size="middle" />
+        </div>
+      </template>
+      <div>
+        <div class="title">{{ t("queryConditions") }}</div>
+        <div
+          v-for="key in Object.keys(FiltersKeys)"
+          :key="key"
+          v-show="traceStore.conditions[FiltersKeys[key]]"
+        >
+          <span v-if="key !== 'duration'">
+            {{ t(key) }}: {{ traceStore.conditions[FiltersKeys[key]] }}
+          </span>
+        </div>
+      </div>
+    </el-popover>
     <el-popover trigger="hover" width="250" placement="bottom" effect="light">
       <template #reference>
         <div class="cp metric-value">
@@ -239,6 +258,11 @@ onUnmounted(() => {
   line-height: 32px;
 }
 
+.conditions-popup {
+  padding-left: 10px;
+  line-height: 32px;
+}
+
 .title {
   margin-bottom: 10px;
   font-weight: bold;