ui: Add proxy icons to proxy services and instances where appropriate (…

…#5463)
hashicorp · May 1, 2019 · 10c1f29 · 10c1f29
1 parent 3d76540
commit 10c1f29
Show file tree

Hide file tree

Showing 15 changed files with 69 additions and 6 deletions.
diff --git a/ui-v2/app/controllers/dc/services/index.js b/ui-v2/app/controllers/dc/services/index.js
@@ -51,7 +51,12 @@ export default Controller.extend(WithEventSource, WithSearching, WithHealthFilte
     return widthDeclaration(get(this, 'maxWidth'));
   }),
   remainingWidth: computed('maxWidth', function() {
-    return htmlSafe(`width: calc(50% - ${Math.round(get(this, 'maxWidth') / 2)}px)`);
+    // maxWidth is the maximum width of the healthchecks column
+    // there are currently 2 other columns so divide it by 2 and
+    // take that off 50% (100% / number of fluid columns)
+    // also we added a Type column which we've currently fixed to 100px
+    // so again divide that by 2 and take it off each fluid column
+    return htmlSafe(`width: calc(50% - 50px - ${Math.round(get(this, 'maxWidth') / 2)}px)`);
   }),
   maxPassing: computed('filtered', function() {
     return max(get(this, 'filtered'), 'ChecksPassing');

diff --git a/ui-v2/app/styles/components/app-view.scss b/ui-v2/app/styles/components/app-view.scss
@@ -1,6 +1,7 @@
 @import './app-view/index';
 @import './filter-bar/index';
 @import './buttons/index';
+@import './type-icon/index';
 main {
   @extend %app-view;
 }
@@ -15,9 +16,13 @@ main {
     margin-top: 5px;
   }
 }
-%app-view h1 span {
+// TODO: This should be its own component
+%app-view h1 span[data-tooltip] {
   @extend %with-external-source-icon;
 }
+%app-view h1 span.kind-proxy {
+  @extend %type-icon, %with-proxy;
+}
 %app-view h1 em {
   color: $gray-600;
 }

diff --git a/ui-v2/app/styles/components/icons/index.scss b/ui-v2/app/styles/components/icons/index.scss
@@ -54,6 +54,7 @@
 %with-folder {
   text-indent: 30px;
 }
+%with-proxy,
 %with-hashicorp,
 %with-folder,
 %with-chevron,
@@ -79,6 +80,15 @@
   margin-top: -10px;
   background-color: $color-transparent;
 }
+%with-proxy::before {
+  @extend %pseudo-icon;
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path d="M2.242 7.138l6.963.774a1 1 0 0 1 .883.883l.774 6.963a1 1 0 0 1-1.104 1.104l-6.963-.774a1 1 0 0 1-.883-.883l-.774-6.963a1 1 0 0 1 1.104-1.104z" stroke="%23BAC1CC" fill="%23FAFBFC"/><path d="M5.242 4.138l6.963.774a1 1 0 0 1 .883.883l.774 6.963a1 1 0 0 1-1.104 1.104l-6.963-.774a1 1 0 0 1-.883-.883l-.774-6.963a1 1 0 0 1 1.104-1.104z" stroke="%238E96A3" fill="%238E96A3"/><path d="M8.242 1.138l6.963.774a1 1 0 0 1 .883.883l.774 6.963a1 1 0 0 1-1.104 1.104l-6.963-.774a1 1 0 0 1-.883-.883l-.774-6.963a1 1 0 0 1 1.104-1.104z" stroke="%23BAC1CC" fill="%23FAFBFC"/></g></svg>');
+  width: 18px;
+  height: 18px;
+  left: 3px;
+  margin-top: -9px;
+  background-color: $color-transparent;
+}
 %with-clipboard {
   padding-left: 38px !important;
 }

diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss
@@ -1,5 +1,6 @@
 @import './icons/index';
 @import './table/index';
+@import './type-icon/index';
 
 html.template-service.template-list td:first-child a span,
 html.template-node.template-show #services td:first-child a span,
@@ -19,6 +20,13 @@ html.template-service.template-list main th:first-child {
 td.folder {
   @extend %with-folder;
 }
+td .kind-proxy {
+  @extend %type-icon, %with-proxy;
+  text-indent: -9000px !important;
+  width: 24px;
+  margin-top: -8px;
+  transform: scale(0.7);
+}
 table:not(.sessions) tr {
   cursor: pointer;
 }

diff --git a/ui-v2/app/styles/components/table/layout.scss b/ui-v2/app/styles/components/table/layout.scss
@@ -65,6 +65,9 @@ td:not(.actions) a {
   html.template-policy.template-list tr > :nth-child(2) {
     display: none;
   }
+  html.template-service.template-list tr > :nth-child(2) {
+    display: none;
+  }
 }
 @media #{$--lt-wide-table} {
   html.template-intention.template-list tr > :nth-last-child(2) {

diff --git a/ui-v2/app/styles/components/tabular-collection.scss b/ui-v2/app/styles/components/tabular-collection.scss
@@ -174,6 +174,9 @@ html.template-node.template-show main table.sessions tr {
 // (100% / 2) - (160px / 2)
 // width: calc(50% - 160px);
 // }
+%services-row > *:nth-child(2) {
+  width: 100px;
+}
 %services-row > * {
   width: auto;
 }

diff --git a/ui-v2/app/styles/components/type-icon/index.scss b/ui-v2/app/styles/components/type-icon/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/type-icon/layout.scss b/ui-v2/app/styles/components/type-icon/layout.scss
@@ -0,0 +1,5 @@
+%type-icon {
+  display: inline-block;
+  text-indent: 20px;
+  padding: 3px;
+}
diff --git a/ui-v2/app/styles/components/type-icon/skin.scss b/ui-v2/app/styles/components/type-icon/skin.scss
@@ -0,0 +1,6 @@
+%type-icon {
+  border-radius: 4px;
+
+  background: $gray-100;
+  color: $gray-400;
+}
diff --git a/ui-v2/app/styles/components/with-tooltip.scss b/ui-v2/app/styles/components/with-tooltip.scss
@@ -1,4 +1,4 @@
 @import './with-tooltip/index';
-%app-view h1 span {
+%app-view h1 span[data-tooltip] {
   @extend %with-pseudo-tooltip;
 }
diff --git a/ui-v2/app/styles/components/with-tooltip/index.scss b/ui-v2/app/styles/components/with-tooltip/index.scss
@@ -12,7 +12,7 @@
 %with-pseudo-tooltip {
   text-indent: -9000px;
   font-size: 0;
-  top: -9px;
+  top: -7px;
 }
 
 %with-pseudo-tooltip::after,

diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss
@@ -54,7 +54,8 @@ th,
 %breadcrumbs li > *,
 %action-group-action,
 %tab-nav,
-%tooltip-bubble {
+%tooltip-bubble,
+%type-icon {
   font-weight: $typo-weight-medium;
 }
 main label a[rel*='help'],
@@ -96,7 +97,8 @@ caption,
 %form-element > span,
 %tooltip-bubble,
 %healthchecked-resource strong,
-%footer {
+%footer,
+%type-icon {
   font-size: $typo-size-700;
 }
 %toggle label span {

diff --git a/ui-v2/app/templates/dc/services/index.hbs b/ui-v2/app/templates/dc/services/index.hbs
@@ -24,6 +24,7 @@
             }}
                 {{#block-slot 'header'}}
                     <th style={{remainingWidth}}>Service</th>
+                    <th>Type</th>
                     <th style={{totalWidth}}>Health Checks<span><em>The number of health checks for the service on all nodes</em></span></th>
                     <th style={{remainingWidth}}>Tags</th>
                 {{/block-slot}}
@@ -34,6 +35,13 @@
                         {{item.Name}}
                       </a>
                     </td>
+                    <td>
+{{#if (eq item.Kind 'connect-proxy')}}
+                        <span class="kind-proxy">Proxy</span>
+{{else}}
+                        &nbsp;
+{{/if}}
+                    </td>
                     <td style={{totalWidth}}>
                       {{healthcheck-info
                         passing=item.ChecksPassing warning=item.ChecksWarning critical=item.ChecksCritical

diff --git a/ui-v2/app/templates/dc/services/instance.hbs b/ui-v2/app/templates/dc/services/instance.hbs
@@ -16,6 +16,9 @@
     {{/if}}
   {{/with}}
 {{/with}}
+{{#if (eq item.Kind 'connect-proxy')}}
+        <span class="kind-proxy">Proxy</span>
+{{/if}}
       </h1>
       <dl>
         <dt>Service Name</dt>

diff --git a/ui-v2/app/templates/dc/services/show.hbs b/ui-v2/app/templates/dc/services/show.hbs
@@ -14,6 +14,9 @@
     {{/if}}
   {{/with}}
 {{/with}}
+{{#if (eq item.Service.Kind 'connect-proxy')}}
+        <span class="kind-proxy">Proxy</span>
+{{/if}}
       </h1>
       <label for="toolbar-toggle"></label>
       {{tab-nav