fix: Fix the issue of abnormal option switching on the monitoring page (#10913)

agent/app/dto/monitor.go

@@ -4,7 +4,8 @@ import "time"
 
 type MonitorSearch struct {
 	Param     string    `json:"param" validate:"required,oneof=all cpu memory load io network"`
-	Info      string    `json:"info"`
+	IO        string    `json:"io"`
+	Network   string    `json:"network"`
 	StartTime time.Time `json:"startTime"`
 	EndTime   time.Time `json:"endTime"`
 }
@@ -19,7 +20,7 @@ type Process struct {
 	Name    string  `json:"name"`
 	Pid     int32   `json:"pid"`
 	Percent float64 `json:"percent"`
-	Memory  uint64 `json:"memory"`
+	Memory  uint64  `json:"memory"`
 	Cmd     string  `json:"cmd"`
 	User    string  `json:"user"`
 }

agent/app/service/monitor.go

@@ -83,7 +83,7 @@ func (m *MonitorService) LoadMonitorData(req dto.MonitorSearch) ([]dto.MonitorDa
 		data = append(data, itemData)
 	}
 	if req.Param == "all" || req.Param == "io" {
-		bases, err := monitorRepo.GetIO(repo.WithByName(req.Info), repo.WithByCreatedAt(req.StartTime, req.EndTime))
+		bases, err := monitorRepo.GetIO(repo.WithByName(req.IO), repo.WithByCreatedAt(req.StartTime, req.EndTime))
 		if err != nil {
 			return nil, err
 		}
@@ -97,7 +97,7 @@ func (m *MonitorService) LoadMonitorData(req dto.MonitorSearch) ([]dto.MonitorDa
 		data = append(data, itemData)
 	}
 	if req.Param == "all" || req.Param == "network" {
-		bases, err := monitorRepo.GetNetwork(repo.WithByName(req.Info), repo.WithByCreatedAt(req.StartTime, req.EndTime))
+		bases, err := monitorRepo.GetNetwork(repo.WithByName(req.Network), repo.WithByCreatedAt(req.StartTime, req.EndTime))
 		if err != nil {
 			return nil, err
 		}

frontend/src/api/interface/host.ts

@@ -151,7 +151,8 @@ export namespace Host {
     }
     export interface MonitorSearch {
         param: string;
-        info: string;
+        io: string;
+        network: string;
         startTime: Date;
         endTime: Date;
     }

frontend/src/views/cronjob/cronjob/record/index.vue

@@ -382,7 +382,7 @@ const search = async (changeToLatest: boolean) => {
     if (!hasRecords.value) {
         return;
     }
-    if (changeToLatest) {
+    if (changeToLatest || !currentRecord.value) {
         currentRecord.value = records.value[0];
         return;
     }

frontend/src/views/host/firewall/ip/index.vue

@@ -19,6 +19,15 @@
                 </el-card>
 
                 <LayoutContent :title="$t('firewall.ipRule', 2)" :class="{ mask: !isActive }">
+                    <template #prompt>
+                        <div v-if="!isBind">
+                            <el-alert
+                                type="info"
+                                :closable="false"
+                                :title="$t('firewall.basicStatus', ['1PANEL_BASIC'])"
+                            />
+                        </div>
+                    </template>
                     <template #leftToolBar>
                         <el-button type="primary" @click="onOpenDialog('create')">
                             {{ $t('firewall.createIpRule') }}
@@ -111,7 +120,13 @@ import ImportDialog from '@/views/host/firewall/ip/import/index.vue';
 import FireRouter from '@/views/host/firewall/index.vue';
 import FireStatus from '@/views/host/firewall/status/index.vue';
 import { onMounted, reactive, ref } from 'vue';
-import { batchOperateRule, searchFireRule, updateAddrRule, updateFirewallDescription } from '@/api/modules/host';
+import {
+    batchOperateRule,
+    loadChainStatus,
+    searchFireRule,
+    updateAddrRule,
+    updateFirewallDescription,
+} from '@/api/modules/host';
 import { Host } from '@/api/interface/host';
 import { ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
@@ -127,6 +142,7 @@ const fireName = ref();
 
 const maskShow = ref(true);
 const isActive = ref(false);
+const isBind = ref(false);
 const fireStatusRef = ref();
 
 const opRef = ref();
@@ -156,6 +172,7 @@ const search = async () => {
         pageSize: paginationConfig.pageSize,
     };
     loading.value = true;
+    loadStatus();
     await searchFireRule(params)
         .then((res) => {
             loading.value = false;
@@ -167,6 +184,16 @@ const search = async () => {
         });
 };
 
+const loadStatus = async () => {
+    if (fireName.value !== 'iptables') {
+        isBind.value = true;
+        return;
+    }
+    await loadChainStatus('1PANEL_BASIC').then((res) => {
+        isBind.value = res.data.isBind;
+    });
+};
+
 const dialogRef = ref();
 const onOpenDialog = async (
     title: string,

frontend/src/views/host/firewall/port/index.vue

@@ -307,6 +307,10 @@ const onChange = async (info: any) => {
 };
 
 const loadStatus = async () => {
+    if (fireName.value !== 'iptables') {
+        isBind.value = true;
+        return;
+    }
     await loadChainStatus('1PANEL_BASIC').then((res) => {
         isBind.value = res.data.isBind;
     });

frontend/src/views/host/monitor/monitor/index.vue

@@ -249,7 +249,8 @@ const chartsOption = ref({ loadLoadChart: null, loadCPUChart: null, loadMemoryCh
 const searchTime = ref();
 const searchInfo = reactive<Host.MonitorSearch>({
     param: '',
-    info: '',
+    io: '',
+    network: '',
     startTime: new Date(new Date().setHours(0, 0, 0, 0)),
     endTime: new Date(),
 });
@@ -281,11 +282,16 @@ const search = async (param: string) => {
             break;
         case 'io':
             searchTime.value = timeRangeIO.value;
-            searchInfo.info = ioChoose.value;
+            searchInfo.io = ioChoose.value || 'all';
             break;
         case 'network':
             searchTime.value = timeRangeNetwork.value;
-            searchInfo.info = networkChoose.value;
+            searchInfo.network = networkChoose.value || 'all';
+            break;
+        case 'all':
+            searchTime.value = timeRangeNetwork.value;
+            searchInfo.io = ioChoose.value || 'all';
+            searchInfo.network = networkChoose.value || 'all';
             break;
     }
     if (searchTime.value && searchTime.value.length === 2) {
@@ -335,19 +341,17 @@ const changeIO = (item: string) => {
     search('io');
 };
 
-const loadNetworkOptions = async () => {
+const loadOptions = async () => {
     const res = await getNetworkOptions();
     netOptions.value = res.data;
-    searchInfo.info = globalStore.defaultNetwork || (netOptions.value && netOptions.value[0]);
-    networkChoose.value = searchInfo.info;
-    search('all');
-};
+    searchInfo.network = globalStore.defaultNetwork || (netOptions.value && netOptions.value[0]);
+    networkChoose.value = searchInfo.network;
+
+    const res1 = await getIOOptions();
+    ioOptions.value = res1.data;
+    searchInfo.io = globalStore.defaultIO || (ioOptions.value && ioOptions.value[0]);
+    ioChoose.value = searchInfo.io;
 
-const loadIOOptions = async () => {
-    const res = await getIOOptions();
-    ioOptions.value = res.data;
-    searchInfo.info = globalStore.defaultIO || (ioOptions.value && ioOptions.value[0]);
-    ioChoose.value = searchInfo.info;
     search('all');
 };
 
@@ -711,8 +715,7 @@ function getSideWidth(b: boolean) {
 }
 
 onMounted(() => {
-    loadNetworkOptions();
-    loadIOOptions();
+    loadOptions();
 });
 </script>