Updates to desktop dashboard grid layout #3670

scottopherson · 2020-05-13T21:47:03Z

🔩 Description: What code changed, and why?

This commit contains an incremental style update to the layout skeleton of the Desktop dashboard view and to the components displayed within it. It utilizes the Carbon grid system and some generic components already available within Automate to bring the functionality and styling of this view a little bit closer to the final production implementation.

More screenshots

⛓️ Related Resources

https://github.com/chef/chef-design-system/issues/11
#3517

👟 How to Build and Test the Change

npm install if you haven't updated from master recently to get new Carbon grid dep
Have some data to look at in the dashboard:

# From hab studio
for _ in {1..50}; do m=$((RANDOM % 4)); n=$((RANDOM % 4)); generate_chef_run_failure_example | jq --arg msg "Error $n occurred" --arg type "Chef::ExampleError$m" '.error.message = $msg | .error.class = $type' | send_chef_data_raw; done

Start UI and navigate to a2-dev.test/desktop

✅ Checklist

I have read the CONTRIBUTING document.
Tests added/updated?
Docs added/updated?
All commits have been signed-off for the Developer Certification of Origin.

vjeffrey

working great for me locally!!

SEAjamieD · 2020-05-14T18:03:14Z

components/automate-ui/src/app/modules/desktop/desktop-detail/desktop-detail.component.html

+      <h3>Check-in History <span *ngIf="showCheckinDebug">(debug)</span></h3>
+      <div class="heading-actions">
+        <chef-button secondary (click)="showCheckinDebug = !showCheckinDebug">
+          <chef-icon>settings</chef-icon>
+        </chef-button>
+        <chef-button secondary (click)="checkinNumDays = (checkinNumDays === 14 ? 28 : 14)">
+          <span>Last {{ (checkinNumDays === 14 ? 2 : 4) }} Weeks</span>
+          <chef-icon>expand_more</chef-icon>
+        </chef-button>
+        <chef-button secondary>
+          <span>Download</span>
+          <chef-icon>expand_more</chef-icon>
+        </chef-button>
+      </div>
+    </div>
+    <div class="debug-actions" *ngIf="showCheckinDebug">


Not sure if these are related

Theres some debug action going on here. Good chance you left it here on purpose since development is ongoing.

There's also some console logging coming from desktop-detail.component.ts

Huh could've sworn I deleted that .log. But yea, I did want to leave in the rest of the bits for demo and debugging purposes while the final checkin graph area is still being worked on.

SEAjamieD · 2020-05-14T18:05:34Z

...automate-ui/src/app/modules/desktop/check-in-time-series/check-in-time-series.component.html

+        <chef-td [ngSwitch]="day.daysAgo">
+          <ng-container *ngSwitchCase="0">Today</ng-container>
+          <ng-container *ngSwitchCase="1">Yesterday</ng-container>
+          <ng-container *ngSwitchDefault>{{ day.daysAgo }} days ago</ng-container>
+        </chef-td>


never seen ngSwitchCase before - this is sweet 🥇

SEAjamieD · 2020-05-14T18:17:11Z

components/automate-ui/src/app/modules/desktop/dashboard/dashboard.component.scss

+}
+
+.dashboard-grid {
+  @extend .bx--grid;


extend rules 👍

for anyone looking for more info: https://css-tricks.com/the-extend-concept/

Agreed. This pattern is pretty much required for this view anyway. The first iterations I had used the grid classNames directly in the HTML. It quickly became a bit unwieldy to have chunks of code like [ngClass]="{'bx--col-lg-8': !insightVisible, 'bx--col-lg-16': insightVisible}" all over the place

components/automate-ui/src/app/modules/desktop/desktop-detail/desktop-detail.component.html

SEAjamieD · 2020-05-14T18:26:01Z

components/automate-ui/src/app/modules/desktop/desktop-detail/desktop-detail.component.html

+      <div class="button-toggle">
+        <chef-button secondary (click)="checkinTableType = 'grid'">
+          <chef-icon>view_module</chef-icon>
+        </chef-button>
+        <chef-button secondary (click)="checkinTableType = 'list'">
+          <chef-icon>view_list</chef-icon>
+        </chef-button>
+        <chef-button secondary (click)="checkinTableType = 'json'">
+          <chef-icon>code</chef-icon>
+        </chef-button>
+        <span>{{ checkinTableType }}</span>
+      </div>
+
+      <div class="button-toggle">
+        <span>{{ checkinGridFlexType }}</span>
+        <chef-button secondary (click)="checkinGridFlexType = 'wrap'">
+          <chef-icon>wrap_text</chef-icon>
+        </chef-button>
+        <chef-button secondary (click)="checkinGridFlexType = 'stretch'">
+          <chef-icon>dehaze</chef-icon>
+        </chef-button>


I don't see this in the mockup but this is rad and I hope becomes a feature.

components/automate-ui/src/app/modules/desktop/desktop-detail/desktop-detail.component.html

components/automate-ui/src/app/modules/desktop/insight/insight.component.html

SEAjamieD · 2020-05-14T19:00:29Z

components/automate-ui/src/app/modules/desktop/desktop-detail/desktop-detail.component.ts

+const historyTypes = [
+  { text: 'converged', icon: 'check_box' },
+  { text: 'unchanged', icon: 'indeterminate_check_box' },
+  { text: 'error', icon: 'error' },
+  { text: 'unknown', icon: 'help' }
+];
+
+const checkinHistory = Array.from(new Array(29)).map((_v, i) => {
+  const historyType = historyTypes[Math.floor(Math.random() * historyTypes.length)];
+  const date = new Date();
+  return { ...historyType, date: new Date(date.setDate(date.getDate() - i)) };
+});


I know this pr is more about the Grid - but maybe add some Types if for this, unless this is planning to change later

This was just for demo purposes. I'm not sure yet what the API responses are/will be for the desktop checkin history graph. Most of the code changes made in .component.ts files are either to be replaced by ngrx related stuff and/or only for demo purposes.

#3639 -- just linking that here as a reference for the future work

SEAjamieD

This is coming together so amazing. Left a few comments but nothing serious - Mostly just some debugger/commented out code left behind that may still be there on purpose.

susanev

@scottopherson can you make the card headings h2's instead of divs? also it would be rad if we can get those big filter buttons to be tabbable along with the table rows that you can select to open the additional cards.

SEAjamieD

Looking Sharp!

tarablack01

Looks Awesome 🙌🏻

scottopherson · 2020-05-15T21:33:12Z

@susanev made those heading updates and made the various selectable filters/rows keyboard selectable. Though I believe there's probably some more details to work out with the focus behavior between the opened/closed panels but I'd like to address those in later iterations.

susanev

thanks for all of ur work on this!!!

This commit contains an incremental update to the layout skeleton of the Desktop dashboard view and to the components displayed within it. It utilizes the Carbon grid system and some generic components already available within Automate to bring the functionality and styling of this view a little bit closer to the final production implementation. Signed-off-by: Scott Christopherson <scott@chef.io>

scottopherson · 2020-05-16T00:58:30Z

Shoutout @lancewf it has been easy and low-friction to build on top of his work.

scottopherson added ui automate-ui desktop labels May 13, 2020

scottopherson force-pushed the sc/desktop-dashboard-layout branch from 5d43cf8 to 01d3abb Compare May 13, 2020 23:02

vjeffrey approved these changes May 14, 2020

View reviewed changes

SEAjamieD reviewed May 14, 2020

View reviewed changes

components/automate-ui/src/app/modules/desktop/desktop-detail/desktop-detail.component.html Outdated Show resolved Hide resolved

SEAjamieD reviewed May 14, 2020

View reviewed changes

components/automate-ui/src/app/modules/desktop/desktop-detail/desktop-detail.component.html Outdated Show resolved Hide resolved

SEAjamieD reviewed May 14, 2020

View reviewed changes

components/automate-ui/src/app/modules/desktop/insight/insight.component.html Outdated Show resolved Hide resolved

SEAjamieD reviewed May 14, 2020

View reviewed changes

SEAjamieD suggested changes May 14, 2020

View reviewed changes

susanev reviewed May 14, 2020

View reviewed changes

SEAjamieD approved these changes May 14, 2020

View reviewed changes

tarablack01 approved these changes May 15, 2020

View reviewed changes

scottopherson force-pushed the sc/desktop-dashboard-layout branch 2 times, most recently from a272325 to bb8a74b Compare May 15, 2020 21:27

scottopherson force-pushed the sc/desktop-dashboard-layout branch 2 times, most recently from c2c1565 to 8460d5c Compare May 15, 2020 21:52

susanev approved these changes May 15, 2020

View reviewed changes

scottopherson force-pushed the sc/desktop-dashboard-layout branch from 8460d5c to 774f12b Compare May 15, 2020 22:05

scottopherson merged commit d8d6d95 into master May 15, 2020

scottopherson deleted the sc/desktop-dashboard-layout branch May 15, 2020 23:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updates to desktop dashboard grid layout #3670

Updates to desktop dashboard grid layout #3670

scottopherson commented May 13, 2020

vjeffrey left a comment

SEAjamieD May 14, 2020

scottopherson May 14, 2020

SEAjamieD May 14, 2020

SEAjamieD May 14, 2020

scottopherson May 14, 2020

SEAjamieD May 14, 2020

SEAjamieD May 14, 2020

scottopherson May 14, 2020

vjeffrey May 14, 2020

SEAjamieD left a comment

susanev left a comment

SEAjamieD left a comment

tarablack01 left a comment

scottopherson commented May 15, 2020

susanev left a comment

scottopherson commented May 16, 2020

Updates to desktop dashboard grid layout #3670

Updates to desktop dashboard grid layout #3670

Conversation

scottopherson commented May 13, 2020

🔩 Description: What code changed, and why?

⛓️ Related Resources

👟 How to Build and Test the Change

✅ Checklist

vjeffrey left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SEAjamieD left a comment

Choose a reason for hiding this comment

susanev left a comment

Choose a reason for hiding this comment

SEAjamieD left a comment

Choose a reason for hiding this comment

tarablack01 left a comment

Choose a reason for hiding this comment

scottopherson commented May 15, 2020

susanev left a comment

Choose a reason for hiding this comment

scottopherson commented May 16, 2020