Resources route

.changelog/2777.txt

@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Added a tab with an overview of the resources provisioned by operations
+```

ui/app/components/resources-table-extended.hbs

@@ -0,0 +1,64 @@
+<Table
+  data-test-resources-table
+  @withMargin={{@withMargin}}
+>
+  <caption>{{yield to="caption"}}</caption>
+
+  <colgroup>
+    <col class="w-2/5">
+    <col>
+    <col>
+    <col>
+  </colgroup>
+
+  <thead>
+    <tr>
+      <th>{{t "page.resources.table.headings.name"}}</th>
+      <th>{{t "page.resources.table.headings.type"}}</th>
+      <th>{{t "page.resources.table.headings.age"}}</th>
+      <th>{{t "page.resources.table.headings.status"}}</th>
+      <th>{{t "page.resources.table.headings.provisioned-by"}}</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    {{#each @resources key="resource.id" as |resourceObject|}}
+      {{#let resourceObject.resource as |resource|}}
+      <tr>
+        <th scope="row">
+          <LinkTo
+            title={{resource.name}}
+            @route={{@route}}
+            @models={{append (or @models (array)) resource.id}}
+          >
+            {{resource.name}}
+          </LinkTo>
+        </th>
+        <td class="resource-icon"><FlightIcon @name={{icon-for-component resource.platform}} /> {{resource.type}}</td>
+        <td>{{date-format-distance-to-now resource.createdTime.seconds}}</td>
+        <td><ResourceHealthIndicator @resource={{resource}} /></td>
+        <td>
+          {{#if (eq resourceObject.type 'deployment')}}
+            <LinkTo
+              title={{concat (t "page.deployment.title") " v" resourceObject.source.sequence}}
+              @route="workspace.projects.project.app.deployment.deployment-seq"
+              @models={{array resourceObject.source.sequence}}
+              >
+              {{t "page.resources.table.deployment"}} <b class="badge badge--version">v{{resourceObject.source.sequence}}</b>
+            </LinkTo>
+          {{/if}}
+          {{#if (eq resourceObject.type 'release')}}
+            <LinkTo
+              title={{concat (t "page.release.title") " v" resourceObject.source.sequence}}
+              @route="workspace.projects.project.app.release-id"
+              @models={{array resourceObject.source.sequence}}
+              >
+              {{t "page.resources.table.release"}}<b class="badge badge--version">v{{resourceObject.source.sequence}}</b>
+            </LinkTo>
+          {{/if}}
+        </td>
+      </tr>
+      {{/let}}
+    {{/each}}
+  </tbody>
+</Table>

ui/app/components/resources-table.hbs

@@ -13,10 +13,10 @@
 
   <thead>
     <tr>
-      <th>Name</th>
-      <th>Type</th>
-      <th>Age</th>
-      <th>Status</th>
+      <th>{{t "page.resources.table.headings.name"}}</th>
+      <th>{{t "page.resources.table.headings.type"}}</th>
+      <th>{{t "page.resources.table.headings.age"}}</th>
+      <th>{{t "page.resources.table.headings.status"}}</th>
     </tr>
   </thead>
 

ui/app/router.js

@@ -58,6 +58,7 @@ Router.map(function () {
             this.route('resource', { path: 'resources/:resource_id' });
           });
           this.route('logs');
+          this.route('resources');
           this.route('exec');
           this.route('deployments');
         });

ui/app/routes/workspace/projects/project/app/resources.ts

@@ -0,0 +1,44 @@
+import { DeploymentExtended, ReleaseExtended } from 'waypoint/services/api';
+
+import { Model as AppRouteModel } from '../app';
+import Route from '@ember/routing/route';
+import { StatusReport } from 'waypoint-pb';
+
+type Model = ResourceMap[];
+
+interface ResourceMap {
+  resource: StatusReport.Resource.AsObject;
+  type: string;
+  source: DeploymentExtended | ReleaseExtended;
+}
+export default class Resources extends Route {
+  async model(): Promise<Model> {
+    let app = this.modelFor('workspace.projects.project.app') as AppRouteModel;
+
+    let deployments = app.deployments;
+    let releases = app.releases;
+
+    let resources: ResourceMap[] = [];
+
+    deployments.forEach((dep) => {
+      dep.statusReport?.resourcesList.forEach((resource) => {
+        resources.push({
+          resource,
+          type: 'deployment',
+          source: dep,
+        } as ResourceMap);
+      });
+    });
+    releases.forEach((rel) => {
+      rel.statusReport?.resourcesList.forEach((resource) => {
+        resources.push({
+          resource,
+          type: 'release',
+          source: rel,
+        } as ResourceMap);
+      });
+    });
+
+    return resources;
+  }
+}

ui/app/templates/workspace/projects/project/app.hbs

@@ -68,6 +68,11 @@
     <FlightIcon @name="outline" class="tab-icon" />
     {{t "nav.logs"}}
   </LinkTo>
+  <LinkTo @route="workspace.projects.project.app.resources"
+    @models={{array @model.application.project @model.application.application }}>
+    <FlightIcon @name="box" class="tab-icon" />
+    {{t "nav.resources"}}
+  </LinkTo>
   <LinkTo @route="workspace.projects.project.app.exec"
     @models={{array @model.application.project @model.application.application }}>
     <FlightIcon @name="terminal-screen" class="tab-icon" />

ui/app/templates/workspace/projects/project/app/resources.hbs

@@ -0,0 +1,14 @@
+{{#if @model.length}}
+  <ResourcesTableExtended
+    @resources={{@model}}
+  />
+{{else}}
+  <EmptyState>
+    <p>{{t 'page.resources.table.empty-state.line-1'}}</p>
+    <p>{{t 'page.resources.table.empty-state.line-2'}}
+      <CopyableCode @ref="empty-build" @inline="true">
+        <code id="empty-build">waypoint up</code>
+      </CopyableCode>
+      {{t 'page.resources.table.empty-state.line-3'}}</p>
+  </EmptyState>
+{{/if}}

ui/translations/en-us.yaml

@@ -11,6 +11,7 @@ nav:
   exec: 'Exec'
   settings: 'Settings'
   logs: 'Logs'
+  resources: 'Resources'
   auth: 'Authenticate'
 
 product:
@@ -79,7 +80,20 @@ page:
         line-1: 'There are no releases to display for this app yet'
         line-2: 'To create your first release, you can run'
         line-3: 'from the CLI'
-  release:
+  resources:
+    table:
+      headings:
+        name: 'Name'
+        type: 'Type'
+        age: 'Age'
+        status: 'Status'
+        provisioned-by: 'Provisioned by'
+      empty-state:
+        line-1: 'There are no resources to display for this app yet'
+        line-2: 'To create your first release, you can run'
+        line-3: 'from the CLI'
+      release: 'Release'
+      deployment: 'Deployment'
     title: 'Release'
     resources:
       heading: Resources