feat: add Trace in dashboards (#18)

* feat: add trace tool * feat: add trace * feat: add trace filters * feat: add trace list * feat: add trace detail * fix: update trace detail * feat: add trace list * fix: update trace list * feat: add trace tree * fix: update trace tree * feat: add trace table * feat: add trace statistics * fix: update trace statistics * fix: update resize * feat: add trace log * feat: add related logs * feat: add loading * fix: update name * feat: watch selectors * fix: view span on table * fix ci * fix: update file name * fix: update file name * fix: update file name * fix: update filters * build: add package
2025-10-15 04:09:14 +00:00 · 2022-02-26 22:47:53 +08:00
parent 7fe0a57e49
commit 977ffbaf74
74 changed files with 5507 additions and 53 deletions
--- a/src/views/components/ConditionTags.vue
+++ b/src/views/components/ConditionTags.vue
@@ -0,0 +1,138 @@
+<!-- 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. -->
+<template>
+  <div class="flex-h" :class="{ light: theme === 'light' }">
+    <div class="mr-10 pt-5">
+      <span class="sm grey" v-show="theme === 'dark'">{{ t("tags") }}: </span>
+      <span
+        class="trace-tags"
+        :style="type === 'LOG' ? `min-width: 122px;` : ''"
+      >
+        <span class="selected" v-for="(item, index) in tagsList" :key="index">
+          <span>{{ item }}</span>
+          <span class="remove-icon" @click="removeTags(index)">×</span>
+        </span>
+      </span>
+      <el-input v-model="tags" class="trace-new-tag" @change="addLabels" />
+      <span class="tags-tip">
+        <a
+          target="blank"
+          href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
+        >
+          {{ t("tagsLink") }}
+        </a>
+        <el-tooltip :content="t('traceTagsTip')">
+          <span>
+            <Icon class="icon-help mr-5" iconName="help" size="middle" />
+          </span>
+        </el-tooltip>
+        <b>{{ t("noticeTag") }}</b>
+      </span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+/*global defineEmits, defineProps */
+const emit = defineEmits(["update"]);
+defineProps({
+  type: { type: String, default: "TRACE" },
+});
+const { t } = useI18n();
+const theme = ref<string>("dark");
+const type = ref<string>("");
+const tags = ref<string>("");
+const tagsList = ref<string[]>([]);
+
+function removeTags(index: number) {
+  tagsList.value.splice(index, 1);
+  updateTags();
+  localStorage.setItem("traceTags", JSON.stringify(this.tagsList));
+}
+function addLabels() {
+  if (!tags.value) {
+    return;
+  }
+  tagsList.value.push(tags.value);
+  tags.value = "";
+  updateTags();
+}
+function updateTags() {
+  const tagsMap = tagsList.value.map((item: string) => {
+    const key = item.substring(0, item.indexOf("="));
+    return {
+      key,
+      value: item.substring(item.indexOf("=") + 1, item.length),
+    };
+  });
+  emit("update", { tagsMap, tagsList: tagsList.value });
+}
+</script>
+<style lang="scss" scoped>
+.trace-tags {
+  padding: 1px 5px 0 0;
+  border-radius: 3px;
+  height: 24px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.selected {
+  display: inline-block;
+  padding: 0 3px;
+  border-radius: 3px;
+  overflow: hidden;
+  border: 1px dashed #aaa;
+  font-size: 12px;
+  margin: 3px 2px 0 2px;
+}
+
+.trace-new-tag {
+  border-style: unset;
+  outline: 0;
+  padding: 2px 5px;
+  border-radius: 3px;
+  width: 250px;
+  margin-right: 3px;
+}
+
+.remove-icon {
+  display: inline-block;
+  margin-left: 3px;
+  cursor: pointer;
+}
+
+.tags-tip {
+  color: #a7aebb;
+}
+
+.light {
+  color: #3d444f;
+
+  input {
+    border: 1px solid #ccc;
+  }
+
+  .selected {
+    color: #3d444f;
+  }
+}
+
+.icon-help {
+  cursor: pointer;
+}
+</style>
--- a/src/views/components/LogTable/Index.vue
+++ b/src/views/components/LogTable/Index.vue
@@ -0,0 +1,136 @@
+<!-- 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. -->
+
+<template>
+  <div class="log">
+    <div class="log-header">
+      <template v-for="(item, index) in columns">
+        <div
+          class="method"
+          :style="`width: ${item.method}px`"
+          v-if="item.drag"
+          :key="index"
+        >
+          <span class="r cp" ref="dragger" :data-index="index">
+            <Icon iconName="settings_ethernet" size="sm" />
+          </span>
+          {{ t(item.value) }}
+        </div>
+        <div v-else :class="item.label" :key="`col${index}`">
+          {{ t(item.value) }}
+        </div>
+      </template>
+    </div>
+    <div v-if="type === 'browser'">
+      <LogBrowser
+        v-for="(item, index) in tableData"
+        :data="item"
+        :key="'browser' + index"
+        @select="setCurrentLog"
+      />
+    </div>
+    <div v-else>
+      <LogService
+        v-for="(item, index) in tableData"
+        :data="item"
+        :key="'service' + index"
+        :noLink="noLink"
+        @select="setCurrentLog"
+      />
+    </div>
+    <slot></slot>
+    <el-dialog
+      v-model="showDetail"
+      :destroy-on-close="true"
+      fullscreen
+      @closed="showDetail = false"
+      :title="t('logDetail')"
+    >
+      <LogDetail :currentLog="currentLog" />
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { ServiceLogConstants, BrowserLogConstants } from "./data";
+import LogBrowser from "./LogBrowser.vue";
+import LogService from "./LogService.vue";
+import LogDetail from "./LogDetail.vue";
+
+/*global defineProps, Nullable */
+const props = defineProps({
+  type: { type: String, default: "service" },
+  tableData: { type: Array, default: () => [] },
+  noLink: { type: Boolean, default: true },
+});
+const { t } = useI18n();
+const currentLog = ref<any>({});
+const showDetail = ref<boolean>(false);
+const dragger = ref<Nullable<HTMLSpanElement>>(null);
+// const method = ref<number>(380);
+const columns: any[] =
+  props.type === "browser" ? BrowserLogConstants : ServiceLogConstants;
+
+function setCurrentLog(log: any) {
+  showDetail.value = true;
+  currentLog.value = log;
+}
+</script>
+<style lang="scss" scoped>
+.log {
+  font-size: 12px;
+  height: 100%;
+  overflow: auto;
+}
+
+.log-header {
+  /*display: flex;*/
+  white-space: nowrap;
+  user-select: none;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  /*background-color: #f3f4f9;*/
+  .traceId {
+    width: 390px;
+  }
+
+  .content,
+  .tags {
+    width: 300px;
+  }
+
+  .serviceInstanceName,
+  .serviceName {
+    width: 200px;
+  }
+}
+
+.log-header div {
+  /*min-width: 140px;*/
+  width: 140px;
+  /*flex-grow: 1;*/
+  display: inline-block;
+  padding: 0 4px;
+  border: 1px solid transparent;
+  border-right: 1px dotted silver;
+  line-height: 30px;
+  background-color: #f3f4f9;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
--- a/src/views/components/LogTable/LogBrowser.vue
+++ b/src/views/components/LogTable/LogBrowser.vue
@@ -0,0 +1,107 @@
+<!-- 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. -->
+
+<template>
+  <div @click="showSelectSpan" :class="['log-item', 'clearfix']" ref="logItem">
+    <div
+      v-for="(item, index) in columns"
+      :key="index"
+      :class="[
+        'method',
+        ['message', 'stack'].includes(item.label) ? 'autoHeight' : '',
+      ]"
+      :style="{
+        lineHeight: 1.3,
+        width: `${item.drag ? item.method : ''}px`,
+      }"
+    >
+      <span v-if="item.label === 'time'">{{ dateFormat(data.time) }}</span>
+      <span v-else-if="item.label === 'errorUrl'">{{ data.pagePath }}</span>
+      <span v-else v-tooltip:bottom="data[item.label] || '-'">{{
+        data[item.label] || "-"
+      }}</span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import dayjs from "dayjs";
+import { BrowserLogConstants } from "./data";
+
+/*global defineProps, defineEmits, NodeListOf  */
+const props = defineProps({
+  data: { type: Array as any, default: () => [] },
+});
+const columns = BrowserLogConstants;
+const emit = defineEmits(["select"]);
+
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+
+function showSelectSpan() {
+  const items: NodeListOf<any> = document.querySelectorAll(".log-item");
+
+  for (const item of items) {
+    item.style.background = "#fff";
+  }
+  const logItem: any = this.$refs.logItem;
+
+  logItem.style.background = "rgba(0, 0, 0, 0.1)";
+  emit("select", props.data);
+}
+</script>
+<style lang="scss" scoped>
+.log-item {
+  white-space: nowrap;
+  position: relative;
+  cursor: pointer;
+}
+
+.log-item.selected {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.log-item:not(.level0):hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.log-item:hover {
+  background: rgba(0, 0, 0, 0.04) !important;
+}
+
+.log-item > div {
+  width: 140px;
+  padding: 0 5px;
+  display: inline-block;
+  border: 1px solid transparent;
+  border-right: 1px dotted silver;
+  overflow: hidden;
+  line-height: 30px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-item .text {
+  width: 100% !important;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-item > div.method {
+  padding: 7px 5px;
+  line-height: 30px;
+}
+</style>
--- a/src/views/components/LogTable/LogDetail.vue
+++ b/src/views/components/LogTable/LogDetail.vue
@@ -0,0 +1,75 @@
+<!-- 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. -->
+<template>
+  <div class="log-detail">
+    <div
+      class="mb-10 clear rk-flex"
+      v-for="(item, index) in columns"
+      :key="index"
+    >
+      <template>
+        <span class="g-sm-4 grey">{{ t(item.value) }}:</span>
+        <span v-if="item.label === 'timestamp'" class="g-sm-8">
+          {{ dateFormat(currentLog[item.label]) }}
+        </span>
+        <textarea
+          class="content"
+          :readonly="true"
+          v-else-if="item.label === 'content'"
+          :value="currentLog[item.label]"
+        />
+        <span v-else-if="item.label === 'tags'" class="g-sm-8">
+          <div v-for="(d, index) in logTags" :key="index">{{ d }}</div>
+        </span>
+        <span v-else class="g-sm-8">{{ currentLog[item.label] }}</span>
+      </template>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import type { PropType } from "vue";
+import { useI18n } from "vue-i18n";
+import dayjs from "dayjs";
+import { ServiceLogDetail } from "@/views/components/LogTable/data";
+
+/*global defineProps */
+const props = defineProps({
+  currentLog: { type: Object as PropType<any>, default: () => ({}) },
+});
+const { t } = useI18n();
+const columns = ServiceLogDetail;
+const logTags = computed(() => {
+  if (!props.currentLog.tags) {
+    return [];
+  }
+  return props.currentLog.tags.map((d: { key: string; value: string }) => {
+    return `${d.key} = ${d.value}`;
+  });
+});
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+</script>
+<style lang="scss" scoped>
+.content {
+  max-width: 700px;
+  min-width: 500px;
+  min-height: 500px;
+  border: none;
+  outline: none;
+  color: #3d444f;
+  overflow: auto;
+}
+</style>
--- a/src/views/components/LogTable/LogService.vue
+++ b/src/views/components/LogTable/LogService.vue
@@ -0,0 +1,115 @@
+<!-- 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. -->
+
+<template>
+  <div @click="showSelectSpan" class="log-item">
+    <div v-for="(item, index) in columns" :key="index" :class="item.label">
+      <span v-if="item.label === 'timestamp'">
+        {{ dateFormat(data.timestamp) }}
+      </span>
+      <span v-else-if="item.label === 'tags'">
+        {{ tags }}
+      </span>
+      <router-link
+        v-else-if="item.label === 'traceId' && !noLink"
+        :to="{ name: 'trace', query: { traceid: data[item.label] } }"
+      >
+        <span>{{ data[item.label] }}</span>
+      </router-link>
+      <span v-else>{{ data[item.label] }}</span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import dayjs from "dayjs";
+import { ServiceLogConstants } from "./data";
+/*global defineProps, defineEmits */
+const props = defineProps({
+  data: { type: Array as any, default: () => [] },
+  noLink: { type: Boolean, default: true },
+});
+const emit = defineEmits(["select"]);
+const columns = ServiceLogConstants;
+const tags = computed(() => {
+  if (!props.data.tags) {
+    return "";
+  }
+  return String(props.data.tags.map((d: any) => `${d.key}=${d.value}`));
+});
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+function showSelectSpan() {
+  emit("select", props.data);
+}
+</script>
+<style lang="scss" scoped>
+.log-item {
+  white-space: nowrap;
+  position: relative;
+  cursor: pointer;
+
+  .traceId {
+    width: 390px;
+    color: #448dfe;
+    cursor: pointer;
+
+    span {
+      display: inline-block;
+      width: 100%;
+      line-height: 30px;
+    }
+  }
+
+  .content,
+  .tags {
+    width: 300px;
+  }
+
+  .serviceInstanceName,
+  .serviceName {
+    width: 200px;
+  }
+}
+
+.log-item:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.log-item > div {
+  width: 140px;
+  padding: 0 5px;
+  display: inline-block;
+  border: 1px solid transparent;
+  border-right: 1px dotted silver;
+  overflow: hidden;
+  line-height: 30px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-item .text {
+  width: 100%;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-item > div.method {
+  height: 100%;
+  padding: 3px 8px;
+}
+</style>
--- a/src/views/components/LogTable/data.ts
+++ b/src/views/components/LogTable/data.ts
@@ -0,0 +1,120 @@
+/**
+ * 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 const ServiceLogConstants = [
+  {
+    label: "serviceName",
+    value: "service",
+  },
+  {
+    label: "serviceInstanceName",
+    value: "instance",
+  },
+  {
+    label: "timestamp",
+    value: "time",
+  },
+  {
+    label: "contentType",
+    value: "contentType",
+  },
+  {
+    label: "tags",
+    value: "tags",
+  },
+  {
+    label: "content",
+    value: "content",
+  },
+  {
+    label: "traceId",
+    value: "traceID",
+  },
+];
+export const ServiceLogDetail = [
+  {
+    label: "serviceName",
+    value: "currentService",
+  },
+  {
+    label: "serviceInstanceName",
+    value: "currentInstance",
+  },
+  {
+    label: "timestamp",
+    value: "time",
+  },
+  {
+    label: "contentType",
+    value: "contentType",
+  },
+  {
+    label: "traceId",
+    value: "traceID",
+  },
+  {
+    label: "tags",
+    value: "tags",
+  },
+  {
+    label: "content",
+    value: "content",
+  },
+];
+// The order of columns should be time, service, error, stack, version, url, catalog, and grade.
+export const BrowserLogConstants = [
+  {
+    label: "service",
+    value: "service",
+  },
+  {
+    label: "serviceVersion",
+    value: "serviceVersion",
+  },
+  {
+    label: "errorUrl",
+    value: "errorPage",
+  },
+  {
+    label: "time",
+    value: "time",
+  },
+  {
+    label: "message",
+    value: "message",
+    drag: true,
+    method: 350,
+  },
+  {
+    label: "stack",
+    value: "stack",
+    drag: true,
+    method: 350,
+  },
+  // {
+  //   label: 'pagePath',
+  //   value: 'Page Path',
+  // },
+  {
+    label: "category",
+    value: "category",
+  },
+  {
+    label: "grade",
+    value: "grade",
+  },
+];