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

src/components/Radio.vue

@@ -24,8 +24,8 @@ import { ref } from "vue";
 import type { PropType } from "vue";
 
 interface Option {
-  label: string;
-  value: string;
+  label: string | number;
+  value: string | number;
 }
 
 /*global  defineProps, defineEmits */

src/locales/lang/en.ts

@@ -174,6 +174,12 @@ const msg = {
   asTable: "As Table",
   toTheRight: "To The Right",
   legendValues: "Legend Values",
+  minDuration: "Minimal Request Duration",
+  when4xx:
+    "Sample HTTP requests and responses with tracing when response code between 400 and 499",
+  when5xx:
+    "Sample HTTP requests and responses with tracing when response code between 500 and 599",
+  taskTitle: "HTTP request and response collecting rules",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",

src/locales/lang/es.ts

@@ -178,6 +178,12 @@ const msg = {
   showLegend: "Mostrar leyenda",
   asTable: "Como tabla",
   toTheRight: "Derecha",
+  minDuration: "Duración mínima de la solicitud",
+  when4xx:
+    "Ejemplo de solicitud y respuesta http con seguimiento cuando el Código de respuesta está entre 400 y 499",
+  when5xx:
+    "Ejemplo de solicitud y respuesta http con seguimiento cuando el Código de respuesta está entre 500 y 599",
+  taskTitle: "Reglas de recolección de peticiones y respuestas HTTP",
   second: "s",
   yearSuffix: "Año",
   monthsHead: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Set_Oct_Nov_Dic",

src/locales/lang/zh.ts

@@ -171,6 +171,10 @@ const msg = {
   asTable: "作为表格",
   toTheRight: "在右边",
   legendValues: "图例值",
+  minDuration: "最小请求持续时间",
+  when4xx: "当响应代码介于400和499之间时，带有跟踪的HTTP请求和响应示例",
+  when5xx: "当响应代码介于500和599之间时，带有跟踪的HTTP请求和响应示例",
+  taskTitle: "HTTP请求和响应收集规则",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

src/store/modules/network-profiling.ts

@@ -110,13 +110,23 @@ export const networkProfilingStore = defineStore({
       this.calls = calls;
       this.nodes = data.nodes;
     },
-    async createNetworkTask(param: {
-      serviceId: string;
-      serviceInstanceId: string;
-    }) {
+    async createNetworkTask(
+      instanceId: string,
+      params: {
+        uriRegex: string;
+        when4xx: string;
+        when5xx: string;
+        minDuration: number;
+      }[]
+    ) {
       const res: AxiosResponse = await graphql
         .query("newNetworkProfiling")
-        .params({ request: { instanceId: param.serviceInstanceId } });
+        .params({
+          request: {
+            instanceId,
+            samplings: params,
+          },
+        });
 
       if (res.data.errors) {
         return res.data;

src/types/ebpf.d.ts

@@ -77,3 +77,9 @@ export type ProcessNode = {
   x?: number;
   y?: number;
 };
+export interface NetworkProfilingRequest {
+  uriRegex: string;
+  when4xx: string;
+  when5xx: string;
+  minDuration: number;
+}

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>

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>

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() {

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" },
+  ],
+};