Merge pull request #140 from FlowCI/develop

Develop

Author: gy2006

Makefile

@@ -0,0 +1,22 @@
+
+
+NPM_CLEAN    	:= npm ci
+NPM_BUILD    	:= npm run build
+
+CURRENT_DIR 	:= $(shell pwd)
+
+DOCKER_VOLUME	:= -v $(CURRENT_DIR):/ws
+DOCKER_IMG		:= node:14
+DOCKER_RUN 		:= docker run -it --rm -w /ws $(DOCKER_VOLUME) --network host $(DOCKER_IMG)
+DOCKER_BUILD	:= docker build -f ./Dockerfile -t flowci/web:latest -t flowci/web:$(tag) .
+
+.PHONY: build clean image
+
+build:
+	$(DOCKER_RUN) $(NPM_BUILD)
+
+image: build
+	$(DOCKER_BUILD)
+
+clean:
+	$(DOCKER_RUN) $(NPM_CLEAN)

build.sh

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

package.json

@@ -94,9 +94,10 @@
     methods: {
       reload () {
         this.$store.dispatch(actions.flows.yml.load, this.flow.name)
-          .then()
+          .then() // handled on watch yml
           .catch((e) => {
             console.log(e.message)
+            this.editor.setValue('')
           })
       },
 

src/components/Flow/EditYaml.vue

@@ -233,6 +233,7 @@ export default {
         const node = {
           id: step.path,
           label: step.name,
+          size: [10 + (step.name.length * 7), 30],
           preRect: {
             fill: step.status.config.style.fill,
             width: 7,

src/components/Jobs/StepGraphic.vue

@@ -31,6 +31,7 @@ export default {
   },
   data() {
     return {
+      steps: {},
       buses: {},
       emptyStep: EmptyStepWrapper
     }
@@ -63,14 +64,6 @@ export default {
       }
     },
 
-    steps() {
-      let steps = {}
-      forEachStep(this.root, (step) => {
-        steps[step.path] = step
-      })
-      return steps
-    },
-
     pathIdMapping() {
       let mapping = {}
       forEachStep(this.root, (step) => {
@@ -80,8 +73,11 @@ export default {
     }
   },
   watch: {
-    root(root) {
-      forEachStep(root, (step) => {
+    root() {
+      this.steps = {}
+      forEachStep(this.root, (step) => {
+        this.steps[step.path] = step
+
         if (step.isParallel || step.isStage || step.isFlow) {
           return
         }
@@ -91,6 +87,11 @@ export default {
           this.buses[step.path] = new Vue()
         }
       })
+
+      let children = this.$refs.tree.$el.children
+      if (children.length > 0) {
+        this.refreshStatus(children)
+      }
     },
 
     // action from pushed log
@@ -121,6 +122,17 @@ export default {
       }
     },
 
+    refreshStatus(treeNodes) {
+      for (let tn of treeNodes) {
+        this.fillInStatusColor(tn)
+
+        let children = this.getChildrenNodes(tn)
+        if (children.length > 0) {
+          this.refreshStatus(children)
+        }
+      }
+    },
+
     onTreeExpanded() {
       if (this.nodes.length === 0) {
         return
@@ -140,6 +152,7 @@ export default {
     cleanTreeviewElement(treeNodes) {
       for (let tn of treeNodes) {
         this.removeNodeLevelOrButtonFromTreeNode(tn)
+        this.fillInStatusColor(tn)
 
         let children = this.getChildrenNodes(tn)
         if (children.length > 0) {
@@ -167,13 +180,31 @@ export default {
       }
     },
 
+    fillInStatusColor(treeNode) {
+      const nodeRoot = treeNode.children[0];
+      if (!nodeRoot) {
+        return
+      }
+
+      const stepId = this.findIdFromLoggingItem(nodeRoot)
+      const nodePath = this.pathIdMapping[stepId]
+      const wrapper = this.steps[nodePath]
+
+      if (!wrapper || !wrapper.status) {
+        return
+      }
+
+      this.addStatusDiv(nodeRoot, wrapper)
+      this.addDotIndicator(nodeRoot, wrapper)
+    },
+
     getChildrenNodes(treeNode) {
       if (treeNode.children.length !== 2) {
         return []
       }
 
       const el = treeNode.children[1]
-      if(el.classList.contains('v-treeview-node__children')) {
+      if (el.classList.contains('v-treeview-node__children')) {
         return el.children
       }
 
@@ -186,6 +217,60 @@ export default {
 
     isToggleBtn(el) {
       return el.classList.contains('v-treeview-node__toggle')
+    },
+
+    findIdFromLoggingItem(node) {
+      let el = node.getElementsByClassName('step-logging-item')
+      return el[0].id;
+    },
+
+    addStatusDiv(nodeRoot, wrapper) {
+      const div = document.createElement('div')
+      div.classList.add("status")
+      div.style.backgroundColor = wrapper.status.config.style.fill
+
+      const levels = nodeRoot.getElementsByClassName('v-treeview-node__level')
+      if (levels && levels.length > 0) {
+        this.removeElementsByClass(nodeRoot, 'status')
+        nodeRoot.prepend(div)
+        return
+      }
+
+      wrapper.showStatus = true
+    },
+
+    addDotIndicator(nodeRoot, wrapper) {
+      const levels = nodeRoot.getElementsByClassName('v-treeview-node__level')
+      if (!levels) {
+        return
+      }
+
+      for (const level of levels) {
+        this.removeElementsByClass(level, 'dot-ind')
+        level.appendChild(this.getDotIndicator(wrapper))
+      }
+    },
+
+    getDotIndicator(wrapper) {
+      const div = document.createElement('div')
+      div.style.border = '2px'
+      div.style.borderStyle = 'dotted'
+      div.style.color = wrapper.status.config.style.fill
+      div.style.width = '100%'
+      div.style.marginLeft = '2px'
+      div.classList.add('dot-ind')
+      return div
+    },
+
+    removeElementsByClass(el, className) {
+      let all = el.getElementsByClassName(className)
+      if (!all) {
+        return
+      }
+
+      for (let item of all) {
+        item.remove()
+      }
     }
   }
 }
@@ -201,6 +286,23 @@ export default {
     .v-treeview-node__content {
       margin-left: 0;
     }
+
+    .v-treeview-node__level {
+      max-height: 40px;
+      min-height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .status {
+      position: absolute;
+      min-width: 4px;
+      max-width: 4px;
+      top: 0;
+      bottom: 0;
+      left: 0;
+    }
   }
 }
 </style>

src/components/Jobs/StepLogging.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="step-logging-item" @click="onPanelClick">
+  <div class="step-logging-item" @click="onPanelClick" :id="wrapper.id">
     <v-expansion-panels
         :readonly="!showLog"
         accordion
         focusable>
       <v-expansion-panel>
         <v-expansion-panel-header>
           <template v-slot:default="{ open }">
-            <div class="status" :style="{backgroundColor: wrapper.status.config.style.fill}"></div>
+            <div class="status" :style="{backgroundColor: wrapper.status.config.style.fill}" v-if="wrapper.showStatus"></div>
 
-            <v-row no-gutters class="ml-4">
+            <v-row no-gutters class="ml-2">
               <!-- step name -->
               <v-col cols="5">
                 <v-icon small v-if="showLog">mdi-chevron-right</v-icon>
@@ -155,7 +155,7 @@ export default {
   },
   computed: {
     showLog() {
-      return !this.wrapper.children
+      return this.bus
     }
   },
   watch: {

src/components/Jobs/StepLoggingItem.vue

@@ -192,7 +192,7 @@ const actions = {
       })
   },
 
-  async confirm ({commit}, {wrapper, yaml}) {
+  async confirm ({commit}, {wrapper, desc}) {
     let gitSettings = {
       gitUrl: wrapper.gitUrl,
       secret: wrapper.secret
@@ -204,7 +204,8 @@ const actions = {
         (flow) => {
           console.log('[DONE]: confirmed')
           commit('add', new FlowWrapper(flow))
-        }, {yaml: btoa(yaml)}
+        },
+        {desc}
       )
     }
 

src/store/module/flows.js

@@ -37,7 +37,8 @@ export class StepWrapper {
     this.stepName = step.name
     this.nextSteps = []
     this.parentStep = null
-    this.isRootFlow = !step.parent;
+    this.isRootFlow = !step.parent
+    this.isShowStatus = false
 
     let path = step.nodePath;
     if (path) {
@@ -184,13 +185,21 @@ export class StepWrapper {
     return this.step.status === STATUS_EXCEPTION
   }
 
+  get showStatus() {
+    return this.isShowStatus
+  }
+
   set rawStatus(newStatus) {
     this.step.status = newStatus
   }
 
   set parent(p) {
     this.parentStep = p
   }
+
+  set showStatus(val) {
+    this.isShowStatus = val
+  }
 }
 
 export function isStepFinished(step) {

src/util/steps.js

@@ -37,6 +37,7 @@
               class="ml-2"
               :on-back-click="onBackClick"
               :on-next-click="onNextClick"
+              :loading="loading"
           ></create-select-template>
           <span class="error--text" v-if="error">{{ `Error: ${error}` }}</span>
         </v-stepper-content>
@@ -61,7 +62,8 @@
     data() {
       return {
         step: 1,
-        error: ''
+        error: '',
+        loading: false
       }
     },
     computed: {
@@ -112,20 +114,18 @@
           },
 
           // step 2
-          2: ({yaml, err}) => {
-            if (err) {
-              this.error = err
-              return
-            }
-
+          2: (desc) => {
             // send confirm
-            let payload = {wrapper: this.flow, yaml};
+            this.loading = true
+            let payload = {wrapper: this.flow, desc}
             this.$store.dispatch(actions.flows.confirm, payload)
                 .then(() => {
                   this.onCancelClick()
+                  this.loading = false
                 })
                 .catch((err) => {
                   this.error = err.message
+                  this.loading = false
                 })
           }
         }