Feat: Polish Async profiling widget (#437)

src/store/modules/async-profiling.ts

@@ -35,6 +35,7 @@ interface AsyncProfilingState {
   instances: Instance[];
   analyzeTrees: AsyncProfilerStackElement[];
   loadingTree: boolean;
+  loadingTasks: boolean;
 }
 
 export const asyncProfilingStore = defineStore({
@@ -46,6 +47,7 @@ export const asyncProfilingStore = defineStore({
     instances: [],
     analyzeTrees: [],
     loadingTree: false,
+    loadingTasks: false,
   }),
   actions: {
     setSelectedTask(task: Recordable<AsyncProfilingTask>) {
@@ -55,15 +57,15 @@ export const asyncProfilingStore = defineStore({
       this.analyzeTrees = tree;
     },
     async getTaskList() {
-      const { duration } = useAppStoreWithOut();
       const selectorStore = useSelectorStore();
+      this.loadingTasks = true;
       const res: AxiosResponse = await graphql.query("getAsyncTaskList").params({
         request: {
-          startTime: duration.start.getTime(),
-          endTime: duration.end.getTime(),
           serviceId: selectorStore.currentService.id,
+          limit: 10000,
         },
       });
+      this.loadingTasks = false;
       if (res.data.errors) {
         return res.data;
       }

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

@@ -35,7 +35,13 @@ limitations under the License. -->
     <div>
       <div class="label">{{ t("profilingEvents") }}</div>
       <el-checkbox-group v-model="asyncEvents" class="profile-input mb-5">
-        <el-checkbox v-for="event in ProfilingEvents" :label="event.label" :value="event.value" :key="event.value" />
+        <el-checkbox
+          v-for="event in ProfilingEvents"
+          :label="event"
+          :value="event"
+          :key="event"
+          :disabled="disableEvents(event)"
+        />
       </el-checkbox-group>
     </div>
     <div>
@@ -103,10 +109,11 @@ limitations under the License. -->
   const selectorStore = useSelectorStore();
   const { t } = useI18n();
   const serviceInstanceIds = ref<string[]>([]);
-  const asyncEvents = ref<string[]>([ProfilingEvents[0].value]);
+  const asyncEvents = ref<string[]>([]);
   const duration = ref<string>(DurationOptions[0].value);
   const execArgs = ref<string>("");
   const loading = ref<boolean>(false);
+  const PartofEvents = [ProfilingEvents[3], ProfilingEvents[4], ProfilingEvents[5]];
 
   function changeDuration(val: string) {
     duration.value = val;
@@ -116,11 +123,26 @@ limitations under the License. -->
     serviceInstanceIds.value = options.map((d: Option) => d.value);
   }
 
+  function disableEvents(item: string) {
+    if (asyncEvents.value.includes(ProfilingEvents[0]) && PartofEvents.includes(item)) {
+      return true;
+    }
+    if (item === ProfilingEvents[0]) {
+      for (const event of PartofEvents) {
+        if (asyncEvents.value.includes(event)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
   async function createTask() {
     const params = {
       serviceId: selectorStore.currentService.id,
       serviceInstanceIds: serviceInstanceIds.value,
-      duration: Number(duration.value),
+      duration: Number(duration.value) * 60,
       events: asyncEvents.value,
       execArgs: execArgs.value,
     };

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

@@ -13,7 +13,7 @@ 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-list flex-v" v-loading="loading">
+  <div class="profile-task-list flex-v" v-loading="asyncProfilingStore.loadingTasks">
     <div class="profile-t-tool flex-h">{{ t("taskList") }}</div>
     <div class="profile-t-wrapper">
       <div class="no-data" v-show="!asyncProfilingStore.taskList.length">
@@ -67,7 +67,7 @@ limitations under the License. -->
         </div>
         <div class="mb-10 clear item">
           <span class="g-sm-4 grey">{{ t("duration") }}:</span>
-          <span class="g-sm-8 wba">{{ asyncProfilingStore.selectedTask.duration }}</span>
+          <span class="g-sm-8 wba">{{ asyncProfilingStore.selectedTask.duration / 60 }}min</span>
         </div>
         <div class="mb-10 clear item">
           <span class="g-sm-4 grey">{{ t("events") }}:</span>
@@ -124,7 +124,7 @@ limitations under the License. -->
   </el-dialog>
 </template>
 <script lang="ts" setup>
-  import { ref, onMounted, watch } from "vue";
+  import { ref, onMounted } from "vue";
   import { useI18n } from "vue-i18n";
   import { useSelectorStore } from "@/store/modules/selectors";
   import { useAsyncProfilingStore } from "@/store/modules/async-profiling";
@@ -141,16 +141,13 @@ limitations under the License. -->
   const instanceLogs = ref<TaskLog | any>({});
   const errorInstances = ref<Instance[]>([]);
   const successInstances = ref<Instance[]>([]);
-  const loading = ref<boolean>(false);
 
   onMounted(() => {
     fetchTasks();
   });
 
   async function fetchTasks() {
-    loading.value = true;
     const res = await asyncProfilingStore.getTaskList();
-    loading.value = false;
     if (res.errors) {
       return ElMessage.error(res.errors);
     }
@@ -192,13 +189,6 @@ limitations under the License. -->
       }
     }
   }
-
-  watch(
-    () => selectorStore.currentService,
-    () => {
-      fetchTasks();
-    },
-  );
 </script>
 <style lang="scss" scoped>
   .profile-task-list {

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

@@ -21,28 +21,20 @@ export const DurationOptions = [
   { value: "15", label: "15 min" },
 ];
 
-export const ProfilingEvents = [
+export const ProfilingEvents = ["CPU", "ALLOC", "LOCK", "WALL", "CTIMER", "ITIMER"];
-  { value: "CPU", label: "CPU" },
-  { value: "ALLOC", label: "ALLOC" },
-  { value: "WALL", label: "WALL" },
-  { value: "LOCK", label: "LOCK" },
-  { value: "CTIMER", label: "CTIMER" },
-  { value: "ITIMER", label: "ITIMER" },
-];
 
 export enum EventsMap {
   CPU = "EXECUTION_SAMPLE",
   WALL = "EXECUTION_SAMPLE",
   CTIMER = "EXECUTION_SAMPLE",
   ITIMER = "EXECUTION_SAMPLE",
-  LOCK = "JAVA_MONITOR_ENTER",
+  LOCK = "LOCK",
   ALLOC = "OBJECT_ALLOCATION_OUTSIDE_TLAB",
 }
 
 export enum JFREventType {
   EXECUTION_SAMPLE = "EXECUTION_SAMPLE",
-  JAVA_MONITOR_ENTER = "JAVA_MONITOR_ENTER",
+  LOCK = "LOCK",
-  THREAD_PARK = "THREAD_PARK",
   OBJECT_ALLOCATION_IN_NEW_TLAB = "OBJECT_ALLOCATION_IN_NEW_TLAB",
   OBJECT_ALLOCATION_OUTSIDE_TLAB = "OBJECT_ALLOCATION_OUTSIDE_TLAB",
   PROFILER_LIVE_OBJECT = "PROFILER_LIVE_OBJECT",

src/views/dashboard/related/ebpf/components/EBPFStack.vue

@@ -128,7 +128,7 @@ limitations under the License. -->
         return;
       }
       const { type } = ebpfStore.analyzeTrees[0];
-      if ([JFREventType.JAVA_MONITOR_ENTER, JFREventType.THREAD_PARK].includes(type)) {
+      if ([JFREventType.LOCK].includes(type)) {
         return `<div class="mb-5">Duration: ${item.dumpCount} ms</div>`;
       }
       if (type === JFREventType.EXECUTION_SAMPLE) {