feat: 监控增加全局过滤 (#1466)

frontend/src/lang/modules/en.ts

@@ -726,6 +726,10 @@ const message = {
     },
     monitor: {
         monitor: 'Monitor',
+        globalFilter: 'Global Filter',
+        enableMonitor: 'Enable',
+        storeDays: 'Expiration days',
+        cleanMonitor: 'Clearing monitoring records',
         setting: 'Setting',
         avgLoad: 'Average load',
         loadDetail: 'Load detail',
@@ -1125,11 +1129,6 @@ const message = {
         source: 'Download source',
         hasNewVersion: 'New version Available',
 
-        monitor: 'Monitor',
-        enableMonitor: 'Enable',
-        storeDays: 'Expiration days',
-        cleanMonitor: 'Clearing monitoring records',
-
         message: 'Message',
         messageType: 'Message type',
         email: 'Email',

frontend/src/lang/modules/zh.ts

@@ -714,6 +714,10 @@ const message = {
     },
     monitor: {
         monitor: '监控',
+        globalFilter: '全局过滤',
+        enableMonitor: '监控状态',
+        storeDays: '保存天数',
+        cleanMonitor: '清空监控记录',
         setting: '设置',
         avgLoad: '平均负载',
         loadDetail: '负载详情',
@@ -1087,11 +1091,6 @@ const message = {
         primaryKey: '密钥',
         certificate: '证书',
 
-        monitor: '监控',
-        enableMonitor: '监控状态',
-        storeDays: '保存天数',
-        cleanMonitor: '清空监控记录',
-
         message: '通知',
         messageType: '通知方式',
         email: '邮箱',

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

@@ -2,6 +2,22 @@
     <div>
         <MonitorRouter />
 
+        <div class="content-container__search">
+            <el-card>
+                <span style="font-size: 14px">{{ $t('monitor.globalFilter') }}</span>
+                <el-date-picker
+                    @change="searchGlobal()"
+                    v-model="timeRangeGlobal"
+                    type="datetimerange"
+                    :range-separator="$t('commons.search.timeRange')"
+                    :start-placeholder="$t('commons.search.timeStart')"
+                    :end-placeholder="$t('commons.search.timeEnd')"
+                    :shortcuts="shortcuts"
+                    style="max-width: 360px; width: 100%; margin-left: 10px"
+                    :size="mobile ? 'small' : 'default'"
+                ></el-date-picker>
+            </el-card>
+        </div>
         <el-row :gutter="20" style="margin-top: 20px">
             <el-col :span="24">
                 <el-card style="overflow: inherit">
@@ -157,6 +173,7 @@ const mobile = computed(() => {
 
 const zoomStart = ref();
 const monitorBase = ref();
+const timeRangeGlobal = ref<[Date, Date]>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);
 const timeRangeLoad = ref<[Date, Date]>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);
 const timeRangeCpu = ref<[Date, Date]>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);
 const timeRangeMemory = ref<[Date, Date]>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);
@@ -215,6 +232,19 @@ const searchInfo = reactive<Monitor.MonitorSearch>({
     endTime: new Date(),
 });
 
+const searchGlobal = () => {
+    timeRangeLoad.value = timeRangeGlobal.value;
+    timeRangeCpu.value = timeRangeGlobal.value;
+    timeRangeMemory.value = timeRangeGlobal.value;
+    timeRangeIO.value = timeRangeGlobal.value;
+    timeRangeNetwork.value = timeRangeGlobal.value;
+    search('load');
+    search('cpu');
+    search('memory');
+    search('io');
+    search('network');
+};
+
 const search = async (param: string) => {
     searchInfo.param = param;
     switch (param) {
@@ -740,6 +770,12 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="scss">
+.content-container__search {
+    margin-top: 20px;
+    .el-card {
+        --el-card-padding: 12px;
+    }
+}
 .networkOption {
     font-size: 16px;
     font-weight: 500;

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

@@ -8,13 +8,13 @@
             size="30%"
         >
             <template #header>
-                <DrawerHeader :header="$t('setting.storeDays')" :back="handleClose" />
+                <DrawerHeader :header="$t('monitor.storeDays')" :back="handleClose" />
             </template>
             <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
                 <el-row type="flex" justify="center">
                     <el-col :span="22">
                         <el-form-item
-                            :label="$t('setting.storeDays')"
+                            :label="$t('monitor.storeDays')"
                             :rules="[Rules.integerNumber, checkNumberRange(1, 30)]"
                             prop="monitorStoreDays"
                         >

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

@@ -8,7 +8,7 @@
                     <el-row>
                         <el-col :span="1"><br /></el-col>
                         <el-col :span="12">
-                            <el-form-item :label="$t('setting.enableMonitor')" prop="monitorStatus">
+                            <el-form-item :label="$t('monitor.enableMonitor')" prop="monitorStatus">
                                 <el-switch
                                     @change="onSaveStatus"
                                     v-model="form.monitorStatus"
@@ -16,7 +16,7 @@
                                     inactive-value="disable"
                                 />
                             </el-form-item>
-                            <el-form-item :label="$t('setting.storeDays')" prop="monitorStoreDays">
+                            <el-form-item :label="$t('monitor.storeDays')" prop="monitorStoreDays">
                                 <el-input disabled v-model="form.monitorStoreDays">
                                     <template #append>
                                         <el-button @click="onChangeStoreDays" icon="Setting">
@@ -35,7 +35,7 @@
                                 </el-input>
                             </el-form-item>
                             <el-form-item>
-                                <el-button @click="onClean()" icon="Delete">{{ $t('setting.cleanMonitor') }}</el-button>
+                                <el-button @click="onClean()" icon="Delete">{{ $t('monitor.cleanMonitor') }}</el-button>
                             </el-form-item>
                         </el-col>
                     </el-row>
@@ -100,7 +100,7 @@ const onChangeInterval = () => {
 };
 
 const onClean = async () => {
-    ElMessageBox.confirm(i18n.global.t('commons.msg.clean'), i18n.global.t('setting.cleanMonitor'), {
+    ElMessageBox.confirm(i18n.global.t('commons.msg.clean'), i18n.global.t('monitor.cleanMonitor'), {
         confirmButtonText: i18n.global.t('commons.button.confirm'),
         cancelButtonText: i18n.global.t('commons.button.cancel'),
         type: 'info',

frontend/src/views/log/operation/index.vue

@@ -215,7 +215,7 @@ const loadDetail = (log: string) => {
         return log.replace('[MFAStatus]', '[' + i18n.global.t('setting.mfa') + ']');
     }
     if (log.indexOf('[MonitorStatus]') !== -1) {
-        return log.replace('[MonitorStatus]', '[' + i18n.global.t('setting.enableMonitor') + ']');
+        return log.replace('[MonitorStatus]', '[' + i18n.global.t('monitor.enableMonitor') + ']');
     }
     if (log.indexOf('[MonitorStoreDays]') !== -1) {
         return log.replace('[MonitorStoreDays]', '[' + i18n.global.t('setting.monitor') + ']');