add ui for new task config

src/components/Selector.vue

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

src/views/dashboard/related/network-profiling/components/NewTask.vue

@@ -0,0 +1,105 @@
+<!-- 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">{{ t("uriRegex") }}</div>
+      <el-input size="small" class="profile-input" v-model="states.uriRegex" />
+    </div>
+    <div>
+      <div class="label">{{ t("minThreshold") }} (ms)</div>
+      <el-input-number
+        size="small"
+        class="profile-input"
+        :min="0"
+        v-model="states.minDuration"
+      />
+    </div>
+    <div>
+      <div class="label">{{ t("monitorTime") }}</div>
+      <div>
+        <Selector
+          size="small"
+          :value="states.when4xx"
+          :options="InitTaskField.When4xx"
+          placeholder="Select a data"
+          @change="changeConfig({ when4xx: states.when4xx })"
+          class="profile-input"
+        />
+      </div>
+    </div>
+    <div>
+      <div class="label">{{ t("minThreshold") }} (ms)</div>
+      <el-input-number
+        size="small"
+        class="profile-input"
+        :min="0"
+        v-model="states.minDuration"
+      />
+    </div>
+    <div>
+      <el-button @click="createTask" type="primary" class="create-task-btn">
+        {{ t("createTask") }}
+      </el-button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { reactive } from "vue";
+import { useI18n } from "vue-i18n";
+import { InitTaskField } from "./data";
+/* global defineEmits */
+const emits = defineEmits(["close"]);
+const { t } = useI18n();
+const states = reactive<any>({
+  uriRegex: "",
+  when4xx: true,
+  minDuration: NaN,
+});
+
+function changeConfig(params: { [key: string]: unknown }) {
+  const key = Object.keys(params)[0];
+  states[key] = params[key];
+}
+
+async function createTask() {
+  emits("close");
+}
+</script>
+<style lang="scss" scoped>
+.profile-task {
+  margin: 0 auto;
+  width: 400px;
+}
+
+.date {
+  font-size: 12px;
+}
+
+.label {
+  margin-top: 10px;
+  font-size: 14px;
+}
+
+.profile-input {
+  width: 300px;
+}
+
+.create-task-btn {
+  width: 300px;
+  margin-top: 50px;
+}
+</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,14 @@ limitations under the License. -->
   >
     <TaskDetails :details="networkProfilingStore.selectedNetworkTask" />
   </el-dialog>
+  <el-dialog
+    v-model="newTask"
+    :destroy-on-close="true"
+    fullscreen
+    @closed="newTask = false"
+  >
+    <NewTask />
+  </el-dialog>
 </template>
 <script lang="ts" setup>
 import { ref, watch } from "vue";
@@ -99,13 +96,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,10 +162,13 @@ async function getTopology() {
   }
   return resp;
 }
-async function createTask() {
+function createTask() {
   if (inProcess.value) {
     return;
   }
+  newTask.value = true;
+}
+async function saveNewTask() {
   const serviceId =
     (selectorStore.currentService && selectorStore.currentService.id) || "";
   const serviceInstanceId =

src/views/dashboard/related/network-profiling/components/data.ts

@@ -0,0 +1,67 @@
+/**
+ * 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 = {
+  serviceSource: [{ key: "", label: "None" }],
+  When4xx: [
+    { value: true, label: "true" },
+    { value: false, label: "false" },
+  ],
+  When5xx: [
+    { value: true, label: "true" },
+    { value: false, label: "false" },
+  ],
+  monitorTimeCn: [
+    { value: "0", label: "此刻" },
+    { value: "1", label: "设置时间" },
+  ],
+  monitorDuration: [
+    { value: "5", label: "5 min" },
+    { value: "10", label: "10 min" },
+    { value: "15", label: "15 min" },
+  ],
+  dumpPeriod: [
+    { value: "10", label: "10 ms" },
+    { value: "20", label: "20 ms" },
+    { value: "50", label: "50 ms" },
+    { value: "100", label: "100 ms" },
+  ],
+  maxSamplingCount: [
+    { value: "1", label: "1" },
+    { value: "2", label: "2" },
+    { value: "3", label: "3" },
+    { value: "4", label: "4" },
+    { value: "5", label: "5" },
+    { value: "6", label: "6" },
+    { value: "7", label: "7" },
+    { value: "8", label: "8" },
+    { value: "9", label: "9" },
+  ],
+};