fix: optimize config UI for related trace and metrics (#195)

src/locales/lang/en.ts

@@ -162,7 +162,8 @@ const msg = {
   viewTrace: "View Related Traces",
   relatedTraceOptions: "Related Trace Options",
   setLatencyDuration: "Latency Related Metrics",
-  queryOrder: "Query Order",
+  queryOrder: "Query By Duration",
+  setOrder: "Query Order",
   latency: "Latency",
   metricValues: "Metric Values",
   queryConditions: "Query Conditions",

src/locales/lang/es.ts

@@ -159,7 +159,8 @@ const msg = {
   postgreSQL: "PostgreSQL",
   endpointTips: "Aquí, la tabla muestra hasta 20 punto final.",
   apisix: "APISIX",
-  queryOrder: "Orden de consulta",
+  queryOrder: "Consulta por duración",
+  setOrder: "Orden de consulta",
   latency: "Retraso",
   metricValues: "Valor métrico",
   legendValues: "Valor de la leyenda",

src/locales/lang/zh.ts

@@ -159,7 +159,8 @@ const msg = {
   viewTrace: "查看相关Trace",
   relatedTraceOptions: "相关的Trace选项",
   setLatencyDuration: "延迟相关指标",
-  queryOrder: "查询顺序",
+  queryOrder: "按持续时间查询",
+  setOrder: "查询顺序",
   latency: "延迟",
   metricValues: "指标值",
   enableRelatedTrace: "启用相关Trace",

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

@@ -46,7 +46,7 @@ limitations under the License. -->
       />
     </div>
     <div class="item">
-      <span class="label">{{ t("queryOrder") }}</span>
+      <span class="label">{{ t("setOrder") }}</span>
       <Selector
         size="small"
         :value="queryOrder"
@@ -71,8 +71,17 @@ limitations under the License. -->
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { Status, QueryOrders, RefIdTypes } from "../../data";
+import { RefIdTypes } from "../../data";
 
+const QueryOrders = [
+  { label: "None", value: "BY_START_TIME" },
+  { label: "Duration", value: "BY_DURATION" },
+];
+const Status = [
+  { label: "None", value: "ALL" },
+  { label: "Success", value: "SUCCESS" },
+  { label: "Error", value: "ERROR" },
+];
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const { graph, relatedTrace } = dashboardStore.selectedGrid;

src/views/dashboard/configuration/widget/metric/Index.vue

@@ -60,7 +60,10 @@ limitations under the License. -->
       />
     </el-popover>
     <span
-      v-show="states.isList || states.metricTypes[0] === 'readMetricsValues'"
+      v-show="
+        states.isList ||
+        states.metricTypes[0] === ProtocolTypes.ReadMetricsValues
+      "
     >
       <Icon
         class="cp mr-5"
@@ -106,6 +109,7 @@ import {
   ChartTypes,
   PodsChartTypes,
   MetricsType,
+  ProtocolTypes,
 } from "../../../data";
 import { ElMessage } from "element-plus";
 import Icon from "@/components/Icon.vue";
@@ -425,13 +429,7 @@ function setMetricTypeList(type: string) {
     return MetricTypes[type];
   }
   if (states.isList || graph.value.type === "Table") {
-    return [
+    return [MetricTypes.REGULAR_VALUE[0], MetricTypes.REGULAR_VALUE[1]];
-      { label: "read all values in the duration", value: "readMetricsValues" },
-      {
-        label: "read the single value in the duration",
-        value: "readMetricsValue",
-      },
-    ];
   }
   return MetricTypes[type];
 }

src/views/dashboard/configuration/widget/metric/Standard.vue

@@ -97,7 +97,7 @@ import { useI18n } from "vue-i18n";
 import { SortOrder, CalculationOpts } from "../../../data";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { MetricConfigOpt } from "@/types/dashboard";
-import { ListChartTypes } from "../../../data";
+import { ListChartTypes, ProtocolTypes } from "../../../data";
 
 /*global defineEmits, defineProps */
 const props = defineProps({
@@ -122,11 +122,18 @@ const hasLabel = computed(() => {
   const graph = dashboardStore.selectedGrid.graph || {};
   return (
     ListChartTypes.includes(graph.type) ||
-    ["readLabeledMetricsValues", "readMetricsValues"].includes(metricType.value)
+    [
+      ProtocolTypes.ReadLabeledMetricsValues,
+      ProtocolTypes.ReadMetricsValues,
+    ].includes(metricType.value)
   );
 });
 const isTopn = computed(() =>
-  ["sortMetrics", "readSampledRecords"].includes(metricTypes[props.index])
+  [
+    ProtocolTypes.SortMetrics,
+    ProtocolTypes.ReadSampledRecords,
+    ProtocolTypes.ReadRecords,
+  ].includes(metricTypes[props.index])
 );
 function updateConfig(index: number, param: { [key: string]: string }) {
   const key = Object.keys(param)[0];

src/views/dashboard/data.ts

@@ -47,6 +47,15 @@ export const MetricChartType: any = {
   readSampledRecords: [{ label: "Top List", value: "TopList" }],
   readRecords: [{ label: "Top List", value: "TopList" }],
 };
+export enum ProtocolTypes {
+  ReadRecords = "readRecords",
+  ReadSampledRecords = "readSampledRecords",
+  SortMetrics = "sortMetrics",
+  ReadLabeledMetricsValues = "readLabeledMetricsValues",
+  ReadHeatMap = "readHeatMap",
+  ReadMetricsValues = "readMetricsValues",
+  ReadMetricsValue = "readMetricsValue",
+}
 export const DefaultGraphConfig: { [key: string]: any } = {
   Bar: {
     type: "Bar",

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

@@ -138,8 +138,10 @@ init();
 async function init() {
   for (const d of Object.keys(filters)) {
     if (
-      ["queryOrder"].includes(d) ||
+      (d === "queryOrder" &&
-      (d === "status" && filters[d] && filters[d] !== "ALL") ||
+        filters[d] &&
+        filters[d] === QueryOrders[1].value) ||
+      (d === "status" && filters[d] && filters[d] !== Status[0].value) ||
       (filters[d] && d === "latency")
     ) {
       items.value.push({ label: d, value: FiltersKeys[d] });