update config

src/locales/lang/en.ts

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

src/locales/lang/es.ts

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

src/locales/lang/zh.ts

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

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

@@ -14,11 +14,80 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="item">
-    <span class="label">{{ t("widget") }}</span>
+    <span class="label">{{ t("status") }}</span>
+    <Selector
+      size="small"
+      :value="status"
+      :options="Status"
+      placeholder="Select a status"
+      @change="updateConfig({ status })"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("queryOrder") }}</span>
+    <Selector
+      size="small"
+      :value="queryOrder"
+      :options="QueryOrders"
+      placeholder="Select a option"
+      @change="updateConfig({ queryOrder })"
+    />
+  </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"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateConfig({ setLatencyDuration })"
+    />
   </div>
 </template>
 <script lang="ts" setup>
+import { ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { Status } from "../../data";
+import { QueryOrders } from "../../data";
 
 const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+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);
+
+function updateConfig(param: { [key: string]: unknown }) {
+  const relatedTrace = {
+    ...dashboardStore.selectedGrid.relatedTrace,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, relatedTrace });
+}
 </script>
+<style lang="scss" scoped>
+.label {
+  font-size: 13px;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.input {
+  width: 500px;
+}
+
+.item {
+  margin-bottom: 10px;
+}
+</style>