Merge pull request #132 from FlowCI/develop

v0.21.21

Author: gy2006

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "flow-web-x",
-  "version": "0.21.05",
+  "version": "0.21.21",
   "description": "flow.ci web ui",
   "author": "Yang Guo <32008001@qq.com>",
   "private": true,
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@antv/g6": "^4.0.3",
-    "@mdi/js": "^5.3.45",
+    "@mdi/js": "^5.9.55",
     "axios": "^0.21.1",
     "babel-polyfill": "^6.26.0",
     "blueimp-md5": "^2.11.0",

package.json

@@ -6,7 +6,7 @@
       <v-icon size="20" v-bind:class="[wrapper.status.class]">{{ wrapper.status.icon }}</v-icon>
     </v-col>
 
-    <v-col cols="1">
+    <v-col cols="2">
       <span class="font-weight-bold"># {{ wrapper.buildNumber }}</span>
       <v-tooltip bottom>
         <template v-slot:activator="{ on }">
@@ -23,7 +23,7 @@
       </v-tooltip>
     </v-col>
 
-    <v-col cols="8">
+    <v-col cols="7">
       <!-- for push and tag -->
       <v-row align="center"
              no-gutters

src/components/Jobs/ListItem.vue

@@ -166,8 +166,6 @@ export default {
       edges = edges.concat(this.toEdges({}, this.root.next))
 
       for (let step of this.findLastSteps(this.root)) {
-        console.log(step.name)
-
         edges.push({
           source: step.path,
           target: end.id

src/components/Jobs/StepGraphic.vue

@@ -1,30 +1,27 @@
 <template>
-  <div>
+  <div class="step-logging">
     <v-divider></v-divider>
 
-    <step-logging-item
-        v-for="(item) in stepItems"
-        :key="item.id"
-        :bus="buses[item.id]"
-        :on-debug-click="onDebugClick"
-        :wrapper="item">
-    </step-logging-item>
-
-    <v-divider class="mt-4" v-if="taskItems.length > 0"></v-divider>
-    <v-subheader class="mb-2" v-if="taskItems.length > 0">Notifications</v-subheader>
-
-    <step-logging-item
-        v-for="(item) in taskItems"
-        :key="item.id"
-        :wrapper="item">
-    </step-logging-item>
+    <v-treeview dense
+                ref="tree"
+                :items="nodes"
+                @update:open="onTreeExpanded"
+                item-key="pathAsString"
+                :open.sync="openIds">
+      <template v-slot:label={item}>
+        <step-logging-item :wrapper="steps[item.pathAsString] || emptyStep"
+                           :on-debug-click="onDebugClick"
+                           :bus="buses[item.pathAsString]"
+        ></step-logging-item>
+      </template>
+    </v-treeview>
   </div>
 </template>
 
 <script>
 import Vue from 'vue'
 import StepLoggingItem from '@/components/Jobs/StepLoggingItem'
-import {forEachStep, StepWrapper} from '@/util/steps'
+import {EmptyStepWrapper, forEachStep} from '@/util/steps'
 import {mapState} from 'vuex'
 
 export default {
@@ -34,9 +31,8 @@ export default {
   },
   data() {
     return {
-      stepItems: [],
-      taskItems: [],
-      buses: {}
+      buses: {},
+      emptyStep: EmptyStepWrapper
     }
   },
   props: {
@@ -50,39 +46,45 @@ export default {
       root: state => state.steps.root,
       tasks: state => state.steps.tasks,
       loaded: state => state.logs.loaded,
-      pushed: state => state.logs.pushed
+      pushed: state => state.logs.pushed,
+      nodes: state => state.flows.steps
     }),
+
+    openIds: {
+      get() {
+        let ids = []
+        this.forEachNodes(this.nodes, (n) => {
+          ids.push(n.pathAsString)
+        })
+        return ids
+      },
+      set() {
+
+      }
+    },
+
+    steps() {
+      let steps = {}
+      forEachStep(this.root, (step) => {
+        steps[step.path] = step
+      })
+      return steps
+    }
   },
   watch: {
     root(root) {
-      this.stepItems.length = 0
-      let added = {}
-
       forEachStep(root, (step) => {
-        if (step.isStage || step.isFlow) {
+        if (step.isParallel || step.isStage || step.isFlow) {
           return
         }
 
         // only init event once, since step-logging-item $on in mounted
-        if (!this.buses[step.id]) {
-          this.buses[step.id] = new Vue()
-        }
-
-        if (!added[step.id]) {
-          this.stepItems.push(step)
-          added[step.id] = step
+        if (!this.buses[step.path]) {
+          this.buses[step.path] = new Vue()
         }
       })
     },
 
-    tasks(tasks) {
-      this.taskItems.length = 0
-      tasks.forEach((s, index) => {
-        const wrapper = new StepWrapper(s, index)
-        this.taskItems.push(wrapper)
-      })
-    },
-
     // action from pushed log
     pushed(logWrapper) {
       this.writeLog(logWrapper)
@@ -101,11 +103,95 @@ export default {
       if (bus) {
         bus.$emit("writeLog", logWrapper.log)
       }
+    },
+
+    forEachNodes(nodes, onNode) {
+      for (let n of nodes) {
+        onNode(n)
+        this.forEachNodes(n.children, onNode)
+      }
+    },
+
+    onTreeExpanded() {
+      if (this.nodes.length === 0) {
+        return
+      }
+
+      let children = this.$refs.tree.$el.children
+      if (children.length > 0) {
+        this.cleanTreeviewElement(children)
+        return
+      }
+
+      setTimeout(() => {
+        this.cleanTreeviewElement(children)
+      }, 200)
+    },
+
+    cleanTreeviewElement(treeNodes) {
+      for (let tn of treeNodes) {
+        this.removeNodeLevelOrButtonFromTreeNode(tn)
+
+        let children = this.getChildrenNodes(tn)
+        if (children.length > 0) {
+          this.cleanTreeviewElement(children)
+        }
+      }
+    },
+
+    removeNodeLevelOrButtonFromTreeNode(treeNodeLeaf) {
+      const nodeRoot = treeNodeLeaf.children[0];
+      if (!nodeRoot) {
+        return
+      }
+
+      for (let child of nodeRoot.children) {
+        if (this.isToggleBtn(child)) {
+          child.remove()
+          return
+        }
+      }
+
+      const first = nodeRoot.children[0]
+      if (this.isNodeLevel(first)) {
+        first.remove()
+      }
+    },
+
+    getChildrenNodes(treeNode) {
+      if (treeNode.children.length !== 2) {
+        return []
+      }
+
+      const el = treeNode.children[1]
+      if(el.classList.contains('v-treeview-node__children')) {
+        return el.children
+      }
+
+      return []
+    },
+
+    isNodeLevel(el) {
+      return el.classList.contains('v-treeview-node__level')
+    },
+
+    isToggleBtn(el) {
+      return el.classList.contains('v-treeview-node__toggle')
     }
   }
 }
 </script>
 
 <style lang="scss">
+.step-logging {
+  .v-treeview-node {
+    .v-treeview-node__root {
+      padding-left: 0;
+    }
 
+    .v-treeview-node__content {
+      margin-left: 0;
+    }
+  }
+}
 </style>