Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ui/dr primary/initial page setup #8671

Merged
merged 32 commits into from
Apr 8, 2020
Merged

Ui/dr primary/initial page setup #8671

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
5889b66
add helperText param to InfoTableRow
noelledaley Apr 1, 2020
31763ba
initial page setup
noelledaley Apr 2, 2020
401cf42
format card with padding and correct number of rows
noelledaley Apr 2, 2020
0bdd119
style card titles with margin
noelledaley Apr 2, 2020
2fb3ce2
move styles inside replication class; add todos
noelledaley Apr 2, 2020
bc88fcd
move replication-summary styles into core app so hot reloading works
noelledaley Apr 3, 2020
dae8214
prevent known secondaries card from being cut off on the right hand side
noelledaley Apr 3, 2020
a2d9205
make cards have the correct column span
noelledaley Apr 3, 2020
711e7d8
make code elements inside tables black
noelledaley Apr 3, 2020
f8add4a
WIP - start VltTable component
noelledaley Apr 4, 2020
e6f391e
simplify css
noelledaley Apr 6, 2020
493e9f3
renamed VltTable to ReplicationTable and use divs instead of table el…
noelledaley Apr 6, 2020
8802824
fix position of known secondaries
noelledaley Apr 6, 2020
13f93de
use table element for secondaries card
noelledaley Apr 6, 2020
05dd9f9
Merge branch 'ui/replication-status-discoverability' of https://githu…
noelledaley Apr 6, 2020
2c68ccf
add todo
noelledaley Apr 6, 2020
2228b83
move replication components to replication engine
noelledaley Apr 6, 2020
0de0494
Revert "move replication components to replication engine"
noelledaley Apr 7, 2020
2b20452
move ReplicationPrimaryCards to components
noelledaley Apr 7, 2020
3d40297
remove hover box shadow since cards are not selectable yet
noelledaley Apr 7, 2020
5cb3fb7
only apply padding to replication selectable-cards
noelledaley Apr 7, 2020
a379a3e
specify replication vlt-table in classname
noelledaley Apr 7, 2020
d7c51e8
move replication toggle and toggle into core addon
noelledaley Apr 7, 2020
8aa0442
remove extra toolbar border
noelledaley Apr 7, 2020
403ad11
remove duplicate css
noelledaley Apr 7, 2020
228d100
move ReplicationTableRows to core addon and use them on DR primary page
noelledaley Apr 7, 2020
376e989
clean up todos
noelledaley Apr 7, 2020
7806198
add jsdoc comments
noelledaley Apr 7, 2020
4e4c848
rename ReplicationTable to KnownSecondaries
noelledaley Apr 8, 2020
161bf47
update replicaiton table api to accept flexible data
noelledaley Apr 8, 2020
677ece9
rename replicationAttrs to data
noelledaley Apr 8, 2020
9cb8f3f
move replication components to core addon
noelledaley Apr 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions ui/app/styles/components/replication-dashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
.selectable-card {
line-height: normal;

&:hover {
box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
}

.title-number {
font-size: $size-3;
align-self: end;
Expand Down
37 changes: 37 additions & 0 deletions ui/app/styles/components/replication-primary-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
.replication {
.selectable-card-container {
margin: 2rem 0 2rem 0;
grid-template-columns: 1fr 2fr;

@include until($mobile) {
grid-template-columns: 1fr;
}
}

.selectable-card {
display: initial;
line-height: normal;

&:hover {
box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
}

.card-title {
margin-bottom: 2rem;
}

&.secondaries {
grid-column: 2/3;
grid-row: 1/3;

@include until($mobile) {
grid-column: 1/1;
grid-row: 1/1;
}
}
}

.helper-text {
font-weight: normal;
}
}
33 changes: 33 additions & 0 deletions ui/app/styles/components/replication-summary.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.replication {
.selectable-card-container {
margin: 2rem 0 2rem 0;
grid-template-columns: 1fr 2fr;

@include until($mobile) {
grid-template-columns: 1fr;
}
}

.selectable-card {
display: initial;
line-height: normal;

.card-title {
margin-bottom: 2rem;
}

&.secondaries {
grid-column: 2/3;
grid-row: 1/3;

@include until($mobile) {
grid-column: 1/1;
grid-row: 1/1;
}
}
}

.helper-text {
font-weight: normal;
}
}
2 changes: 1 addition & 1 deletion ui/app/styles/components/selectable-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
display: flex;
justify-content: space-between;
padding: $spacing-l 0 $spacing-l $spacing-l;
noelledaley marked this conversation as resolved.
Show resolved Hide resolved
padding: $spacing-l;
line-height: 0;

&:hover {
Expand Down
5 changes: 5 additions & 0 deletions ui/app/styles/components/vlt-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,9 @@
td.no-padding {
padding: 0;
}

code {
font-size: $size-7;
color: $black;
}
}
2 changes: 2 additions & 0 deletions ui/app/styles/core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,8 @@
@import './components/radial-progress';
@import './components/raft-join';
@import './components/replication-dashboard';
@import './components/replication-primary-card';
@import './components/replication-summary';
@import './components/role-item';
@import './components/search-select';
@import './components/selectable-card';
Expand Down
2 changes: 1 addition & 1 deletion ui/lib/core/addon/components/info-table-row.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import layout from '../templates/components/info-table-row';
*
* @example
* ```js
* <InfoTableRow @value={{5}} @label="TTL" @helperText="Some description"/>/>
* <InfoTableRow @value={{5}} @label="TTL" @helperText="Some description"/>
* ```
*
* @param value=null {any} - The the data to be displayed - by default the content of the component will only show if there is a value. Also note that special handling is given to boolean values - they will render `Yes` for true and `No` for false.
Expand Down
6 changes: 4 additions & 2 deletions ui/lib/core/stories/info-table-row.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,24 @@
`InfoTableRow` displays a label and a value in a table-row style manner. The component is responsive so
that the value breaks under the label on smaller viewports.

**Params**

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| value | <code>any</code> | <code></code> | The the data to be displayed - by default the content of the component will only show if there is a value. Also note that special handling is given to boolean values - they will render `Yes` for true and `No` for false. |
| label | <code>string</code> | <code>null</code> | The display name for the value. |
| helperText | <code>string</code> | <code>null</code> | Text to describe the value displayed beneath the label. |
| alwaysRender | <code>Boolean</code> | <code>false</code> | Indicates if the component content should be always be rendered. When false, the value of `value` will be used to determine if the component should render. |

**Example**

```js
<InfoTableRow @value={{5}} @label="TTL" />
<InfoTableRow @value={{5}} @label="TTL" @helperText="Some description"/>
```

**See**

- [Uses of InfoTableRow](https://github.com/hashicorp/vault/search?l=Handlebars&q=InfoTableRow+OR+info-table-row)
- [InfoTableRow Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/info-table-row.js)
- [InfoTableRow Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/info-table-row.js)
noelledaley marked this conversation as resolved.
Show resolved Hide resolved

---
6 changes: 4 additions & 2 deletions ui/lib/core/stories/info-table-row.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,12 @@ storiesOf('InfoTableRow/', module)
() => ({
template: hbs`
<h5 class="title is-5">Info Table Row</h5>
<InfoTableRow @value={{value}} @label={{label}} @alwaysRender={{alwaysRender}} />
<InfoTableRow @value={{value}} @label={{label}} @helperText={{helperText}} @alwaysRender={{alwaysRender}} />
`,
context: {
label: text('Label', 'TTL'),
value: text('Value', '30m'),
helperText: text('helperText', 'A short description'),
alwaysRender: boolean('Always render?', false),
},
}),
Expand All @@ -26,11 +27,12 @@ storiesOf('InfoTableRow/', module)
() => ({
template: hbs`
<h5 class="title is-5">Info Table Row</h5>
<InfoTableRow @value={{value}} @label={{label}} @alwaysRender={{alwaysRender}} />
<InfoTableRow @value={{value}} @label={{label}} @helperText={{helperText}} @alwaysRender={{alwaysRender}} />
`,
context: {
label: 'Local mount?',
value: boolean('Value', true),
helperText: text('helperText', 'A short description'),
alwaysRender: boolean('Always render?', true),
},
}),
Expand Down
8 changes: 8 additions & 0 deletions ui/lib/replication/addon/components/replication-primary-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import Component from '@ember/component';

export default Component.extend({
tagName: '',
title: null,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't see anything about default value best practices online from a quick search, but I'm wondering about whether we have any best practices around when to use a null default value as opposed a default value with the correct type (so here it would be an empty string). Any thoughts around that?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, that's a great question! so far i've followed the pattern i've seen in our app with using null as an empty value. i think we do that partially to prevent any unintended side effects that could come from calling stuff on an empty string. i don't feel strongly either way though -- would you find it helpful if we moved to setting default values with the correct type?

description: null,
metric: null,
});
5 changes: 5 additions & 0 deletions ui/lib/replication/addon/components/replication-table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import Component from '@ember/component';

export default Component.extend({
data: null,
});
13 changes: 13 additions & 0 deletions ui/lib/replication/addon/templates/components/replication-primary-card.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<div class="selectable-card is-rounded {{dasherize title}}">
<code class="card-title title is-5">{{title}}</code>
<div>
<span class="helper-text is-label has-text-grey">
{{description}}
</span>
<h3 class="title is-3">
{{!-- TODO make this dynamic --}}
<Icon @glyph="check-circle-outline" class="has-text-success" />
{{metric}}
</h3>
</div>
</div>
50 changes: 38 additions & 12 deletions ui/lib/replication/addon/templates/components/replication-summary.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,17 +342,43 @@
{{#if (eq replicationAttrs.mode 'initializing')}}
The cluster is initializing replication. This may take some time.
{{else}}
{{info-table-row label="Mode" value=replicationAttrs.mode}}
{{info-table-row label="Replication set" value=replicationAttrs.clusterId}}
{{info-table-row label="Secondary ID" value=replicationAttrs.secondaryId}}
{{info-table-row label="State" value=replicationAttrs.state}}
{{info-table-row label="Primary cluster address" value=replicationAttrs.primaryClusterAddr}}
{{info-table-row label="Replication state" value=replicationAttrs.replicationState}}
{{info-table-row label="Last WAL entry" value=replicationAttrs.lastWAL}}
{{info-table-row label="Last Remote WAL entry" value=replicationAttrs.lastRemoteWAL}}
{{info-table-row label="Merkle root index" value=replicationAttrs.merkleRoot}}
{{#if replicationAttrs.syncProgress}}
{{info-table-row label="Sync progress" value=(concat replicationAttrs.syncProgress.progress '/' replicationAttrs.syncProgress.total)}}
{{/if}}
<div class="replication">
<div class="selectable-card-container">
{{!-- TODO: there are 2 attributes for both state and lastWAL. which one do i use? --}}
<ReplicationPrimaryCard
@title='State'
@description='Updated every ten seconds.'
@metric={{replicationAttrs.state}} />
<ReplicationPrimaryCard
@title='Last WAL entry'
@description='Index of last Write Ahead Logs entry written on local storage.'
@metric={{replicationAttrs.lastWAL}}
/>

<div class="selectable-card is-rounded secondaries">
<div class="level">
<code class="card-title title is-5">Known Secondaries</code>
<ToolbarLink @params={{array "vault.cluster.settings.auth.configure" model.id}} @data-test-manage-link="true">
Manage
</ToolbarLink>
</div>
<div>
<ReplicationTable />
{{!-- TODO: make sure this works --}}
{{!-- {{info-table-row label="Secondary ID" value=replicationAttrs.secondaryId}} --}}
</div>
</div>
</div>
<div>
noelledaley marked this conversation as resolved.
Show resolved Hide resolved
{{info-table-row label="Merkle root index" helperText="A snapshot in time of the merkle tree's root hash. Changes on every update
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These might be worth moving into an array that we loop through and display each info-table-row

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah yes, i replaced this with the ReplicationTableRows component which will abstract it away. good thinking! in a follow up PR i think we'll just pass the model directly into the component so we don't have to iterate over a list nor pass in a large amount of attributes manually.

to storage." value=replicationAttrs.merkleRoot}}
{{info-table-row label="Mode" value=replicationAttrs.mode}}
{{info-table-row label="Replication set" helperText="The ID for the group of clusters communicating for this replication mode" value=replicationAttrs.clusterId}}
</div>
{{!-- TODO: move this to the right spot --}}
{{#if replicationAttrs.syncProgress}}
{{info-table-row label="Sync progress" value=(concat replicationAttrs.syncProgress.progress '/' replicationAttrs.syncProgress.total)}}
{{/if}}
</div>
{{/if}}
{{/if}}
26 changes: 26 additions & 0 deletions ui/lib/replication/addon/templates/components/replication-table.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<div class="vlt-table">
noelledaley marked this conversation as resolved.
Show resolved Hide resolved
<table class="is-fullwidth">
<caption class="is-collapsed">Known Secondaries</caption>
<thead class="has-text-weight-semibold">
<tr>
<th scope="col">Secondary ID</th>
<th scope="col">URL</th>
<th scope="col">Connected?</th>
</tr>
</thead>
<tbody>
{{!-- TODO: populate rows with real data --}}
<tr>
<th scope="row">
<code>secondary_id_1</code>
</th>
<td>
<code class="is-word-break">http://localhost:4200/ui/vault/replication/dr</code>
</td>
<td>
<code>Yes</code>
</td>
</tr>
</tbody>
</table>
</div>