feat: New look and feel for event page

app/components/app-header/component.js

@@ -1,13 +1,56 @@
 import Component from '@ember/component';
 import ENV from 'screwdriver-ui/config/environment';
+import { computed, get } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { getOwner } from '@ember/application';
 
 export default Component.extend({
+  router: service(),
+  session: service(),
   tagName: 'header',
   showSearch: false,
   docUrl: ENV.APP.SDDOC_URL,
   slackUrl: ENV.APP.SLACK_URL,
   releaseVersion: ENV.APP.RELEASE_VERSION,
   searchTerm: '',
+  isAdmin: computed(
+    'session.data.authenticated.scope',
+    function isAdminFunction() {
+      const isAdmin = (this.session.data.authenticated.scope || []).includes(
+        'admin'
+      );
+
+      return isAdmin;
+    }
+  ),
+  isNewUI: computed('router.{currentRouteName,currentURL}', {
+    get() {
+      const currentURL = get(this, 'router.currentURL');
+      const isNewUIRoute = currentURL.includes('/v2/');
+
+      return isNewUIRoute;
+    }
+  }),
+  hasAlternativeRoute: computed(
+    'isNewUI',
+    'router.{currentRouteName,currentURL}',
+    {
+      get() {
+        const routeName = this.router.currentRouteName;
+
+        let alterRouteName = `v2.${this.router.currentRouteName}`;
+
+        if (this.isNewUI) {
+          // to remove v2. prefix
+          alterRouteName = routeName.slice(3);
+        }
+
+        const alterRoute = getOwner(this).lookup(`route:${alterRouteName}`);
+
+        return alterRoute;
+      }
+    }
+  ),
   actions: {
     invalidateSession() {
       this.onInvalidate();
@@ -26,6 +69,17 @@ export default Component.extend({
     },
     openSearchForm() {
       this.set('showSearch', true);
+    },
+    switchUI() {
+      const currentURL = get(this, 'router.currentURL');
+
+      let targetURL = `/v2${currentURL}`;
+
+      if (this.isNewUI) {
+        targetURL = currentURL.split('/v2/').join('/');
+      }
+
+      this.router.transitionTo(targetURL);
     }
   }
 });

app/components/app-header/styles.scss

@@ -169,6 +169,10 @@
     pointer-events: none;
   }
 
+  .dropdown-item.switch-ui {
+    cursor: pointer;
+  }
+
   .dropdown-item > a.active > span {
     font-size: 12px;
     color: $sd-text-light;

app/components/app-header/template.hbs

@@ -182,6 +182,17 @@
                 {{/unless}}
               {{/each}}
               {{ddm.divider}}
+              {{#if this.isAdmin}}
+              <ddm.item>
+                {{#if this.hasAlternativeRoute}}
+                  <span class="switch-ui dropdown-item"
+                    title="Switch to {{if this.isNewUIRoute "Old" "New"}}"
+                    {{action "switchUI"}}
+                  >Switch to {{if this.isNewUI "Old" "New"}} UI
+                  </span>
+                {{/if}}
+              </ddm.item>
+              {{/if}}
               {{#if (not @session.data.authenticated.isGuest)}}
                 <ddm.item>
                   <ddm.linkTo @route="user-settings" @title="User Settings">

app/components/newui-pipeline-nav/component.js

@@ -0,0 +1,3 @@
+import Component from '@ember/component';
+
+export default Component.extend({});

app/components/newui-pipeline-nav/styles.scss

@@ -0,0 +1,52 @@
+ul.pipeline-nav {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  text-align: center;
+
+  display: grid;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+
+  grid-template-columns: auto;
+  grid-template-rows: 40px 40px 40px 40px auto;
+
+  grid-template-areas:
+    'builds'
+    'secrets'
+    'options'
+    'metrics'
+    'rest';
+
+  a {
+    &.active {
+      color: #1c64f2;
+    }
+
+    color: #6b7280;
+  }
+
+  &:first-child {
+    padding-top: 20px;
+  }
+
+  .svg-inline--fa {
+    cursor: pointer;
+  }
+
+  .builds {
+    grid-area: builds;
+  }
+
+  .secrets {
+    grid-area: secrets;
+  }
+
+  .options {
+    grid-area: options;
+  }
+  .metrics {
+    grid-area: metrics;
+  }
+}

app/components/newui-pipeline-nav/template.hbs

@@ -0,0 +1,14 @@
+<ul class="pipeline-nav">
+  <li class="builds" title="Builds">
+    <LinkTo @route="v2.pipeline.builds"><FaIcon @icon="cubes" @size="16x"/></LinkTo>
+  </li>
+  <li class="secrets" title="Secrets">
+    <LinkTo @route="v2.pipeline.secrets"><FaIcon @icon="key" @size="16x"/></LinkTo>
+  </li>
+  <li class="options" title="Options">
+    <LinkTo @route="v2.pipeline.options"><FaIcon @icon="wrench" @size="16x"/></LinkTo>
+  </li>
+  <li class="metrics" title="Metrics">
+    <LinkTo @route="v2.pipeline.metrics"><FaIcon @icon="water" @size="16x"/></LinkTo>
+  </li>
+</ul>

app/router.js

@@ -15,7 +15,7 @@ Router.map(function route() {
     'pipeline',
     { path: '/pipelines/:pipeline_id' },
     function secretsRoute() {
-      this.route('jobs', function eventsRoute() {
+      this.route('jobs', function jobsRoute() {
         this.route('index', { path: '/' });
       });
       this.route('events', function eventsRoute() {
@@ -124,6 +124,37 @@ Router.map(function route() {
   this.route('404', { path: '/*path' });
 
   this.route('pipeline-visualizer');
+
+  this.route('v2', function v2Route() {
+    this.route('index', { path: '/' });
+    this.route(
+      'pipeline',
+      { path: '/pipelines/:pipeline_id' },
+      function pipelinesRoute() {
+        this.route('builds');
+        this.route('secrets');
+        this.route('options');
+        this.route('metrics');
+
+        this.route('events', function eventsRoute() {
+          this.route('show', { path: '/:event_id' });
+        });
+        this.route('jobs', function jobsRoute() {
+          this.route('index', { path: '/' });
+        });
+        this.route('pulls');
+      }
+    );
+
+    this.route(
+      'dashboard',
+      { path: '/dashboards' },
+      function dashboardsRoute() {
+        this.route('index', { path: '/' });
+        this.route('show', { path: '/:collection_id' });
+      }
+    );
+  });
 });
 /* eslint-enable array-callback-return */
 

app/styles/app.scss

@@ -74,6 +74,7 @@ $pipeline-header-height-max: 134px;
 @import 'app/styles/user-settings';
 @import 'app/styles/create';
 @import 'app/styles/commands-templates';
+@import 'app/styles/new-ui';
 
 .container {
   box-sizing: border-box;

app/styles/new-ui.scss

@@ -0,0 +1,85 @@
+.new-ui {
+  // to accommodate and offset old ui margins
+  margin-right: -15px;
+  margin-left: -15px;
+  height: 100%;
+  // height: 100vh;
+
+  .grid-container {
+    display: grid;
+    height: 100%;
+
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+
+    grid-template-columns: 50px;
+    grid-template-rows: auto;
+
+    grid-template-areas: 'left right';
+
+    .grid-item.left {
+      background-color: #fff;
+      border-left: 1px solid #f2f2f2;
+      border-right: 1px solid #f2f2f2;
+
+      grid-area: left;
+    }
+
+    .grid-item.right {
+      grid-area: right;
+
+      display: grid;
+      grid-column-gap: 0px;
+      grid-row-gap: 0px;
+
+      grid-template-areas:
+        'pipeline-header  pipeline-header'
+        'pipeline-tab     pipeline-tab'
+        'pipeline-content pipeline-workflowgraph';
+
+      grid-template-rows: 80px 52px 1fr;
+      grid-template-columns: 2fr 8fr;
+
+      .grid-item.pipeline-header {
+        grid-area: pipeline-header;
+      }
+
+      .grid-item.pipeline-tab {
+        grid-area: pipeline-tab;
+
+        display: grid;
+        padding-top: 8px;
+        padding-bottom: 1px;
+
+        ul.nav-tabs.nav {
+          border: none;
+
+          li {
+            border-bottom: 3px solid #fff;
+            padding-left: 15px;
+            padding-right: 15px;
+            text-align: center;
+
+            &.active {
+              border-bottom-color: #1c64f2;
+            }
+
+            a {
+              &.active {
+                color: #1c64f2;
+              }
+
+              color: #6b7280;
+              border: none;
+              padding: 8px 16px 9px 16px;
+            }
+          }
+        }
+      }
+
+      .grid-item.pipeline-content {
+        grid-area: pipeline-content;
+      }
+    }
+  }
+}

app/v2/pipeline/builds/route.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class NewPipelineBuildsRoute extends Route {}

app/v2/pipeline/builds/template.hbs

@@ -0,0 +1,2 @@
+{{page-title "Builds"}}
+{{outlet}}

app/v2/pipeline/controller.js

@@ -0,0 +1,26 @@
+import Controller from '@ember/controller';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class NewPipelineController extends Controller {
+  @service session;
+
+  get collections() {
+    return this.model.collections;
+  }
+
+  get pipeline() {
+    return this.model.pipeline;
+  }
+
+  @action
+  addToCollection(pipelineId, collection) {
+    const { pipelineIds } = collection;
+
+    if (!pipelineIds.includes(pipelineId)) {
+      collection.set('pipelineIds', [...pipelineIds, pipelineId]);
+    }
+
+    return collection.save();
+  }
+}

app/v2/pipeline/events/controller.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class NewPipelineEventsController extends Controller {}

app/v2/pipeline/events/index/route.js

@@ -0,0 +1,9 @@
+import Route from '@ember/routing/route';
+
+export default class NewPipelineEventsIndexRoute extends Route {
+  /* eslint-disable camelcase */
+  model({ event_id }) {
+    return this;
+  }
+  /* eslint-enable camelcase */
+}

app/v2/pipeline/events/index/template.hbs

@@ -0,0 +1,2 @@
+{{page-title "Index"}}
+{{outlet}}

app/v2/pipeline/events/route.js

@@ -0,0 +1,9 @@
+import Route from '@ember/routing/route';
+
+export default class NewPipelineEventsRoute extends Route {
+  /* eslint-disable camelcase */
+  model({ event_id }) {
+    return this;
+  }
+  /* eslint-enable camelcase */
+}

app/v2/pipeline/events/show/route.js

@@ -0,0 +1,9 @@
+import Route from '@ember/routing/route';
+
+export default class NewPipelineEventsShowRoute extends Route {  
+  /* eslint-disable camelcase */
+  model({ event_id }) {
+    return this;
+  }
+  /* eslint-enable camelcase */
+}

app/v2/pipeline/events/show/template.hbs

@@ -0,0 +1,2 @@
+{{page-title "Show"}}
+{{outlet}}

app/v2/pipeline/events/template.hbs

@@ -0,0 +1,2 @@
+{{page-title "Events"}}
+{{outlet}}