[UI] Improvement of the FunctionTable page

front-end/src/api/func.js

@@ -10,7 +10,8 @@ export const funcApi = {
   status: ({ funcName }) => `/function/${funcName}/status`,
   trigger: ({ funcName }) => `/function/${funcName}/trigger`,
   deleteFunc: ({ funcName }) => `/function/${funcName}/delete`,
-  addFunc: ({ funcName }) => `/function/${funcName}/add`,
+  startFunc: ({ funcName }) => `/function/${funcName}/start`,
+  stopFunc: ({ funcName }) => `/function/${funcName}/stop`,
 }
 
 export function getList() {
@@ -41,9 +42,10 @@ export function deleteFunc(funcName) {
   return post(funcApi.deleteFunc({ funcName }));
 }
 
-export function addFunc (funcName, data) {
-    return post(funcApi.addFunc({ funcName }), { data })
+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

@@ -122,11 +122,16 @@ const addFunc = (option) => {
 
 const deleteFunc = { result: 0 };
 
+const startFunc = {result: 0};
+
+const stopFunc = {result: 0};
+
 get(/\/function\/list/, list);
 get(/\/function\/create/, createFunc);
 get(/\/function\/[^/]*\/info/, info);
 get(/\/function\/[^/]*\/stats/, stats);
 get(/\/function\/[^/]*\/status/, status);
 post(/\/function\/[^/]*\/trigger/, trigger);
 post(/\/function\/[^/]*\/delete/, deleteFunc);
-post(/\/function\/[^/]*\/add/, addFunc);
+post(/\/function\/[^/]*\/start/, startFunc);
+post(/\/function\/[^/]*\/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 } 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 startFunc(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>