[UI] Change of the FunctionTable page

front-end/src/api/func.js

@@ -10,6 +10,8 @@ export const funcApi = {
   status: ({ funcName }) => `/admin/v3/functions/public/default/${funcName}/status`,
   trigger: ({ funcName }) => `/admin/v3/functions/public/default/${funcName}/trigger`,
   deleteFunc: ({ funcName }) => `/admin/v3/functions/public/default/${funcName}/delete`,
+  startFunc: ({ funcName }) => `/admin/v3/functions/public/default/${funcName}/start`,
+  stopFunc: ({ funcName }) => `/admin/v3/functions/public/default/${funcName}/stop`,
 }
 
 export function getList () {
@@ -39,3 +41,11 @@ export function triggerFunc (funcName, data) {
 export function deleteFunc (funcName) {
   return post(funcApi.deleteFunc({ funcName }))
 }
+
+export function startFunc(funcName) {
+  return post(funcApi.startFunc({ funcName }));
+}
+
+export function stopFunc(funcName) {
+  return post(funcApi.stopFunc({ funcName }));
+}

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

@@ -120,6 +120,10 @@ const addFunc = (option) => {
     return 0
 }
 
+const startFunc = {result: 0};
+
+const stopFunc = {result: 0};
+
 const deleteFunc = { result: 0 };
 
 get(/\/admin\/v3\/functions\/public\/default/, list);
@@ -130,3 +134,5 @@ 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\/[^/]*\/start/, startFunc);
+post(/\/admin\/v3\/functions\/public\/default\/[^/]*\/stop/, stopFunc);

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

@@ -11,14 +11,17 @@
       <a-divider type="vertical" />
       <a @click="onShowDetail(text)">Detail</a>
       <a-divider type="vertical" />
+      <a @click="onStart(text)" v-show="!text.status">Start</a>
+      <a @click="onStop(text)" v-show="text.status">Stop</a>
+      <a-divider type="vertical" />
       <a @click="onDelete(text)">Delete</a>
     </span>
   </a-table>
 </template>
 
 <script>
 // import moment from 'moment';
-import { deleteFunc } from '@/api/func'
+import { deleteFunc, startFunc, stopFunc } from '@/api/func'
 
 const columns = [
   {
@@ -80,7 +83,52 @@ export default {
           }
         }
       })
-    }
-  }
+    },
+    onStart(text) {
+      const { name = '' } = text
+      const _this = this
+      async function Start() {
+        try {
+          const res = await startFunc(name)
+          text.status = true
+          _this.$message.success('Function was started successfully.')
+        } catch (error) {
+          _this.$message.error('Function startup failed!')
+          console.error(error)
+        }
+      }
+      Start()
+    },
+    onStop(text) {
+      const { name = '' } = text
+      const _this = this
+      async function Stop() {
+        try {
+          const res = await stopFunc(name)
+          text.status = false
+          _this.$message.success('Function was stopped successfully.')
+        } catch (error) {
+          _this.$message.error('Function stop failed!')
+          console.error(error)
+        }
+      }
+      Stop()
+    },
+  },
 }
 </script>
+
+<style>
+.ant-table-thead > tr >th,.ant-table-tbody > tr >td{
+  text-align: center;
+}
+.ant-table-thead > tr >th:nth-child(1),.ant-table-tbody > tr >td:nth-child(1){
+  text-align: left;
+}
+.ant-table-thead > tr >th:nth-child(2),.ant-table-tbody > tr >td:nth-child(2){
+  width: 15%;
+}
+.ant-table-thead > tr >th:nth-child(3),.ant-table-tbody > tr >td:nth-child(3){
+  width: 30%;
+}
+</style>