feat: Implement creating tasks UI for network profiling widget (#193)

2025-10-15 12:49:17 +00:00 · 2022-11-28 17:57:23 +08:00
parent 23e9742946
commit d8f91bbdf3
10 changed files with 344 additions and 34 deletions
--- a/src/views/dashboard/related/network-profiling/components/NewConditions.vue
+++ b/src/views/dashboard/related/network-profiling/components/NewConditions.vue
@@ -0,0 +1,96 @@
+<!-- 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-task">
+    <div>
+      <div class="label">URI Regex</div>
+      <el-input size="small" class="profile-input" v-model="states.uriRegex" />
+    </div>
+    <div>
+      <div class="label">{{ t("minDuration") }} (ms)</div>
+      <el-input
+        size="small"
+        class="profile-input"
+        :min="0"
+        v-model="states.minDuration"
+        type="number"
+      />
+    </div>
+    <div>
+      <div class="label">{{ t("when4xx") }}</div>
+      <Radio
+        class="mb-5"
+        :value="states.when4xx"
+        :options="InitTaskField.Whenxx"
+        @change="changeWhen4xx"
+      />
+    </div>
+    <div>
+      <div class="label">{{ t("when5xx") }}</div>
+      <Radio
+        class="mb-5"
+        :value="states.when5xx"
+        :options="InitTaskField.Whenxx"
+        @change="changeWhen5xx"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { defineProps, reactive } from "vue";
+import { useI18n } from "vue-i18n";
+import type { PropType } from "vue";
+import { InitTaskField } from "./data";
+import { NetworkProfilingRequest } from "@/types/ebpf";
+
+/* global defineEmits */
+const emits = defineEmits(["change"]);
+const props = defineProps({
+  condition: {
+    type: Object as PropType<NetworkProfilingRequest>,
+    default: () => ({ children: [] }),
+  },
+  key: {
+    type: Number,
+    default: () => 0,
+  },
+});
+const { t } = useI18n();
+const states = reactive<NetworkProfilingRequest>(props.condition);
+
+function changeWhen5xx(value: string) {
+  states.when5xx = value;
+  emits("change", states, props.key);
+}
+function changeWhen4xx(value: string) {
+  states.when4xx = value;
+  emits("change", states, props.key);
+}
+</script>
+<style lang="scss" scoped>
+.date {
+  font-size: 12px;
+}
+
+.label {
+  margin-top: 10px;
+  font-size: 14px;
+}
+
+.profile-input {
+  width: 300px;
+}
+</style>
--- a/src/views/dashboard/related/network-profiling/components/NewTask.vue
+++ b/src/views/dashboard/related/network-profiling/components/NewTask.vue
@@ -0,0 +1,139 @@
+<!-- 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-task">
+    <el-collapse v-model="activeNames">
+      <el-collapse-item
+        v-for="(item, index) in conditionsList"
+        :key="index"
+        :name="index"
+      >
+        <template #title>
+          <div>
+            <span class="title">{{ `Rule - ${index + 1}` }}</span>
+            <Icon
+              class="mr-5 cp"
+              iconName="remove_circle_outline"
+              size="middle"
+              v-show="conditionsList.length !== 1"
+              @click="removeConditions($event, index)"
+            />
+            <Icon
+              class="cp"
+              v-show="index === conditionsList.length - 1"
+              iconName="add_circle_outlinecontrol_point"
+              size="middle"
+              @click="createConditions"
+            />
+          </div>
+        </template>
+        <NewCondition
+          :name="index"
+          :condition="item"
+          :key="index"
+          @change="changeConfig"
+        />
+      </el-collapse-item>
+    </el-collapse>
+    <div>
+      <el-button @click="createTask" type="primary" class="create-task-btn">
+        {{ t("createTask") }}
+      </el-button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { InitTaskField } from "./data";
+import NewCondition from "./NewConditions.vue";
+import { NetworkProfilingRequest } from "@/types/ebpf";
+
+/* global defineEmits */
+const emits = defineEmits(["create"]);
+const { t } = useI18n();
+const activeNames = ref([0]);
+const conditionsList = ref<NetworkProfilingRequest[]>([
+  {
+    uriRegex: "",
+    when4xx: InitTaskField.Whenxx[0].value,
+    when5xx: InitTaskField.Whenxx[1].value,
+    minDuration: NaN,
+  },
+]);
+
+function changeConfig(
+  params: { [key: string]: number | string },
+  index: number
+) {
+  const key: string = Object.keys(params)[0];
+  (conditionsList.value[index] as any)[key] = params[key];
+}
+
+function createTask() {
+  const list = conditionsList.value.map((d: NetworkProfilingRequest) => {
+    return {
+      uriRegex: d.uriRegex || undefined,
+      when4xx: d.when4xx === InitTaskField.Whenxx[0].value ? true : false,
+      when5xx: d.when5xx === InitTaskField.Whenxx[0].value ? true : false,
+      minDuration: isNaN(Number(d.minDuration))
+        ? undefined
+        : Number(d.minDuration),
+      settings: {
+        requireCompleteRequest: true,
+        requireCompleteResponse: true,
+      },
+    };
+  });
+  emits("create", list);
+}
+
+function createConditions(e: any) {
+  e.stopPropagation();
+  conditionsList.value.push({
+    uriRegex: "",
+    when4xx: InitTaskField.Whenxx[0].value,
+    when5xx: InitTaskField.Whenxx[1].value,
+    minDuration: NaN,
+  });
+  activeNames.value = [conditionsList.value.length - 1];
+}
+
+function removeConditions(e: any, key: number) {
+  e.stopPropagation();
+  if (conditionsList.value.length === 1) {
+    return;
+  }
+  conditionsList.value = conditionsList.value.filter(
+    (_, index: number) => index !== key
+  );
+}
+</script>
+<style lang="scss" scoped>
+.profile-task {
+  width: 100%;
+}
+
+.create-task-btn {
+  width: 300px;
+  margin-top: 50px;
+}
+
+.title {
+  display: inline-block;
+  margin-right: 5px;
+}
+</style>
--- a/src/views/dashboard/related/network-profiling/components/Tasks.vue
+++ b/src/views/dashboard/related/network-profiling/components/Tasks.vue
@@ -17,24 +17,13 @@ limitations under the License. -->
    <div class="profile-task-wrapper flex-v">
      <div class="profile-t-tool">
        <span>{{ t("taskList") }}</span>
-        <span v-if="inProcess" class="new-task cp" @click="createTask">
+        <span class="new-task cp" @click="createTask">
          <Icon
-            :style="{ color: '#ccc' }"
+            :style="{ color: inProcess ? '#ccc' : '#000' }"
            iconName="library_add"
            size="middle"
          />
        </span>
-        <el-popconfirm
-          title="Are you sure to create a task?"
-          @confirm="createTask"
-          v-else
-        >
-          <template #reference>
-            <span class="new-task cp">
-              <Icon iconName="library_add" size="middle" />
-            </span>
-          </template>
-        </el-popconfirm>
      </div>
      <div class="profile-t-wrapper">
        <div
@@ -87,6 +76,15 @@ limitations under the License. -->
  >
    <TaskDetails :details="networkProfilingStore.selectedNetworkTask" />
  </el-dialog>
+  <el-dialog
+    v-model="newTask"
+    :title="t('taskTitle')"
+    :destroy-on-close="true"
+    fullscreen
+    @closed="newTask = false"
+  >
+    <NewTask @create="saveNewTask" />
+  </el-dialog>
 </template>
 <script lang="ts" setup>
 import { ref, watch } from "vue";
@@ -99,13 +97,15 @@ import TaskDetails from "../../components/TaskDetails.vue";
 import dateFormatStep, { dateFormat } from "@/utils/dateFormat";
 import getLocalTime from "@/utils/localtime";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import NewTask from "./NewTask.vue";

+/*global Nullable */
 const { t } = useI18n();
 const selectorStore = useSelectorStore();
 const networkProfilingStore = useNetworkProfilingStore();
 const appStore = useAppStoreWithOut();
 const viewDetail = ref<boolean>(false);
-/*global Nullable */
+const newTask = ref<boolean>(false);
 const intervalFn = ref<Nullable<any>>(null);
 const intervalKeepAlive = ref<Nullable<any>>(null);
 const inProcess = ref<boolean>(false);
@@ -163,28 +163,35 @@ async function getTopology() {
  }
  return resp;
 }
-async function createTask() {
+function createTask() {
  if (inProcess.value) {
    return;
  }
-  const serviceId =
-    (selectorStore.currentService && selectorStore.currentService.id) || "";
-  const serviceInstanceId =
+  newTask.value = true;
+}
+async function saveNewTask(
+  params: {
+    uriRegex: string;
+    when4xx: string;
+    when5xx: string;
+    minDuration: number;
+  }[]
+) {
+  const instanceId =
    (selectorStore.currentPod && selectorStore.currentPod.id) || "";
-  if (!serviceId) {
-    return;
+  if (!instanceId) {
+    return ElMessage.error("No Instance ID");
  }
-  if (!serviceInstanceId) {
-    return;
-  }
-  const res = await networkProfilingStore.createNetworkTask({
-    serviceId,
-    serviceInstanceId,
-  });
+  const res = await networkProfilingStore.createNetworkTask(instanceId, params);
  if (res.errors) {
    ElMessage.error(res.errors);
    return;
  }
+  if (!res.data.createEBPFNetworkProfiling.status) {
+    ElMessage.error(res.data.createEBPFNetworkProfiling.errorReason);
+    return;
+  }
+  newTask.value = false;
  await fetchTasks();
 }
 function enableInterval() {
--- a/src/views/dashboard/related/network-profiling/components/data.ts
+++ b/src/views/dashboard/related/network-profiling/components/data.ts
@@ -0,0 +1,36 @@
+/**
+ * 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 ProfileMode: any[] = [
+  { label: "Include Children", value: "include" },
+  { label: "Exclude Children", value: "exclude" },
+];
+export const NewTaskField = {
+  service: { key: "", label: "None" },
+  monitorTime: { key: "0", label: "monitor now" },
+  monitorDuration: { key: 5, label: "5 min" },
+  minThreshold: 0,
+  dumpPeriod: { key: 10, label: "10ms" },
+  endpointName: "",
+  maxSamplingCount: { key: 5, label: "5" },
+};
+
+export const InitTaskField = {
+  Whenxx: [
+    { value: "1", label: "True" },
+    { value: "0", label: "False" },
+  ],
+};