fix: 面板设置增加默认监控网卡选择 (#2339)

Refs #752

backend/app/dto/setting.go

@@ -17,6 +17,7 @@ type SettingInfo struct {
 	PanelName      string `json:"panelName"`
 	Theme          string `json:"theme"`
 	Language       string `json:"language"`
+	DefaultNetwork string `json:"defaultNetwork"`
 
 	ServerPort             string `json:"serverPort"`
 	SSL                    string `json:"ssl"`

backend/init/migration/migrate.go

@@ -43,6 +43,8 @@ func Init() {
 		migrations.UpdateDatabase,
 		migrations.UpdateAppInstallResource,
 		migrations.DropDatabaseLocal,
+
+		migrations.AddDefaultNetwork,
 	})
 	if err := m.Migrate(); err != nil {
 		global.LOG.Error(err)

backend/init/migration/migrations/v_1_7.go

@@ -0,0 +1,17 @@
+package migrations
+
+import (
+	"github.com/1Panel-dev/1Panel/backend/app/model"
+	"github.com/go-gormigrate/gormigrate/v2"
+	"gorm.io/gorm"
+)
+
+var AddDefaultNetwork = &gormigrate.Migration{
+	ID: "20230918-add-default-network",
+	Migrate: func(tx *gorm.DB) error {
+		if err := tx.Create(&model.Setting{Key: "DefaultNetwork", Value: ""}).Error; err != nil {
+			return err
+		}
+		return nil
+	},
+}

frontend/src/api/interface/setting.ts

@@ -16,6 +16,7 @@ export namespace Setting {
         panelName: string;
         theme: string;
         language: string;
+        defaultNetwork: string;
 
         serverPort: number;
         ssl: string;

frontend/src/lang/modules/en.ts

@@ -766,7 +766,7 @@ const message = {
         avgLoad: 'Average load',
         loadDetail: 'Load detail',
         resourceUsage: 'Resource utilization rate',
-        networkCard: 'Net card',
+        networkCard: 'NetworkCard',
         read: 'Read',
         write: 'Write',
         readWriteCount: 'Read or write Times',
@@ -989,6 +989,7 @@ const message = {
             'If you do not operate the panel for more than {0} seconds, the panel automatically logs out',
         systemIP: 'System Address',
         systemIPWarning: 'The server address is not currently set. Please set it in the control panel first!',
+        defaultNetwork: 'Network Card',
         syncTime: 'Server Time',
         timeZone: 'Time Zone',
         timeZoneChangeHelper: 'Changing the time zone requires restarting the service. Do you want to continue?',

frontend/src/lang/modules/tw.ts

@@ -950,6 +950,7 @@ const message = {
         sessionTimeoutHelper: '如果用戶超過 {0} 秒未操作面板，面板將自動退出登錄',
         systemIP: '服務器地址',
         systemIPWarning: '當前未設置服務器地址，請先在面板設置中設置！',
+        defaultNetwork: '默認網卡',
         syncTime: '服務器時間',
         timeZone: '系統時區',
         timeZoneChangeHelper: '系統時區修改需要重啟服務，是否繼續？',

frontend/src/lang/modules/zh.ts

@@ -950,6 +950,7 @@ const message = {
         sessionTimeoutHelper: '如果用户超过 {0} 秒未操作面板，面板将自动退出登录',
         systemIP: '服务器地址',
         systemIPWarning: '当前未设置服务器地址，请先在面板设置中设置！',
+        defaultNetwork: '默认网卡',
         syncTime: '服务器时间',
         timeZone: '系统时区',
         timeZoneChangeHelper: '系统时区修改需要重启服务，是否继续？',

frontend/src/store/index.ts

@@ -29,6 +29,7 @@ export const GlobalStore = defineStore({
         lastFilePath: '',
         currentDB: '',
         showEntranceWarn: true,
+        defaultNetwork: 'all',
     }),
     getters: {},
     actions: {
@@ -72,6 +73,9 @@ export const GlobalStore = defineStore({
         setShowEntranceWarn(show: boolean) {
             this.showEntranceWarn = show;
         },
+        setDefaultNetwork(net: string) {
+            this.defaultNetwork = net;
+        },
     },
     persist: piniaPersistConfig('GlobalState'),
 });

frontend/src/store/interface/index.ts

@@ -24,6 +24,7 @@ export interface GlobalState {
     lastFilePath: string;
     currentDB: string;
     showEntranceWarn: boolean;
+    defaultNetwork: string;
 }
 
 export interface MenuState {

frontend/src/views/home/index.vue

@@ -340,7 +340,7 @@ const goRouter = async (path: string) => {
 const onLoadNetworkOptions = async () => {
     const res = await getNetworkOptions();
     netOptions.value = res.data;
-    searchInfo.netOption = netOptions.value && netOptions.value[0];
+    searchInfo.netOption = globalStore.defaultNetwork || (netOptions.value && netOptions.value[0]);
 };
 
 const onLoadIOOptions = async () => {

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

@@ -409,7 +409,7 @@ const search = async (param: string) => {
 const loadNetworkOptions = async () => {
     const res = await getNetworkOptions();
     netOptions.value = res.data;
-    searchInfo.info = netOptions.value && netOptions.value[0];
+    searchInfo.info = globalStore.defaultNetwork || (netOptions.value && netOptions.value[0]);
     networkChoose.value = searchInfo.info;
     search('all');
 };

frontend/src/views/setting/panel/default-network/index.vue

@@ -0,0 +1,103 @@
+<template>
+    <div>
+        <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
+            <template #header>
+                <DrawerHeader :header="$t('setting.defaultNetwork')" :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.defaultNetwork')"
+                            prop="defaultNetwork"
+                            :rules="Rules.requiredSelect"
+                        >
+                            <el-select v-model="form.defaultNetwork" filterable>
+                                <el-option
+                                    v-for="item in netOptions"
+                                    :key="item"
+                                    :label="item == 'all' ? $t('commons.table.all') : item"
+                                    :value="item"
+                                />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import i18n from '@/lang';
+import { MsgSuccess } from '@/utils/message';
+import { updateSetting } from '@/api/modules/setting';
+import { FormInstance } from 'element-plus';
+import { Rules } from '@/global/form-rules';
+import DrawerHeader from '@/components/drawer-header/index.vue';
+import { getNetworkOptions } from '@/api/modules/monitor';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
+
+const emit = defineEmits<{ (e: 'search'): void }>();
+
+interface DialogProps {
+    defaultNetwork: string;
+}
+const drawerVisiable = ref();
+const loading = ref();
+const netOptions = ref();
+
+const form = reactive({
+    defaultNetwork: '',
+});
+
+const formRef = ref<FormInstance>();
+
+const acceptParams = (params: DialogProps): void => {
+    form.defaultNetwork = params.defaultNetwork;
+    console.log(form.defaultNetwork);
+    loadNetworkOptions();
+    drawerVisiable.value = true;
+};
+
+const loadNetworkOptions = async () => {
+    const res = await getNetworkOptions();
+    netOptions.value = res.data;
+};
+
+const onSave = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.validate(async (valid) => {
+        if (!valid) return;
+        await updateSetting({ key: 'DefaultNetwork', value: form.defaultNetwork })
+            .then(async () => {
+                globalStore.setDefaultNetwork(form.defaultNetwork);
+                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+                loading.value = false;
+                drawerVisiable.value = false;
+                emit('search');
+                return;
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    });
+};
+
+const handleClose = () => {
+    drawerVisiable.value = false;
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>

frontend/src/views/setting/panel/index.vue

@@ -108,6 +108,15 @@
                                     </template>
                                 </el-input>
                             </el-form-item>
+                            <el-form-item :label="$t('setting.defaultNetwork')">
+                                <el-input disabled v-model="form.defaultNetworkVal">
+                                    <template #append>
+                                        <el-button v-show="!show" @click="onChangeNetwork" icon="Setting">
+                                            {{ $t('commons.button.set') }}
+                                        </el-button>
+                                    </template>
+                                </el-input>
+                            </el-form-item>
                         </el-col>
                     </el-row>
                 </el-form>
@@ -121,6 +130,7 @@
         <Timeout ref="timeoutRef" @search="search()" />
         <TimeZone ref="timezoneRef" @search="search()" />
         <Ntp ref="ntpRef" @search="search()" />
+        <Netwrok ref="netwrokRef" @search="search()" />
     </div>
 </template>
 
@@ -138,6 +148,7 @@ import Timeout from '@/views/setting/panel/timeout/index.vue';
 import PanelName from '@/views/setting/panel/name/index.vue';
 import SystemIP from '@/views/setting/panel/systemip/index.vue';
 import TimeZone from '@/views/setting/panel/timezone/index.vue';
+import Netwrok from '@/views/setting/panel/default-network/index.vue';
 import Ntp from '@/views/setting/panel/ntp/index.vue';
 
 const loading = ref(false);
@@ -159,6 +170,8 @@ const form = reactive({
     theme: '',
     language: '',
     complexityVerification: '',
+    defaultNetwork: '',
+    defaultNetworkVal: '',
 });
 
 const show = ref();
@@ -170,6 +183,7 @@ const systemIPRef = ref();
 const timeoutRef = ref();
 const ntpRef = ref();
 const timezoneRef = ref();
+const netwrokRef = ref();
 const unset = ref(i18n.t('setting.unSetting'));
 
 const search = async () => {
@@ -185,6 +199,8 @@ const search = async () => {
     form.theme = res.data.theme;
     form.language = res.data.language;
     form.complexityVerification = res.data.complexityVerification;
+    form.defaultNetwork = res.data.defaultNetwork;
+    form.defaultNetworkVal = res.data.defaultNetwork === 'all' ? i18n.t('commons.table.all') : res.data.defaultNetwork;
 };
 
 const onChangePassword = () => {
@@ -208,6 +224,9 @@ const onChangeTimeZone = () => {
 const onChangeNtp = () => {
     ntpRef.value.acceptParams({ localTime: form.localTime, ntpSite: form.ntpSite });
 };
+const onChangeNetwork = () => {
+    netwrokRef.value.acceptParams({ defaultNetwork: form.defaultNetwork });
+};
 
 const onSave = async (key: string, val: any) => {
     loading.value = true;