-
Notifications
You must be signed in to change notification settings - Fork 4.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ui: Redesign Service List page (#7605)
* Create GridCollection for nodes page with styling * Update ListCollection styling * Update TagList styling * Create CompositeRow styling component * Update ConsulServiceList component with styling * Create service health-checks helper * Add InstanceCount to the service model * Add tag-svg to codebase * Create and update tests for service-list page * Upgrade @hashicorp/consul-api-double to 2.14.0
- Loading branch information
Showing
40 changed files
with
482 additions
and
208 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,15 @@ | ||
| {{yield}} | ||
| {{#if (gt items.length 0)}} | ||
| <TabularCollection @items={{items}} as |item index|> | ||
| <BlockSlot @name="header"> | ||
| <th style={{remainingWidth}}>Service</th> | ||
| <th style={{totalWidth}}> | ||
| Health Checks | ||
| <span> | ||
| <em role="tooltip">The number of health checks for the service on all nodes</em> | ||
| </span> | ||
| </th> | ||
| <th style={{remainingWidth}}>Tags</th> | ||
| </BlockSlot> | ||
| <BlockSlot @name="row"> | ||
| <td data-test-service={{item.Name}} style={{remainingWidth}}> | ||
| <a href={{href-to routeName item.Name}}> | ||
| {{#let (service/external-source item) as |externalSource| }} | ||
| {{#if externalSource }} | ||
| <span data-test-external-source={{externalSource}} style={{concat 'background-image: var(--' externalSource '-icon)'}}></span> | ||
| {{else}} | ||
| <span></span> | ||
| {{/if}} | ||
| {{/let}} | ||
| {{item.Name}} | ||
| </a> | ||
| </td> | ||
| <td style={{totalWidth}}> | ||
| <HealthcheckInfo @passing={{item.ChecksPassing}} @warning={{item.ChecksWarning}} @critical={{item.ChecksCritical}} @passingWidth={{passingWidth}} @warningWidth={{warningWidth}} @criticalWidth={{criticalWidth}} /> | ||
| </td> | ||
| <td style={{remainingWidth}}> | ||
| <TagList @items={{item.Tags}} /> | ||
| </td> | ||
| </BlockSlot> | ||
| </TabularCollection> | ||
| <ListCollection @cellHeight={{73}} @items={{items}} class="consul-service-list" as |item index|> | ||
| <a href={{href-to routeName item.Name}}> | ||
| <span class={{service/health-checks item}}></span> | ||
| <span> | ||
| {{item.Name}} | ||
| </span> | ||
| <span data-test-external-source="{{service/external-source item}}" class={{service/external-source item}}></span> | ||
| <YieldSlot @name="metadata" @params={{block-params item}}> | ||
| {{yield}} | ||
| </YieldSlot> | ||
| </a> | ||
| </ListCollection> | ||
| {{/if}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,6 @@ | ||
| import Component from '@ember/component'; | ||
| import { get, computed } from '@ember/object'; | ||
| import { htmlSafe } from '@ember/string'; | ||
| import Slotted from 'block-slots'; | ||
|
|
||
| const max = function(arr, prop) { | ||
| return arr.reduce(function(prev, item) { | ||
| return Math.max(prev, get(item, prop)); | ||
| }, 0); | ||
| }; | ||
| const chunk = function(str, size) { | ||
| const num = Math.ceil(str.length / size); | ||
| const chunks = new Array(num); | ||
| for (let i = 0, o = 0; i < num; ++i, o += size) { | ||
| chunks[i] = str.substr(o, size); | ||
| } | ||
| return chunks; | ||
| }; | ||
| const width = function(num) { | ||
| const str = num.toString(); | ||
| const len = str.length; | ||
| const commas = chunk(str, 3).length - 1; | ||
| return commas * 4 + len * 10; | ||
| }; | ||
| const widthDeclaration = function(num) { | ||
| return htmlSafe(`width: ${num}px`); | ||
| }; | ||
| export default Component.extend({ | ||
| export default Component.extend(Slotted, { | ||
| tagName: '', | ||
| onchange: function() {}, | ||
| maxWidth: computed('{maxPassing,maxWarning,maxCritical}', function() { | ||
| const PADDING = 32 * 3 + 13; | ||
| return ['maxPassing', 'maxWarning', 'maxCritical'].reduce((prev, item) => { | ||
| return prev + width(get(this, item)); | ||
| }, PADDING); | ||
| }), | ||
| totalWidth: computed('maxWidth', function() { | ||
| return widthDeclaration(get(this, 'maxWidth')); | ||
| }), | ||
| remainingWidth: computed('maxWidth', function() { | ||
| // 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('items.[]', function() { | ||
| return max(get(this, 'items'), 'ChecksPassing'); | ||
| }), | ||
| maxWarning: computed('items.[]', function() { | ||
| return max(get(this, 'items'), 'ChecksWarning'); | ||
| }), | ||
| maxCritical: computed('items.[]', function() { | ||
| return max(get(this, 'items'), 'ChecksCritical'); | ||
| }), | ||
| passingWidth: computed('maxPassing', function() { | ||
| return widthDeclaration(width(get(this, 'maxPassing'))); | ||
| }), | ||
| warningWidth: computed('maxWarning', function() { | ||
| return widthDeclaration(width(get(this, 'maxWarning'))); | ||
| }), | ||
| criticalWidth: computed('maxCritical', function() { | ||
| return widthDeclaration(width(get(this, 'maxCritical'))); | ||
| }), | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <EmberNativeScrollable @tagName="ul" @content-size={{_contentSize}} @scroll-left={{_scrollLeft}} @scroll-top={{_scrollTop}} @scrollChange={{action "scrollChange"}} @clientSizeChange={{action "clientSizeChange"}}> | ||
| <li></li> | ||
| {{~#each _cells as |cell|~}} | ||
| <li style={{{cell.style}}}>{{yield cell.item cell.index }}</li> | ||
| {{~/each~}} | ||
| </EmberNativeScrollable> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { inject as service } from '@ember/service'; | ||
| import { computed, get, set } from '@ember/object'; | ||
| import Component from 'ember-collection/components/ember-collection'; | ||
| import PercentageColumns from 'ember-collection/layouts/percentage-columns'; | ||
| import style from 'ember-computed-style'; | ||
| import WithResizing from 'consul-ui/mixins/with-resizing'; | ||
|
|
||
| export default Component.extend(WithResizing, { | ||
| dom: service('dom'), | ||
| tagName: 'div', | ||
| attributeBindings: ['style'], | ||
| height: 500, | ||
| cellHeight: 113, | ||
| style: style('getStyle'), | ||
| classNames: ['grid-collection'], | ||
| init: function() { | ||
| this._super(...arguments); | ||
| this.columns = [25, 25, 25, 25]; | ||
| }, | ||
| didReceiveAttrs: function() { | ||
| this._super(...arguments); | ||
| this._cellLayout = this['cell-layout'] = new PercentageColumns( | ||
| get(this, 'items.length'), | ||
| get(this, 'columns'), | ||
| get(this, 'cellHeight') | ||
| ); | ||
| }, | ||
| getStyle: computed('height', function() { | ||
| return { | ||
| height: get(this, 'height'), | ||
| }; | ||
| }), | ||
| resize: function(e) { | ||
| // TODO: This top part is very similar to resize in tabular-collection | ||
| // see if it make sense to DRY out | ||
| const dom = get(this, 'dom'); | ||
| const $appContent = dom.element('main > div'); | ||
| if ($appContent) { | ||
| const rect = this.element.getBoundingClientRect(); | ||
| const $footer = dom.element('footer[role="contentinfo"]'); | ||
| const space = rect.top + $footer.clientHeight; | ||
| const height = e.detail.height - space; | ||
| this.set('height', Math.max(0, height)); | ||
| this.updateItems(); | ||
| this.updateScrollPosition(); | ||
| } | ||
| const width = e.detail.width; | ||
| const len = get(this, 'columns.length'); | ||
| switch (true) { | ||
| case width > 1013: | ||
| if (len != 4) { | ||
| set(this, 'columns', [25, 25, 25, 25]); | ||
| } | ||
| break; | ||
| case width > 744: | ||
| if (len != 3) { | ||
| set(this, 'columns', [33, 33, 34]); | ||
| } | ||
| break; | ||
| case width > 487: | ||
| if (len != 2) { | ||
| set(this, 'columns', [50, 50]); | ||
| } | ||
| break; | ||
| case width < 488: | ||
| if (len != 1) { | ||
| set(this, 'columns', [100]); | ||
| } | ||
| } | ||
| if (len !== get(this, 'columns.length')) { | ||
| this._cellLayout = this['cell-layout'] = new PercentageColumns( | ||
| get(this, 'items.length'), | ||
| get(this, 'columns'), | ||
| get(this, 'cellHeight') | ||
| ); | ||
| } | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { helper } from '@ember/component/helper'; | ||
|
|
||
| export function healthChecks([item], hash) { | ||
| switch (true) { | ||
| case item.ChecksCritical !== 0: | ||
| return 'critical'; | ||
| case item.ChecksWarning !== 0: | ||
| return 'warning'; | ||
| case item.ChecksPassing !== 0: | ||
| return 'passing'; | ||
| default: | ||
| return 'empty'; | ||
| } | ||
| } | ||
|
|
||
| export default helper(healthChecks); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| @import './layout'; | ||
| @import './skin'; | ||
| %composite-row a:hover, | ||
| %composite-row a:focus, | ||
| %composite-row a:active { | ||
| @extend %composite-row-intent; | ||
| } | ||
| %composite-row > a > span { | ||
| @extend %composite-row-header; | ||
| } | ||
| %composite-row > a > ul { | ||
| @extend %composite-row-detail; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| %composite-row a { | ||
| display: block; | ||
| box-sizing: border-box; | ||
| padding: 12px; | ||
| padding-right: 0; | ||
| border: 1px solid; | ||
| border-bottom: 0; | ||
| } | ||
| %composite-row-intent { | ||
| border: 1px solid; | ||
| position: relative; | ||
| } | ||
| %composite-row-detail { | ||
| display: flex; | ||
| flex-wrap: nowrap; | ||
| } | ||
| %composite-row-detail * { | ||
| white-space: nowrap; | ||
| } | ||
| %composite-row-detail > li:not(:first-child) { | ||
| margin-left: 12px; | ||
| } |
Oops, something went wrong.