feat(sys): support func version; add save status in ide;

Author: maslow

packages/system-client/package-lock.json

@@ -24,6 +24,7 @@
     "js-cookie": "2.2.0",
     "laf-client-sdk": "^0.6.3",
     "lodash": "^4.17.21",
+    "md5": "^2.3.0",
     "monaco-editor": "^0.25.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",

packages/system-client/package.json

@@ -21,6 +21,33 @@ export function getFunctions(query, page, pageSize) {
   })
 }
 
+/**
+ * Get published functions by ids
+ * @param {string[]} ids
+ * @returns
+ */
+export function getPublishedFunctions(ids) {
+  const appid = store.state.app.appid
+  return request({
+    url: `/apps/${appid}/function/published`,
+    method: 'POST',
+    data: {
+      ids
+    }
+  })
+}
+
+/**
+ * Get published function by id
+ * @param {string} id
+ * @returns
+ */
+export async function getPublishedFunction(id) {
+  const res = await getPublishedFunctions([id])
+  const [func] = res?.data ?? []
+  return func
+}
+
 /**
  * Get all tags of cloud functions
  */

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

@@ -0,0 +1,6 @@
+
+import md5 from 'md5'
+
+export function hashString(str) {
+  return md5(str)
+}

packages/system-client/src/utils/hash.js

@@ -1,31 +1,39 @@
 <template>
   <div class="app-container">
     <div v-if="func" class="header">
-      <span style="font-size: 22px;line-height: 40px;"><b>{{ func.label }}</b> </span>
+      <span style="font-size: 22px;line-height: 40px;">
+        <!-- <el-tag v-if="saved_code_diff" type="warning" size="mini" effect="plain">*</el-tag> -->
+        <b>{{ func.label }}</b>
+        <span v-if="saved_code_diff" style="margin-left: 8px; font-size: 18px; color: red">
+          <i class="el-icon-edit" />
+        </span>
+      </span>
       <el-tag v-clipboard:message="func.name" v-clipboard:success="onCopy" style="margin-left: 14px; " size="mini" type="success">{{ func.name }}</el-tag>
+
       <el-button
         style="margin-left: 20px"
         icon="el-icon-refresh"
         type="text"
-        :disabled="loading"
         size="default"
+        :loading="loading"
         @click="getFunction"
       >刷新</el-button>
       <el-button
-        type="success"
         size="mini"
         style="margin-left: 20px;"
-        :disabled="loading || !func"
+        :loading="loading"
+        :disabled="!saved_code_diff"
+        :type="saved_code_diff ? 'success' : 'success'"
         @click="updateFunc"
       >保存(S)</el-button>
       <el-button
-        type="warning"
-        plain
+        :type="published_version_diff ? 'default' : 'text'"
         size="mini"
+        :loading="loading"
         style="margin-left: 15px;"
-        :disabled="loading || !func"
+        :disabled="!published_version_diff"
         @click="publishFunction"
-      >发布</el-button>
+      >{{ published_version_diff ? '发布': '已发布' }}</el-button>
       <el-button size="small" style="float: right;" type="primary" @click="showDebugPanel = true">显示调试面板(J)</el-button>
     </div>
 
@@ -69,7 +77,7 @@
             size="mini"
             type="success"
             style="margin-left: 10px"
-            :disabled="loading || !func"
+            :loading="loading"
             @click="launch"
           >运行(B)</el-button>
         </div>
@@ -114,9 +122,10 @@
 import FunctionLogDetail from './components/FunctionLogDetail'
 import FunctionEditor from '@/components/FunctionEditor'
 import jsonEditor from '@/components/JsonEditor/param'
-import { getFunctionById, getFunctionLogs, launchFunction, publishOneFunction, updateFunctionCode } from '../../api/func'
+import { getFunctionById, getFunctionLogs, getPublishedFunction, launchFunction, publishOneFunction, updateFunctionCode } from '../../api/func'
 import { showError, showSuccess } from '@/utils/show'
 import { debounce } from 'lodash'
+import { hashString } from '@/utils/hash'
 
 const defaultParamValue = {
   code: 'laf'
@@ -130,6 +139,7 @@ export default {
       value: '',
       editorHeight: 500,
       func: null,
+      published_func: null,
       func_id: '',
       invokeParams: defaultParamValue,
       // 调用云函数返回的值
@@ -156,6 +166,21 @@ export default {
     },
     app() {
       return this.$store.state.app.application
+    },
+    published_version_diff() {
+      const cur = this.func?.version
+      const pub = this.published_func?.version
+      return cur !== pub
+    },
+    published_code_diff() {
+      const cur = this.func?.hash
+      const pub = this.published_func?.hash
+      return cur !== pub
+    },
+    saved_code_diff() {
+      const cur = hashString(this.value)
+      const saved = this.func?.hash
+      return cur !== saved
     }
   },
   watch: {
@@ -201,11 +226,16 @@ export default {
       this.value = this.func.code
       this.invokeParams = this.parseInvokeParam(this.func.debugParams) ?? defaultParamValue
       this.loading = false
+
+      this.published_func = await getPublishedFunction(func_id)
     },
     /**
      * 保存函数代码
      */
     async updateFunc(showTip = true) {
+      if (!this.saved_code_diff) {
+        return
+      }
       if (this.loading) { return }
       if (this.validate()) { return }
 
@@ -224,12 +254,8 @@ export default {
 
       if (r.error) { return showError('保存失败！') }
 
-      this.func = r.data
-      this.value = this.func.code
-      this.invokeParams = this.parseInvokeParam(this.func.debugParams) ?? defaultParamValue
-
+      await this.getFunction()
       if (showTip) {
-        // await this.getFunction()
         showSuccess('已保存: ' + this.func.name)
       }
     },
@@ -268,6 +294,7 @@ export default {
 
       if (r.error) { return showError('发布失败!') }
 
+      this.getFunction()
       showSuccess('已发布: ' + this.func.name)
     },
     async getLogByRequestId(requestId) {

packages/system-client/src/views/cloudfunction/debug.vue

@@ -1,14 +1,14 @@
 /*
  * @Author: Maslow<[email protected]>
  * @Date: 2021-08-30 16:51:19
- * @LastEditTime: 2021-11-01 16:56:16
+ * @LastEditTime: 2021-11-02 15:37:22
  * @Description: 
  */
 
 import { CloudFunctionStruct } from 'cloud-function-engine'
 import { Request, Response } from 'express'
 import { ObjectId } from 'mongodb'
-import { ApplicationStruct } from '../../api/application'
+import { ApplicationStruct, getApplicationDbAccessor } from '../../api/application'
 import { FunctionStruct, getFunctionById } from '../../api/function'
 import { checkPermission } from '../../api/permission'
 import { Constants } from '../../constants'
@@ -119,3 +119,35 @@ export async function handleGetAllFunctionTags(req: Request, res: Response) {
     data: docs
   })
 }
+
+/**
+ * Get published functions
+ */
+export async function handleGetPublishedFunctions(req: Request, res: Response) {
+  const app: ApplicationStruct = req['parsed-app']
+
+  const func_ids = req.body?.ids
+  if (!(func_ids instanceof Array) || !func_ids?.length) {
+    return res.status(422).send('invalid param func_ids')
+  }
+
+  // check permission
+  const code = await checkPermission(req['auth']?.uid, FUNCTION_READ.name, app)
+  if (code) {
+    return res.status(code).send()
+  }
+
+  // build query object
+  const ids = func_ids.map(id => new ObjectId(id))
+  const query = { appid: app.appid, _id: { $in: ids } }
+
+  const accessor = await getApplicationDbAccessor(app)
+  const db = accessor.db
+  const docs = await db.collection(Constants.function_collection)
+    .find(query, {})
+    .toArray()
+
+  return res.send({
+    data: docs
+  })
+}

packages/system-server/src/router/function/get.ts

@@ -1,13 +1,13 @@
 /*
  * @Author: Maslow<[email protected]>
  * @Date: 2021-08-29 11:35:05
- * @LastEditTime: 2021-11-02 14:25:55
+ * @LastEditTime: 2021-11-02 15:28:21
  * @Description:
  */
 
 import { Router } from "express"
 import { handleCreateFunction } from "./create"
-import { handleGetAllFunctionTags, handleGetFunctionById, handleGetFunctions } from "./get"
+import { handleGetAllFunctionTags, handleGetFunctionById, handleGetFunctions, handleGetPublishedFunctions } from "./get"
 import { handleGetFunctionLogs } from "./logs"
 import { handlePublishFunctions, handlePublishOneFunction } from "./publish"
 import { handleRemoveFunctionById } from "./remove"
@@ -68,6 +68,12 @@ FunctionRouter.post('/publish', handlePublishFunctions)
  */
 FunctionRouter.post('/:func_id/publish', handlePublishOneFunction)
 
+
+/**
+ * Get published functions by ids
+ */
+FunctionRouter.post('/published', handleGetPublishedFunctions)
+
 /**
  * Get function logs
  */