Skip to content

feat: Sync docker proxy to nodes #8359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
f2c-ci-robot merged 1 commit into from
Apr 9, 2025
Merged

feat: Sync docker proxy to nodes #8359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions core/constant/common.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ const (

OneDriveRedirectURI = "http://localhost/login/authorized"
GoogleRedirectURI = "http://localhost:8080"

DaemonJsonPath = "/etc/docker/daemon.json"
)

const (
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/lang/modules/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1520,6 +1520,11 @@ const message = {
proxyDocker: 'Docker Proxy',
proxyDockerHelper:
'Synchronize proxy server configuration to Docker, support offline server image pulling and other operations',
syncToNode: 'Sync to Node',
syncToNodeHelper: 'Sync settings to other nodes',
nodes: 'Node',
selectNode: 'Select Node',
selectNodeError: 'Please select a node',
apiInterface: 'API Interface',
apiInterfaceClose: 'Once closed, API interfaces cannot be accessed. Do you want to continue?',
apiInterfaceHelper: 'Provide panel support for API interface access',
Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Apr 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are no noticeable irregularities, potential issues, or suggestions for optimization in the provided code snippet. The changes appear to enhance user experience on the dashboard by adding features for syncing configurations and selecting nodes from different environments.

Expand Down
5 changes: 5 additions & 0 deletions frontend/src/lang/modules/ja.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1461,6 +1461,11 @@ const message = {
proxyDocker: 'Dockerプロキシ',
proxyDockerHelper:
'プロキシサーバーの構成をDockerに同期し、オフラインサーバーイメージの引っ張りやその他の操作をサポートします',
syncToNode: '子ノードに同期',
syncToNodeHelper: '選択したノードへの同期設定',
nodes: 'ノード',
selectNode: 'ノードを選択',
selectNodeError: 'ノードを選択してください',
apiInterface: 'APIを有効にします',
apiInterfaceClose: '閉じたら、APIインターフェイスにアクセスできません。続けたいですか？',
apiInterfaceHelper: 'サードパーティのアプリケーションにAPIにアクセスできるようにします。',
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/lang/modules/ko.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1443,6 +1443,11 @@ const message = {
proxyDocker: 'Docker 프록시',
proxyDockerHelper:
'프록시 서버 구성을 Docker 에 동기화하여 오프라인 서버 이미지 가져오기 등의 작업을 지원합니다.',
syncToNode: '자식 노드로 동기화',
syncToNodeHelper: '다른 노드로 설정 동기화',
nodes: '노드',
selectNode: '노드 선택',
selectNodeError: '노드를 선택해 주세요',
apiInterface: 'API 활성화',
apiInterfaceClose: '비활성화하면 API 인터페이스에 접근할 수 없습니다. 계속하시겠습니까?',
apiInterfaceHelper: '서드파티 애플리케이션이 API 에 접근할 수 있도록 허용합니다.',
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/lang/modules/ms.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1505,6 +1505,11 @@ const message = {
proxyDocker: 'Proksi Docker',
proxyDockerHelper:
'Selaraskan konfigurasi pelayan proksi ke Docker, menyokong tarikan imej pelayan luar talian dan operasi lain',
syncToNode: 'Penyegerakan ke nod anak',
syncToNodeHelper: 'Penyegerakan tetapan ke nod lain',
nodes: 'Nod',
selectNode: 'Pilih nod',
selectNodeError: 'Sila pilih nod',
apiInterface: 'Aktifkan API',
apiInterfaceClose: 'Setelah ditutup, antara muka API tidak boleh diakses. Adakah anda mahu meneruskan?',
apiInterfaceHelper: 'Benarkan aplikasi pihak ketiga mengakses API.',
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/lang/modules/pt-br.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1490,6 +1490,11 @@ const message = {
proxyDocker: 'Proxy Docker',
proxyDockerHelper:
'Sincronize a configuração do servidor proxy com o Docker, suportando operações de puxar imagens de servidor offline e outras',
syncToNode: 'Sincronizar para o nó filho',
syncToNodeHelper: 'Sincronizar de alerta para outros nós',
nodes: 'Nós',
selectNode: 'Selecionar nó',
selectNodeError: 'Por favor, selecione um nó',
apiInterface: 'Habilitar API',
apiInterfaceClose: 'Uma vez fechado, as interfaces da API não poderão ser acessadas. Deseja continuar?',
apiInterfaceHelper: 'Permitir que aplicativos de terceiros acessem a API.',
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/lang/modules/ru.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1494,6 +1494,11 @@ const message = {
proxyDocker: 'Прокси Docker',
proxyDockerHelper:
'Синхронизировать конфигурацию прокси-сервера с Docker, поддержка офлайн загрузки образов и других операций',
syncToNode: 'Синхронизация с дочерним узлом',
syncToNodeHelper: 'Синхронизация настроек с другими узлами',
nodes: 'Узлы',
selectNode: 'Выберите узел',
selectNodeError: 'Пожалуйста, выберите узел',
apiInterface: 'Включить API',
apiInterfaceClose: 'После закрытия API-интерфейсы будут недоступны. Хотите продолжить?',
apiInterfaceHelper: 'Разрешить сторонним приложениям доступ к API.',
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/lang/modules/zh-Hant.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1439,6 +1439,11 @@ const message = {
proxyPasswdKeep: '記住密碼',
proxyDocker: 'Docker 代理',
proxyDockerHelper: '將代理伺服器配寘同步至 Docker，支持離線服務器拉取鏡像等操作',
syncToNode: '同步至子節點',
syncToNodeHelper: '同步設置至其他節點',
nodes: '節點',
selectNode: '選擇節點',
selectNodeError: '請選擇節點',
apiInterface: 'API 接口',
apiInterfaceClose: '關閉後將不能使用 API 接口進行訪問，是否繼續？',
apiInterfaceHelper: '提供面板支持 API 接口訪問',
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/lang/modules/zh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1435,6 +1435,11 @@ const message = {
proxyPasswdKeep: '记住密码',
proxyDocker: 'Docker 代理',
proxyDockerHelper: '将代理服务器配置同步至 Docker，支持离线服务器拉取镜像等操作',
syncToNode: '同步至子节点',
syncToNodeHelper: '同步设置至所选节点',
nodes: '节点',
selectNode: '选择节点',
selectNodeError: '请选择节点',
apiInterface: 'API 接口',
apiInterfaceClose: '关闭后将不能使用 API 接口进行访问，是否继续？',
apiInterfaceHelper: '提供面板支持 API 接口访问',
Expand Down
10 changes: 8 additions & 2 deletions frontend/src/views/setting/panel/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@
</el-input>
</el-form-item>

<el-form-item :label="$t('setting.proxy')" prop="proxyShow">
<el-form-item :label="$t('setting.proxy')" prop="proxyShow" v-if="isMaster">
<el-input disabled v-model="form.proxyShow">
<template #append>
<el-button @click="onChangeProxy" icon="Setting">
Expand Down Expand Up @@ -229,7 +229,7 @@ const loading = ref(false);
const i18n = useI18n();
const globalStore = GlobalStore();

const { isMasterProductPro } = storeToRefs(globalStore);
const { isMasterProductPro, isMaster } = storeToRefs(globalStore);

const { switchTheme } = useTheme();
const mobile = computed(() => {
Expand Down Expand Up @@ -266,6 +266,8 @@ const form = reactive({
proxyPasswd: '',
proxyPasswdKeep: '',
proxyDocker: '',
proxyDockerSyncToNode: '',
proxyDockerSyncNodes: '',

apiInterfaceStatus: 'Disable',
apiKey: '',
Expand Down Expand Up @@ -339,6 +341,8 @@ const search = async () => {
: '{"light":"#005eeb","dark":"#F0BE96"}';
globalStore.themeConfig.theme = form.theme;
form.proxyDocker = xpackRes.data.proxyDocker;
form.proxyDockerSyncToNode = xpackRes.data.proxyDockerSyncToNode;
form.proxyDockerSyncNodes = xpackRes.data.proxyDockerSyncNodes;
}
} else {
globalStore.themeConfig.theme = form.theme;
Expand Down Expand Up @@ -369,6 +373,8 @@ const onChangeProxy = () => {
passwd: form.proxyPasswd,
passwdKeep: form.proxyPasswdKeep,
proxyDocker: form.proxyDocker,
proxyDockerSyncToNode: form.proxyDockerSyncToNode,
proxyDockerSyncNodes: form.proxyDockerSyncNodes,
});
};

Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Apr 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some potential issues:

  1. The v-if="isMaster" condition should be set to isMasterProductPro instead of directly using isMaster.
  2. The updated fields (e.g., proxyDockerSyncToNode, proxyDockerSynNodes) were added without being validated in the Vue.js template or form rules.
  3. Ensure that there's logic handling changes for these new properties.

Optimization suggestions:

  1. Consider adding validation checks for new props like proxyDockerSyncToNode and proxyDockerSyncNodes.

If you need further assistance with code review or optimization, please provide more details or context!

Expand Down
74 changes: 68 additions & 6 deletions frontend/src/views/setting/panel/proxy/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,41 @@
<el-checkbox v-model="form.proxyPasswdKeepItem" :label="$t('setting.proxyPasswdKeep')" />
</el-form-item>
<el-form-item v-if="isMasterProductPro">
<el-checkbox v-model="form.proxyDocker" :label="$t('setting.proxyDocker')" />
<el-checkbox v-model="form.proxyDocker" @change="onChange" :label="$t('setting.proxyDocker')" />
<span class="input-help">{{ $t('setting.proxyDockerHelper') }}</span>
</el-form-item>
<div v-if="form.proxyDocker">
<el-form-item prop="syncToNode">
<el-switch
@change="getNodes"
v-model="form.syncToNode"
active-value="Enable"
inactive-value="Disable"
></el-switch>
<span class="ml-2.5 el-checkbox">{{ $t('setting.syncToNode') }}</span>
<span class="input-help">{{ $t('setting.syncToNodeHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('setting.nodes')" prop="nodes" v-if="form.syncToNode === 'Enable'">
<el-row :gutter="20">
<el-col :span="12">
<el-select v-model="form.selectNode" class="p-w-200">
<el-option :label="$t('commons.table.all')" value="all"></el-option>
<el-option :label="$t('setting.selectNode')" value="select"></el-option>
</el-select>
</el-col>
<el-col :span="12" v-if="form.selectNode === 'select'">
<el-select v-model="form.nodes" multiple class="p-w-200">
<el-option
v-for="item in nodeList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
</div>
</div>
</el-form>
<template #footer>
Expand All @@ -70,13 +102,13 @@ import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import { FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';
import { updateProxy } from '@/api/modules/setting';
import { listNodeOptions, updateProxy } from '@/api/modules/setting';
import { GlobalStore } from '@/store';
import { storeToRefs } from 'pinia';
import { updateXpackSettingByKey } from '@/utils/xpack';
import { updateDaemonJson } from '@/api/modules/container';
import ConfirmDialog from '@/components/confirm-dialog/index.vue';
import { escapeProxyURL } from '@/utils/util';
import { updateDockerProxySetting } from '@/xpack/api/modules/setting';

const globalStore = GlobalStore();
const emit = defineEmits<{ (e: 'search'): void }>();
Expand All @@ -103,7 +135,11 @@ const form = reactive({
proxyPasswdKeep: '',
proxyPasswdKeepItem: false,
proxyDocker: false,
syncToNode: 'Enable',
selectNode: 'all',
nodes: [],
});
const nodeList = ref([]);

interface DialogProps {
url: string;
Expand All @@ -113,6 +149,8 @@ interface DialogProps {
passwd: string;
passwdKeep: string;
proxyDocker: string;
proxyDockerSyncToNode: string;
proxyDockerSyncNodes: string;
}
const acceptParams = (params: DialogProps): void => {
if (params.url) {
Expand All @@ -129,11 +167,24 @@ const acceptParams = (params: DialogProps): void => {
form.proxyUser = params.user;
form.proxyPasswd = params.passwd;
form.proxyDocker = params.proxyDocker !== '';
if (form.proxyDocker) {
getNodes();
form.syncToNode = params.proxyDockerSyncToNode;
form.nodes = params.proxyDockerSyncNodes ? JSON.parse(params.proxyDockerSyncNodes) : [];
form.selectNode = form.nodes.length > 0 ? 'select' : 'all';
}

proxyDockerVisible.value = params.proxyDocker !== '';
passwordVisible.value = true;
form.proxyPasswdKeepItem = params.passwdKeep === 'Enable';
};

const getNodes = () => {
if (form.syncToNode === 'Enable' && nodeList.value.length === 0) {
listNodes();
}
};

const submitChangePassword = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
Expand Down Expand Up @@ -216,16 +267,27 @@ const onSubmit = async () => {
if (isClose || params.proxyDocker === false) {
proxyUrl = '';
}
await updateXpackSettingByKey('ProxyDocker', proxyUrl);
await updateDaemonJson(`${form.proxyType}-proxy`, proxyUrl);
let param = {
proxyDocker: proxyUrl,
proxyDockerSyncToNode: form.syncToNode,
proxyDockerSyncNodes: JSON.stringify(form.nodes),
};
await updateDockerProxySetting(param);
emit('search');
handleClose();
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
} catch {
} finally {
loading.value = false;
}
};

const listNodes = async () => {
try {
const res = await listNodeOptions();
nodeList.value = res.data || [];
} catch (error) {}
};

const handleClose = () => {
passwordVisible.value = false;
};
Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Apr 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No significant irregularities or critical issues were found in the code snippet provided.

Optimization Suggestions:

  1. Extracted Functions: Extracting the getNodes function to handle the logic related to fetching node options has improved maintainability.

  2. Error Handling and Finally Block in Submission Code:

    

    3. 



    

  • await updateXpackSettingByKey('ProxyDocker', proxyUrl);
    • 

  • await updateDaemonJson(${form.proxyType}-proxy, proxyUrl);
    • 



    

  • let param = {
    • 

  • 

       proxyDocker: proxyUrl,

    

    • 

  • 

       proxyDockerSyncToNode: form.syncToNode,

    

    • 

  • 

       proxyDockerSyncNodes: JSON.stringify(form.nodes),

    

    • 

  • };
    • 

  • await updateDockerProxySetting(param);
    • 




Added a `finally` block to ensure that the loading indicator is removed regardless of whether an exception occurs during submission.

3. **Removed Unnecessary Checks for Selected Node**:
```diff
-    if (form.selectNode === 'all') {
-      this.form.nodes = [];
-    } else if (this.form.selectNode === 'select') {
-      // existing selection logic here
-    }



This can be merged into a single condition statement:


if (['all', ''].includes(form.selectNode)) {
  this.form.nodes = form.selectNode === 'all' ? [] : [];
}


These optimizations should result in cleaner and more efficient code while maintaining readability.

    

  
  




    


        

      
  
  

    
  
    
    

  

  

  



          

              

      








    


  





        

    


    


  		



  

    
          
            
          
          Expand Down
    
    
  



                
              


          


    

  







    

  
  
    
      Loading