feat: enhance the async-profiling duration options (#472)

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

@@ -25,12 +25,25 @@ limitations under the License. -->
         :options="asyncProfilingStore.instances"
         placeholder="Select instances"
         @change="changeInstances"
-        :filterable="false"
+        :filterable="true"
       />
     </div>
     <div>
       <div class="label">{{ t("duration") }}</div>
       <Radio class="mb-5" :value="duration" :options="DurationOptions" @change="changeDuration" />
+      <div v-if="duration === DurationOptions[5].value" class="custom-duration">
+        <div class="label">{{ t("customDuration") }} ({{ t("seconds") }})</div>
+        <el-input
+          size="small"
+          class="profile-input"
+          v-model="customDurationSeconds"
+          type="number"
+          :min="1"
+          :max="900"
+          placeholder="Enter duration in seconds (1-900)"
+        />
+        <div class="hint">{{ t("maxDuration") }}: 900 {{ t("seconds") }} (15 {{ t("minutes") }})</div>
+      </div>
     </div>
     <div>
       <div class="label">{{ t("profilingEvents") }}</div>
@@ -113,6 +126,7 @@ limitations under the License. -->
   const execArgs = ref<string>("");
   const loading = ref<boolean>(false);
   const PartofEvents = [ProfilingEvents[3], ProfilingEvents[4], ProfilingEvents[5]];
+  const customDurationSeconds = ref<number>(60);
 
   function changeDuration(val: string) {
     duration.value = val;
@@ -138,10 +152,22 @@ limitations under the License. -->
   }
 
   async function createTask() {
+    let finalDuration: number;
+
+    if (duration.value === DurationOptions[5].value) {
+      if (!customDurationSeconds.value || customDurationSeconds.value < 1 || customDurationSeconds.value > 900) {
+        ElMessage.error(t("invalidProfilingDurationRange"));
+        return;
+      }
+      finalDuration = customDurationSeconds.value;
+    } else {
+      finalDuration = Number(duration.value);
+    }
+
     const params = {
       serviceId: selectorStore.currentService.id,
       serviceInstanceIds: serviceInstanceIds.value,
-      duration: Number(duration.value) * 60,
+      duration: finalDuration,
       events: asyncEvents.value,
       execArgs: execArgs.value,
     };
@@ -158,7 +184,7 @@ limitations under the License. -->
       return;
     }
     emits("close");
-    ElMessage.success("Task created successfully");
+    ElMessage.success(t("taskCreatedSuccessfully"));
   }
 </script>
 <style lang="scss" scoped>
@@ -184,4 +210,13 @@ limitations under the License. -->
     width: 600px;
     margin-top: 50px;
   }
+
+  .custom-duration {
+    margin-top: 10px;
+  }
+
+  .hint {
+    font-size: $font-size-smaller;
+    color: var(--text-color-placeholder);
+  }
 </style>

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

@@ -16,9 +16,12 @@
  */
 
 export const DurationOptions = [
-  { value: "5", label: "5 min" },
-  { value: "10", label: "10 min" },
-  { value: "15", label: "15 min" },
+  { value: "30", label: "30 sec" },
+  { value: "60", label: "1 min" },
+  { value: "300", label: "5 min" },
+  { value: "600", label: "10 min" },
+  { value: "900", label: "15 min" },
+  { value: "custom", label: "Custom" },
 ];
 
 export const ProfilingEvents = ["CPU", "ALLOC", "LOCK", "WALL", "CTIMER", "ITIMER"];