ui: Add 'filtered by' to Upstreams and UpstreamInstance listings (#9632)

* Add filtered by to Upstreams and Linked Services

* Filterby for upstream instances

* More specific headers for definition tables

* Add empty healthcheck filter predicate and related computed props

* More i18n

ui/packages/consul-ui/app/components/consul/upstream-instance/search-bar/index.hbs

@@ -1,63 +1,96 @@
-<form
-  class="consul-upstream-instance-search-bar filter-bar"
+<SearchBar
+  class="consul-upstream-instance-search-bar"
   ...attributes
+  @filter={{@filter}}
 >
-  <div class="search">
-    <FreetextFilter
-      @onsearch={{action @onsearch}}
-      @value={{@search}}
-      @placeholder="Search"
-    >
-      <PopoverSelect
-        class="type-search-properties"
+    <:status as |search|>
+
+{{#let
+
+  (t (concat "components.consul.upstream-instance.search-bar." search.status.key ".name")
+      default=(array
+        (concat "common.search." search.status.key)
+        (concat "common.consul." search.status.key)
+      )
+  )
+
+  (t (concat "components.consul.upstream-instance.search-bar." search.status.value ".name")
+      default=(array
+        (concat "common.search." search.status.value)
+        (concat "common.consul." search.status.value)
+        (concat "common.brand." search.status.value)
+      )
+  )
+
+as |key value|}}
+      <search.RemoveFilter
+        aria-label={{t "common.ui.remove" item=(concat key " " value)}}
+      >
+        <dl>
+          <dt>{{key}}</dt>
+          <dd>{{value}}</dd>
+        </dl>
+      </search.RemoveFilter>
+{{/let}}
+
+    </:status>
+    <:search as |search|>
+      <search.Search
+        @onsearch={{action @onsearch}}
+        @value={{@search}}
+        @placeholder={{t "common.search.search"}}
+      >
+        <search.Select
+          class="type-search-properties"
+          @position="right"
+          @onchange={{action @filter.searchproperty.change}}
+          @multiple={{true}}
+          @required={{true}}
+        as |components|>
+          <BlockSlot @name="selected">
+            <span>
+              {{t "common.search.searchproperty"}}
+            </span>
+          </BlockSlot>
+          <BlockSlot @name="options">
+    {{#let components.Optgroup components.Option as |Optgroup Option|}}
+            {{#each @filter.searchproperty.default as |prop|}}
+              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+                {{t (concat "common.consul." (lowercase prop))}}
+              </Option>
+            {{/each}}
+    {{/let}}
+          </BlockSlot>
+        </search.Select>
+      </search.Search>
+    </:search>
+    <:sort as |search|>
+      <search.Select
+        class="type-sort"
+        data-test-sort-control
         @position="right"
-        @onchange={{action @onfilter.searchproperty}}
-        @multiple={{true}}
+        @onchange={{action @sort.change}}
+        @multiple={{false}}
+        @required={{true}}
       as |components|>
         <BlockSlot @name="selected">
           <span>
-            Search across
+            {{#let (from-entries (array
+                  (array "DestinationName:asc" (t "common.sort.alpha.asc"))
+                  (array "DestinationName:desc" (t "common.sort.alpha.desc"))
+                ))
+              as |selectable|
+            }}
+              {{get selectable @sort.value}}
+            {{/let}}
           </span>
         </BlockSlot>
         <BlockSlot @name="options">
   {{#let components.Optgroup components.Option as |Optgroup Option|}}
-    {{#each @searchproperties as |prop|}}
-          <Option @value={{prop}} @selected={{contains prop @filter.searchproperties}}>{{prop}}</Option>
-    {{/each}}
+            <Option @value="DestinationName:asc" @selected={{eq "DestinationName:asc" @sort.value}}>{{t "common.sort.alpha.asc"}}</Option>
+            <Option @value="DestinationName:desc" @selected={{eq "DestinationName:desc" @sort.value}}>{{t "common.sort.alpha.desc"}}</Option>
   {{/let}}
         </BlockSlot>
-      </PopoverSelect>
-    </FreetextFilter>
-  </div>
-  <div class="sort">
-{{#let (or @sort 'DestinationName:asc') as |sort|}}
-    <PopoverSelect
-      class="type-sort"
-      data-test-sort-control
-      @position="right"
-      @onchange={{action @onsort}}
-      @multiple={{false}}
-    as |components|>
-      <BlockSlot @name="selected">
-        <span>
-          {{#let (from-entries (array
-              (array "DestinationName:asc" "A to Z")
-              (array "DestinationName:desc" "Z to A")
-            ))
-          as |selectable|}}
-            {{get selectable sort}}
-          {{/let}}
-        </span>
-      </BlockSlot>
-      <BlockSlot @name="options">
-{{#let components.Optgroup components.Option as |Optgroup Option|}}
-        <Optgroup @label="Service Name">
-          <Option @value="DestinationName:asc" @selected={{eq "DestinationName:asc" sort}}>A to Z</Option>
-          <Option @value="DestinationName:desc" @selected={{eq "DestinationName:desc" sort}}>Z to A</Option>
-        </Optgroup>
-{{/let}}
-      </BlockSlot>
-    </PopoverSelect>
-{{/let}}
-  </div>
-</form>
+      </search.Select>
+    </:sort>
+</SearchBar>

ui/packages/consul-ui/app/components/consul/upstream/search-bar/index.hbs

@@ -1,86 +1,126 @@
-<form
-  class="consul-upstream-search-bar filter-bar"
+<SearchBar
+  class="consul-upstream-search-bar"
   ...attributes
+  @filter={{@filter}}
 >
-  <div class="search">
-    <FreetextFilter
-      @onsearch={{action @onsearch}}
-      @value={{@search}}
-      @placeholder="Search"
-    >
-      <PopoverSelect
-        class="type-search-properties"
-        @position="right"
-        @onchange={{action @onfilter.searchproperty}}
+    <:status as |search|>
+
+{{#let
+
+  (t (concat "components.consul.upstream.search-bar." search.status.key ".name")
+      default=(array
+        (concat "common.search." search.status.key)
+        (concat "common.consul." search.status.key)
+      )
+  )
+
+  (t (concat "components.consul.upstream.search-bar." search.status.value ".name")
+      default=(array
+        (concat "common.search." search.status.value)
+        (concat "common.consul." search.status.value)
+        (concat "common.brand." search.status.value)
+      )
+  )
+
+as |key value|}}
+      <search.RemoveFilter
+        aria-label={{t "common.ui.remove" item=(concat key " " value)}}
+      >
+        <dl>
+          <dt>{{key}}</dt>
+          <dd>{{value}}</dd>
+        </dl>
+      </search.RemoveFilter>
+{{/let}}
+
+    </:status>
+    <:search as |search|>
+      <search.Search
+        @onsearch={{action @onsearch}}
+        @value={{@search}}
+        @placeholder={{t "common.search.search"}}
+      >
+        <search.Select
+          class="type-search-properties"
+          @position="right"
+          @onchange={{action @filter.searchproperty.change}}
+          @multiple={{true}}
+          @required={{true}}
+        as |components|>
+          <BlockSlot @name="selected">
+            <span>
+              {{t "common.search.searchproperty"}}
+            </span>
+          </BlockSlot>
+          <BlockSlot @name="options">
+    {{#let components.Optgroup components.Option as |Optgroup Option|}}
+            {{#each @filter.searchproperty.default as |prop|}}
+              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+                {{t (concat "common.consul." (lowercase prop))}}
+              </Option>
+            {{/each}}
+    {{/let}}
+          </BlockSlot>
+        </search.Select>
+      </search.Search>
+    </:search>
+    <:filter as |search|>
+      <search.Select
+        @position="left"
+        @onchange={{action @filter.instance.change}}
         @multiple={{true}}
       as |components|>
         <BlockSlot @name="selected">
           <span>
-            Search across
+            {{t "components.consul.upstream.search-bar.instance.name"}}
           </span>
         </BlockSlot>
         <BlockSlot @name="options">
   {{#let components.Optgroup components.Option as |Optgroup Option|}}
-          <Option @value="Name" @selected={{contains 'Name' @filter.searchproperties}}>Name</Option>
-          <Option @value="Tags" @selected={{contains 'Tags' @filter.searchproperties}}>Tags</Option>
+      {{#each (array "registered" "not-registered") as |item|}}
+            <Option @value={{item}} @selected={{contains item @filter.instance.value}}>
+              {{t (concat "common.consul." item)}}
+            </Option>
+      {{/each}}
   {{/let}}
         </BlockSlot>
-      </PopoverSelect>
-    </FreetextFilter>
-  </div>
-  <div class="filters">
-    <PopoverSelect
-      @position="left"
-      @onchange={{action @onfilter.instance}}
-      @multiple={{true}}
-    as |components|>
-      <BlockSlot @name="selected">
-        <span>
-          Type
-        </span>
-      </BlockSlot>
-      <BlockSlot @name="options">
-{{#let components.Optgroup components.Option as |Optgroup Option|}}
-        <Option @value="registered" @selected={{contains 'registered' @filter.instances}}>Registered</Option>
-        <Option @value="not-registered" @selected={{contains 'not-registered' @filter.instances}}>Not Registered</Option>
-{{/let}}
-      </BlockSlot>
-    </PopoverSelect>
-  </div>
-  <div class="sort">
-    <PopoverSelect
-      class="type-sort"
-      data-test-sort-control
-      @position="right"
-      @onchange={{action @onsort}}
-      @multiple={{false}}
-    as |components|>
-      <BlockSlot @name="selected">
-        <span>
-          {{#let (from-entries (array
-                (array "Name:asc" "A to Z")
-                (array "Name:desc" "Z to A")
-                (array "Status:asc" "Unhealthy to Healthy")
-                (array "Status:desc" "Healthy to Unhealthy")
-              ))
-            as |selectable|
-          }}
-            {{get selectable @sort}}
-          {{/let}}
-        </span>
-      </BlockSlot>
-      <BlockSlot @name="options">
-{{#let components.Optgroup components.Option as |Optgroup Option|}}
-        <Optgroup @label="Health Status">
-          <Option @value="Status:asc" @selected={{eq "Status:asc" @sort}}>Unhealthy to Healthy</Option>
-          <Option @value="Status:desc" @selected={{eq "Status:desc" @sort}}>Healthy to Unhealthy</Option>
-        </Optgroup>
-        <Optgroup @label="Service Name">
-          <Option @value="Name:asc" @selected={{eq "Name:asc" @sort}}>A to Z</Option>
-          <Option @value="Name:desc" @selected={{eq "Name:desc" @sort}}>Z to A</Option>
-        </Optgroup>
-{{/let}}
-      </BlockSlot>
-    </PopoverSelect>
-  </div>
-</form>
+      </search.Select>
+    </:filter>
+    <:sort as |search|>
+      <search.Select
+        class="type-sort"
+        data-test-sort-control
+        @position="right"
+        @onchange={{action @sort.change}}
+        @multiple={{false}}
+        @required={{true}}
+      as |components|>
+        <BlockSlot @name="selected">
+          <span>
+            {{#let (from-entries (array
+                  (array "Name:asc" (t "common.sort.alpha.asc"))
+                  (array "Name:desc" (t "common.sort.alpha.desc"))
+                  (array "Status:asc" (t "common.sort.status.asc"))
+                  (array "Status:desc" (t "common.sort.status.desc"))
+                ))
+              as |selectable|
+            }}
+              {{get selectable @sort.value}}
+            {{/let}}
+          </span>
+        </BlockSlot>
+        <BlockSlot @name="options">
+  {{#let components.Optgroup components.Option as |Optgroup Option|}}
+          <Optgroup @label={{t "common.consul.status"}}>
+            <Option @value="Status:asc" @selected={{eq "Status:asc" @sort.value}}>{{t "common.sort.status.asc"}}</Option>
+            <Option @value="Status:desc" @selected={{eq "Status:desc" @sort.value}}>{{t "common.sort.status.desc"}}</Option>
+          </Optgroup>
+          <Optgroup @label={{t "common.consul.service-name"}}>
+            <Option @value="Name:asc" @selected={{eq "Name:asc" @sort.value}}>{{t "common.sort.alpha.asc"}}</Option>
+            <Option @value="Name:desc" @selected={{eq "Name:desc" @sort.value}}>{{t "common.sort.alpha.desc"}}</Option>
+          </Optgroup>
+  {{/let}}
+        </BlockSlot>
+      </search.Select>
+    </:sort>
+</SearchBar>

ui/packages/consul-ui/app/filter/predicates/service-instance.js

@@ -5,6 +5,7 @@ export default {
     passing: (item, value) => item.Status === value,
     warning: (item, value) => item.Status === value,
     critical: (item, value) => item.Status === value,
+    empty: (item, value) => item.MeshChecks.length === 0,
   },
   source: (item, values) => {
     return setHelpers.intersectionSize(values, new Set(item.ExternalSources || [])) !== 0;

ui/packages/consul-ui/app/filter/predicates/service.js

@@ -13,6 +13,7 @@ export default {
     passing: (item, value) => item.MeshStatus === value,
     warning: (item, value) => item.MeshStatus === value,
     critical: (item, value) => item.MeshStatus === value,
+    empty: (item, value) => item.MeshChecksTotal === 0,
   },
   instance: {
     registered: (item, value) => item.InstanceCount > 0,

ui/packages/consul-ui/app/models/service.js

@@ -48,6 +48,16 @@ export default class Service extends Model {
 
   @attr() meta; // {}
 
+  @computed('ChecksPassing', 'ChecksWarning', 'ChecksCritical')
+  get ChecksTotal() {
+    return this.ChecksPassing + this.ChecksWarning + this.ChecksCritical;
+  }
+
+  @computed('MeshChecksPassing', 'MeshChecksWarning', 'MeshChecksCritical')
+  get MeshChecksTotal() {
+    return this.MeshChecksPassing + this.MeshChecksWarning + this.MeshChecksCritical;
+  }
+
   /* Mesh properties involve both the service and the associated proxy */
   @computed('ConnectedWithProxy', 'ConnectedWithGateway')
   get MeshEnabled() {

ui/packages/consul-ui/app/routes/dc/services/show/services.js

@@ -25,13 +25,12 @@ export default class ServicesRoute extends Route {
       .slice(0, -1)
       .join('.');
     const name = this.modelFor(parent).slug;
-    const gatewayServices = await this.data.source(
-      uri => uri`/${nspace}/${dc}/gateways/for-service/${name}`
-    );
+    const items = await this.data.source(uri => uri`/${nspace}/${dc}/gateways/for-service/${name}`);
     return {
       dc,
       nspace,
-      gatewayServices,
+      items,
+      searchProperties: this.queryParams.searchproperty.empty[0],
     };
   }