Merge pull request #167 from FlowCI/develop

Develop

Author: gy2006

.run/start.run.xml

@@ -8,7 +8,7 @@
     <node-interpreter value="project" />
     <package-manager value="npm" />
     <envs>
-      <env name="VUE_APP_API_URL" value="http://192.168.31.173:8080" />
+      <env name="VUE_APP_API_URL" value="http://localhost:8080" />
     </envs>
     <method v="2" />
   </configuration>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "flow-web-x",
-  "version": "1.22.12",
+  "version": "1.22.38",
   "description": "flow.ci web ui",
   "author": "Yang Guo <[email protected]>",
   "private": true,
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@antv/g6": "^4.0.3",
-    "@mdi/js": "^5.9.55",
+    "@mdi/js": "^7.0.96",
     "axios": "^0.21.4",
     "babel-polyfill": "^6.26.0",
     "blueimp-md5": "^2.11.0",
@@ -27,15 +27,16 @@
     "lodash": "^4.17.21",
     "marked": "^0.7.0",
     "moment": "^2.22.2",
-    "monaco-editor": "^0.17.0",
-    "monaco-editor-webpack-plugin": "^1.7.0",
-    "sockjs-client": "^1.3.0",
+    "monaco-editor": "^0.30.1",
+    "monaco-editor-webpack-plugin": "^6.0.0",
+    "sockjs-client": "^1.6.1",
     "stompjs": "^2.3.3",
     "url-regex": "^5.0.0",
     "vue": "^2.6.10",
     "vue-clipboard2": "^0.3.1",
     "vue-i18n": "^7.8.0",
     "vue-router": "^3.0.3",
+    "vuedraggable": "^2.24.3",
     "vuetify": "^2.3.4",
     "vuex": "^3.0.1",
     "xterm": "^4.6.0",

package.json

@@ -22,6 +22,12 @@
       <flow-menu></flow-menu>
     </v-navigation-drawer>
 
+    <!-- global dialogs -->
+    <create-flow-dialog></create-flow-dialog>
+
+    <create-flow-group-dialog></create-flow-group-dialog>
+
+    <!-- main app view -->
     <v-app-bar app
                :clipped-left="$vuetify.breakpoint.lgAndUp"
                color="grey lighten-4">
@@ -63,10 +69,14 @@
   import actions from '@/store/actions'
   import { mapState } from 'vuex'
   import { connect, subscribeTopic, unsubscribeTopic } from '@/store/subscribe'
+  import CreateFlowDialog from "@/view/Flow/CreateDialog";
+  import CreateFlowGroupDialog from "@/view/Flow/CreateGroupDialog";
 
   export default {
     name: 'App',
     components: {
+      CreateFlowGroupDialog,
+      CreateFlowDialog,
       FlowMenu,
       AgentMenu,
       ProfileMenu,

src/App.vue

@@ -3,6 +3,7 @@
     <v-dialog
         v-model="show"
         :width="width"
+        @click:outside="onCancel"
     >
       <v-card>
         <v-card-title
@@ -20,22 +21,23 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn
-              v-if="this.cancelBtn"
-              :color="this.cancelBtn.color"
-              flat
-              @click="onCancelBtnClick"
-          >
-            {{ this.cancelBtn.text }}
+
+          <v-btn v-if="this.onCancel"
+                 small
+                 outlined
+                 min-width="70"
+                 color="warning"
+                 @click="onCancel"
+          >{{ $t('cancel') }}
           </v-btn>
 
-          <v-btn
-              v-if="this.confirmBtn"
-              :color="this.confirmBtn.color"
-              flat
-              @click="onConfirmBtnClick"
-          >
-            {{ this.confirmBtn.text }}
+          <v-btn v-if="this.onConfirm"
+                 small
+                 class="ml-6"
+                 min-width="70"
+                 color="primary"
+                 @click="onConfirm"
+          >{{ $t('confirm') }}
           </v-btn>
         </v-card-actions>
       </v-card>
@@ -44,73 +46,55 @@
 </template>
 
 <script>
-  export default {
-    name: 'Dialog',
-    props: {
-      dialog: {
-        type: Boolean,
-        required: true
-      },
-
-      width: {
-        type: Number,
-        required: false,
-        default () {
-          return 500
-        }
-      },
-
-      title: {
-        type: String,
-        required: false
-      },
-
-      content: {
-        type: String,
-        required: true
-      },
-
-      /**
-       * {
-       *   text: 'xxx',
-       *   action: function
-       *   color: 'xxx'
-       * }
-       */
-      confirmBtn: {
-        type: Object,
-        required: false
-      },
+export default {
+  name: 'Dialog',
+  props: {
+    dialog: {
+      type: Boolean,
+      required: true
+    },
 
-      cancelBtn: {
-        type: Object,
-        required: false
+    width: {
+      type: Number,
+      required: false,
+      default() {
+        return 500
       }
     },
-    data () {
-      return {
-        show: this.dialog
-      }
+
+    title: {
+      type: String,
+      required: false
     },
-    watch: {
-      dialog (newVal) {
-        this.show = newVal
-      }
+
+    content: {
+      type: String,
+      required: false
     },
-    methods: {
-      onConfirmBtnClick () {
-        if (this.confirmBtn.action) {
-          this.confirmBtn.action()
-        }
-      },
 
-      onCancelBtnClick () {
-        if (this.cancelBtn.action) {
-          this.cancelBtn.action()
-        }
-      }
+    onConfirm: {
+      type: Function,
+      required: false
+    },
+
+    onCancel: {
+      type: Function,
+      required: false
+    }
+  },
+  data() {
+    return {
+      show: this.dialog
+    }
+  },
+  watch: {
+    dialog(newVal) {
+      this.show = newVal
     }
+  },
+  methods: {
   }
+}
 </script>
 
 <style scoped>

src/components/Common/Dialog.vue

@@ -21,15 +21,19 @@
              tile
              class="action-btn"
              @click="onResetClick"
-             :disabled="!isCodeChange">
+             :disabled="!isCodeChange"
+             v-if="hasPermission('Admin')"
+      >
         {{ $t('reset') }}
       </v-btn>
 
       <v-btn color="primary"
              tile
              class="action-btn"
              @click="onSaveClick"
-             :disabled="!isCodeChange">
+             :disabled="!isCodeChange"
+             v-if="hasPermission('Admin')"
+      >
         {{ $t('save') }}
       </v-btn>
 
@@ -64,7 +68,7 @@
         lineNumbers: 'on',
         roundedSelection: false,
         scrollBeyondLastLine: false,
-        readOnly: false,
+        readOnly: !this.hasPermission('Admin'),
         automaticLayout: true,
         theme: 'vs-dark'
       })

src/components/Flow/EditYaml.vue

@@ -5,7 +5,7 @@
            small
            @click="onTestClick"
            :loading="loading"
-           :disabled="loading"
+           :disabled="loading || disabled"
     >
       {{ $t('test') }}
 
@@ -41,6 +41,12 @@
         default () {
           return true
         }
+      },
+      disabled: {
+        type: Boolean,
+        default() {
+          return false;
+        }
       }
     },
     data () {

src/components/Flow/GitTestBtn.vue

@@ -70,7 +70,7 @@
           return
         }
 
-        this.$store.dispatch(actions.flows.delete, this.flow.name).then(() => {
+        this.$store.dispatch(actions.flows.delete, this.flow).then(() => {
           this.onCloseClick()
           this.$router.push({path: `/flows`})
         })

src/components/Flow/OptionDeleteFlow.vue

@@ -89,10 +89,11 @@
 
     <v-row>
       <v-col>
-        <v-btn color="success"
+        <v-btn color="primary"
                @click="onUpdateClick"
                :loading="loading"
-        >Update Settings
+               :disabled="!hasPermission('Admin')"
+        >{{ $t('flow.update_btn') }}
         </v-btn>
       </v-col>
     </v-row>

src/components/Flow/OptionFlowSettings.vue

@@ -43,7 +43,10 @@
 
     <v-row>
       <v-col cols="11">
-        <git-test-btn :wrapper="wrapper" :onBeforeTest="onTestClick"></git-test-btn>
+        <git-test-btn :wrapper="wrapper"
+                      :onBeforeTest="onTestClick"
+                      :disabled="!hasPermission('Admin')"
+        ></git-test-btn>
       </v-col>
     </v-row>
   </v-form>
@@ -53,14 +56,13 @@
 <script>
 import vars from '@/util/vars'
 import GitTestBtn from '@/components/Flow/GitTestBtn'
-import { FlowWrapper } from '@/util/flows'
 import { gitUrlRules } from '@/util/rules'
 import { mapState } from 'vuex'
 
 export default {
   name: 'OptionGitAccess',
   props: {
-    flow: {
+    wrapper: {
       required: true,
       type: Object
     }
@@ -91,10 +93,6 @@ export default {
       settings: state => state.settings.instance
     }),
 
-    wrapper() {
-      return new FlowWrapper(this.flow)
-    },
-
     webhook() {
       return this.settings.serverUrl + '/webhooks/' + this.wrapper.name
     }

src/components/Flow/OptionGitAccess.vue

@@ -56,6 +56,10 @@
         required: true
       }
     },
+    data() {
+      return {
+      }
+    },
     methods: {
       onTitleClick () {
         this.$router.push({path: `/flows/${this.wrapper.name}/jobs`})

src/components/Flow/SummaryCard.vue

@@ -129,7 +129,7 @@ export default {
 
 <style lang="scss" scoped>
 .job-item {
-  min-height: 68px;
+  min-height: 80px;
 }
 
 .commit-text {

src/components/Jobs/ListItem.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-btn color="orange darken-2" dark @click="onClick" :small="small">
-    <v-icon dark left small>{{ icon }}</v-icon>{{ $t(text) }}
+  <v-btn color="grey" class="white--text" @click="onClick" :small="small">
+    <v-icon left small>{{ icon }}</v-icon>{{ $t(text) }}
   </v-btn>
 </template>
 

src/components/Settings/BackBtn.vue

@@ -42,7 +42,8 @@ export default {
 
   flow: {
     name: '工作流',
-    create: '创建一个工作流',
+    create: '创建工作流',
+    create_group: '创建 group',
     search: '输入关键词搜索',
     settings: '设置',
     statistic: '统计',
@@ -63,6 +64,8 @@ export default {
     create_blank_template_title: '不使用模版',
     create_blank_template_desc: '只创建一个 Flow， YAML 配置可稍后在 "工作流 -> 设置" 中配置',
 
+    update_btn: '更新设置',
+
     delete_btn: '删除当前 Flow',
     delete_desc: '删除当前 Flow 后无法恢复，请谨慎操作',