feat: bucket show sencondary url; move replicas dialog to auth page;setInterval with getApplications;

Author: walle233

packages/app-console/src/api/oss.js

@@ -104,6 +104,21 @@ export function getBucketUrl(bucket) {
   return url
 }
 
+/**
+ * get bucket's secondary url e.g: appid-bucketName.oss.aliyun.com
+ * @param {*} bucketName 
+ * @param {*} param1 
+ * @returns 
+ */
+export function getBucketSecondaryUrl(bucketName) {
+  const appid = store.state.app.appid
+  const endpoint = new URL(store.state.app.oss_external_endpoint)
+  const { protocol, host } = endpoint
+  const url = `${protocol}//${appid}-${bucketName}.${host}`
+  return url
+}
+
+
 /**
  * Get file list in a bucket
  * @param {string} bucketName

packages/app-console/src/views/replicate/auth.vue

@@ -69,6 +69,16 @@
         align="center"
       >
         <template slot-scope="scope">
+          <el-button
+            v-if="authType === 'target' && scope.row.status=== 'accepted'"
+            plain
+            size="mini"
+            class="filter-item"
+            type="primary"
+            @click="showReplicasForm(scope.row)"
+          >
+            部署
+          </el-button>
           <el-button
             v-if="authType === 'source' && scope.row.status !== 'accepted'"
             size="mini"
@@ -108,13 +118,42 @@
         </el-button>
       </div>
     </el-dialog>
+
+    <el-dialog :visible.sync="replicasDialogVisible" title="请求部署">
+      <el-form
+        ref="createForm"
+        :rules="rules"
+        :model="replicasForm"
+        label-position="left"
+        label-width="120px"
+        style="width: 400px; margin-left:20px;"
+      >
+        <el-form-item label="目标 appid" prop="target_appid">
+          <el-input v-model="replicasForm.target_appid" disabled />
+        </el-form-item>
+        <el-form-item label="部署权限" prop="permissions">
+          <el-checkbox-group v-model="replicasForm.permissions">
+            <el-checkbox label="function" border>云函数</el-checkbox>
+            <el-checkbox label="policy" border>访问策略</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="replicasDialogVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="handleCreateRequest">
+          确定
+        </el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import store from '@/store'
 import dayjs from 'dayjs'
-import { getReplicateAuths, createReplicateAuth, acceptReplicateAuth, deleteReplicateAuth } from '../../api/replicate'
+import { getReplicateAuths, createReplicateAuth, acceptReplicateAuth, deleteReplicateAuth, createReplicateRequest } from '../../api/replicate'
 
 export default {
   data() {
@@ -136,7 +175,12 @@ export default {
       },
       dialogFormVisible: false,
 
-      authType: 'target' // target | source
+      authType: 'target', // target | source
+      replicasDialogVisible: false,
+      replicasForm: {
+        target_appid: '',
+        permissions: []
+      },
     }
   },
   created() {
@@ -155,6 +199,55 @@ export default {
         this.tableList = this.list.filter(item => item.target_appid === this.appid)
       }
     },
+    showReplicasForm(row) {
+      this.replicasForm.target_appid = row.target_appid
+      this.replicasDialogVisible = true
+    },
+    async handleCreateRequest() {
+      this.$refs['createForm'].validate(async(valid) => {
+        if (!valid) { return }
+
+        if (this.replicasForm.permissions.length === 0) {
+          this.$message.warning('请至少选择一个部署权限')
+          return
+        }
+
+        const params = {
+          target_appid: this.replicasForm.target_appid
+        }
+        if (this.replicasForm.permissions.includes('function')) {
+          params.functions = {
+            type: 'all',
+            items: []
+          }
+        }
+        if (this.replicasForm.permissions.includes('policy')) {
+          params.policies = {
+            type: 'all',
+            items: []
+          }
+        }
+
+        const res = await createReplicateRequest(params)
+
+        if (res.code) {
+          this.$notify({
+            type: 'error',
+            title: '操作失败',
+            message: res.message
+          })
+          return
+        }
+
+        this.$notify({
+          type: 'success',
+          title: '操作成功',
+          message: '部署成功，等待目标应用接受。'
+        })
+
+        this.replicasDialogVisible = false
+      })
+    },
     showCreateForm() {
       this.dialogFormVisible = true
     },

packages/app-console/src/views/replicate/request.vue

@@ -1,19 +1,5 @@
 <template>
   <div class="app-container">
-    <!-- 数据检索区 -->
-    <div class="filter-container">
-      <el-button
-        plain
-        size="mini"
-        class="filter-item"
-        type="primary"
-        icon="el-icon-plus"
-        @click="showCreateForm"
-      >
-        创建部署请求
-      </el-button>
-    </div>
-
     <!-- 数据列表 -->
     <el-table
       :data="list"
@@ -89,46 +75,6 @@
       :limit.sync="listQuery.limit"
       @pagination="getReplicateRequests"
     />
-
-    <el-dialog :visible.sync="dialogFormVisible" title="请求部署">
-      <el-form
-        ref="createForm"
-        :rules="rules"
-        :model="form"
-        label-position="left"
-        label-width="120px"
-        style="width: 400px; margin-left:20px;"
-      >
-        <el-form-item label="目标appid" prop="target_appid">
-          <el-select
-            v-model="form.target_appid"
-            filterable
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in targetAppids"
-              :key="item"
-              :label="item"
-              :value="item"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="部署权限" prop="permissions">
-          <el-checkbox-group v-model="form.permissions">
-            <el-checkbox label="function" border>云函数</el-checkbox>
-            <el-checkbox label="policy" border>访问策略</el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">
-          取消
-        </el-button>
-        <el-button type="primary" @click="handleCreateRequest">
-          确定
-        </el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
@@ -140,8 +86,7 @@ import {
   getReplicateRequests,
   createReplicateRequest,
   acceptReplicateRequest,
-  deleteReplicateRequest,
-  getReplicateAuths
+  deleteReplicateRequest
 } from '../../api/replicate'
 
 export default {
@@ -169,32 +114,16 @@ export default {
       },
       dialogFormVisible: false,
       requestType: 'target', // target | source
-      targetAppids: []
     }
   },
   created() {
     this.appid = store.state.app.appid
-    this.getReplicateTargetAppid()
     this.getReplicateRequests()
   },
   methods: {
-    handleSwitchType({ name }) {
-      this.requestType = name
-      this.switchList()
-    },
     showCreateForm() {
       this.dialogFormVisible = true
     },
-    async getReplicateTargetAppid() {
-      const res = await getReplicateAuths()
-      if (res.code) {
-        return
-      }
-
-      this.targetAppids = res.data
-        .filter(item => item.source_appid === this.appid)
-        .map(item => item.target_appid)
-    },
     async getReplicateRequests() {
       this.listLoading = true
 

packages/app-console/src/views/storage/buckets.vue

@@ -311,7 +311,7 @@ export default {
     },
     // 获取 bucket 地址
     getBucketUrl(bucketName) {
-      return oss.getBucketUrl(bucketName)
+      return oss.getBucketSecondaryUrl(bucketName)
     },
     // 查看详情
     async handleShowDetail(row) {

packages/app-console/src/views/storage/components/path-link.vue

@@ -13,6 +13,8 @@
 </template>
 
 <script>
+import store from '@/store'
+
 export default {
   name: 'PathLink',
   props: {
@@ -54,14 +56,15 @@ export default {
      * ```
      */
     resolvePath() {
+      const appid = store.state.app.appid
       const strs = this.path.split('/')
         .filter(str => str !== '')
 
       const arr = strs.map(name => {
         return { name, path: '' }
       })
 
-      arr.unshift({ name: this.bucket, path: '/' })
+      arr.unshift({ name: `${appid}-${this.bucket}`, path: '/' })
       for (let i = 1; i < arr.length; i++) {
         const pre = arr[i - 1]
         arr[i].path = pre.path + arr[i].name + '/'

packages/app-console/src/views/storage/files.vue

@@ -269,7 +269,9 @@ export default {
     // 拼装文件下载 URL
     getFileUrl(file) {
       assert(file && file.Key, 'invalid file or filename')
-      return oss.getAppFileUrl(this.bucket, file.Key, this.bucketDetail.credentials)
+      const url =  oss.getAppFileUrl(this.bucket, file.Key, this.bucketDetail.credentials)
+      console.log('getFileURl', url)
+      return url
     },
     getFileName(file) {
       assert(file && file.Key, 'invalid file or filename')

packages/system-client/src/api/application.js

@@ -117,7 +117,7 @@ export async function stopApplicationInstance(appid) {
  */
 export async function restartApplicationInstance(appid) {
   const res = await request({
-    url: `/sys-api/apps/${appid}/instance/stop`,
+    url: `/sys-api/apps/${appid}/instance/restart`,
     method: 'post'
   })
   return res

packages/system-client/src/views/application/index.vue

@@ -292,18 +292,26 @@ export default {
   },
   async created() {
     this.loadApps()
+    setInterval(() => { this.getApplications(true) }, 8000)
   },
   methods: {
-    async loadApps() {
-      this.loading = true
+    loadApps() {
+      this.getApplications()
+      this.getSpecs()
+    },
+    async getSpecs() {
+      const specs = await getSpecs()
+      this.specs = specs.data
+    },
+    async getApplications(interval = false) {
+      if (!interval) this.loading = true
       const res = await getMyApplications()
-        .finally(() => { this.loading = false })
+        .finally(() => {
+          if (!interval) this.loading = false
+        })
       const { created, joined } = res.data
       this.applications.created = created
       this.applications.joined = joined
-
-      const specs = await getSpecs()
-      this.specs = specs.data
     },
     toDetail(app) {
       if (app.status !== 'running') {