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

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

@@ -0,0 +1,60 @@
+/**
+ * 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 linkElement = (graph: any) => {
+  const linkEnter = graph
+    .append("path")
+    .attr("class", "topo-line")
+    .attr("marker-end", "url(#arrow)")
+    .attr("stroke", "#217EF25f");
+  return linkEnter;
+};
+export const anchorElement = (graph: any, funcs: any, tip: any) => {
+  const linkEnter = graph
+    .append("circle")
+    .attr("class", "topo-line-anchor")
+    .attr("r", 5)
+    .attr("fill", "#217EF25f")
+    .on("mouseover", function (event: unknown, d: unknown) {
+      tip.html(funcs.tipHtml).show(d, this);
+    })
+    .on("mouseout", function () {
+      tip.hide(this);
+    })
+    .on("click", (event: unknown, d: unknown) => {
+      funcs.handleLinkClick(event, d);
+    });
+  return linkEnter;
+};
+export const arrowMarker = (graph: any) => {
+  const defs = graph.append("defs");
+  const arrow = defs
+    .append("marker")
+    .attr("id", "arrow")
+    .attr("class", "topo-line-arrow")
+    .attr("markerUnits", "strokeWidth")
+    .attr("markerWidth", "6")
+    .attr("markerHeight", "6")
+    .attr("viewBox", "0 0 12 12")
+    .attr("refX", "5")
+    .attr("refY", "6")
+    .attr("orient", "auto");
+  const arrowPath = "M2,2 L10,6 L2,10 L6,6 L2,2";
+
+  arrow.append("path").attr("d", arrowPath).attr("fill", "#217EF25f");
+  return arrow;
+};

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

@@ -0,0 +1,95 @@
+/**
+ * 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 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) => {
+  const nodeEnter = graph
+    .append("g")
+    .call(
+      d3
+        .drag()
+        .on("start", funcs.dragstart)
+        .on("drag", funcs.dragged)
+        .on("end", funcs.dragended)
+    )
+    .on("mouseover", function (event: any, d: Node) {
+      tip.html(funcs.tipHtml).show(d, this);
+    })
+    .on("mouseout", function () {
+      tip.hide(this);
+    })
+    .on("click", (event: any, d: Node | any) => {
+      event.stopPropagation();
+      event.preventDefault();
+      funcs.handleNodeClick(d);
+    });
+  nodeEnter
+    .append("image")
+    .attr("width", 49)
+    .attr("height", 49)
+    .attr("x", 2)
+    .attr("y", 10)
+    .attr("style", "cursor: move;")
+    .attr("xlink:href", (d: { [key: string]: number }) => {
+      if (!legend) {
+        return icons.CUBE;
+      }
+      if (!legend.length) {
+        return icons.CUBE;
+      }
+      let c = true;
+      for (const l of legend) {
+        if (l.condition === "<") {
+          c = c && d[l.name] < Number(l.value);
+        } else {
+          c = c && d[l.name] > Number(l.value);
+        }
+      }
+      return c && d.isReal ? icons.CUBEERROR : icons.CUBE;
+    });
+  nodeEnter
+    .append("image")
+    .attr("width", 32)
+    .attr("height", 32)
+    .attr("x", 6)
+    .attr("y", -10)
+    .attr("style", "opacity: 0.5;")
+    .attr("xlink:href", icons.LOCAL);
+  nodeEnter
+    .append("image")
+    .attr("width", 18)
+    .attr("height", 18)
+    .attr("x", 13)
+    .attr("y", -7)
+    .attr("xlink:href", (d: { type: string }) =>
+      !d.type || d.type === "N/A"
+        ? icons.UNDEFINED
+        : icons[d.type.toUpperCase().replace("-", "")]
+    );
+  nodeEnter
+    .append("text")
+    .attr("class", "topo-text")
+    .attr("text-anchor", "middle")
+    .attr("x", 22)
+    .attr("y", 70)
+    .text((d: { name: string }) =>
+      d.name.length > 20 ? `${d.name.substring(0, 20)}...` : d.name
+    );
+  return nodeEnter;
+};

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

@@ -0,0 +1,56 @@
+/**
+ * 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 simulationInit = (
+  d3: any,
+  dataNodes: any,
+  dataLinks: any,
+  ticked: any
+) => {
+  const simulation = d3
+    .forceSimulation(dataNodes)
+    .force(
+      "collide",
+      d3.forceCollide().radius(() => 60)
+    )
+    .force("yPos", d3.forceY().strength(1))
+    .force("xPos", d3.forceX().strength(1))
+    .force("charge", d3.forceManyBody().strength(-520))
+    .force(
+      "link",
+      d3.forceLink(dataLinks).id((d: { id: string }) => d.id)
+    )
+    .force(
+      "center",
+      d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2 - 20)
+    )
+    .on("tick", ticked)
+    .stop();
+  simulationSkip(d3, simulation, ticked);
+  return simulation;
+};
+
+export const simulationSkip = (d3: any, simulation: any, ticked: any) => {
+  d3.timeout(() => {
+    const n = Math.ceil(
+      Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())
+    );
+    for (let i = 0; i < n; i += 1) {
+      simulation.tick();
+      ticked();
+    }
+  });
+};

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

@@ -0,0 +1,28 @@
+/**
+ * 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 (d3: any, graph: any) =>
+  d3
+    .zoom()
+    .scaleExtent([0.3, 10])
+    .on("zoom", (d: any) => {
+      graph
+        .attr("transform", d3.zoomTransform(graph.node()))
+        .attr(
+          `translate(${d.transform.x},${d.transform.y})scale(${d.transform.k})`
+        );
+    });

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>