add interval

src/store/modules/network-profiling.ts

@@ -21,6 +21,7 @@ import graphql from "@/graphql";
 import { AxiosResponse } from "axios";
 import { Call } from "@/types/topology";
 import { LayoutConfig } from "@/types/dashboard";
+import { ElMessage } from "element-plus";
 
 interface NetworkProfilingState {
   networkTasks: EBPFTaskList[];
@@ -33,6 +34,7 @@ interface NetworkProfilingState {
   metricsLayout: LayoutConfig[];
   selectedMetric: Nullable<LayoutConfig>;
   activeMetricIndex: string;
+  aliveNetwork: boolean;
 }
 
 export const networkProfilingStore = defineStore({
@@ -48,6 +50,7 @@ export const networkProfilingStore = defineStore({
     metricsLayout: [],
     selectedMetric: null,
     activeMetricIndex: "",
+    aliveNetwork: false,
   }),
   actions: {
     setSelectedNetworkTask(task: EBPFTaskList) {
@@ -137,6 +140,22 @@ export const networkProfilingStore = defineStore({
       this.setSelectedNetworkTask(this.selectedNetworkTask);
       return res.data;
     },
+    async keepNetworkProfiling(taskId: string) {
+      if (!taskId) {
+        return new Promise((resolve) => resolve({}));
+      }
+      const res: AxiosResponse = await graphql
+        .query("aliveNetworkProfiling")
+        .params({ taskId });
+
+      this.aliveMessage = "";
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.aliveNetwork = res.data.data.keepEBPFNetworkProfiling.status;
+      ElMessage.warning(res.data.data.keepEBPFNetworkProfiling.errorReason);
+      return res.data;
+    },
     async getProcessTopology(params: {
       duration: any;
       serviceInstanceId: string;

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

@@ -13,9 +13,9 @@ 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>
-  <el-button class="mr-10" type="primary" size="small">
+  <!-- <el-button class="mr-10" type="primary" size="small">
     {{ t("start") }}
-  </el-button>
+  </el-button> -->
   <el-popover placement="bottom" :width="600" trigger="click">
     <template #reference>
       <span>

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

@@ -27,6 +27,18 @@ limitations under the License. -->
             </span>
           </template>
         </el-popconfirm>
+        <el-popconfirm
+          :title="`Are you sure to ${
+            enableTasks ? 'disable' : 'enable'
+          } interval?`"
+          @confirm="enableInterval"
+        >
+          <template #reference>
+            <span class="new-task cp">
+              <Icon iconName="retry" :loading="enableTasks" size="middle" />
+            </span>
+          </template>
+        </el-popconfirm>
       </div>
       <div class="profile-t-wrapper">
         <div
@@ -100,6 +112,7 @@ const appStore = useAppStoreWithOut();
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 const viewDetail = ref<boolean>(false);
+const enableTasks = ref<boolean>(false);
 
 fetchTasks();
 
@@ -154,6 +167,17 @@ async function createTask() {
     serviceInstanceId,
   });
 }
+function enableInterval() {
+  let interval;
+  enableTasks.value = !enableTasks.value;
+  if (enableTasks.value) {
+    interval = setInterval(() => {
+      fetchTasks();
+    }, 18000);
+    return;
+  }
+  interval && clearInterval(interval);
+}
 async function fetchTasks() {
   const serviceId =
     (selectorStore.currentService && selectorStore.currentService.id) || "";
@@ -168,6 +192,9 @@ async function fetchTasks() {
   if (res.errors) {
     return ElMessage.error(res.errors);
   }
+  if (enableTasks.value && !networkProfilingStore.aliveNetwork) {
+    return;
+  }
   getTopology();
 }
 </script>