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 5 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/info-table-row.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@
textarea {
min-height: 35px;
}

.helper-text {
font-weight: normal;
}
}

.hs-icon {
Expand Down
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
3 changes: 3 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 @@ -97,5 +97,8 @@
@import './components/vlt-radio';
@import './components/vlt-table';

// import styles from ember engines
@import './lib/replication/addon/styles/components/replication-summary';

// bulma-free-zone
@import './components/hs-icon';
4 changes: 3 additions & 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,11 +11,12 @@ import layout from '../templates/components/info-table-row';
*
* @example
* ```js
* <InfoTableRow @value={{5}} @label="TTL" />
* <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.
* @param label=null {string} - The display name for the value.
* @param helperText=null {string} - Text to describe the value displayed beneath the label.
* @param alwaysRender=false {Boolean} - 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.
*
*/
Expand All @@ -27,6 +28,7 @@ export default Component.extend({

alwaysRender: false,
label: null,
helperText: null,
value: null,

valueIsBoolean: computed('value', function() {
Expand Down
5 changes: 5 additions & 0 deletions ui/lib/core/addon/templates/components/info-table-row.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
{{#if (or alwaysRender value)}}
<div class="column is-one-quarter">
<span class="is-label has-text-grey-dark" data-test-row-label="{{label}}">{{label}}</span>
{{#if helperText}}
<div>
<span class="is-label helper-text has-text-grey">{{helperText}}</span>
</div>
{{/if}}
</div>
<div class="column is-flex">
{{#if (has-block)}}
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
25 changes: 25 additions & 0 deletions ui/lib/replication/addon/styles/components/replication-summary.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.replication {
.selectable-card-container {
grid-template-columns: 1fr 2fr;
grid-template-rows: initial;
margin: 2rem 0 2rem 0;
}

.card-container {
display: grid;
grid-gap: 2rem;
}

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

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

.helper-text {
font-weight: normal;
}
}
69 changes: 57 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,62 @@
{{#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">
<div class="card-container">
<div class="selectable-card is-rounded">
<code class="card-title title is-5">state</code>
<div>
<span class="helper-text is-label has-text-grey">
Updated every ten seconds
</span>
<h3 class="title is-3">
{{!-- TODO make this dynamic --}}
<Icon @glyph="check-circle-outline" class="has-text-success" />
{{replicationAttrs.state}}
</h3>
{{info-table-row label="Replication state" value=replicationAttrs.replicationState}}
</div>
</div>
<div class="selectable-card is-rounded">
<code class="card-title title is-5">Last WAL entry</code>
<div>
<span class="helper-text is-label has-text-grey">
Index of last Write Ahead Logs entry written on local storage.
</span>
<h3 class="title is-3">{{replicationAttrs.lastWAL}}</h3>
{{!-- TODO: do I need this? How is this different from lastWAL above? --}}
{{!-- {{info-table-row label="Last Remote WAL entry" value=replicationAttrs.lastRemoteWAL}} --}}
</div>
</div>
</div>

<div class="selectable-card is-rounded">
<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>
{{info-table-row label="Secondary ID" value="URL"}}
{{!-- 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}}