ui: Redesign - Instance Detail Proxy Info tab (#7745)

* Fix clickFirstAnchor bug

* Create Proxy Info Tab for Instance Detail Page

* Create tests for ProxyInfo and update other scenarios with Proxy data

* ui: Refactors our app-view/%app-view component (#7752)

Co-authored-by: John Cowen <[email protected]>

Author: kaxcode

ui-v2/app/components/app-view/index.hbs

@@ -45,19 +45,25 @@
     </FlashMessage>
 {{/each}}
     <div>
-        <div class="actions">
-  {{#if authorized}}
-            <YieldSlot @name="actions">{{yield}}</YieldSlot>
-  {{/if}}
-        </div>
-
         <div>
   {{#if authorized}}
             <nav aria-label="Breadcrumb">
                 <YieldSlot @name="breadcrumbs">{{yield}}</YieldSlot>
             </nav>
   {{/if}}
-            <YieldSlot @name="header">{{yield}}</YieldSlot>
+            <div class="title">
+              <YieldSlot @name="header">
+                  {{yield}}
+              </YieldSlot>
+              <div class="actions">
+        {{#if authorized}}
+                  <YieldSlot @name="actions">{{yield}}</YieldSlot>
+        {{/if}}
+              </div>
+            </div>
+            <YieldSlot @name="nav">
+              {{yield}}
+            </YieldSlot>
         </div>
     </div>
   {{#if authorized}}

ui-v2/app/components/copy-button-feedback/index.js

@@ -1,3 +1,5 @@
 import Component from '@ember/component';
 
-export default Component.extend({});
+export default Component.extend({
+  tagName: '',
+});

ui-v2/app/components/healthcheck-list/index.hbs

@@ -7,8 +7,13 @@
       </BlockSlot>
       <BlockSlot @name="content">
       <dl>
+      {{#if (eq item.ServiceName "")}}
+        <dt>NodeName</dt>
+        <dd>{{item.Node}}</dd>
+      {{else}}
         <dt>ServiceName</dt>
-        <dd>{{or item.ServiceName '-'}}</dd>
+        <dd>{{item.ServiceName}}</dd>
+      {{/if}}
       </dl>
       <dl>
         <dt>CheckID</dt>

ui-v2/app/components/list-collection/index.js

@@ -47,7 +47,7 @@ export default Component.extend(WithResizing, {
   },
   actions: {
     click: function(e) {
-      return this.dom.clickFirstAnchor(e, 'li');
+      return this.dom.clickFirstAnchor(e, '.list-collection > ul > li');
     },
   },
 });

ui-v2/app/router.js

@@ -31,6 +31,9 @@ export const routes = {
         healthchecks: {
           _options: { path: '/health-checks' },
         },
+        proxy: {
+          _options: { path: '/proxy' },
+        },
         upstreams: {
           _options: { path: '/upstreams' },
         },

ui-v2/app/routes/dc/services/instance.js

@@ -16,12 +16,25 @@ export default Route.extend({
       // its highly unlikely that a service will suddenly change to being a
       // connect-proxy or vice versa so leave as is for now
       return hash({
-        proxy:
+        proxyMeta:
           // proxies and mesh-gateways can't have proxies themselves so don't even look
           ['connect-proxy', 'mesh-gateway'].includes(get(model.item, 'Kind'))
             ? null
             : this.proxyRepo.findInstanceBySlug(params.id, params.node, params.name, dc, nspace),
         ...model,
+      }).then(model => {
+        if (typeof get(model, 'proxyMeta.ServiceID') === 'undefined') {
+          return model;
+        }
+        const proxyName = get(model, 'proxyMeta.ServiceName');
+        const proxyID = get(model, 'proxyMeta.ServiceID');
+        const proxyNode = get(model, 'proxyMeta.Node');
+        return hash({
+          // Proxies have identical dc/nspace as their parent instance
+          // No need to use Proxy's dc/nspace response
+          proxy: this.repo.findInstanceBySlug(proxyID, proxyNode, proxyName, dc, nspace),
+          ...model,
+        });
       });
     });
   },

ui-v2/app/routes/dc/services/instance/proxy.js

@@ -0,0 +1,14 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  model: function() {
+    const parent = this.routeName
+      .split('.')
+      .slice(0, -1)
+      .join('.');
+    return this.modelFor(parent);
+  },
+  setupController: function(controller, model) {
+    controller.setProperties(model);
+  },
+});

ui-v2/app/styles/app.scss

@@ -14,6 +14,7 @@
 
 @import 'routes/dc/settings/index';
 @import 'routes/dc/nodes/index';
+@import 'routes/dc/services/index';
 @import 'routes/dc/intention/index';
 @import 'routes/dc/kv/index';
 @import 'routes/dc/acls/index';

ui-v2/app/styles/base/components/table/layout.scss

@@ -29,7 +29,6 @@
 %table td.no-actions ~ .actions {
   display: none;
 }
-%table td:not(.actions),
 %table td:not(.actions) > *:only-child {
   overflow-x: hidden;
 }
@@ -41,6 +40,7 @@
 }
 %table td {
   height: 50px;
+  vertical-align: middle;
 }
 %table caption {
   margin-bottom: 0.8em;

ui-v2/app/styles/base/components/tabs/layout.scss

@@ -22,9 +22,12 @@
   display: inline-block;
   padding: 16px 13px;
 }
-%tab-section section h3 {
-  margin: 24px 0;
+%tab-section section {
+  padding-bottom: 24px;
 }
 %tab-section section:not(:last-child) {
   border-bottom: 1px solid $gray-200;
 }
+%tab-section section > h3 {
+  margin: 24px 0;
+}

ui-v2/app/styles/components/app-view.scss

@@ -4,66 +4,19 @@
 
 @import '../base/components/popover-menu/index';
 
-%app-view-header .actions > [type='checkbox'] {
-  @extend %more-popover-menu;
-}
-%more-popover-menu-panel [type='checkbox']:checked ~ * {
-  /* this needs to autocalculate */
-  min-height: 143px;
-  max-height: 143px;
-}
-%more-popover-menu-panel [id$='logout']:checked ~ * {
-  /* this needs to autocalculate */
-  min-height: 163px;
-  max-height: 163px;
-}
-%more-popover-menu-panel [id$='delete']:checked ~ ul label[for$='delete'] + [role='menu'],
-%more-popover-menu-panel [id$='logout']:checked ~ ul label[for$='logout'] + [role='menu'],
-%more-popover-menu-panel [id$='use']:checked ~ ul label[for$='use'] + [role='menu'] {
-  display: block;
-}
-%app-view-header .actions label + div {
-  // We need this extra to allow tooltips to show
+%app-view-actions label + div {
+  /* We need this extra to allow tooltips to show */
   overflow: visible !important;
 }
 
 main {
   @extend %app-view;
 }
-%app-view > div > header {
-  @extend %app-view-header;
-}
-%app-view > div > div {
-  @extend %app-view-content;
-}
-%app-view header form {
+%app-view-header form {
   @extend %filter-bar;
 }
-@media #{$--lt-spacious-page-header} {
-  %app-view-header .actions {
-    margin-top: 9px;
-  }
-}
-// TODO: This should be its own component
-%app-view h1 {
-  padding-bottom: 0.2em;
-}
-%app-view h1 span[data-tooltip] {
-  @extend %with-external-source-icon;
-  margin-top: 13px;
-}
-%app-view h1 span.kind-proxy {
-  @extend %frame-gray-900;
-  @extend %pill;
-}
-%app-view h1 span.kind-proxy::before {
-  width: 0.3em !important;
-}
-%app-view h1 em {
-  color: $gray-600;
-}
-%app-view-header .actions a,
-%app-view-header .actions button {
+%app-view-actions a,
+%app-view-actions button {
   @extend %button-compact;
 }
 %app-view-content div > dl {
@@ -97,12 +50,14 @@ main {
     display: none;
   }
 }
+@media #{$--lt-spacious-page-header} {
+  %app-view-actions {
+    margin-top: 9px;
+  }
+}
 // reduced search magnifying icon layout
 @media #{$--lt-horizontal-selects} {
-  %app-view header h1 {
-    display: inline-block;
-  }
-  %app-view header h1 {
+  %app-view-header h1 {
     display: inline-block;
   }
   // on the instance detail page we don't have the magnifier

ui-v2/app/styles/components/app-view/index.scss

@@ -1,2 +1,14 @@
 @import './skin';
 @import './layout';
+%app-view > div > header {
+  @extend %app-view-header;
+}
+%app-view-header .title {
+  @extend %app-view-title;
+}
+%app-view-header .actions {
+  @extend %app-view-actions;
+}
+%app-view > div > div {
+  @extend %app-view-content;
+}

ui-v2/app/styles/components/app-view/layout.scss

@@ -1,67 +1,61 @@
 /* layout */
-%app-view-header > div:last-of-type > div:first-child {
-  flex-grow: 1;
-}
 %app-view {
   position: relative;
 }
-%app-view-header .actions {
-  float: right;
+%app-view-title {
+  display: flex;
+  align-items: center;
+}
+%app-view-actions {
+  margin-left: auto;
   display: flex;
   align-items: flex-start;
-  margin-top: 9px;
 }
 %app-view-header dl {
   float: left;
-  margin-top: 25px;
-  margin-right: 50px;
-  margin-bottom: 20px;
-}
-%app-view-header dt {
-  font-weight: bold;
-}
-%app-view-header dd > a {
-  color: $black;
-}
-%app-view-header .title-bar {
-  display: flex;
-  align-items: center;
-}
-%app-view-header .title-bar > h1 {
-  border: 0;
-}
-%app-view-header .title-bar > span {
-  margin-left: 8px;
 }
 /* units */
 %app-view {
   margin-top: 50px;
 }
+/* give anything after the header a bit of room */
 %app-view-header + div > *:first-child {
   margin-top: 1.8em;
 }
-%app-view h2 {
+%app-view-title {
   padding-bottom: 0.2em;
-  margin-bottom: 0.5em;
 }
-%app-view-header .actions > *:not(:last-child) {
+%app-view-title > :not(:last-child) {
+  margin-right: 8px;
+}
+%app-view-actions {
+  margin-top: 9px;
+}
+%app-view-actions > *:not(:last-child) {
   margin-right: 12px;
 }
-
-// content
-%app-view-content div > dl > dt {
-  position: absolute;
+%app-view-header dl {
+  margin-top: 19px;
+  margin-bottom: 23px;
+  margin-right: 50px;
 }
-%app-view-content div > dl {
-  position: relative;
+
+/* content */
+%app-view-content h2 {
+  padding-bottom: 0.2em;
+  margin-bottom: 0.5em;
 }
 %app-view-content-empty {
   margin-top: 0;
   padding: 50px;
   text-align: center;
 }
-%app-view-content form:not(:last-child) {
-  margin-bottom: 2.2em;
+/* this should probably be its own component */
+%app-view-content div > dl {
+  position: relative;
+}
+%app-view-content div > dl > dt {
+  position: absolute;
 }
 %app-view-content div > dl > dt {
   width: 140px;
@@ -73,7 +67,8 @@
   min-height: 1em;
   margin-bottom: 0.4em;
 }
-// TODO: Think about an %app-form or similar
+/* */
+/* TODO: Think about an %app-form or similar */
 %app-view-content fieldset:not(.freetext-filter) {
   padding-bottom: 0.3em;
   margin-bottom: 2em;