add ui_next dashboard #8402

jlmitch5 · 2020-10-15T19:51:36Z

Link #8400 #6756

This pr adds the dashboard to ui_next. The big changes are:

Dashboard counts. These are identical (in terms of values and where they link to) compared to the legacy dashboard.
Dashboard graph. This is based off the line chart in Automation Analytics. The UX should be near-100% consistent with AA's chart. In the transition, a few of the filters were lost (namely status-based and hour based time granularity). These will be added once they are supported in AA. Tracking here: Add additional filters to dashboard graph #8401
Dashboard lists. These are identical to the full-featured lists on the Jobs and Templates sections of the UI, respectively. The new graphs being full-featured makes portal mode redundant.

softwarefactory-project-zuul · 2020-10-15T20:03:19Z

Build succeeded.

awx-api-lint : SUCCESS in 2m 00s
awx-api : SUCCESS in 11m 20s
awx-ui : SUCCESS in 3m 58s
awx-ui-next : SUCCESS in 8m 16s
awx-swagger : SUCCESS in 8m 03s
awx-detect-schema-change : FAILURE in 8m 32s (non-voting)
awx-ansible-modules : SUCCESS in 2m 22s

mabashian · 2020-10-19T13:54:37Z

awx/api/views/__init__.py

@@ -316,6 +316,9 @@ def get(self, request, format=None):
        if period == 'month':
            end_date = start_date - dateutil.relativedelta.relativedelta(months=1)
            interval = 'days'
+        elif period == 'two_weeks':


@ryanpetrello this look good to you? Just want to make sure we're not sneaking something by y'all without a review.

mabashian · 2020-10-19T14:21:49Z

Now that we've got recent jobs/templates tabbed out at the bottom my first instinct was... why not have all 3 things in tabs like:

then there would be little need for scrolling.

Of course, this would mean that recent jobs is now an extra click away. I don't feel strongly about this, it just came to mind as an option. It really depends on how this page is actually used/what users care about seeing.

@trahman73 @wenottingham 👍 / 👎 ? (This could easily be changed in the future as well if we'd rather just stick to the current UX initially.)

mabashian · 2020-10-19T14:26:39Z

awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateList.jsx

+    jtActions && Object.prototype.hasOwnProperty.call(jtActions, 'POST');
+  const canAddWFJT =
+    wfjtActions && Object.prototype.hasOwnProperty.call(wfjtActions, 'POST');
+  // spreading Set() returns only unique keys


Do we still need this? Not sure which line it's referencing.

mabashian · 2020-10-19T14:33:23Z

I think this is looking fantastic @jlmitch5! Curious about ChartTooltip/LineChart in Dashboard/shared. My assumption is that those files are copied over from the other repo. Is that right? Just wondering if we should have a discussion about how to go about sharing components that are not in PF. Keeping distinct copies in each repo means that we have control over it and won't get blindsided by changes needed for AA that may break something we do in AWX. At the same time, we'll have to make sure our copy of these components stays up to date if they change in AA. You may have already talked about this and I'm late to the party but I figure it's worth a conversation. cc @jakemcdermott

mabashian · 2020-10-19T14:34:07Z

@unlikelyzero @tiagodread I don't anticipate a tremendous amount of change/refactor on this PR so it's probably safe for you all to start getting familiar with it.

unlikelyzero · 2020-10-19T14:36:43Z

@mabashian we are going to do a bug bash on it on wednesday and take a first look at this tomorrow

unlikelyzero · 2020-10-19T15:13:48Z

Note: we will need to put in //to be implemented for #8401

trahman73 · 2020-10-19T15:31:16Z

@mabashian That's not a bad idea to combine all 3 views into a tabbed card as shown. I don't think it's a big deal to have to click into the Recent Jobs and Recent Templates tab to get to that content. I'm curious about more opinions as I don't really know how this page is currently used.

softwarefactory-project-zuul · 2020-10-19T18:52:18Z

Build succeeded.

awx-api-lint : SUCCESS in 4m 44s
awx-api : SUCCESS in 7m 58s
awx-ui : SUCCESS in 3m 38s
awx-ui-next : SUCCESS in 13m 41s
awx-swagger : SUCCESS in 8m 06s
awx-detect-schema-change : FAILURE in 11m 09s (non-voting)
awx-ansible-modules : SUCCESS in 2m 34s

jakemcdermott · 2020-10-20T15:28:42Z

@mabashian

I do like the idea of adding the third tab. seems like a nicer ux overall. FWIW I'm for it but curious what @jlmitch5 thinks.
The plan was to just duplicate the chart code over to awx and not worry about making a shared repo or lib at this time. I think we should stick to this plan. IMO there's no need to dive into the complexity of cross-project code sharing until after 4.0
I heard something about having to move to victory charts at some point. That seems... non-essential as a first step and again would prefer post 4.0 unless it's a blocker for some reason.

…hook to util

…ts) to ui_next

softwarefactory-project-zuul · 2020-10-20T22:05:59Z

Build failed.

awx-api-lint : SUCCESS in 1m 49s
awx-api : SUCCESS in 8m 40s
awx-ui : SUCCESS in 3m 32s
awx-ui-next : TIMED_OUT in 30m 41s
awx-swagger : SUCCESS in 8m 29s
awx-detect-schema-change : FAILURE in 10m 02s (non-voting)
awx-ansible-modules : SUCCESS in 3m 16s

unlikelyzero · 2020-10-21T11:03:48Z

@trahman73 @jlmitch5 @jakemcdermott the 3 tab design also improves client-side performance. Our weighted lighthouse score improved by 3/100 points between revisions

unlikelyzero · 2020-10-21T11:31:45Z

@jlmitch5 A bug-free PR!

will the Chart Hoverover text be translatable?

The only point of feedback is that we'd like to have this a bit more testable.

Can you work with us to come up with a deterministic way of hovering over a datapoint? There are no tests for the AA version of this chart so this might involve some minor changes
Could you add unique IDs to the Cards and chart filter dropdowns

We have an associated PR that we'd like to have merged alongside this PR. It should contain:

Any associated testability improvements.
All stubs which were executed manually
All stubs for future work with //to be implemented
A visual test for the Dashboard and Graph
A single test to validate the correctness of the cards.
A single test to validate the correctness of the chart hoverover
Re-used tests for CRUD and Search on Job List
Re-used tests for CRUD and Search on Recent Templates

jakemcdermott · 2020-10-21T12:33:24Z

recheck

softwarefactory-project-zuul · 2020-10-21T12:50:50Z

Build failed.

awx-api-lint : SUCCESS in 9m 45s
awx-api : SUCCESS in 15m 21s
awx-ui : SUCCESS in 11m 03s
awx-ui-next : FAILURE in 16m 00s
awx-swagger : SUCCESS in 15m 43s
awx-detect-schema-change : FAILURE in 17m 02s (non-voting)
awx-ansible-modules : SUCCESS in 10m 05s

mabashian · 2020-10-21T13:39:29Z

^^ I think this is a legitimate failure

2020-10-21 12:49:09.462583 | static | FAIL src/screens/Dashboard/Dashboard.test.jsx
2020-10-21 12:49:09.462961 | static |   ● <Dashboard /> › renders jobs list by default
2020-10-21 12:49:09.462997 | static |
2020-10-21 12:49:09.463381 | static |     expect(received).toBe(expected) // Object.is equality
2020-10-21 12:49:09.463416 | static |
2020-10-21 12:49:09.463505 | static |     Expected: 1
2020-10-21 12:49:09.463677 | static |     Received: 0
2020-10-21 12:49:09.463713 | static |
2020-10-21 12:49:09.463762 | static |       31 |
2020-10-21 12:49:09.464156 | static |       32 |   test('renders jobs list by default', () => {
2020-10-21 12:49:09.464786 | static |     > 33 |     expect(pageWrapper.find('JobList').length).toBe(1);
2020-10-21 12:49:09.465935 | static |          |                                                ^
2020-10-21 12:49:09.466021 | static |       34 |   });
2020-10-21 12:49:09.466059 | static |       35 |
2020-10-21 12:49:09.466184 | static |       36 |   test('renders template list when the active tab is changed', async () => {
2020-10-21 12:49:09.466211 | static |
2020-10-21 12:49:09.466396 | static |       at Object.test (src/screens/Dashboard/Dashboard.test.jsx:33:48)

Test probably need to be updated after changing to the 3 tabs view

softwarefactory-project-zuul · 2020-10-21T14:42:58Z

Build failed.

awx-api-lint : SUCCESS in 2m 54s
awx-api : SUCCESS in 8m 31s
awx-ui : SUCCESS in 4m 15s
awx-ui-next : FAILURE in 8m 43s
awx-swagger : SUCCESS in 7m 58s
awx-detect-schema-change : FAILURE in 9m 51s (non-voting)
awx-ansible-modules : SUCCESS in 2m 52s

softwarefactory-project-zuul · 2020-10-21T17:01:58Z

Build succeeded.

awx-api-lint : SUCCESS in 2m 07s
awx-api : SUCCESS in 7m 17s
awx-ui : SUCCESS in 3m 57s
awx-ui-next : SUCCESS in 8m 43s
awx-swagger : SUCCESS in 7m 38s
awx-detect-schema-change : FAILURE in 8m 54s (non-voting)
awx-ansible-modules : SUCCESS in 2m 26s

unlikelyzero · 2020-10-21T21:28:43Z

@jlmitch5 we're almost done with the tests. We just need unique IDs for the tabs and the cards. Is that something you can get in tomorrow?

softwarefactory-project-zuul · 2020-10-21T21:45:52Z

Build succeeded.

awx-api-lint : SUCCESS in 2m 12s
awx-api : SUCCESS in 7m 36s
awx-ui : SUCCESS in 3m 54s
awx-ui-next : SUCCESS in 8m 09s
awx-swagger : SUCCESS in 8m 31s
awx-detect-schema-change : FAILURE in 7m 42s (non-voting)
awx-ansible-modules : SUCCESS in 2m 15s

unlikelyzero · 2020-10-22T18:27:08Z

Associated Tests in 5622

softwarefactory-project-zuul · 2020-10-22T18:45:10Z

Build succeeded (gate pipeline).

awx-api-lint : SUCCESS in 1m 56s
awx-api : SUCCESS in 6m 59s
awx-ui : SUCCESS in 4m 10s
awx-ui-next : SUCCESS in 9m 03s
awx-swagger : SUCCESS in 7m 38s
awx-detect-schema-change : FAILURE in 8m 03s (non-voting)
awx-ansible-modules : SUCCESS in 2m 31s
awx-push-new-schema : SUCCESS in 7m 39s (non-voting)

mabashian added component:ui_next labels Oct 15, 2020

mabashian reviewed Oct 19, 2020

View reviewed changes

unlikelyzero added the type:feature prioritized on a feature board label Oct 19, 2020

unlikelyzero added the state:needs_test label Oct 20, 2020

jakemcdermott removed the state:needs_review label Oct 20, 2020

jakemcdermott requested a review from ryanpetrello October 20, 2020 19:03

jakemcdermott added the component:api label Oct 20, 2020

John Mitchell added 5 commits October 20, 2020 16:42

add two_weeks filter to dashbaord job graph api view

782e8d5

add copy of template list for dashboard use, moving around shared ws …

5ea98ab

…hook to util

add dashboard (including counts, line chart and portal mode style lis…

a3c5f50

…ts) to ui_next

remove unused comment from template lists

8839fb9

update dashboard to 3 tab single pane

5f4d6da

jlmitch5 force-pushed the dashboardAug20 branch from 85075e9 to 5f4d6da Compare October 20, 2020 21:34

unlikelyzero assigned unlikelyzero and tiagodread Oct 21, 2020

mabashian approved these changes Oct 21, 2020

View reviewed changes

update dashboard and graph code to aid in automated testing

52deb7f

update render dashboard default unit t est

2c0de9c

Change the id from / to -

e30569c

unlikelyzero added the mergeit label Oct 22, 2020

softwarefactory-project-zuul bot merged commit 466dff9 into ansible:devel Oct 22, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add ui_next dashboard #8402

add ui_next dashboard #8402

jlmitch5 commented Oct 15, 2020 •

edited

Loading

softwarefactory-project-zuul bot commented Oct 15, 2020

mabashian Oct 19, 2020

mabashian commented Oct 19, 2020

mabashian Oct 19, 2020

mabashian commented Oct 19, 2020

mabashian commented Oct 19, 2020

unlikelyzero commented Oct 19, 2020

unlikelyzero commented Oct 19, 2020

trahman73 commented Oct 19, 2020

softwarefactory-project-zuul bot commented Oct 19, 2020

jakemcdermott commented Oct 20, 2020 •

edited

Loading

softwarefactory-project-zuul bot commented Oct 20, 2020

unlikelyzero commented Oct 21, 2020 •

edited

Loading

unlikelyzero commented Oct 21, 2020 •

edited

Loading

jakemcdermott commented Oct 21, 2020

softwarefactory-project-zuul bot commented Oct 21, 2020

mabashian commented Oct 21, 2020

softwarefactory-project-zuul bot commented Oct 21, 2020

softwarefactory-project-zuul bot commented Oct 21, 2020

unlikelyzero commented Oct 21, 2020

softwarefactory-project-zuul bot commented Oct 21, 2020

unlikelyzero commented Oct 22, 2020

softwarefactory-project-zuul bot commented Oct 22, 2020

add ui_next dashboard #8402

add ui_next dashboard #8402

Conversation

jlmitch5 commented Oct 15, 2020 • edited Loading

softwarefactory-project-zuul bot commented Oct 15, 2020

mabashian Oct 19, 2020

Choose a reason for hiding this comment

mabashian commented Oct 19, 2020

mabashian Oct 19, 2020

Choose a reason for hiding this comment

mabashian commented Oct 19, 2020

mabashian commented Oct 19, 2020

unlikelyzero commented Oct 19, 2020

unlikelyzero commented Oct 19, 2020

trahman73 commented Oct 19, 2020

softwarefactory-project-zuul bot commented Oct 19, 2020

jakemcdermott commented Oct 20, 2020 • edited Loading

softwarefactory-project-zuul bot commented Oct 20, 2020

unlikelyzero commented Oct 21, 2020 • edited Loading

unlikelyzero commented Oct 21, 2020 • edited Loading

jakemcdermott commented Oct 21, 2020

softwarefactory-project-zuul bot commented Oct 21, 2020

mabashian commented Oct 21, 2020

softwarefactory-project-zuul bot commented Oct 21, 2020

softwarefactory-project-zuul bot commented Oct 21, 2020

unlikelyzero commented Oct 21, 2020

softwarefactory-project-zuul bot commented Oct 21, 2020

unlikelyzero commented Oct 22, 2020

softwarefactory-project-zuul bot commented Oct 22, 2020

jlmitch5 commented Oct 15, 2020 •

edited

Loading

jakemcdermott commented Oct 20, 2020 •

edited

Loading

unlikelyzero commented Oct 21, 2020 •

edited

Loading

unlikelyzero commented Oct 21, 2020 •

edited

Loading