Develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flow-web-x",
-  "version": "1.21.33",
+  "version": "1.21.40",
   "description": "flow.ci web ui",
   "author": "Yang Guo <32008001@qq.com>",
   "private": true,

src/components/Common/TextBox.vue

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

src/components/Jobs/StepLoggingItem.vue

@@ -86,11 +86,11 @@
               </v-col>
 
               <v-col cols="1" class="caption" v-if="wrapper.isFinished && showLog">
-                <v-btn icon x-small @click="onLogDownload" v-if="wrapper.isSuccess">
+                <v-btn icon x-small @click="onLogDownload" v-if="wrapper.isSuccess || wrapper.isFailure">
                   <v-icon small>mdi-download</v-icon>
                 </v-btn>
 
-                <v-tooltip bottom v-else-if="wrapper.isFailure">
+                <v-tooltip bottom v-if="wrapper.isFailure">
                   <template v-slot:activator="{ on }">
                     <v-btn icon x-small @click="onRerunClick" v-on="on">
                       <v-icon small>mdi-restart</v-icon>
@@ -99,10 +99,6 @@
                   <div>{{ $t('job.hint.rerun_step') }}</div>
                 </v-tooltip>
 
-                <v-btn icon x-small v-else>
-                  <v-icon small>mdi-minus</v-icon>
-                </v-btn>
-
                 <span>
                   <v-icon class="ml-2" x-small>mdi-clock-outline</v-icon>
                   <span class="ml-1">{{ wrapper.duration }}</span>

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/agents.js

@@ -86,6 +86,11 @@ export class AgentWrapper {
     if (this.agent.k8sCluster) {
       return 'mdi-kubernetes'
     }
+
+    if (this.agent.docker) {
+      return 'mdi-docker'
+    }
+
     return icons[this.agent.os] || 'flow-icon-agents'
   }
 

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>