Merge pull request #141 from FlowCI/feature/1562

Feature/1562

Author: gy2006

src/components/Common/TextBox.vue

@@ -70,6 +70,10 @@ export default {
     }
   },
   watch: {
+    value(val) {
+      this.adaptor = val
+    },
+
     adaptor(val) {
       this.$emit('input', val)
     }

src/i18n/cn.js

@@ -163,6 +163,7 @@ export default {
       agent: 'Agents',
       secret: '秘钥管理',
       config: '配置管理',
+      plugin: '插件',
       system: '系统设置'
     },
 

src/i18n/en.js

@@ -160,11 +160,12 @@ export default {
   settings: {
     li: {
       profile: 'Profile',
-      users: 'Users',
+      users: 'User',
       security: 'Security',
-      agent: 'Agents',
-      secret: 'Secrets',
+      agent: 'Agent',
+      secret: 'Secret',
       config: 'Config',
+      plugin: 'Plugin',
       system: 'System'
     },
 

src/router/index.js

@@ -34,7 +34,8 @@ import SettingsConfigHome from '@/view/Settings/Config/Index'
 import SettingsConfigNew from '@/view/Settings/Config/New'
 import SettingsConfigEdit from '@/view/Settings/Config/Edit'
 
-import SystemSettingsHome from '@/view/Settings/System/Index'
+import SettingsPluginHome from '@/view/Settings/Plugin/Index'
+import SettingsSystemHome from '@/view/Settings/System/Index'
 
 Vue.use(Router)
 
@@ -183,10 +184,15 @@ export default new Router({
           props: true
         },
 
+        {
+          path: 'plugins',
+          name: 'PluginSettingsHome',
+          component: SettingsPluginHome
+        },
         {
           path: 'system',
           name: 'SystemSettingsHome',
-          component: SystemSettingsHome
+          component: SettingsSystemHome
         }
       ]
     }

src/util/plugins.js

@@ -1,3 +1,5 @@
+import { timeFormat } from "./time"
+
 export const TagNotification = 'notification'
 
 export class PluginWrapper {
@@ -19,11 +21,11 @@ export class PluginWrapper {
   }
 
   get docker() {
-    return this.plugin.docker
+    return this.plugin.meta.docker
   }
 
   get icon() {
-    return this.plugin.icon
+    return this.plugin.meta.icon
   }
 
   get version() {
@@ -38,16 +40,12 @@ export class PluginWrapper {
     return this.plugin.source
   }
 
-  get inputs() {
-    return this.plugin.inputs
-  }
-
   get isDefaultIcon() {
-    return !this.plugin.icon
+    return !this.plugin.meta.icon
   }
 
   get isHttpLinkIcon() {
-    const pathOrLink = this.plugin.icon
+    const pathOrLink = this.plugin.meta.icon
     if (!pathOrLink) {
       return false
     }
@@ -56,11 +54,22 @@ export class PluginWrapper {
   }
 
   get isRepoSrcIcon() {
-    const pathOrLink = this.plugin.icon
+    const pathOrLink = this.plugin.meta.icon
     if (!pathOrLink) {
       return false
     }
 
     return !this.isHttpLinkIcon
   }
+
+  get syncTime() {
+    if (this.plugin.syncTime) {
+      return timeFormat(this.plugin.syncTime)
+    }
+    return '-'
+  }
+
+  get synced() {
+    return this.plugin.synced
+  }
 }

src/view/Settings/FunList.vue

@@ -47,6 +47,10 @@
             i18n: 'settings.li.config',
             path: 'configs'
           },
+          {
+            i18n: 'settings.li.plugin',
+            path: 'plugins'
+          },
           {
             i18n: 'settings.li.system',
             path: 'system'

src/view/Settings/Plugin/Index.vue

@@ -0,0 +1,73 @@
+<template>
+  <v-data-table
+      :headers="headers"
+      :items="pluginList"
+  >
+    <template v-slot:item="{item}">
+      <tr>
+        <td><a :href="item.source" target="_blank">{{ item.name }}</a></td>
+        <td>{{ item.version }}</td>
+        <td>{{ item.desc }}</td>
+        <td>
+          <v-icon small color="green" v-if="item.synced">mdi-check-circle</v-icon>
+          <v-icon small color="red" v-else>mdi-close-circle-outline</v-icon>
+        </td>
+        <td>{{ item.syncTime }}</td>
+      </tr>
+    </template>
+  </v-data-table>
+</template>
+
+<script>
+import actions from "@/store/actions";
+import {mapState} from "vuex";
+import { PluginWrapper } from '@/util/plugins'
+
+export default {
+  name: "PluginSettingsHome",
+
+  mounted() {
+    this.$emit('onConfigNav', {
+      navs: [{text: this.$t('settings.li.plugin')}],
+      showAddBtn: false
+    })
+
+    this.$store.dispatch(actions.plugins.list).then(() => {
+    })
+  },
+
+  data() {
+    return {
+      loading: false,
+      pluginList: [],
+      headers: [
+        {text: 'Name', sortable: true, value: 'name'},
+        {text: 'Version', value: 'version'},
+        {text: 'Description', value: 'description'},
+        {text: 'Synced', value: 'synced'},
+        {text: 'Last sync time', value: 'synced'},
+      ]
+    }
+  },
+
+  computed: {
+    ...mapState({
+      plugins: state => state.plugins.items,
+    })
+  },
+
+  watch: {
+    plugins(val) {
+      this.pluginList = []
+      for (let p of val) {
+        this.pluginList.push(new PluginWrapper(p))
+      }
+    },
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>