API joint for pulsar backend: create,update

front-end/src/api/func.js

@@ -1,10 +1,11 @@
 import request from '@/utils/request'
 
-const { post, get } = request
+const { post, get, put } = request
 
 export const funcApi = {
   list: '/admin/v3/functions/public/default',
-  create: '/admin/v3/functions/public/default/myfunc',
+  create: ({ funcName }) => `/admin/v3/functions/public/default/${funcName}`,
+  update: ({ funcName }) => `/admin/v3/functions/public/default/${funcName}`,
   info: ({ funcName }) => `/admin/v3/functions/public/default/${funcName}`,
   stats: ({ funcName }) => `/admin/v3/functions/public/default/${funcName}/stats`,
   status: ({ funcName }) => `/admin/v3/functions/public/default/${funcName}/status`,
@@ -18,8 +19,12 @@ export function getList () {
   return get(funcApi.list)
 }
 
-export function createFunc (data) {
-  return post(funcApi.create, { data })
+export function create (funcName, data) {
+  return post(funcApi.create({ funcName }), data, { headers: { 'Content-Type': 'multipart/form-data' } })
+}
+
+export function update (funcName, data) {
+  return put(funcApi.update({ funcName }), data, { headers: { 'Content-Type': 'multipart/form-data' } })
 }
 
 export function getInfo (funcName) {

front-end/src/mock/services/func.js

@@ -115,24 +115,18 @@ const trigger = (option) => {
     return `${data}!!!`;
 }
 
-const addFunc = (option) => {
-    console.log("Test value return to the frontend：",option)
-    return 0
-}
-
 const startFunc = {result: 0};
 
 const stopFunc = {result: 0};
 
 const deleteFunc = { result: 0 };
 
 get(/\/admin\/v3\/functions\/public\/default/, list);
-get(/function\/create/, createFunc);
 get(/\/admin\/v3\/functions\/public\/default\/[^/]*/, info);
 get(/\/admin\/v3\/functions\/public\/default\/[^/]*\/stats/, stats);
 get(/\/admin\/v3\/functions\/public\/default\/[^/]*\/status/, status);
 post(/\/admin\/v3\/functions\/public\/default\/[^/]*\/trigger/, trigger);
 post(/\/admin\/v3\/functions\/public\/default\/[^/]*\/delete/, deleteFunc);
-post(/\/admin\/v3\/functions\/public\/default\/[^/]*\/add/, addFunc);
+post(/\/admin\/v3\/functions\/public\/default\/[^/]*/, createFunc);
 post(/\/admin\/v3\/functions\/public\/default\/[^/]*\/start/, startFunc);
 post(/\/admin\/v3\/functions\/public\/default\/[^/]*\/stop/, stopFunc);

front-end/src/views/function/components/AddForm.vue

@@ -194,20 +194,28 @@ import { create } from '@/api/func'
       onSub () {
         this.form.validateFields((err, values) => {
           if (err) return
-          console.log(values)
+          const functionName = values.FunctionName
+          const data = new FormData()
+          data.append('data', this.fileList)
+          const functionConfig = values
+          delete functionConfig.data
+          delete functionConfig.FunctionName  //参数处理
+          data.append('functionConfig', new Blob([JSON.stringify(functionConfig)], { type: 'application/json' }))
           const _this = this
           this.$confirm({
             title: 'Are you sure to create this function?',
             content: 'Some descriptions',
             okType: 'primary',
             async onOk () {
               try {
-                await create(values.FunctionName, values)
+                await create(functionName, data)
                   .then((res) => {
-                    _this.$notification.success({ message: ` "${values.FunctionName}" function created successfully` })
+                    _this.$parent.refresh()
+                    _this.$parent.closeDrawer()
+                    _this.$notification.success({ message: `function "${functionName}" created successfully` })
                   })
               } catch (error) {
-                _this.$notification.error({ message: ` "${values.FunctionName}" funciton creation failed` })
+                _this.$notification.error({ message: ` funciton "${functionName}" creation failed` })
               }
             }
           })
@@ -226,8 +234,7 @@ import { create } from '@/api/func'
         return []
       },
       fbeforeUpload (file) {
-        this.fileList = [...this.fileList, file]
-        console.log(this.fileList)
+        this.fileList = file
         return false
       },
       addInput () {

front-end/src/views/function/components/FunctionDetail.vue

@@ -43,8 +43,8 @@
                                      }
                        ]"
                        class="inputDefault"
-                       :disabled="!editable"
-                       :class="{editable:!editable}" />
+                       :disabled="true"
+                       :class="{editable:true}" />
             </a-form-item>
           </a-descriptions-item>
           <a-descriptions-item label="Runtime"
@@ -72,7 +72,7 @@
                         shape="circle"
                         type="dashed"
                         size="small"
-                        v-show="editable"
+                        v-show="false"
                         @click="addInput" />
             </span>
             <a-form-item :wrapper-col="{ span: 24 }"
@@ -88,8 +88,8 @@
                                          }
                            ]"
                            class="inputDefault"
-                           :disabled="!editable"
-                           :class="{editable:!editable}" />
+                           :disabled="true"
+                           :class="{editable:true}" />
                 </a-col>
                 <a-col>
                   <a-button icon="minus"
@@ -182,14 +182,16 @@
 </template>
 <script>
 import { uid } from 'uid'
+import { update } from '@/api/func'
 
 export default {
   data () {
     return {
       editable: false,
       form: this.$form.createForm(this),
       loadingSave: false,
-      inputs: []
+      inputs: [],
+      file: ''
     }
   },
   props: {
@@ -251,19 +253,39 @@ export default {
       this.inputs = this.inputs?.filter(input => input.key !== key)
     },
     saveEdit () {
-      const _this = this
-      this.loadingSave = true
       this.form.validateFields((err, values) => {
-        if (!err) {
-          console.log('Received values of form: ', values)
-          setTimeout(() => {
-            this.loadingSave = false
-            _this.$notification.success({ message: `"${_this.currentFuncionInfo?.name}" function Modified successfully` })
-          }, 1000)
-        } else {
-          this.loadingSave = false
-        }
-      })
+          if (err) return
+          console.log(values)
+          const functionName = values.name
+          const data = new FormData()
+          if(values.data){
+          data.append('data', this.file)
+          }
+          const functionConfig = values
+          delete functionConfig.data
+          delete functionConfig.Name  //参数处理
+          data.append('functionConfig', new Blob([JSON.stringify(functionConfig)], { type: 'application/json' }))
+          const _this = this
+          this.$confirm({
+            title: 'Are you sure to create this function?',
+            content: 'Some descriptions',
+            okType: 'primary',
+            async onOk () {
+              try {
+                await update(functionName, data)
+                  .then((res) => {
+                    _this.$parent.refresh()
+                    _this.$parent.closeDetail()
+                    _this.$notification.success({ message: `function "${functionName}" created successfully` })
+                  })
+              } catch (error) {
+                const errMessage = error.response.data.reason
+                _this.$notification.error({ message: ` funciton "${functionName}" creation failed, because ${errMessage}` })
+              }
+            }
+          })
+          this.file = ''
+        })
     },
     normFile (e) {
       console.log('Upload event:', e)
@@ -273,7 +295,8 @@ export default {
       if (e && e.fileList.length > 0) return [e.fileList[e.fileList.length - 1]]
       return []
     },
-    fbeforeUpload () {
+    fbeforeUpload (file) {
+    this.file = file
       return false
     }
   },

front-end/src/views/function/index.vue

@@ -61,6 +61,22 @@ export default {
     this.refreshFunc()
   },
   methods: {
+    async refresh () {
+      this.loadingList = true
+      try {
+        const res = await getList()
+        if (Array.isArray(res)) {
+          this.functionList = res?.map((name) => ({ key: name, name }))
+          // get status
+          res?.map(async (name, i) => {
+            const res = await getStatus(name)
+            this.$set(this.functionList[i], 'status', !!res?.instances?.[0]?.status?.running)
+            this.$set(this.functionList[i], 'statusInfo', res)
+          })
+        }
+      } catch (e) { }
+      this.loadingList = false
+    },
     formatDate (date) {
       return moment(date).format('YYYY/MM/DD')
     },