feat: support the process dashboard and create the time range text widget (#138)

src/views/dashboard/related/components/D3Graph/nodeElement.ts

@@ -18,7 +18,7 @@ import icons from "@/assets/img/icons";
 import { Node } from "@/types/topology";
 
 icons["KAFKA-CONSUMER"] = icons.KAFKA;
-export default (d3: any, graph: any, funcs: any, tip: any, legend: any) => {
+export default (d3: any, graph: any, funcs: any, tip: any, legend?: any) => {
   const nodeEnter = graph
     .append("g")
     .call(

src/views/dashboard/related/components/TaskDetails.vue

@@ -0,0 +1,82 @@
+<!-- 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="profile-detail flex-v">
+    <div>
+      <h5 class="mb-10">{{ t("task") }}.</h5>
+      <div class="mb-10 clear item">
+        <span class="g-sm-4 grey">{{ t("taskId") }}:</span>
+        <span class="g-sm-8 wba">
+          {{ details.taskId }}
+        </span>
+      </div>
+      <div class="mb-10 clear item">
+        <span class="g-sm-4 grey">{{ t("service") }}:</span>
+        <span class="g-sm-8 wba">
+          {{ details.serviceName }}
+        </span>
+      </div>
+      <div class="mb-10 clear item">
+        <span class="g-sm-4 grey">{{ t("labels") }}:</span>
+        <span class="g-sm-8 wba">
+          {{ details.processLabels.join(";") }}
+        </span>
+      </div>
+      <div class="mb-10 clear item">
+        <span class="g-sm-4 grey">{{ t("monitorTime") }}:</span>
+        <span class="g-sm-8 wba">
+          {{ dateFormat(details.taskStartTime) }}
+        </span>
+      </div>
+      <div class="mb-10 clear item">
+        <span class="g-sm-4 grey">{{ t("monitorDuration") }}:</span>
+        <span class="g-sm-8 wba">
+          {{ details.fixedTriggerDuration / 60 }} min
+        </span>
+      </div>
+      <div class="mb-10 clear item">
+        <span class="g-sm-4 grey">{{ t("triggerType") }}:</span>
+        <span class="g-sm-8 wba">{{ details.triggerType }}</span>
+      </div>
+      <div class="mb-10 clear item">
+        <span class="g-sm-4 grey">{{ t("targetType") }}:</span>
+        <span class="g-sm-8 wba">{{ details.targetType }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import type { PropType } from "vue";
+import dayjs from "dayjs";
+import { useI18n } from "vue-i18n";
+import { EBPFTaskList } from "@/types/ebpf";
+
+/*global defineProps */
+defineProps({
+  details: {
+    type: Object as PropType<EBPFTaskList>,
+    default: () => ({}),
+  },
+});
+const { t } = useI18n();
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+</script>
+<style lang="scss" scoped>
+.item span {
+  height: 21px;
+}
+</style>

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

@@ -152,7 +152,6 @@ const keywordsOfContent = ref<string[]>([]);
 const excludingKeywordsOfContent = ref<string[]>([]);
 const contentStr = ref<string>("");
 const excludingContentStr = ref<string>("");
-// const limit = ref<number>(20);
 const state = reactive<any>({
   instance: { value: "", label: "" },
   container: { value: "", label: "" },

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

@@ -57,7 +57,10 @@ if (props.needQuery) {
 async function searchTasks() {
   const serviceId =
     (selectorStore.currentService && selectorStore.currentService.id) || "";
-  const res = await ebpfStore.getTaskList(serviceId);
+  const res = await ebpfStore.getTaskList({
+    serviceId,
+    targets: ["ON_CPU", "OFF_CPU"],
+  });
 
   if (res.errors) {
     ElMessage.error(res.errors);

src/views/dashboard/related/ebpf/components/EBPFSchedules.vue

@@ -79,7 +79,7 @@ limitations under the License. -->
           />
           <el-table-column width="300" label="Attributes">
             <template #default="scope">
-              {{ scope.row.attributes.map((d: {name: string, value: string}) => `${d.name}=${d.value}`).join("; ") }}
+              {{ attributes(scope.row.attributes) }}
             </template>
           </el-table-column>
         </el-table>
@@ -125,6 +125,11 @@ const aggregateType = ref<string>(AggregateTypes[0].value);
 const duration = ref<string[]>([]);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
+const attributes = (attr: { name: string; value: string }[]) => {
+  return attr
+    .map((d: { name: string; value: string }) => `${d.name}=${d.value}`)
+    .join("; ");
+};
 
 function changeLabels(opt: any[]) {
   const arr = opt.map((d) => d.value);

src/views/dashboard/related/ebpf/components/TaskList.vue

@@ -30,7 +30,7 @@ limitations under the License. -->
             <td
               class="profile-td"
               :class="{
-                selected: selectedTask.taskId === i.taskId,
+                selected: ebpfStore.selectedTask.taskId === i.taskId,
               }"
             >
               <div class="ell">
@@ -67,66 +67,25 @@ limitations under the License. -->
     fullscreen
     @closed="viewDetail = false"
   >
-    <div class="profile-detail flex-v">
-      <div>
-        <h5 class="mb-10">{{ t("task") }}.</h5>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("taskId") }}:</span>
-          <span class="g-sm-8 wba">
-            {{ selectedTask.taskId }}
-          </span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("service") }}:</span>
-          <span class="g-sm-8 wba">{{ selectedTask.serviceName }}</span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("labels") }}:</span>
-          <span class="g-sm-8 wba">
-            {{ selectedTask.processLabels.join(";") }}
-          </span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("monitorTime") }}:</span>
-          <span class="g-sm-8 wba">
-            {{ dateFormat(selectedTask.taskStartTime) }}
-          </span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("monitorDuration") }}:</span>
-          <span class="g-sm-8 wba">
-            {{ selectedTask.fixedTriggerDuration / 60 }} min
-          </span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("triggerType") }}:</span>
-          <span class="g-sm-8 wba">{{ selectedTask.triggerType }}</span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("targetType") }}:</span>
-          <span class="g-sm-8 wba">{{ selectedTask.targetType }}</span>
-        </div>
-      </div>
-    </div>
+    <TaskDetails :details="ebpfStore.selectedTask" />
   </el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
 import { useEbpfStore } from "@/store/modules/ebpf";
 import { EBPFTaskList } from "@/types/ebpf";
 import { ElMessage } from "element-plus";
+import TaskDetails from "../../components/TaskDetails.vue";
 
 const { t } = useI18n();
 const ebpfStore = useEbpfStore();
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
-const selectedTask = ref<EBPFTaskList | Record<string, never>>({});
 const viewDetail = ref<boolean>(false);
 
 async function changeTask(item: EBPFTaskList) {
-  selectedTask.value = item;
   ebpfStore.setSelectedTask(item);
   const res = await ebpfStore.getEBPFSchedules({
     taskId: item.taskId,
@@ -135,13 +94,6 @@ async function changeTask(item: EBPFTaskList) {
     ElMessage.error(res.errors);
   }
 }
-watch(
-  () => ebpfStore.taskList,
-  () => {
-    selectedTask.value = ebpfStore.taskList[0] || {};
-    ebpfStore.setSelectedTask(selectedTask.value);
-  }
-);
 </script>
 <style lang="scss" scoped>
 .profile-task-list {

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

@@ -146,10 +146,10 @@ async function queryEvents() {
   let endpoint = state.endpoint.value,
     instance = state.instance.value;
   if (dashboardStore.entity === EntityType[2].value) {
-    endpoint = selectorStore.currentPod.id;
+    endpoint = selectorStore.currentPod && selectorStore.currentPod.id;
   }
   if (dashboardStore.entity === EntityType[3].value) {
-    instance = selectorStore.currentPod.id;
+    instance = selectorStore.currentPod && selectorStore.currentPod.id;
   }
   if (!selectorStore.currentService) {
     return;

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

@@ -145,7 +145,7 @@ import { ErrorCategory } from "./data";
 import { LayoutConfig } from "@/types/dashboard";
 import { DurationTime } from "@/types/app";
 
-/*global  defineProps, Recordable */
+/*global defineProps, Recordable */
 const props = defineProps({
   needQuery: { type: Boolean, default: true },
   data: {

src/views/dashboard/related/topology/components/Graph.vue

@@ -94,10 +94,17 @@ import {
 import { useI18n } from "vue-i18n";
 import * as d3 from "d3";
 import d3tip from "d3-tip";
-import zoom from "../utils/zoom";
-import { simulationInit, simulationSkip } from "../utils/simulation";
-import nodeElement from "../utils/nodeElement";
-import { linkElement, anchorElement, arrowMarker } from "../utils/linkElement";
+import zoom from "../../components/D3Graph/zoom";
+import {
+  simulationInit,
+  simulationSkip,
+} from "../../components/D3Graph/simulation";
+import nodeElement from "../../components/D3Graph/nodeElement";
+import {
+  linkElement,
+  anchorElement,
+  arrowMarker,
+} from "../../components/D3Graph/linkElement";
 import { Node, Call } from "@/types/topology";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useTopologyStore } from "@/store/modules/topology";