[ui] Deployment History search #16608

philrenaud · 2023-03-22T13:44:19Z

Adds a "loading shimmer" and rolling slide-in for events:

Adds a searchbox:

Search term persists as a deployment rolls forward; which is to say, if you search a term when there are no events that match it, but a placed allocation matches it later, it will show up with no further user action needed.

github-actions · 2023-03-22T13:51:36Z

Ember Asset Size action

As of ca9e90a

Files that got Bigger 🚨:

File	raw	gzip
nomad-ui.js	+961 B	+167 B
nomad-ui.css	+16.3 kB	+830 B

Files that stayed the same size 🤷‍:

File	raw	gzip
vendor.js	0 B	0 B
vendor.css	0 B	0 B

github-actions · 2023-03-22T14:04:23Z

Ember Test Audit comparison

	16512-service-job-deployment-panel-history-and-update-params	`ca9e90a`	change
passes	1493	1494	+1
failures	0	0	0
flaky	0	0	0
duration	11m 37s 142ms	11m 05s 098ms	-32s 044ms

ui/mirage/factories/allocation.js

philrenaud · 2023-03-22T15:25:09Z

ui/app/styles/components/job-status-panel.scss

+      @for $i from 1 through 50 {
+        &:nth-child(#{$i}) {
+          animation-name: historyItemSlide;
+          animation-duration: 0.2s;
+          animation-fill-mode: both;
+          animation-delay: 0.1s + (0.05 * $i);
+        }
+
+        &:nth-child(#{$i}) > div {
+          animation-name: historyItemShine;
+          animation-duration: 1s;
+          animation-fill-mode: both;
+          animation-delay: 0.1s + (0.05 * $i);
+        }
+      }


SCSS iterator format; this lets us do things like animations that look like they roll in one at a time. New to our codebase, but a proven pattern.

ChaiWithJai

There's many test failures associated with the Mirage change.

ui/app/components/job-status/deployment-history.js

ChaiWithJai · 2023-03-22T16:18:44Z

ui/mirage/factories/task-event.js

+  // TODO: I think this is probably an archaic property name. See if tests collapse with this removal and decide to remove then.
+  // displayMessage: () => faker.lorem.sentence(),
+  message: () => faker.lorem.sentence(),


blocking: I'm getting 99 test failures. ~97 of them are associated to this diff. Unsure if this is the root of all the test failures...

Hi @ChaiWithJai -- please see the code comment TODO in the code here. This was run to see if tests collapse.

ChaiWithJai · 2023-03-22T16:21:15Z

ui/app/components/job-status/deployment-history.js

+  /**
+   * @type { string }
+   */
+  @tracked searchTerm = '';


question: I noticed that this is not associated to a query parameter, as you've requested in previous PRs. Any color about why we're not using an associated query parameter here?

Good question! In this case, this is a conditional component — it only exists when a deployment is active (a much smaller % of the time than when it's in steady state).

If I wanted to add a queryParam that controlled this from the job index route, there would be a majority of time where that queryParam did nothing.

There's an argument to be made for including it anyway, but it seems pretty outweighed by the argument that each deployment is separate and search terms aren't necessarily something you'd want to maintain between all of them.

ChaiWithJai · 2023-03-23T21:16:49Z

ui/app/components/job-status/deployment-history.js

+  /**
+   * @type { string }
+   */
+  @tracked searchTerm = '';


* Deployment history wooooooo * Styled deployment history * Update Params * lintfix * Types and groups for updateParams * Live-updating history * Harden with types, error states, and pending states * Refactor updateParams to use trigger component * [ui] Deployment History search (#16608) * Functioning searchbox * Some nice animations for history items * History search test * Fixing up some old mirage conventions * some a11y rule override to account for scss keyframes

* A very fast and loose deployment panel * Removing Unknown status from the panel * Set up oldAllocs list in constructor, rather than as a getter/tracked var * Small amount of template cleanup * Refactored latest-deployment new logic back into panel.js * Revert now-unused latest-deployment component * margin bottom when ungrouped also * Basic integration tests for job deployment status panel * Updates complete alloc colour to green for new visualizations only (#16618) * Updates complete alloc colour to green for new visualizations only * Pale green instead of dark green for viz in general * [ui] Job Deployment Status: History and Update Props (#16518) * Deployment history wooooooo * Styled deployment history * Update Params * lintfix * Types and groups for updateParams * Live-updating history * Harden with types, error states, and pending states * Refactor updateParams to use trigger component * [ui] Deployment History search (#16608) * Functioning searchbox * Some nice animations for history items * History search test * Fixing up some old mirage conventions * some a11y rule override to account for scss keyframes * Split panel into deploying and steady components * HandleError passed from job index * gridified panel elements * TotalAllocs added to deploying.js * Width perc to px * [ui] Splitting deployment allocs by status, health, and canary status (#16766) * Initial attempt with lots of scratchpad work * Style mods per UI discussion * Fix canary overflow bug * Dont show canary or health for steady/prev-alloc blocks * Steady state * Thanks Julie * Fixes steady-state versions * Legen, wait for it... * Test fixes now that we have a minimum block size * PR prep * Shimmer effect on pending and unplaced allocs (#16801) * Shimmer effect on pending and unplaced * Dont show animation in the legend * [ui, deployments] Linking allocblocks and legends to allocation / allocations index routes (#16821) * Conditional link-to component and basic linking to allocations and allocation routes * Job versions filter added to allocations index page * Steady state legends link * Legend links * Badge count links for versions * Fix: faded class on steady-state legend items * version link now wont show completed ones * Fix a11y violations with link labels * Combining some template conditional logic * [ui, deployments] Conversions on long nanosecond update params (#16882) * Conversions on long nanosecond nums * Early return in updateParamGroups comp prop * [ui, deployments] Mirage Actively Deploying Job and Deployment Integration Tests (#16888) * Start of deployment alloc test scaffolding * Bit of test cleanup and canary for ungrouped allocs * Flakey but more robust integrations for deployment panel * De-flake acceptance tests and add an actively deploying job to mirage * Jitter-less alloc status distribution removes my bad math * bugfix caused by summary.desiredTotal non-null * More interesting mirage active deployment alloc breakdown * Further tests for previous-allocs row * Previous alloc legend tests * Percy snapshots added to integration test

@Tracked

* [ui] Service job status panel (#16134) * it begins * Hacky demo enabled * Still very hacky but seems deece * Floor of at least 3 must be shown * Width from on-high * Other statuses considered * More sensible allocTypes listing * Beginnings of a legend * Total number of allocs running now maps over job.groups * Lintfix * base the number of slots to hold open on actual tallies, which should never exceed totalAllocs * Versions get yer versions here * Versions lookin like versions * Mirage fixup * Adds Remaining as an alloc chart status and adds historical status option * Get tests passing again by making job status static for a sec * Historical status panel click actions moved into their own component class * job detail tests plz chill * Testing if percy is fickle * Hyper-specfic on summary distribution bar identifier * Perhaps the 2nd allocSummary item no longer exists with the more accurate afterCreate data * UI Test eschewing the page pattern * Bones of a new acceptance test * Track width changes explicitly with window-resize * testlintfix * Alloc counting tests * Alloc grouping test * Alloc grouping with complex resizing * Refined the list of showable statuses * PR feedback addressed * renamed allocation-row to allocation-status-row * [ui, job status] Make panel status mode a queryParam (#16345) * queryParam changing * Test for QP in panel * Adding @Tracked to legacy controller * Move the job of switching to Historical out to larger context * integration test mock passed func * [ui] Service job deployment status panel (#16383) * A very fast and loose deployment panel * Removing Unknown status from the panel * Set up oldAllocs list in constructor, rather than as a getter/tracked var * Small amount of template cleanup * Refactored latest-deployment new logic back into panel.js * Revert now-unused latest-deployment component * margin bottom when ungrouped also * Basic integration tests for job deployment status panel * Updates complete alloc colour to green for new visualizations only (#16618) * Updates complete alloc colour to green for new visualizations only * Pale green instead of dark green for viz in general * [ui] Job Deployment Status: History and Update Props (#16518) * Deployment history wooooooo * Styled deployment history * Update Params * lintfix * Types and groups for updateParams * Live-updating history * Harden with types, error states, and pending states * Refactor updateParams to use trigger component * [ui] Deployment History search (#16608) * Functioning searchbox * Some nice animations for history items * History search test * Fixing up some old mirage conventions * some a11y rule override to account for scss keyframes * Split panel into deploying and steady components * HandleError passed from job index * gridified panel elements * TotalAllocs added to deploying.js * Width perc to px * [ui] Splitting deployment allocs by status, health, and canary status (#16766) * Initial attempt with lots of scratchpad work * Style mods per UI discussion * Fix canary overflow bug * Dont show canary or health for steady/prev-alloc blocks * Steady state * Thanks Julie * Fixes steady-state versions * Legen, wait for it... * Test fixes now that we have a minimum block size * PR prep * Shimmer effect on pending and unplaced allocs (#16801) * Shimmer effect on pending and unplaced * Dont show animation in the legend * [ui, deployments] Linking allocblocks and legends to allocation / allocations index routes (#16821) * Conditional link-to component and basic linking to allocations and allocation routes * Job versions filter added to allocations index page * Steady state legends link * Legend links * Badge count links for versions * Fix: faded class on steady-state legend items * version link now wont show completed ones * Fix a11y violations with link labels * Combining some template conditional logic * [ui, deployments] Conversions on long nanosecond update params (#16882) * Conversions on long nanosecond nums * Early return in updateParamGroups comp prop * [ui, deployments] Mirage Actively Deploying Job and Deployment Integration Tests (#16888) * Start of deployment alloc test scaffolding * Bit of test cleanup and canary for ungrouped allocs * Flakey but more robust integrations for deployment panel * De-flake acceptance tests and add an actively deploying job to mirage * Jitter-less alloc status distribution removes my bad math * bugfix caused by summary.desiredTotal non-null * More interesting mirage active deployment alloc breakdown * Further tests for previous-allocs row * Previous alloc legend tests * Percy snapshots added to integration test * changelog

Functioning searchbox

efe6f3a

philrenaud self-assigned this Mar 22, 2023

vercel bot deployed to Preview – nomad-storybook-and-ui March 22, 2023 13:48 View deployment

Some nice animations for history items

eb14519

vercel bot deployed to Preview – nomad-storybook-and-ui March 22, 2023 14:07 View deployment

philrenaud commented Mar 22, 2023

View reviewed changes

ui/mirage/factories/allocation.js Outdated Show resolved Hide resolved

History search test

8adb9f0

philrenaud force-pushed the 16512-deployment-history-search branch from 5b2bdc2 to 8adb9f0 Compare March 22, 2023 15:21

philrenaud requested review from mikenomitch, ChaiWithJai and juliezzhou March 22, 2023 15:22

philrenaud commented Mar 22, 2023

View reviewed changes

philrenaud marked this pull request as ready for review March 22, 2023 15:26

vercel bot deployed to Preview – nomad-storybook-and-ui March 22, 2023 15:26 View deployment

ChaiWithJai suggested changes Mar 22, 2023

View reviewed changes

Fixing up some old mirage conventions

a3a9f70

philrenaud requested a review from ChaiWithJai March 22, 2023 17:12

vercel bot deployed to Preview – nomad-storybook-and-ui March 22, 2023 17:16 View deployment

some a11y rule override to account for scss keyframes

ca9e90a

vercel bot deployed to Preview – nomad-storybook-and-ui March 22, 2023 19:08 View deployment

ChaiWithJai approved these changes Mar 23, 2023

View reviewed changes

ui/app/components/job-status/deployment-history.js

/**

* @type { string }

*/

@tracked searchTerm = '';

Copy link

Contributor

ChaiWithJai Mar 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha!

philrenaud merged commit 9102247 into 16512-service-job-deployment-panel-history-and-update-params Mar 24, 2023

philrenaud deleted the 16512-deployment-history-search branch March 24, 2023 00:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ui] Deployment History search #16608

[ui] Deployment History search #16608

philrenaud commented Mar 22, 2023 •

edited

Loading

github-actions bot commented Mar 22, 2023 •

edited

Loading

github-actions bot commented Mar 22, 2023 •

edited

Loading

philrenaud Mar 22, 2023

ChaiWithJai left a comment

ChaiWithJai Mar 22, 2023

philrenaud Mar 22, 2023

ChaiWithJai Mar 22, 2023

philrenaud Mar 22, 2023

ChaiWithJai Mar 23, 2023

ChaiWithJai Mar 23, 2023

[ui] Deployment History search #16608

[ui] Deployment History search #16608

Conversation

philrenaud commented Mar 22, 2023 • edited Loading

github-actions bot commented Mar 22, 2023 • edited Loading

Ember Asset Size action

github-actions bot commented Mar 22, 2023 • edited Loading

Ember Test Audit comparison

philrenaud Mar 22, 2023

Choose a reason for hiding this comment

ChaiWithJai left a comment

Choose a reason for hiding this comment

ChaiWithJai Mar 22, 2023

Choose a reason for hiding this comment

philrenaud Mar 22, 2023

Choose a reason for hiding this comment

ChaiWithJai Mar 22, 2023

Choose a reason for hiding this comment

philrenaud Mar 22, 2023

Choose a reason for hiding this comment

ChaiWithJai Mar 23, 2023

Choose a reason for hiding this comment

ChaiWithJai Mar 23, 2023

Choose a reason for hiding this comment

philrenaud commented Mar 22, 2023 •

edited

Loading

github-actions bot commented Mar 22, 2023 •

edited

Loading

github-actions bot commented Mar 22, 2023 •

edited

Loading