Add region to NewApplicationSpace.vue (#675)

Co-authored-by: 朱鑫睿 <[email protected]>
OpenCSGs · Sep 27, 2024 · 3d33f93 · 3d33f93
1 parent 6d6f42e
commit 3d33f93
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/frontend/src/components/application_spaces/NewApplicationSpace.vue b/frontend/src/components/application_spaces/NewApplicationSpace.vue
@@ -255,6 +255,25 @@
             </el-radio>
           </el-radio-group>
         </el-form-item>
+        <el-form-item
+          :label="t('endpoints.new.cluster')"
+          class="w-full"
+          prop="space_cluster">
+          <el-select
+            v-model="dataForm.space_cluster"
+            :placeholder="
+              t('all.pleaseSelect', { value: t('application_spaces.new.cluster') })
+            "
+            size="large"
+            style="width: 100%"
+            @change="fetchSpaceResources">
+            <el-option
+              v-for="item in spaceClusters"
+              :key="item.cluster_id"
+              :label="item.region"
+              :value="item.cluster_id" />
+          </el-select>
+        </el-form-item>
         <el-form-item
           class="w-full !mb-0"
           :label="$t('application_spaces.new.cloudResource')"
@@ -417,6 +436,19 @@
   }
 
   const spaceResources = ref([])
+  const spaceClusters = ref([])
+
+  const fetchClusters = async () => {
+    const { data, error } = await useFetchApi('/cluster').json()
+    if (error.value) {
+      ElMessage({ message: error.value.msg, type: 'warning' })
+    } else {
+      const body = data.value
+      dataForm.value.space_cluster = body.data[0]?.cluster_id || ''
+      spaceClusters.value = body.data
+      fetchSpaceResources()
+    }
+  }
 
   const fetchSpaceResources = async () => {
     const { data, error } = await useFetchApi('/space_resources').json()
@@ -481,6 +513,7 @@
       cover_image_url: dataForm.value.cover_image,
       hardware: dataForm.value.cloud_resource,
       resource_id: dataForm.value.cloud_resource,
+      cluster_id: dataForm.value.space_cluster,
       private: dataForm.value.visibility === 'private'
     }
     const options = {
@@ -504,7 +537,7 @@
   }
 
   onMounted(() => {
-    fetchSpaceResources()
+    fetchClusters()
   })
 </script>
 

diff --git a/frontend/src/locales/en_js/application_spaces.js b/frontend/src/locales/en_js/application_spaces.js
@@ -77,7 +77,8 @@ export const application_spaces = {
     failedFetchResources: "Failed to fetch resources",
     license: "License",
     createFail: "Application Space creation failed",
-    spaceEnName: "Space name"
+    spaceEnName: "Space name",
+    cluster: "Region",
   },
   edit: {
     cloudResource: 'Cloud resource',

diff --git a/frontend/src/locales/zh_js/application_spaces.js b/frontend/src/locales/zh_js/application_spaces.js
@@ -77,7 +77,8 @@ export const application_spaces = {
     failedFetchResources: "获取资源失败",
     license: "许可证",
     createFail: "应用空间创建失败",
-    spaceEnName: "应用空间英文名称"
+    spaceEnName: "应用空间英文名称",
+    cluster: "区域",
   },
   edit: {
     cloudResource: '空间云资源',