feat: associate metrics with trace widget on dashboards (#174)

src/views/dashboard/graphs/Area.vue

@@ -24,7 +24,12 @@ limitations under the License. -->
 <script lang="ts" setup>
 import type { PropType } from "vue";
 import Line from "./Line.vue";
-import { AreaConfig, EventParams } from "@/types/dashboard";
+import {
+  AreaConfig,
+  EventParams,
+  RelatedTrace,
+  Filters,
+} from "@/types/dashboard";
 
 /*global defineProps, defineEmits */
 const emits = defineEmits(["click"]);
@@ -37,15 +42,8 @@ defineProps({
   config: {
     type: Object as PropType<
       AreaConfig & {
-        filters: {
-          sourceId: string;
-          duration: {
-            startTime: string;
-            endTime: string;
-          };
-          isRange: boolean;
-          dataIndex?: number;
-        };
+        filters: Filters;
+        relatedTrace: RelatedTrace;
       } & { id: string }
     >,
     default: () => ({}),

src/views/dashboard/graphs/Bar.vue

@@ -18,7 +18,12 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { computed } from "vue";
 import type { PropType } from "vue";
-import { BarConfig, EventParams } from "@/types/dashboard";
+import {
+  BarConfig,
+  EventParams,
+  RelatedTrace,
+  Filters,
+} from "@/types/dashboard";
 
 /*global defineProps, defineEmits */
 const emits = defineEmits(["click"]);
@@ -32,15 +37,8 @@ const props = defineProps({
   config: {
     type: Object as PropType<
       BarConfig & {
-        filters: {
-          sourceId: string;
-          duration: {
-            startTime: string;
-            endTime: string;
-          };
-          isRange: boolean;
-          dataIndex?: number;
-        };
+        filters: Filters;
+        relatedTrace: RelatedTrace;
       } & { id: string }
     >,
     default: () => ({}),
@@ -107,16 +105,12 @@ function getOption() {
   return {
     color,
     tooltip: {
-      trigger: "axis",
-      zlevel: 1000,
-      z: 60,
-      confine: true,
-      textStyle: {
-        fontSize: 13,
+      trigger: "none",
+      axisPointer: {
+        type: "cross",
         color: "#333",
+        backgroundColor: "rgba(255, 255, 255, 0.8)",
       },
-      enterable: true,
-      extraCssText: "max-height: 300px; overflow: auto; border: none",
     },
     legend: {
       type: "scroll",
@@ -136,6 +130,12 @@ function getOption() {
       bottom: 5,
       containLabel: true,
     },
+    axisPointer: {
+      label: {
+        color: "#333",
+        backgroundColor: "rgba(255, 255, 255, 0.8)",
+      },
+    },
     xAxis: {
       type: "category",
       axisTick: {

src/views/dashboard/graphs/Line.vue

@@ -13,12 +13,22 @@ 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>
-  <Graph :option="option" @select="clickEvent" :filters="config.filters" />
+  <Graph
+    :option="option"
+    @select="clickEvent"
+    :filters="config.filters"
+    :relatedTrace="config.relatedTrace"
+  />
 </template>
 <script lang="ts" setup>
 import { computed } from "vue";
 import type { PropType } from "vue";
-import { LineConfig, EventParams } from "@/types/dashboard";
+import {
+  LineConfig,
+  EventParams,
+  RelatedTrace,
+  Filters,
+} from "@/types/dashboard";
 
 /*global defineProps, defineEmits */
 const emits = defineEmits(["click"]);
@@ -32,15 +42,8 @@ const props = defineProps({
   config: {
     type: Object as PropType<
       LineConfig & {
-        filters: {
-          sourceId: string;
-          duration: {
-            startTime: string;
-            endTime: string;
-          };
-          isRange: boolean;
-          dataIndex?: number;
-        };
+        filters: Filters;
+        relatedTrace: RelatedTrace;
       } & { id: string }
     >,
     default: () => ({
@@ -115,13 +118,19 @@ function getOption() {
       break;
   }
   const tooltip = {
-    trigger: "axis",
-    textStyle: {
-      fontSize: 12,
+    trigger: "none",
+    axisPointer: {
+      type: "cross",
       color: "#333",
+      backgroundColor: "rgba(255, 255, 255, 0.8)",
     },
-    enterable: true,
-    confine: true,
+    // trigger: "axis",
+    // textStyle: {
+    //   fontSize: 12,
+    //   color: "#333",
+    // },
+    // enterable: true,
+    // confine: true,
     extraCssText: "max-height: 300px; overflow: auto; border: none;",
   };
   const tips = {
@@ -151,6 +160,12 @@ function getOption() {
         color: props.theme === "dark" ? "#fff" : "#333",
       },
     },
+    axisPointer: {
+      label: {
+        color: "#333",
+        backgroundColor: "rgba(255, 255, 255, 0.8)",
+      },
+    },
     grid: {
       top: keys.length === 1 ? 15 : 55,
       left: 0,

src/views/dashboard/graphs/TopList.vue

@@ -23,14 +23,19 @@ limitations under the License. -->
             {{ i.name }}
           </span>
         </div>
-        <div class="copy">
-          <Icon
-            iconName="review-list"
-            size="middle"
-            class="cp"
-            @click="handleClick(i.name)"
-          />
-        </div>
+        <el-popover placement="bottom" trigger="click">
+          <template #reference>
+            <div class="operation-icon cp ml-10">
+              <Icon iconName="ellipsis_v" size="middle" />
+            </div>
+          </template>
+          <div class="operation" @click="handleClick(i.name)">
+            <span>{{ t("copy") }}</span>
+          </div>
+          <div class="operation" @click="viewTrace(i)">
+            <span>{{ t("viewTrace") }}</span>
+          </div>
+        </el-popover>
       </div>
       <el-progress
         :stroke-width="6"
@@ -39,28 +44,45 @@ limitations under the License. -->
         :show-text="false"
       />
     </div>
+    <el-drawer
+      v-model="showTrace"
+      size="100%"
+      :destroy-on-close="true"
+      :before-close="() => (showTrace = false)"
+      :append-to-body="true"
+    >
+      <Trace :data="traceOptions" />
+    </el-drawer>
   </div>
   <div class="center no-data" v-else>No Data</div>
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
-import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { computed, ref } from "vue";
 import copy from "@/utils/copy";
 import { TextColors } from "@/views/dashboard/data";
+import Trace from "@/views/dashboard/related/trace/Index.vue";
+import { QueryOrders, Status } from "../data";
 /*global defineProps */
 const props = defineProps({
   data: {
     type: Object as PropType<{
-      [key: string]: { name: string; value: number; traceIds: string[] }[];
+      [key: string]: { name: string; value: number; id: string }[];
     }>,
     default: () => ({}),
   },
   config: {
-    type: Object as PropType<{ color: string }>,
+    type: Object as PropType<{ color: string; metrics: string[] }>,
     default: () => ({ color: "purple" }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
 });
+const { t } = useI18n();
+const showTrace = ref<boolean>(false);
+const traceOptions = ref<{ type: string; filters?: unknown }>({
+  type: "Trace",
+});
 const key = computed(() => Object.keys(props.data)[0] || "");
 const available = computed(
   () =>
@@ -78,6 +100,21 @@ const maxValue = computed(() => {
 function handleClick(i: string) {
   copy(i);
 }
+function viewTrace(item: { name: string; id: string; value: unknown }) {
+  const filters = {
+    ...item,
+    queryOrder: QueryOrders[1].value,
+    status: Status[2].value,
+    metricValue: [
+      { label: props.config.metrics[0], data: item.value, value: item.name },
+    ],
+  };
+  traceOptions.value = {
+    ...traceOptions.value,
+    filters,
+  };
+  showTrace.value = true;
+}
 </script>
 <style lang="scss" scoped>
 .top-list {
@@ -109,10 +146,6 @@ function handleClick(i: string) {
   text-overflow: ellipsis;
 }
 
-.copy {
-  width: 30px;
-}
-
 .calls {
   font-size: 12px;
   padding: 0 5px;
@@ -141,4 +174,22 @@ function handleClick(i: string) {
   -webkit-box-pack: center;
   -webkit-box-align: center;
 }
+
+.operation-icon {
+  color: #333;
+}
+
+.operation {
+  padding: 5px 0;
+  color: #333;
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+  font-size: 12px;
+
+  &:hover {
+    color: #409eff;
+    background-color: #eee;
+  }
+}
 </style>