Changed sidebar, removed second level. Improved previous runs from pipelines view

Author: michelvocks

frontend/build/webpack.dev.conf.js

@@ -32,7 +32,7 @@ module.exports = merge(baseWebpackConfig, {
     }),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
-      title: 'Gaia - Build powerful automation pipelines in any programming language.',
+      title: 'Gaia - Build powerful pipelines in any programming language.',
       filename: 'index.html',
       template: 'index.html',
       inject: true,

frontend/build/webpack.prod.conf.js

@@ -51,7 +51,7 @@ const webpackConfig = merge(baseWebpackConfig, {
     // you can customize output by editing /index.html
     // see https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
-      title: 'Gaia - Build powerful automation pipelines in any programming language.',
+      title: 'Gaia - Build powerful pipelines in any programming language.',
       filename: process.env.NODE_ENV === 'testing'
         ? 'index.html'
         : config.build.index,

frontend/client/components/layout/Sidebar.vue

@@ -8,121 +8,26 @@
     </div>
     <ul class="menu-list">
       <li v-for="(item, index) in menu" :key="index">
-        <router-link :to="item.path" :exact="true" :aria-expanded="isExpanded(item) ? 'true' : 'false'" v-if="item.path" @click.native="toggle(index, item)">
+        <router-link :to="item.path" :exact="true" v-if="item.path">
           <span class="icon icon-left is-small"><i :class="['fa', item.meta.icon]"></i></span>
           {{ item.meta.label || item.name }}
-          <span class="icon is-small is-angle" v-if="item.subroute && item.subroute.length">
-            <i class="fa fa-angle-down"></i>
-          </span>
         </router-link>
-        <a :aria-expanded="isExpanded(item)" v-else @click.native="toggle(index, item)">
-          <span class="icon icon-left is-small"><i :class="['fa', item.meta.icon]"></i></span>
-          {{ item.meta.label || item.name }}
-          <span class="icon is-small is-angle" v-if="item.subroute && item.subroute.length">
-            <i class="fa fa-angle-down"></i>
-          </span>
-        </a>
-
-        <expanding v-if="item.subroute && item.subroute.length">
-          <ul v-show="isExpanded(item)" class="menu-list-expanded">
-            <li v-for="(subItem, index) in item.subroute" v-if="subItem.path" :key="index">
-              <router-link :to="subItem.path">
-                {{ subItem.meta && subItem.meta.label || subItem.name }}
-              </router-link>
-            </li>
-          </ul>
-        </expanding>
       </li>
     </ul>
   </aside>
 </template>
 
 <script>
-import Expanding from 'vue-bulma-expanding'
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters } from 'vuex'
 
 export default {
-  components: {
-    Expanding
-  },
-
   props: {
     show: Boolean
   },
 
-  data () {
-    return {
-      isReady: false
-    }
-  },
-
-  mounted () {
-    let route = this.$route
-    if (route.name) {
-      this.isReady = true
-      this.shouldExpandMatchItem(route)
-    }
-  },
-
   computed: mapGetters({
     menu: 'menuitems'
-  }),
-
-  methods: {
-    ...mapActions([
-      'expandMenu'
-    ]),
-
-    isExpanded (item) {
-      return item.meta.expanded
-    },
-
-    toggle (index, item) {
-      this.expandMenu({
-        index: index,
-        expanded: !item.meta.expanded
-      })
-    },
-
-    shouldExpandMatchItem (route) {
-      var parent
-
-      const p = this.findParentFromMenu(route)
-      if (p) {
-        parent = p
-      }
-
-      if (parent && 'expanded' in parent.meta) {
-        this.expandMenu({
-          item: parent,
-          expanded: true
-        })
-      }
-    },
-
-    findParentFromMenu (route) {
-      const menu = this.menu
-      for (let i = 0, l = menu.length; i < l; i++) {
-        const item = menu[i]
-        const k = item.subroute && item.subroute.length
-        if (k) {
-          for (let j = 0; j < k; j++) {
-            if (item.subroute[j].path === route.path) {
-              return item
-            }
-          }
-        }
-      }
-    }
-  },
-
-  watch: {
-    $route (route) {
-      this.isReady = true
-      this.shouldExpandMatchItem(route)
-    }
-  }
-
+  })
 }
 </script>
 
@@ -160,12 +65,6 @@ a.navbar-item:hover {
 
   .icon {
     vertical-align: baseline;
-    &.is-angle {
-      position: absolute;
-      right: 10px;
-      margin-top: 13px;
-      transition: transform .377s ease;
-    }
   }
 
   .brand-top {
@@ -198,7 +97,6 @@ a.navbar-item:hover {
     li a.is-active {
       background-color: rgb(60, 57, 74);
       color: #51a0f6;
-      font-weight: bold;
       border-right: 3px solid #51a0f6;
     }
 
@@ -214,15 +112,9 @@ a.navbar-item:hover {
 
     li a {
       color: #8c91a0;
-      width: 140px;
-      margin-left: 60px;
+      width: 150px;
+      margin-left: 50px;
       line-height: 40px;
-
-      &[aria-expanded="true"] {
-        .is-angle {
-          transform: rotate(180deg);
-        }
-      }
     }
 
     li a + ul {

frontend/client/store/actions.js

@@ -8,13 +8,6 @@ export const toggleSidebar = ({ commit }, config) => {
 
 export const toggleDevice = ({ commit }, device) => commit(types.TOGGLE_DEVICE, device)
 
-export const expandMenu = ({ commit }, menuItem) => {
-  if (menuItem) {
-    menuItem.expanded = menuItem.expanded || false
-    commit(types.EXPAND_MENU, menuItem)
-  }
-}
-
 export const switchEffect = ({ commit }, effectItem) => {
   if (effectItem) {
     commit(types.SWITCH_EFFECT, effectItem)

frontend/client/store/modules/menu/index.js

@@ -1,6 +1,4 @@
-import * as types from '../../mutation-types'
 import lazyLoading from './lazyLoading'
-import pipelines from './pipelines'
 
 // show: meta.label -> name
 // name: component name
@@ -17,23 +15,17 @@ const state = {
       },
       component: lazyLoading('overview', true)
     },
-    pipelines
-  ]
-}
-
-const mutations = {
-  [types.EXPAND_MENU] (state, menuItem) {
-    if (menuItem.index > -1) {
-      if (state.items[menuItem.index] && state.items[menuItem.index].meta) {
-        state.items[menuItem.index].meta.expanded = menuItem.expanded
-      }
-    } else if (menuItem.item && 'expanded' in menuItem.item.meta) {
-      menuItem.item.meta.expanded = menuItem.expanded
+    {
+      name: 'Create Pipeline',
+      path: '/pipelines/create',
+      meta: {
+        icon: 'fa-plus'
+      },
+      component: lazyLoading('pipelines/create')
     }
-  }
+  ]
 }
 
 export default {
-  state,
-  mutations
+  state
 }

frontend/client/store/modules/menu/pipelines.js

@@ -2,6 +2,4 @@ export const TOGGLE_DEVICE = 'TOGGLE_DEVICE'
 
 export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR'
 
-export const EXPAND_MENU = 'EXPAND_MENU'
-
 export const SWITCH_EFFECT = 'SWITCH_EFFECT'

frontend/client/store/mutation-types.js

@@ -17,13 +17,21 @@
               :rows="runsRows"
               :paginate="true"
               :global-search="true"
-              :defaultSortBy="{field: 'id', type: 'asc'}"
+              :defaultSortBy="{field: 'id', type: 'desc'}"
               globalSearchPlaceholder="Search ..."
               styleClass="table table-own-bordered">
               <template slot="table-row" slot-scope="props">
-                <td>{{ props.row.id }}</td>
-                <td>{{ props.row.status }}</td>
-                <td>{{ props.row.startdate }}</td>
+                <td>
+                  <router-link :to="{ path: '/pipelines/detail', query: { pipelineid: pipelineID, runid: props.row.id }}" class="is-blue">
+                    {{ props.row.id }}
+                  </router-link>
+                </td>
+                <td>
+                  <span v-if="props.row.status === 'success'" style="color: green;">{{ props.row.status }}</span>
+                  <span v-else-if="props.row.status === 'failed'" style="color: red;">{{ props.row.status }}</span>
+                  <span v-else>{{ props.row.status }}</span>
+                </td>
+                <td>{{ calculateDuration(props.row.startdate, props.row.finishdate) }}</td>
               </template>
               <div slot="emptystate" class="empty-table-text">
                 No pipeline runs found in database.
@@ -40,6 +48,7 @@ import Vue from 'vue'
 import Vis from 'vis'
 import VueTippy from 'vue-tippy'
 import VueGoodTable from 'vue-good-table'
+import moment from 'moment'
 
 Vue.use(VueGoodTable)
 Vue.use(VueTippy)
@@ -48,6 +57,7 @@ export default {
 
   data () {
     return {
+      pipelineID: null,
       nodes: null,
       edges: null,
       lastRedraw: false,
@@ -62,8 +72,7 @@ export default {
           field: 'status'
         },
         {
-          label: 'Duration',
-          field: 'startdate'
+          label: 'Duration'
         }
       ],
       runsRows: [],
@@ -110,13 +119,26 @@ export default {
     }.bind(this), 3000)
   },
 
+  watch: {
+    '$route': 'locationReload'
+  },
+
   methods: {
+    locationReload () {
+      // View should be re-rendered
+      this.lastRedraw = false
+
+      // Fetch data
+      this.fetchData()
+    },
+
     fetchData () {
       // look up url parameters
       var pipelineID = this.$route.query.pipelineid
       if (!pipelineID) {
         return
       }
+      this.pipelineID = pipelineID
 
       // runID is optional
       var runID = this.$route.query.runid
@@ -273,6 +295,22 @@ export default {
         // We have to move out the instance out of vue because of https://github.com/almende/vis/issues/2567
         window.pipelineView = new Vis.Network(container, data, this.pipelineViewOptions)
       }
+    },
+
+    calculateDuration (startdate, finishdate) {
+      if (!moment(startdate).millisecond()) {
+        startdate = moment()
+      }
+      if (!moment(finishdate).millisecond()) {
+        finishdate = moment()
+      }
+
+      // Calculate difference
+      var diff = moment(finishdate).diff(moment(startdate), 'seconds')
+      if (diff < 60) {
+        return diff + ' seconds'
+      }
+      return moment.duration(diff, 'seconds').humanize()
     }
   }
 

frontend/client/views/pipelines/detail.vue

@@ -45,7 +45,6 @@
     "plotly.js": "^1.33.1",
     "vis": "^4.21.0",
     "vue": "^2.5.13",
-    "vue-bulma-breadcrumb": "^1.0.1",
     "vue-bulma-collapse": "1.0.3",
     "vue-bulma-datepicker": "^1.3.0",
     "vue-bulma-expanding": "^0.0.1",