merge

package-lock.json

@@ -9634,9 +9634,9 @@
       "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
     },
     "node_modules/d3-color": {
-      "version": "3.0.1",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
-      "integrity": "sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw==",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
       "engines": {
         "node": ">=12"
       }
@@ -37292,9 +37292,9 @@
       "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
     },
     "d3-color": {
-      "version": "3.0.1",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
-      "integrity": "sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw=="
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
     },
     "d3-contour": {
       "version": "3.0.1",

src/assets/icons/gateway.svg

@@ -0,0 +1,15 @@
+<!-- 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="1664244255409" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2266" width="48" height="48"><path d="M523.776 430.592l-153.088 88.576 153.088 88.576 152.576-88.576-152.576-88.576z m-165.888 108.544l0.512 177.152 153.6 87.552-1.024-176.64-153.088-88.064z m330.24 0l-153.6 87.552-1.024 176.64 153.6-87.552 1.024-176.64z m131.072 205.824l-68.096-40.96 39.936-8.704-5.632-26.112-67.072 14.848-13.824 23.04 101.376 60.928 13.312-23.04z m-142.848 7.68l68.096 40.96-39.936 8.704 5.632 26.112 67.072-14.848 13.824-23.04-101.888-60.928-12.8 23.04zM481.28 424.96h26.624V306.176H481.28v79.36l-27.648-29.696-19.456 18.432L481.28 424.96z m53.76-118.784V424.96h26.624V345.088l27.648 29.696 19.456-18.432-47.104-50.176h-26.624z m-190.464 401.92l-13.312-23.04-68.608 40.448 11.264-38.912-25.6-7.168-18.944 66.048 13.312 23.04 101.888-60.416z m-89.088 82.944l13.312 23.04 68.608-39.936-11.264 38.912 25.6 7.168 19.456-66.048-13.312-23.04-102.4 59.904z m622.08-45.056c-45.568 0-82.432 36.864-82.432 82.432 0 45.568 36.864 82.432 82.432 82.432 45.568 0 82.432-36.864 82.432-82.432 0-45.568-36.864-82.432-82.432-82.432z m0 122.88c-22.528 0-40.448-17.92-40.448-40.448s17.92-40.448 40.448-40.448 40.448 17.92 40.448 40.448-17.92 40.448-40.448 40.448zM521.728 292.864c45.568 0 82.432-36.864 82.432-82.432 0-45.568-36.864-82.432-82.432-82.432-45.568 0-82.432 36.864-82.432 82.432 0 45.568 36.864 82.432 82.432 82.432z m0-122.88c22.528 0 40.448 17.92 40.448 40.448s-17.92 40.448-40.448 40.448-40.448-17.92-40.448-40.448 18.432-40.448 40.448-40.448zM167.936 749.056c-45.568 0-82.432 36.864-82.432 82.432 0 45.568 36.864 82.432 82.432 82.432 45.568 0 82.432-36.864 82.432-82.432 0-45.568-36.864-82.432-82.432-82.432z m0 122.88c-22.528 0-40.448-17.92-40.448-40.448s17.92-40.448 40.448-40.448 40.448 17.92 40.448 40.448-18.432 40.448-40.448 40.448z" p-id="2267"></path></svg>

src/locales/lang/en.ts

@@ -155,8 +155,7 @@ const msg = {
   query: "Query",
   postgreSQL: "PostgreSQL",
   endpointTips: "The table shows up to 20 pieces of endpoints.",
-  viewTrace: "View related traces",
+  apisix: "APISIX",
-  copyName: "Copy name",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
@@ -348,5 +347,6 @@ const msg = {
   conditionNotice:
     "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
   language: "Language",
+  gateway: "Gateway",
 };
 export default msg;

src/locales/lang/es.ts

@@ -155,8 +155,7 @@ const msg = {
   query: "Consulta",
   postgreSQL: "PostgreSQL",
   endpointTips: "Aquí, la tabla muestra hasta 20 punto final.",
-  viewTrace: "Ver trazas relacionadas",
+  apisix: "APISIX",
-  copyName: "Nombre de la copia",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",
@@ -351,5 +350,6 @@ const msg = {
   conditionNotice:
     "Aviso: Por favor presione Intro después de introducir una clave de contenido, excluir clave de contenido(clave=valor).",
   language: "Lenguaje",
+  gateway: "Puerta",
 };
 export default msg;

src/locales/lang/zh.ts

@@ -152,8 +152,7 @@ const msg = {
   query: "查询",
   postgreSQL: "PostgreSQL",
   endpointTips: "这里最多展示20条endpoints。",
-  viewTrace: "查看相关traces",
+  apisix: "APISIX",
-  copyName: "复制名称",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
@@ -348,5 +347,6 @@ const msg = {
   conditionNotice:
     "请输入一个内容关键词或者内容不包含的关键词(key=value)之后回车",
   language: "语言",
+  gateway: "网关",
 };
 export default msg;

src/router/data/gateway.ts

@@ -0,0 +1,47 @@
+/**
+ * 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.
+ */
+
+export default [
+  {
+    path: "",
+    name: "Gateway",
+    meta: {
+      title: "gateway",
+      icon: "gateway",
+      hasGroup: true,
+    },
+    redirect: "/apisix",
+    children: [
+      {
+        path: "/apisix",
+        name: "APISIX",
+        meta: {
+          title: "apisix",
+          layer: "APISIX",
+        },
+      },
+      {
+        path: "/apisix/tab/:activeTabIndex",
+        name: "APISIXActiveTabIndex",
+        meta: {
+          notShow: true,
+          layer: "APISIX",
+        },
+      },
+    ],
+  },
+];

src/router/data/index.ts

@@ -22,6 +22,7 @@ import selfObservability from "./selfObservability";
 import functions from "./functions";
 import browser from "./browser";
 import k8s from "./k8s";
+import gateway from "./gateway";
 
 export default [
   ...general,
@@ -30,6 +31,7 @@ export default [
   ...k8s,
   ...infrastructure,
   ...browser,
+  ...gateway,
   ...database,
   ...selfObservability,
 ];

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

@@ -193,22 +193,22 @@ async function init() {
   state.endpoint = { value: "0", label: "All" };
 }
 
-function fetchSelectors() {
+async function fetchSelectors() {
   if (dashboardStore.entity === EntityType[1].value) {
-    getServices();
+    await getServices();
     return;
   }
   if (dashboardStore.entity === EntityType[2].value) {
-    getInstances();
+    await getInstances();
     return;
   }
   if (dashboardStore.entity === EntityType[3].value) {
-    getEndpoints();
+    await getEndpoints();
     return;
   }
   if (dashboardStore.entity === EntityType[0].value) {
-    getInstances();
+    await getInstances();
-    getEndpoints();
+    await getEndpoints();
   }
 }
 

src/views/dashboard/related/trace/components/D3Graph/Index.vue

@@ -362,14 +362,6 @@ watch(
   border-radius: 4px;
 }
 
-.trace-list .trace-node rect {
-  cursor: pointer;
-
-  &:hover {
-    fill: rgba(0, 0, 0, 0.05);
-  }
-}
-
 .dialog-c-text {
   white-space: pre;
   overflow: auto;

src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue

@@ -81,34 +81,75 @@ limitations under the License. -->
       {{ t("relatedTraceLogs") }}
     </el-button>
   </div>
+  <el-dialog
+    v-model="showRelatedLogs"
+    :destroy-on-close="true"
+    fullscreen
+    @closed="showRelatedLogs = false"
+  >
+    <el-pagination
+      v-model:currentPage="pageNum"
+      v-model:page-size="pageSize"
+      :small="true"
+      layout="prev, pager, next"
+      :pager-count="5"
+      :total="total"
+      @current-change="turnPage"
+    />
+    <LogTable
+      :tableData="traceStore.traceSpanLogs || []"
+      :type="`service`"
+      :noLink="true"
+    >
+      <div class="log-tips" v-if="!traceStore.traceSpanLogs.length">
+        {{ t("noData") }}
+      </div>
+    </LogTable>
+  </el-dialog>
 </template>
 <script lang="ts" setup>
-import { inject } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PropType } from "vue";
 import copy from "@/utils/copy";
-import getDashboard from "@/hooks/useDashboardsSession";
+import { ElMessage } from "element-plus";
-import { LayoutConfig } from "@/types/dashboard";
 import { dateFormat } from "@/utils/dateFormat";
+import { useTraceStore } from "@/store/modules/trace";
+import LogTable from "@/views/dashboard/related/log/LogTable/Index.vue";
 
-/*global defineProps, Recordable */
+/*global defineProps */
-const options: Recordable<LayoutConfig> = inject("options") || {};
 const props = defineProps({
   currentSpan: { type: Object as PropType<any>, default: () => ({}) },
 });
 const { t } = useI18n();
+const traceStore = useTraceStore();
+const pageNum = ref<number>(1);
+const showRelatedLogs = ref<boolean>(false);
+const pageSize = 10;
+const total = computed(() =>
+  traceStore.traceList.length === pageSize
+    ? pageSize * pageNum.value + 1
+    : pageSize * pageNum.value
+);
 async function getTaceLogs() {
-  const { associationWidget } = getDashboard();
+  showRelatedLogs.value = true;
-  associationWidget(
+  const res = await traceStore.getSpanLogs({
-    (options.id as any) || "",
+    condition: {
-    {
+      relatedTrace: {
-      sourceId: options?.id || "",
+        traceId: props.currentSpan.traceId,
-      traceId: props.currentSpan.traceId,
+        segmentId: props.currentSpan.segmentId,
-      segmentId: props.currentSpan.segmentId,
+        spanId: props.currentSpan.spanId,
-      spanId: props.currentSpan.spanId,
+      },
+      paging: { pageNum: pageNum.value, pageSize },
     },
-    "Log"
+  });
-  );
+  if (res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+function turnPage(p: number) {
+  pageNum.value = p;
+  getTaceLogs();
 }
 function showCurrentSpanDetail(text: string) {
   copy(text);

src/views/dashboard/related/trace/utils/d3-trace-list.ts

@@ -141,6 +141,7 @@ export default class ListGraph {
       .append("g")
       .attr("transform", `translate(${source.y0},${source.x0})`)
       .attr("class", "trace-node")
+      .attr("style", "cursor: pointer")
       .style("opacity", 0)
       .on("mouseover", function (event: any, d: Trace) {
         t.tip.show(d, this);