feat: add trace filters

src/assets/icons/help.svg

@@ -0,0 +1,17 @@
+<!-- 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 version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path d="M15.047 11.25q0.938-0.938 0.938-2.25 0-1.641-1.172-2.813t-2.813-1.172-2.813 1.172-1.172 2.813h1.969q0-0.797 0.609-1.406t1.406-0.609 1.406 0.609 0.609 1.406-0.609 1.406l-1.219 1.266q-1.172 1.266-1.172 2.813v0.516h1.969q0-1.547 1.172-2.813zM12.984 18.984v-1.969h-1.969v1.969h1.969zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"></path>
+</svg>

src/graphql/fragments/trace.ts

@@ -0,0 +1,76 @@
+/**
+ * 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 Traces = {
+  variable: "$condition: TraceQueryCondition",
+  query: `
+  data: queryBasicTraces(condition: $condition) {
+    traces {
+      key: segmentId
+      endpointNames
+      duration
+      start
+      isError
+      traceIds
+    }
+    total
+  }`,
+};
+
+/**
+ * @param { traceId } { string }
+ */
+export const TraceSpans = {
+  variable: "$traceId: ID!",
+  query: `
+  trace: queryTrace(traceId: $traceId) {
+    spans {
+      traceId
+      segmentId
+      spanId
+      parentSpanId
+      refs {
+        traceId
+        parentSegmentId
+        parentSpanId
+        type
+      }
+      serviceCode
+      serviceInstanceName
+      startTime
+      endTime
+      endpointName
+      type
+      peer
+      component
+      isError
+      layer
+      tags {
+        key
+        value
+      }
+      logs {
+        time
+        data {
+          key
+          value
+        }
+      }
+    }
+  }
+  `,
+};

src/graphql/index.ts

@@ -20,12 +20,14 @@ import * as app from "./query/app";
 import * as selector from "./query/selector";
 import * as dashboard from "./query/dashboard";
 import * as topology from "./query/topology";
+import * as trace from "./query/trace";
 
 const query: { [key: string]: string } = {
   ...app,
   ...selector,
   ...dashboard,
   ...topology,
+  ...trace,
 };
 class Graphql {
   private queryData = "";

src/graphql/query/trace.ts

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+import { Traces, TraceSpans } from "../fragments/trace";
+
+export const queryTraces = `query queryTraces(${Traces.variable}) {${Traces.query}}`;
+
+export const queryTrace = `query queryTrace(${TraceSpans.variable}) {${TraceSpans.query}}`;

src/store/modules/trace.ts

@@ -0,0 +1,94 @@
+/**
+ * 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.
+ */
+import { defineStore } from "pinia";
+import { Duration } from "@/types/app";
+import { Instance, Endpoint } from "@/types/selector";
+import { Trace, Span } from "@/types/trace";
+import { store } from "@/store";
+import graphql from "@/graphql";
+import { AxiosResponse } from "axios";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { useSelectorStore } from "@/store/modules/selectors";
+
+interface TraceState {
+  instances: Instance[];
+  endpoints: Endpoint[];
+  traceList: Trace[];
+  traceTotal: number;
+  traceSpans: Span[];
+  currentTrace: Nullable<Trace>;
+  // traceSpanLogs: any[];
+  // traceSpanLogsTotal: number;
+  // traceListErrors: string;
+  // traceSpanErrors: string;
+  // traceSpanLogErrors: string;
+  durationTime: Duration;
+  selectorStore: any;
+}
+
+export const traceStore = defineStore({
+  id: "trace",
+  state: (): TraceState => ({
+    instances: [],
+    endpoints: [],
+    traceList: [],
+    traceSpans: [],
+    traceTotal: 0,
+    currentTrace: null,
+    durationTime: useAppStoreWithOut().durationTime,
+    selectorStore: useSelectorStore(),
+  }),
+  actions: {
+    async getInstances() {
+      const res: AxiosResponse = await graphql
+        .query("queryServiceInstance")
+        .params({ serviceId: this.selectorStore.currentService });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.instances = res.data.data.pods || [];
+      return res.data;
+    },
+    async getEndpoints() {
+      const res: AxiosResponse = await graphql.query("queryEndpoints").params({
+        serviceId: this.selectorStore.currentService,
+        duration: this.durationTime,
+        keyword: "",
+      });
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.endpoints = res.data.data.pods || [];
+      return res.data;
+    },
+    async getTraces(condition: any) {
+      const res: AxiosResponse = await graphql
+        .query("queryTraces")
+        .params({ condition });
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.traceList = res.data.data.data.traces;
+      this.traceTotal = res.data.data.data.total;
+    },
+  },
+});
+
+export function useTraceStore(): any {
+  return traceStore(store);
+}

src/types/trace.d.ts

@@ -0,0 +1,79 @@
+/**
+ * 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 interface Trace {
+  duration: number;
+  isError: boolean;
+  key: string;
+  operationNames: string[];
+  start: string;
+  traceIds: string[];
+}
+
+export interface Span {
+  endpointName: string;
+  serviceCode: string;
+  parentSpanId: number;
+  segmentId: string;
+  label?: string;
+  layer: string;
+  spanId: number;
+  traceId: string;
+  type: string;
+  peer: string;
+  component: string;
+  isError: boolean;
+  isBroken?: boolean;
+  refs: Array<Ref>;
+  startTime: number;
+  endTime: number;
+  dur?: number;
+  children?: Span[];
+  tags?: Array<Map<string, string>>;
+  logs?: log[];
+}
+
+export interface log {
+  time: number;
+  data: Map<string, string>;
+}
+
+export interface Ref {
+  traceId: string;
+  parentSegmentId: string;
+  parentSpanId: number;
+  type: string;
+}
+
+export interface StatisticsSpan {
+  groupRef: StatisticsGroupRef;
+  maxTime: number;
+  minTime: number;
+  sumTime: number;
+  avgTime: number;
+  count: number;
+}
+
+export interface StatisticsGroupRef {
+  endpointName: string;
+  type: string;
+}
+
+export class TraceTreeRef {
+  segmentMap: Map<string, Span>;
+  segmentIdGroup: string[];
+}

src/views/components/ConditionTags.vue

@@ -0,0 +1,131 @@
+<!-- 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>
+        <Icon iconName="help" class="mr-5" />
+        <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(event: KeyboardEvent) {
+  if (event.keyCode !== 13 || !this.tags) {
+    return;
+  }
+  tagsList.value.push(tags.value);
+  tags.value = "";
+  updateTags();
+}
+function updateTags() {
+  const tagsMap = tagsList.value.map((item: string) => {
+    const label = item.substring(0, item.indexOf("="));
+    return {
+      label,
+      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;
+  color: #eee;
+  font-size: 12px;
+  margin: 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;
+  }
+}
+</style>

src/views/dashboard/configuration/Widget.vue

@@ -76,7 +76,7 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { Option } from "@/types/app";
 import graphs from "../graphs";
-import configs from "./graph-styles";
+import configs from "./widget/graph-styles";
 import WidgetOptions from "./components/WidgetOptions.vue";
 import StandardOptions from "./widget/StandardOptions.vue";
 import MetricOptions from "./widget/MetricOptions.vue";

src/views/dashboard/controls/Trace.vue

@@ -13,6 +13,32 @@ 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="header">trace</div>
+  <div class="header">
-  <div class="content">content</div>
+    <Filter />
+  </div>
+  <div class="content">xxx</div>
 </template>
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import Filter from "../related/trace/Filter.vue";
+
+/*global defineProps */
+const props = defineProps({
+  data: {
+    type: Object as PropType<any>,
+    default: () => ({ graph: {} }),
+  },
+  activeIndex: { type: String, default: "" },
+});
+</script>
+<style lang="scss" scoped>
+.header {
+  padding: 10px;
+  font-size: 12px;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.content {
+  padding: 10px;
+}
+</style>

src/views/dashboard/data.ts

@@ -203,3 +203,8 @@ export const Colors: any = {
   black: "#000",
   orange: "#E6A23C",
 };
+export const Status = [
+  { label: "All", value: "ALL" },
+  { label: "Success", value: "SUCCESS" },
+  { label: "Error", value: "ERROR" },
+];

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

@@ -0,0 +1,130 @@
+<!-- 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 row">
+    <div class="mr-5">
+      <span class="grey mr-5">{{ t("instance") }}:</span>
+      <Selector
+        size="small"
+        v-model="state.instance"
+        :options="traceStore.instances"
+        placeholder="Select a instance"
+        @change="changeField('instance', $event)"
+      />
+    </div>
+    <div class="mr-5">
+      <span class="grey mr-5">{{ t("endpoint") }}:</span>
+      <Selector
+        size="small"
+        v-model="state.endpoint"
+        :options="traceStore.endpoints"
+        placeholder="Select a endpoint"
+        @change="changeField('endpoint', $event)"
+      />
+    </div>
+    <div class="mr-5">
+      <span class="grey mr-5">{{ t("status") }}:</span>
+      <Selector
+        size="small"
+        v-model="state.status"
+        :options="Status"
+        placeholder="Select a status"
+        @change="changeField('status', $event)"
+      />
+    </div>
+    <div class="mr-5">
+      <span class="grey mr-5">{{ t("traceID") }}:</span>
+      <el-input v-model="traceId" class="traceId" />
+    </div>
+    <div class="mr-5">
+      <span class="sm b grey mr-5">{{ t("duration") }}:</span>
+      <el-input class="inputs mr-5" v-model="minTraceDuration" />
+      <span class="grey mr-5">-</span>
+      <el-input class="inputs" v-model="maxTraceDuration" />
+    </div>
+  </div>
+  <div class="flex-h">
+    <!-- <div class="mr-5">
+      <span class="grey mr-5">{{ t("timeRange") }}:</span>
+      <TimePicker
+        :value="dateTime"
+        position="bottom"
+        format="YYYY-MM-DD HH:mm"
+        @input="changeTimeRange"
+      />
+    </div> -->
+    <ConditionTags :type="'TRACE'" @update="updateTags" />
+    <el-button class="search-btn" size="small" type="primary">
+      {{ t("search") }}
+    </el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import { useI18n } from "vue-i18n";
+import { Option } from "@/types/app";
+import { Status } from "../../data";
+import { useTraceStore } from "@/store/modules/trace";
+import ConditionTags from "@/views/components/ConditionTags.vue";
+// import type { PropType } from "vue";
+
+const { t } = useI18n();
+// const appStore = useAppStoreWithOut();
+const traceStore = useTraceStore();
+const traceId = ref<string>("");
+const minTraceDuration = ref<string>("");
+const maxTraceDuration = ref<string>("");
+const tagsList = ref<string[]>([]);
+const tagsMap = ref<Option[]>([]);
+const state = reactive<any>({
+  status: "",
+  instance: "",
+  endpoint: "",
+});
+
+// const dateTime = computed(() => [
+//   appStore.durationRow.start,
+//   appStore.durationRow.end,
+// ]);
+traceStore.getTraces({
+  queryOrder: "DES",
+  paging: { pageNum: 1, pageSize: 15, needTotal: true },
+});
+function changeField(type: string, opt: any[]) {
+  state[type] = opt[0].value;
+}
+function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) {
+  tagsList.value = data.tagsList;
+  tagsMap.value = data.tagsMap;
+}
+</script>
+<style lang="scss" scoped>
+.inputs {
+  width: 120px;
+}
+
+.row {
+  margin-bottom: 5px;
+}
+
+.traceId {
+  width: 270px;
+}
+
+.search-btn {
+  margin-left: 50px;
+  cursor: pointer;
+}
+</style>