Basic services table implemented #13856

philrenaud · 2022-07-19T21:01:05Z

Moves existing service model to service-fragment model
- ditto serializer
Adds a rudimentary table on the /services route
Normalizes services API endpoint response to be a flattened array

github-actions · 2022-07-19T21:09:52Z

Ember Asset Size action

As of 24fd942

Files that got Bigger 🚨:

File	raw	gzip
nomad-ui.js	+5.58 kB	+448 B

Files that stayed the same size 🤷‍:

File	raw	gzip
vendor.js	0 B	0 B
nomad-ui.css	0 B	0 B
vendor.css	0 B	0 B

github-actions · 2022-07-19T21:46:44Z

Ember Test Audit comparison

	service-discovery-ui	`24fd942`	change
passes	1374	1378	+4
failures	2	2	0
flaky	0	0	0
duration	000ms	000ms	-000ms

ChaiWithJai

Hey, buddy strong start! Some blocking feedback from me:

Can we have this PR merge into a trunk branch instead of main?
Can we handle the creation of the Service model and ServiceFragment refactoring into its own PR? I support atomic PRs, but in this case, I'd suggest breaking this PR down as follows:

ServiceFragment model refactoring with regression testing. (isolate refactoring)
Service model creation to what we have in the backend. And associated Adapter and Serializer logic. (isolate core logic)
Handle basic ServicesTable implementation. (view layer implementation)

This way you can make sure that we're not adding namespaces later. We need to implement them along the entire process.

ChaiWithJai · 2022-07-21T18:27:54Z

ui/app/models/service.js

@@ -1,11 +1,10 @@
 import { attr } from '@ember-data/model';
-import Fragment from 'ember-data-model-fragments/fragment';
-import { fragment } from 'ember-data-model-fragments/attributes';
+// import { fragment } from 'ember-data-model-fragments/attributes';


nit: Unused import.

ChaiWithJai · 2022-07-21T18:28:11Z

ui/app/models/service.js

-  @attr('string') name;
-  @attr('string') portLabel;
+export default class Service extends Model {
+  @attr('string') ServiceName;


nit: Why is this capitalized?

ChaiWithJai · 2022-07-21T18:30:53Z

ui/app/models/service.js

-export default class Service extends Fragment {
-  @attr('string') name;
-  @attr('string') portLabel;
+export default class Service extends Model {


blocking: When a Service is registered it must be associated with a nodeId, allocId and job. However, I don't see those being modeled here.

Answered this elsewhere, but these are not properties that return in the list view for Services. As I build out pieces of the UI that use things like nodeID, alloId, and job, I'll model those as well.

Generally, I'm not a fan of modeling as you go. And I think not modeling Variables specifically for building the URL ended up making that work downstream much more difficult. I'm already noticing a decent number of lurking bugs that can arise later if we don't take the time to model correctly at first.

ChaiWithJai · 2022-07-21T18:36:58Z

ui/app/routes/services.js

+    return RSVP.hash({
+      services: this.store.findAll('service'),
+    }).catch(notifyForbidden(this));


blocking: We're only resolving one promise here and setting the model. I don't think we need RSVP here.

ChaiWithJai · 2022-07-21T18:37:40Z

ui/app/models/task-group.js

@@ -35,7 +35,7 @@ export default class TaskGroup extends Fragment {

  @fragmentArray('task') tasks;

-  @fragmentArray('service') services;
+  @fragmentArray('service-fragment') services;


question: The TaskGroup and TaskDetail views are two of the highest churn files in the codebase. Did you test the existing set-up with all the different services combinations to ensure we're not introducing a regression here?

ChaiWithJai · 2022-07-21T18:45:41Z

ui/mirage/config.js

+  this.get('/services', function (schema) {
+    return [
+      {
+        Namespace: 'default',


blocking: Be careful hard coding namespaces even if its just your mirage configuration. Ripping this out later will be harder than starting with implementing namespaces.

ChaiWithJai · 2022-07-21T18:46:22Z

ui/mirage/factories/service.js

+import { pickOne } from '../utils';
 import { provide } from '../utils';


nit: Duplicate import path.

ChaiWithJai · 2022-07-21T18:47:07Z

ui/mirage/factories/service.js

+  ServiceName: () => `${faker.hacker.adjective()}-${faker.hacker.noun()}`,
+  Tags: () => {


question: Why aren't we adapting the properties to have lowercase property keys in the Adapter layer?

ChaiWithJai · 2022-07-21T18:50:25Z

ui/tests/acceptance/services-test.js

+    test('services table shows expected number of services', async function (assert) {
+      server.createList('service', 3);
+      await Services.visit();
+      assert.equal(
+        findAll('[data-test-service-row]').length,
+        3,
+        'correctly shows 3 services'
+      );


blocking: Services are namespaced. Per the RFC. There should be a test here that ensures that we're handling that here.

ChaiWithJai · 2022-07-21T18:54:59Z

ui/app/models/service.js

-export default class Service extends Fragment {
-  @attr('string') name;
-  @attr('string') portLabel;
+export default class Service extends Model {


blocking: The schema seems like its missing some key relationships and properties per what we have on the backend.

https://github.com/hashicorp/nomad/blob/main/api/services.go#L14-L60

Definitely agreed, but as the scope of this is limited to just the main /services page, and it only returns ServiceName and Tags, that's all I'm extending to the model here.

As we build out more of the UI that fetches and gets more properties, those'll be added to the model.

For context, the total of what returns at the /services endpoint

[{ "Namespace":"default", "Services":[{"ServiceName":"example","Tags":["foo","bar"]},{"ServiceName":"example2","Tags":["thelonious","max"]}] }]

ChaiWithJai · 2022-07-21T19:13:15Z

ui/app/models/service-fragment.js

+export default class Service extends Fragment {
+  @attr('string') name;
+  @attr('string') portLabel;
+  @attr() tags;
+  @attr('string') onUpdate;
+  @fragment('consul-connect') connect;
+}


This is consumed by TaskGroup and in the associated Allocation, TaskGroup and Task pages. I'm noticing that CI detected 19 failures and error messages failing on tests like:

allocation detail: if stopping or restarting fails, an error message is shown.

Any idea why these tests are failing CI?

Yep! Had forgotten to rename the mirage model: 3cf40b7

now settled

ChaiWithJai

Noticing a few places where we might be able to trim this PR. Found a duplicate template. And also noticed that the service relationship in the job model is unused unless I missed something.

ChaiWithJai · 2022-07-21T19:40:11Z

ui/app/templates/services/index.hbs

+{{page-title "Services"}}
+<section class="section">
+	<ListTable
+		@source={{this.model.services}}
+		as |t|
+	>
+		<t.head>
+			<th>
+				Name
+			</th>
+			<th>
+				Tags
+			</th>
+		</t.head>
+		<t.body as |row|>
+			<tr data-test-service-row>
+				<td>{{row.model.name}}</td>
+				<td>
+					{{#each row.model.tags as |tag|}}
+						<span class="tag">{{tag}}</span>
+					{{/each}}
+				</td>
+			</tr>
+		</t.body>
+	</ListTable>
+</section>


question: Is this a duplicate template? I see we have nearly the same template at templates/services/index? Why are we adding a duplicate of this to templates/components/services.hbs?

philrenaud · 2022-09-09T20:22:29Z

Closing; handled in a very different way in #14408

github-actions · 2023-01-08T02:17:41Z

I'm going to lock this pull request because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active contributions.
If you have found a problem that seems related to this change, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.

philrenaud self-assigned this Jul 19, 2022

philrenaud linked an issue Jul 19, 2022 that may be closed by this pull request

[ui] Service Discovery: Scaffold /services route #13826

Closed

philrenaud requested a review from ChaiWithJai July 21, 2022 15:38

philrenaud marked this pull request as ready for review July 21, 2022 15:38

vercel bot deployed to Preview – nomad-storybook-and-ui July 21, 2022 15:40 View deployment

vercel bot deployed to Preview – nomad-storybook-and-ui July 21, 2022 15:43 View deployment

philrenaud added 3 commits July 21, 2022 12:15

Basic services table implemented

c493400

Mirage setup and basic tests for services route

efb76b6

Accessibility audit added

ff79a48

philrenaud force-pushed the 13826-ui-service-discovery-scaffold-services-route branch from 7310077 to ff79a48 Compare July 21, 2022 16:15

vercel bot deployed to Preview – nomad-storybook-and-ui July 21, 2022 16:20 View deployment

ChaiWithJai suggested changes Jul 21, 2022

View reviewed changes

ChaiWithJai reviewed Jul 21, 2022

View reviewed changes

ChaiWithJai approved these changes Jul 21, 2022

View reviewed changes

Explicit service-fragment mirage model

3cf40b7

vercel bot deployed to Preview – nomad-storybook-and-ui July 21, 2022 19:38 View deployment

ChaiWithJai reviewed Jul 21, 2022

View reviewed changes

philrenaud changed the base branch from main to service-discovery-ui July 21, 2022 20:16

lowercase model keys

b53296f

vercel bot deployed to Preview – nomad-storybook-and-ui July 21, 2022 20:23 View deployment

Only lowercase the model, not the mirage factory

24fd942

vercel bot deployed to Preview – nomad-storybook-and-ui July 21, 2022 20:56 View deployment

philrenaud closed this Sep 9, 2022

github-actions bot locked as resolved and limited conversation to collaborators Jan 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Basic services table implemented #13856

Basic services table implemented #13856

philrenaud commented Jul 19, 2022

github-actions bot commented Jul 19, 2022 •

edited

Loading

github-actions bot commented Jul 19, 2022 •

edited

Loading

ChaiWithJai left a comment

ChaiWithJai Jul 21, 2022

ChaiWithJai Jul 21, 2022

ChaiWithJai Jul 21, 2022

philrenaud Jul 21, 2022

ChaiWithJai Jul 21, 2022

ChaiWithJai Jul 21, 2022

ChaiWithJai Jul 21, 2022

ChaiWithJai Jul 21, 2022

ChaiWithJai Jul 21, 2022

ChaiWithJai Jul 21, 2022

ChaiWithJai Jul 21, 2022

ChaiWithJai Jul 21, 2022

philrenaud Jul 21, 2022

philrenaud Jul 21, 2022 •

edited

Loading

ChaiWithJai Jul 21, 2022

philrenaud Jul 21, 2022

ChaiWithJai left a comment

ChaiWithJai Jul 21, 2022

philrenaud commented Sep 9, 2022

github-actions bot commented Jan 8, 2023

		import { pickOne } from '../utils';
		import { provide } from '../utils';

		ServiceName: () => `${faker.hacker.adjective()}-${faker.hacker.noun()}`,
		Tags: () => {

Basic services table implemented #13856

Basic services table implemented #13856

Conversation

philrenaud commented Jul 19, 2022

github-actions bot commented Jul 19, 2022 • edited Loading

Ember Asset Size action

github-actions bot commented Jul 19, 2022 • edited Loading

Ember Test Audit comparison

ChaiWithJai 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

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

philrenaud Jul 21, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ChaiWithJai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

philrenaud commented Sep 9, 2022

github-actions bot commented Jan 8, 2023

github-actions bot commented Jul 19, 2022 •

edited

Loading

github-actions bot commented Jul 19, 2022 •

edited

Loading

philrenaud Jul 21, 2022 •

edited

Loading