feat: New look and feel for event page

app/components/app-header/component.js

@@ -1,13 +1,31 @@
 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 { jwtDecode } from 'jwt-decode';
 
 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.token', function isAdmin() {
+    const token = this.get('session.data.authenticated.token');
+
+    return (jwtDecode(token).scope || []).includes('admin');
+  }),
+  isNewUI: computed('router.{currentRouteName,currentURL}', {
+    get() {
+      const currentURL = get(this, 'router.currentURL');
+      const isNewUIRoute = currentURL.includes('/v2/');
+
+      return isNewUIRoute;
+    }
+  }),
   actions: {
     invalidateSession() {
       this.onInvalidate();
@@ -26,6 +44,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,15 @@
                 {{/unless}}
               {{/each}}
               {{ddm.divider}}
+              {{#if this.isAdmin}}
+              <ddm.item>
+                <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>
+              </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,11 @@
+// import Component from '@glimmer/component';
+
+// export default class NewuiPipelineNavComponent extends Component {
+
+// }
+
+import Component from '@ember/component';
+
+export default Component.extend({
+  // pipeline: null
+});

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,38 @@ Router.map(function route() {
   this.route('404', { path: '/*path' });
 
   this.route('pipeline-visualizer');
+
+  this.route('v2', function v2Route() {
+    this.route('home');
+    this.route(
+      'pipeline',
+      { path: '/pipelines/:pipeline_id' },
+      function pipelinesRoute() {
+        this.route('index', { path: '/' });
+        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,84 @@
+.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-header        pipeline-header        pipeline-header'
+        'pipeline-tab     pipeline-tab     pipeline-tab           pipeline-tab           pipeline-tab'
+        'pipeline-content pipeline-content pipeline-workflowgraph pipeline-workflowgraph pipeline-workflowgraph';
+
+      grid-template-rows: 80px 52px 1fr;
+
+      .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/dashboard/index/route.js

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
+
+export default class NewDashboardIndexRoute extends Route.extend(
+  AuthenticatedRouteMixin
+) {
+  model() {
+    return this;
+  }
+}

app/v2/dashboard/index/template.hbs

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

app/v2/dashboard/show/route.js

@@ -0,0 +1,12 @@
+import Route from '@ember/routing/route';
+import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
+
+export default class NewDashboardShowRoute extends Route.extend(
+  AuthenticatedRouteMixin
+) {
+  /* eslint-disable camelcase */
+  model({ collection_id }) {
+    return this;
+  }
+  /* eslint-enable camelcase */
+}

app/v2/dashboard/show/template.hbs

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

app/v2/home/route.js

@@ -0,0 +1,6 @@
+import Route from '@ember/routing/route';
+import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
+
+export default class NewHomeRoute extends Route.extend(
+  AuthenticatedRouteMixin
+) {}

app/v2/home/template.hbs

@@ -0,0 +1,13 @@
+{{page-title "Home"}}
+
+<div class="new-ui">
+  <div class="grid-container">
+    <div class="grid-item left">
+      <NewuiPipelineNav />
+    </div>
+    <div class="grid-item right">
+      PIPELINE STUFF
+    </div>
+  </div>
+</div>
+{{outlet}}

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,27 @@
+import Controller from '@ember/controller';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+// import { tracked } from '@glimmer/tracking';
+
+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 {}