ui: Adds human formatting to nanosecond based session durations (#10062)

* ui: Adds human formatting to nanosecond based session durations
This commit is contained in:
John Cowen 2021-04-28 12:12:56 +01:00 committed by GitHub
parent 61ee1f0ad1
commit a389eab7b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 98 additions and 7 deletions

3
.changelog/10062.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:improvement
ui: Added humanized formatting to lock session durations
```

View File

@ -20,7 +20,7 @@ references:
test-results: &TEST_RESULTS_DIR /tmp/test-results
cache:
yarn: &YARN_CACHE_KEY consul-ui-v3-{{ checksum "ui/yarn.lock" }}
yarn: &YARN_CACHE_KEY consul-ui-v4-{{ checksum "ui/yarn.lock" }}
rubygem: &RUBYGEM_CACHE_KEY static-site-gems-v1-{{ checksum "Gemfile.lock" }}
environment: &ENVIRONMENT

View File

@ -28,7 +28,7 @@
<dd>{{api.data.Behavior}}</dd>
{{#if form.data.Delay }}
<dt>Delay</dt>
<dd>{{api.data.LockDelay}}</dd>
<dd>{{duration-from api.data.LockDelay}}</dd>
{{/if}}
{{#if form.data.TTL }}
<dt>TTL</dt>

View File

@ -19,7 +19,7 @@
Delay
</Tooltip>
</dt>
<dd data-test-session-delay>{{item.LockDelay}}</dd>
<dd data-test-session-delay>{{duration-from item.LockDelay}}</dd>
</dl>
<dl class="ttl">
<dt>

View File

@ -0,0 +1,10 @@
import Helper from '@ember/component/helper';
import { inject as service } from '@ember/service';
export default class DurationFromHelper extends Helper {
@service('temporal') temporal;
compute([value], hash) {
return this.temporal.durationFrom(value);
}
}

View File

@ -0,0 +1,13 @@
# duration-from
`{{duration-from nanoseconds}}` is used to format a number in nanoseconds to a
short golang-like human format, for example:
```hbs preview-template
<p>{{duration-from 15000000000}}</p>
<p>{{duration-from 15000010001}}</p>
```
**Note:** The helper only accepts a javascript number primitive currently
Also see the `temporal` service for the implementation.

View File

@ -0,0 +1,21 @@
import format from 'pretty-ms';
import { assert } from '@ember/debug';
import Service from '@ember/service';
export default class TemporalService extends Service {
durationFrom(value, options = {}) {
switch (true) {
case typeof value === 'number':
// if its zero, don't format just return zero as a string
if (value === 0) {
return '0';
}
return format(value / 1000000, { formatSubMilliseconds: true })
.split(' ')
.join('');
}
assert(`${value} is not a valid type`, false);
return value;
}
}

View File

@ -153,6 +153,7 @@
"parse-duration": "^1.0.0",
"pretender": "^3.2.0",
"prettier": "^1.10.2",
"pretty-ms": "^7.0.1",
"qunit-dom": "^1.0.0",
"react-is": "^17.0.1",
"refractor": "^3.3.1",

View File

@ -26,16 +26,17 @@ Feature: dc / nodes / sessions / list: List Lock Sessions
- 30s
- 60m
---
Scenario: Given 2 session with LockDelay in milliseconds
Scenario: Given 3 session with LockDelay in nanoseconds
Given 1 datacenter model with the value "dc1"
And 1 node model from yaml
---
ID: node-0
---
And 2 session models from yaml
And 3 session models from yaml
---
- LockDelay: 120000
- LockDelay: 18000000
- LockDelay: 15000000000
---
When I visit the node page for yaml
---
@ -46,6 +47,7 @@ Feature: dc / nodes / sessions / list: List Lock Sessions
Then I see lockSessionsIsSelected on the tabs
Then I see delay on the sessions like yaml
---
- 120000
- 18000000
- 120µs
- 18ms
- 15s
---

View File

@ -0,0 +1,17 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
module('Integration | Helper | duration-from', function(hooks) {
setupRenderingTest(hooks);
// TODO: Replace this with your real tests.
test('it renders', async function(assert) {
this.set('inputValue', 15000000000);
await render(hbs`{{duration-from inputValue}}`);
assert.equal(this.element.textContent.trim(), '15s');
});
});

View File

@ -0,0 +1,12 @@
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
module('Unit | Service | temporal', function(hooks) {
setupTest(hooks);
// TODO: Replace this with your real tests.
test('it exists', function(assert) {
let service = this.owner.lookup('service:temporal');
assert.ok(service);
});
});

View File

@ -11093,6 +11093,11 @@ parse-json@^5.0.0:
json-parse-even-better-errors "^2.3.0"
lines-and-columns "^1.1.6"
parse-ms@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/parse-ms/-/parse-ms-2.1.0.tgz#348565a753d4391fa524029956b172cb7753097d"
integrity sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA==
parse-passwd@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
@ -11336,6 +11341,13 @@ prettier@^1.10.2:
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
pretty-ms@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-7.0.1.tgz#7d903eaab281f7d8e03c66f867e239dc32fb73e8"
integrity sha512-973driJZvxiGOQ5ONsFhOF/DtzPMOMtgC11kCpUrPGMTgqp2q/1gwzCquocrN33is0VZ5GFHXZYMM9l6h67v2Q==
dependencies:
parse-ms "^2.1.0"
printf@^0.5.1:
version "0.5.3"
resolved "https://registry.yarnpkg.com/printf/-/printf-0.5.3.tgz#8b7eec278d886833312238b2bf42b2b6f250880a"