[Web UI] Split Monaco chunk, reduce idle list polling, fix axios cancel key

streampark-console/streampark-console-webapp/src/settings/pollingSetting.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
+ *
+ *    https://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 APP_LIST_POLL_IDLE_MS = 5000;
+
+export const APP_LIST_POLL_ACTIVE_MS = 2000;
+
+export type AppOptionApps = {
+  starting: Map<unknown, unknown>;
+  stopping: Map<unknown, unknown>;
+  release: Map<unknown, unknown>;
+  savepointing?: Map<unknown, unknown>;
+};
+
+export function getAppListPollInterval(optionApps: AppOptionApps): number {
+  const active =
+    optionApps.starting.size > 0 ||
+    optionApps.stopping.size > 0 ||
+    optionApps.release.size > 0 ||
+    (optionApps.savepointing?.size ?? 0) > 0;
+  return active ? APP_LIST_POLL_ACTIVE_MS : APP_LIST_POLL_IDLE_MS;
+}

streampark-console/streampark-console-webapp/src/utils/http/axios/axiosCancel.ts

@@ -5,7 +5,11 @@ import { isFunction } from '/@/utils/is';
 // Used to store the identification and cancellation function of each request
 let pendingMap = new Map<string, Canceler>();
 
-export const getPendingUrl = (config: AxiosRequestConfig) => [config.method, config.url].join('&');
+export const getPendingUrl = (config: AxiosRequestConfig) => {
+  const params =
+    config.params && Object.keys(config.params).length > 0 ? JSON.stringify(config.params) : '';
+  return [config.method, config.url, params].join('&');
+};
 
 export class AxiosCanceler {
   /**

streampark-console/streampark-console-webapp/src/views/flink/app/View.vue

@@ -57,6 +57,7 @@
   import { useAppTableColumns } from './hooks/useAppTableColumns';
   import AppTableResize from './components/AppResize.vue';
   import { useRouter } from 'vue-router';
+  import { getAppListPollInterval } from '/@/settings/pollingSetting';
 
   defineOptions({
     name: 'AppView',
@@ -242,8 +243,8 @@
     if (!getLoading()) {
       handlePageDataReload(true);
     }
-    start();
-  }, 2000);
+    start(getAppListPollInterval(optionApps));
+  }, getAppListPollInterval(optionApps));
 
   onMounted(() => {
     // If there is a page, jump to the page number of the record

streampark-console/streampark-console-webapp/src/views/spark/app/index.vue

@@ -54,6 +54,7 @@
   import { SparkApplication } from '/@/api/spark/app.type';
   import { handleView } from './utils';
   import { useRouter } from 'vue-router';
+  import { getAppListPollInterval } from '/@/settings/pollingSetting';
   defineOptions({
     name: 'SparkApplication',
   });
@@ -221,14 +222,14 @@
 
   const { start, stop } = useTimeoutFn(() => {
     if (errorCount.value <= 3) {
-      start();
+      start(getAppListPollInterval(optionApps));
     } else {
       return;
     }
     if (!getLoading()) {
       handlePageDataReload(true);
     }
-  }, 2000);
+  }, getAppListPollInterval(optionApps));
 
   onMounted(() => {
     // If there is a page, jump to the page number of the record

streampark-console/streampark-console-webapp/vite.config.ts

@@ -90,9 +90,23 @@ export default async ({ command, mode }: ConfigEnv): Promise<UserConfig> => {
       rollupOptions: {
         maxParallelFileOps: 3,
         output: {
-          manualChunks: {
-            vue: ['vue', 'pinia', 'vue-router'],
-            antd: ['ant-design-vue', '@ant-design/icons-vue'],
+          manualChunks(id) {
+            if (id.includes('node_modules/monaco-editor')) {
+              return 'monaco-editor';
+            }
+            if (
+              id.includes('node_modules/vue/') ||
+              id.includes('node_modules/pinia/') ||
+              id.includes('node_modules/vue-router/')
+            ) {
+              return 'vue';
+            }
+            if (
+              id.includes('node_modules/ant-design-vue/') ||
+              id.includes('node_modules/@ant-design/icons-vue/')
+            ) {
+              return 'antd';
+            }
           },
         },
       },