[feature] complete design overhaul

.storybook/preview-head.html

@@ -1,11 +1,24 @@
 <!-- This file is auto-generated by ember-cli-storybook -->
-<meta name="broccoli-inspector/config/environment" content="%7B%22ember-websockets%22%3A%7B%22socketIO%22%3Atrue%7D%2C%22apollo%22%3A%7B%22apiURL%22%3A%22http%3A%2F%2Flocalhost%3A4200%2Fbroccoli-inspector%2Fapi%2Fgraphql%22%7D%2C%22modulePrefix%22%3A%22broccoli-inspector%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%2F_broccoli-inspector%2F%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_DEFAULT_ASYNC_OBSERVERS%22%3Atrue%2C%22_JQUERY_INTEGRATION%22%3Afalse%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22appVersion%22%3A%223.0.1%22%2C%22name%22%3A%22broccoli-inspector%22%2C%22version%22%3A%220.1.2%2Bc7ab4c66%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />
-<link rel="apple-touch-icon" href="./assets/favicon/apple-touch-icon-46d49475781a4e8ffacd9d757b2b2af3.png" />
-<link rel="icon" href="./assets/favicon/favicon-32x32-73910b61c8ca8f3b038c58161a86322d.png" />
-<link rel="icon" href="./assets/favicon/favicon-16x16-5a05f8998791ee6ee2471d3871e8de03.png" />
-<link rel="manifest" href="./assets/favicon/site.webmanifest" />
-<link rel="mask-icon" href="./assets/favicon/safari-pinned-tab.svg" />
-<link rel="stylesheet" href="./assets/vendor-558fdb8794418b304cee5b65ea10dae0.css" />
-<link rel="stylesheet" href="./assets/broccoli-inspector-de58c4fa294726a9ca8a4343f2f285e8.css" />
-<script src="./assets/vendor-1175ec6ad13fedef872d501ebd1d07e9.js"></script>
-<script src="./assets/broccoli-inspector-311f4faf10ba2a9a4a329908bf1b28bb.js"></script>
+<meta name="broccoli-inspector/config/environment" content="%7B%22ember-websockets%22%3A%7B%22socketIO%22%3Atrue%7D%2C%22apollo%22%3A%7B%22apiURL%22%3A%22http%3A%2F%2Flocalhost%3A4200%2Fbroccoli-inspector%2Fapi%2Fgraphql%22%7D%2C%22modulePrefix%22%3A%22broccoli-inspector%22%2C%22environment%22%3A%22test%22%2C%22rootURL%22%3A%22%2F_broccoli-inspector%2F%22%2C%22locationType%22%3A%22none%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_DEFAULT_ASYNC_OBSERVERS%22%3Atrue%2C%22_JQUERY_INTEGRATION%22%3Afalse%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22LOG_ACTIVE_GENERATION%22%3Afalse%2C%22LOG_VIEW_LOOKUPS%22%3Afalse%2C%22rootElement%22%3A%22%23ember-testing%22%2C%22autoboot%22%3Afalse%2C%22appVersion%22%3A%223.0.1%22%2C%22name%22%3A%22broccoli-inspector%22%2C%22version%22%3A%220.1.2%2Bdb9ec2ed%22%7D%2C%22ember-paper%22%3A%7B%22insertFontLinks%22%3Atrue%7D%2C%22exportApplicationGlobal%22%3Atrue%7D" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+<link rel="stylesheet" href="./assets/vendor-78fca8282395a1b28c7d1bbb0dbb9d78.css" />
+<link rel="stylesheet" href="./assets/broccoli-inspector-aa19d6fbee090aa49a24e6845ab002e4.css" />
+<script>
+            (function() {
+              var srcUrl = null;
+              var host = location.hostname || 'localhost';
+              var defaultPort = location.protocol === 'https:' ? 443 : 80;
+              var port = 4200;
+              var path = '';
+              var prefixURL = '';
+              var src = srcUrl || prefixURL + '/_lr/livereload.js?port=' + port + '&host=' + host + path;
+              var script = document.createElement('script');
+              script.type = 'text/javascript';
+              script.src = location.protocol + '//' + host + ':4200' + src;
+              document.getElementsByTagName('head')[0].appendChild(script);
+            }());
+          </script>
+<script src="/testem.js"></script>
+<script src="./assets/vendor-d0e80dc02e32327e48e4059d13b980d5.js"></script>
+<script src="./assets/broccoli-inspector-3f745a1ac2623650dd215ffd06c3d656.js"></script>

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 0.2.0 (05/18/2020)
+
+- major design overhaul
+- adds error modal for when the broccoli funnel fails to build properly (#16)
+- fixes places where ms wasn't sorting correctly
+
 # 0.1.2 (05/11/2020)
 
 - Surfaces monitors in the heimdall custom tab section as well

app/components/build-plugins.hbs

@@ -0,0 +1,29 @@
+<PaperCard as |card|>
+  <card.title as |title|>
+    <title.text as |text|>
+      <text.headline>Plugin Information</text.headline>
+      <text.subhead>This shows plugins that were run for this specific build.</text.subhead>
+    </title.text>
+  </card.title>
+  <PaperTabs @stretch={{true}} @borderBottom={{true}} @selected={{this.selectedTab}} @onChange={{action (mut this.selectedTab)}} as |tabs|>
+    <tabs.tab>
+      Chart
+    </tabs.tab>
+    <tabs.tab>
+      Table
+    </tabs.tab>
+  </PaperTabs>
+  {{#if (eq selectedTab 0)}}
+    <C3Chart
+      @data={{this.data}}
+      @axis={{this.axis}}
+      @c3chart={{this.chart}}
+    />
+  {{else}}
+    <Table
+      @title=""
+      @data={{this.nodes}}
+      @empty="No Plugin information"
+    />
+  {{/if}}
+</PaperCard>

app/components/build-plugins.ts

@@ -0,0 +1,68 @@
+import Component from "@glimmer/component";
+import { bind, later } from "@ember/runloop";
+import { action, computed } from "@ember/object";
+import { tracked } from '@glimmer/tracking';
+
+export default class BuildPlugins extends Component {
+  @tracked
+  selectedTab = 0;
+
+  chart = null;
+
+  get nodes() {
+    const nodes = this.args?.nodes;
+
+    const body = nodes
+      .filter((node) => {
+        return node.buildState.selfTime !== 0 && node.buildState.selfTime > 50;
+      })
+      .map((node) => {
+        return [node.id, {
+          text: node.label,
+          linkModel: node.id,
+          linkRoute: 'node'
+        }, { raw: node.buildState.selfTime, text: `${node.buildState.selfTime}ms` }];
+      });
+
+    return {
+      header: [
+        `ID`,
+        `Label`,
+        `Time`
+      ],
+      body
+    }
+  }
+
+  get axis() {
+    return {
+      x: {
+        type: 'category'
+      }
+    }
+  }
+
+  get data() {
+    const nodes = this.args?.nodes || [];
+
+    const json = nodes
+      .filter((node) => {
+        return node.buildState.selfTime !== 0 && node.buildState.selfTime > 50;
+      })
+      .map((node) => {
+        return {
+          label: node.label,
+          selfTime: node.buildState.selfTime
+        };
+      });
+
+    return {
+      json,
+      keys: {
+        x: 'label',
+        value: ['selfTime'],
+      },
+      type: 'bar'
+    }
+  }
+}

app/components/builds-list.hbs

@@ -0,0 +1,49 @@
+<PaperContent>
+  <div class="paper-content--block">
+    <div class="layout-row layout-align-start-center h-100">
+      <div>
+        <b>Builds</b>
+      </div>
+    </div>
+  </div>
+  <PaperDivider />
+  <PaperList>
+    {{#if this.builds}}
+      {{#each this.builds key="@index" as |build idx|}}
+        {{#if (and this.isCollapsed (lt idx 10))}}
+          <PaperItem @class="md-3-line" @href={{href-to "build" build.id}}>
+            <PaperButton @raised={{true}} @mini={{true}} @primary={{true}} @disabled={{true}}>
+              {{build.id}}
+            </PaperButton>
+            <div class="md-list-item-text">
+              <h3>{{build.time}}ms</h3>
+              <h4>{{build.filePath}}</h4>
+              <h4>{{build.amountOfNodes}} nodes run</h4>
+            </div>
+          </PaperItem>
+        {{/if}}
+
+        {{#unless this.isCollapsed}}
+          <PaperItem @class="md-3-line" @href={{href-to "build" build.id}}>
+            <PaperButton @raised={{true}} @mini={{true}} @primary={{true}} @disabled={{true}}>
+              {{build.id}}
+            </PaperButton>
+            <div class="md-list-item-text">
+              <h3>{{build.time}}ms</h3>
+              <h4>{{build.filePath}}</h4>
+              <h4>{{build.amountOfNodes}} nodes run</h4>
+            </div>
+          </PaperItem>
+        {{/unless}}
+      {{/each}}
+
+      {{#if (and this.isCollapsed (gt this.builds.length 10))}}
+        <PaperButton @onClick={{this.uncollapse}}>Show {{sub this.builds.length 10}} more builds</PaperButton>
+      {{/if}}
+    {{else}}
+      <PaperItem>
+        No builds found
+      </PaperItem>
+    {{/if}}
+  </PaperList>
+</PaperContent>

app/components/builds-list.ts

@@ -0,0 +1,17 @@
+import Component from "@glimmer/component";
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class BuildsList extends Component {
+  @tracked
+  isCollapsed = true;
+
+  get builds() {
+    return this.args.builds;
+  }
+
+  @action
+  uncollapse() {
+    this.isCollapsed = false;
+  }
+}

app/components/empty-state.hbs

@@ -1,7 +1,9 @@
-<div class="empty-state text-center">
-  <div class="empty-state--icon">
-    <FaIcon @icon={{@iconType}} @size={{@iconSize}} @spin={{@spin}}/>
-  </div>
-  <h2 class="empty-state--title">{{@title}}</h2>
-  <p class="empty-state--subtitle">{{@subtitle}}</p>
-</div>
+<PaperCard as |card|>
+  <card.title as |title|>
+    <title.text as |text|>
+      <text.headline>{{@title}}</text.headline>
+      <text.subhead>{{@subtitle}}</text.subhead>
+    </title.text>
+    <PaperIcon @icon={{@iconType}} />
+  </card.title>
+</PaperCard>

app/components/instantiation-stack-explorer.hbs

@@ -1,38 +1,54 @@
-<div class="card">
-  {{#if this.filePath}}
-    <div class="card-header">
-      {{this.filePath}} {{this.line}}:{{this.column}}
-    </div>
-  {{/if}}
-  <div class="container-fluid overflow-auto m-0 p-0" style="height: 400px;">
-    <div class="row">
-      <div class="col-9 pt-0 pb-0 pr-0 pl-2 m-0">
+<PaperCard as |card|>
+  <card.content @class="p-0">
+    <PaperSidenavContainer>
+      <PaperCardContent @class="flex p-0">
         {{#if loading}}
-          <EmptyState
-            @iconType="spinner"
-            @iconSize="4x"
-            @spin={{true}}
-            @title="Loading file to view"
-          />
+          <PaperCard as |card|>
+            <card.title as |title|>
+              <title.text as |text|>
+                <text.headline>Currently loading file</text.headline>
+                <text.subhead>Please do not refresh, this page will refresh when data is loaded</text.subhead>
+              </title.text>
+              <PaperProgressCircular @accent={{true}} @class="md-hue-1" @diameter={{60}} />
+            </card.title>
+          </PaperCard>
         {{else}}
           {{#if this.file}}
-            <CodeBlock class="line-numbers mt-0" @code={{this.file}} @language="javascript" data-line={{this.line}}/>
+            <div style="height:700px;">
+              <PaperToolbar>
+                <PaperToolbarTools>
+                  {{this.filePath}} {{this.line}}:{{this.column}}
+                </PaperToolbarTools>
+              </PaperToolbar>
+
+              <CodeBlock style="overflow:scroll;height:100%;" class="line-numbers mb-0 mt-0" @code={{this.file}} @language="javascript" data-line={{this.line}}/>
+            </div>
           {{else}}
             <EmptyState
-              @iconType="file-code"
-              @iconSize="4x"
+              @iconType="code"
               @title="Click stack line on the right to see file"
             />
           {{/if}}
         {{/if}}
-      </div>
-      <div class="col-3 p-0 m-0">
-        <ul class="list-group">
-          {{#each this.instantiationStack as |instantiationStackLine index|}}
-            <li data-index={{index}} class="list-group-item list-group-item-action {{if (eq this.selectedIndex index) "list-group-item-action-active"}}" {{on "click" this.onStackClick}}>{{html instantiationStackLine}}</li>
-          {{/each}}
-        </ul>
-      </div>
-    </div>
-  </div>
-</div>
+      </PaperCardContent>
+
+      <PaperSidenav @class="md-whiteframe-z2" @lockedOpen={{true}}>
+        <PaperContent>
+          <PaperList>
+            {{#each this.instantiationStack as |instantiationStackLine|}}
+              {{#if instantiationStackLine.filePath}}
+                <PaperItem @onClick={{fn (action "onStackClick") instantiationStackLine.filePath instantiationStackLine.line instantiationStackLine.column}} @class={{if (eq this.selectedIndex index) "active"}}>
+                  {{instantiationStackLine.stackLine}}
+                </PaperItem>
+              {{else}}
+                <PaperItem @class={{if (eq this.selectedIndex index) "active"}}>
+                  {{instantiationStackLine.stackLine}}
+                </PaperItem>
+              {{/if}}
+            {{/each}}
+          </PaperList>
+        </PaperContent>
+      </PaperSidenav>
+    </PaperSidenavContainer>
+  </card.content>
+</PaperCard>