Ui/dr primary/initial page setup (#8671)

* add helperText param to InfoTableRow

* initial page setup

* format card with padding and correct number of rows

* style card titles with margin

* move styles inside replication class; add todos

* move replication-summary styles into core app so hot reloading works

* prevent known secondaries card from being cut off on the right hand side

* make cards have the correct column span

* make code elements inside tables black

* WIP - start VltTable component

* simplify css

* renamed VltTable to ReplicationTable and use divs instead of table elements

* fix position of known secondaries

* use table element for secondaries card

* add todo

* move replication components to replication engine

* Revert "move replication components to replication engine"

This reverts commit 2228b83.

* move ReplicationPrimaryCards to components

* remove hover box shadow since cards are not selectable yet

* only apply padding to replication selectable-cards

* specify replication vlt-table in classname

* move replication toggle and toggle into core addon

* remove extra toolbar border

* remove duplicate css

* move ReplicationTableRows to core addon and use them on DR primary page

* clean up todos

* add jsdoc comments

* rename ReplicationTable to KnownSecondaries

* update replicaiton table api to accept flexible data

* rename replicationAttrs to data

* move replication components to core addon

ui/app/styles/components/replication-dashboard.scss

@@ -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;

ui/app/styles/components/replication-primary-card.scss

@@ -0,0 +1,26 @@
+.replication {
+  .selectable-card {
+    display: initial;
+    line-height: normal;
+    padding: $spacing-l;
+
+    &:hover {
+      box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
+    }
+
+    .card-title {
+      margin-bottom: 2rem;
+    }
+
+    // TODO: move this when it is its own component
+    &.secondaries {
+      grid-column: 2/3;
+      grid-row: 1/3;
+
+      @include until($mobile) {
+        grid-column: 1/1;
+        grid-row: 1/1;
+      }
+    }
+  }
+}

ui/app/styles/components/replication-summary.scss

@@ -0,0 +1,18 @@
+.replication {
+  .selectable-card-container {
+    margin: 2rem 0 2rem 0;
+    grid-template-columns: 1fr 2fr;
+
+    @include until($mobile) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .toolbar {
+    border-top: 0px;
+  }
+
+  .helper-text {
+    font-weight: normal;
+  }
+}

ui/app/styles/components/vlt-table.scss

@@ -34,4 +34,9 @@
   td.no-padding {
     padding: 0;
   }
+
+  code {
+    font-size: $size-7;
+    color: $black;
+  }
 }

ui/app/styles/core.scss

@@ -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';

ui/app/templates/components/replication-page/replication-dashboard/replication-table-rows.hbs

@@ -9,4 +9,4 @@
 {{#if syncProgress}}
 {{!-- ARG TODO: need to test this --}}
   {{info-table-row label="Sync progress" value=(concat syncProgress.progress '/' syncProgress.total)}}
-{{/if}}
+{{/if}}

ui/lib/core/addon/components/info-table-row.js

@@ -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.

ui/lib/core/addon/components/replication-dashboard.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import layout from '../templates/components/replication-dashboard';
+
+export default Component.extend({
+  layout,
+});

ui/lib/core/addon/components/replication-page.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import layout from '../templates/components/replication-page';
+
+export default Component.extend({
+  layout,
+});

ui/lib/core/addon/components/replication-table-rows.js

@@ -0,0 +1,28 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import layout from '../templates/components/replication-table-rows';
+
+export default Component.extend({
+  layout,
+  data: null,
+  clusterDetails: computed('data', function() {
+    const { data } = this.data;
+    return data.dr || data;
+  }),
+  mode: computed('clusterDetails', function() {
+    const { clusterDetails } = this;
+    return clusterDetails.mode || 'unknown';
+  }),
+  merkleRoot: computed('clusterDetails', function() {
+    const { clusterDetails } = this;
+    return clusterDetails.merkleRoot || 'unknown';
+  }),
+  clusterId: computed('clusterDetails', function() {
+    const { clusterDetails } = this;
+    return clusterDetails.clusterId || 'unknown';
+  }),
+  syncProgress: computed('clusterDetails', function() {
+    const { clusterDetails } = this;
+    return clusterDetails.syncProgress || false;
+  }),
+});

ui/lib/core/addon/components/replication-toggle.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../templates/components/replication-toggle';
+
+export default Component.extend({
+  layout,
+  checkedValue: false,
+});

ui/app/components/toggle.js → ui/lib/core/addon/components/toggle.js

@@ -17,8 +17,10 @@
 
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import layout from '../templates/components/toggle';
 
 export default Component.extend({
+  layout,
   tagName: '',
   checked: false,
   disabled: false,

ui/lib/core/addon/templates/components/replication-card.hbs

@@ -0,0 +1,13 @@
+<div class="selectable-card is-rounded card-container">
+  <h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
+  <div class="grid-item-state">
+    <code class="has-text-black">{{property_1}}</code>
+    <p class="has-text-grey is-size-8">{{description_1}}</p>
+  </div>
+  <div class="grid-item-wal">
+    <code class="has-text-black">{{property_2}}</code>
+    <p class="has-text-grey is-size-8">{{description_2}}</p>
+  </div>
+  <h2 class="title-number grid-item-stream">{{metric_1}}</h2>
+  <h2 class="title-number is-5 grid-item-status">{{metric_2}}</h2>
+</div>

ui/lib/core/addon/templates/components/replication-dashboard.hbs

@@ -0,0 +1,24 @@
+<div class="replication-dashboard box is-sideless is-fullwidth is-marginless">
+  <h2 class="has-text-weight-semibold is-size-4 has-margin-bottom">Primary Cluster</h2>
+  <p class="has-text-grey is-size-8">If you set a primary_cluster_addr when enabling replication, it will appear here.</p>
+  {{#if model.dr.primaryClusterAddr}}
+    <code>{{model.dr.primaryClusterAddr}}</code>
+  {{else}}
+    <code>no known primary cluster address</code>
+  {{/if}}
+
+  <div class="selectable-card-container has-large-margin-top">
+    {{yield (hash 
+      card=(
+        component componentToRender
+      )
+    )}}
+  </div>
+
+  {{yield (hash 
+    rows=(
+      component 'replication-page/replication-dashboard/replication-table-rows'
+    )
+  )}}
+
+</div>

ui/lib/core/addon/templates/components/replication-header.hbs

@@ -0,0 +1,66 @@
+{{!-- DR Secondary has a different Nav Header with access only to the Status menu --}}
+{{!-- ARG TODO all links are hard coded as well as titles right now, they will need to by dynamic --}}
+{{#if (and (eq model.rm.mode 'dr') (eq model.dr.mode 'secondary') )}}
+  <NavHeader as |Nav|>
+    <Nav.home>
+      <HomeLink @class="navbar-item splash-page-logo has-text-white">
+        <LogoEdition />
+      </HomeLink>
+    </Nav.home>
+    <Nav.items>
+      <div class="navbar-item status-indicator-button" data-status="{{if model.unsealed "good" "bad"}}">
+        <StatusMenu @label="Status" @onLinkClick={{action Nav.closeDrawer}} />
+      </div>
+    </Nav.items>
+  </NavHeader>
+{{/if}}
+
+<PageHeader as |p|>
+  <p.top>
+    {{#key-value-header
+      baseKey=baseKey
+      path="vault.cluster.replication-dr-promote"
+      root=backendCrumb
+    }}
+      <li>
+        <span class="sep">
+          /
+        </span>
+        {{#link-to "vault.cluster.replication-dr-promote"}}
+          Disaster Recovery
+        {{/link-to}}
+      </li>
+    {{/key-value-header}}
+  </p.top>
+  <p.levelLeft>
+    <h1 class="title is-3">
+      Details
+      <span class="tag">
+        {{model.dr.mode}}
+      </span>
+      <span class="tag">
+        {{model.dr.clusterIdDisplay}}
+      </span>
+    </h1>
+  </p.levelLeft>
+</PageHeader>
+
+{{#if showTabs}}
+  <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
+    <nav class="tabs">
+      <ul>
+        {{!-- TODO should map over array of options with link and title --}}
+        {{#link-to
+          "vault.cluster.replication-dr-promote"
+          tagName="li"
+          activeClass="is-active"
+          current-when=""
+        }}
+          {{#link-to "vault.cluster.replication-dr-promote"}}
+            Details
+          {{/link-to}}
+        {{/link-to}}
+      </ul>
+    </nav>
+  </div>
+{{/if}}

ui/lib/core/addon/templates/components/replication-table-rows.hbs

@@ -0,0 +1,14 @@
+{{#unless data}}
+  <EmptyState />
+{{else}}
+  <div class="has-large-margin-top">
+    {{info-table-row label="Merkle root index" helperText="A snapshot in time of the merkle tree's root hash. Changes on every update to storage." value=merkleRoot}}
+    {{info-table-row label="Mode" value=mode}}
+    {{info-table-row label="Replication set" helperText="The ID for the group of clusters communicating for this replication mode" value=clusterId}}
+  </div>
+
+  {{#if syncProgress}}
+  {{!-- ARG TODO: need to test this --}}
+    {{info-table-row label="Sync progress" value=(concat syncProgress.progress '/' syncProgress.total)}}
+  {{/if}}
+{{/unless}}

ui/lib/core/addon/templates/components/replication-toggle.hbs

@@ -0,0 +1,5 @@
+<Toolbar>
+  <ToolbarActions>
+    <Toggle @tagName="name" @checked={{checkedValue}} @onChange={{action (mut checkedValue)}}> Auto-refresh {{if checkedValue 'on' 'off'}}</Toggle>
+  </ToolbarActions>
+</Toolbar>

ui/app/templates/components/toggle.hbs → ui/lib/core/addon/templates/components/toggle.hbs

@@ -8,4 +8,4 @@
   disabled=disabled
   data-test-toggle-input=name
 }}
-<label data-test-toggle-label={{name}} for={{safeId}}>{{yield}}</label>
+<label data-test-toggle-label={{name}} for={{safeId}}>{{yield}}</label>

ui/lib/core/app/components/replication-dashboard.js

@@ -0,0 +1 @@
+export { default } from 'core/components/replication-dashboard';

ui/lib/core/app/components/replication-page.js

@@ -0,0 +1 @@
+export { default } from 'core/components/replication-page';

ui/lib/core/app/components/replication-table-rows.js

@@ -0,0 +1 @@
+export { default } from 'core/components/replication-table-rows';

ui/lib/core/app/components/replication-toggle.js

@@ -0,0 +1 @@
+export { default } from 'core/components/replication-toggle';

ui/lib/core/app/components/toggle.js

@@ -0,0 +1 @@
+export { default } from 'core/components/toggle';

ui/lib/core/stories/info-table-row.md

@@ -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)
 
 ---

ui/lib/core/stories/info-table-row.stories.js

@@ -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),
       },
     }),
@@ -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),
       },
     }),

ui/lib/replication/addon/components/known-secondaries-table.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  data: null,
+});

ui/lib/replication/addon/components/replication-primary-card.js

@@ -0,0 +1,25 @@
+import Component from '@ember/component';
+
+/**
+ * @module ReplicationPrimaryCard
+ * ReplicationPrimaryCard components
+ *
+ * @example
+ * ```js
+ * <ReplicationPrimaryCard
+    @title='Last WAL entry'
+    @description='Index of last Write Ahead Logs entry written on local storage.'
+    @metric={{replicationAttrs.lastWAL}}
+    />
+ * ```
+ * @param {string} [title=null] - The title to be displayed on the top left corner of the card.
+ * @param {string} [description=null] - Helper text to describe the metric on the card.
+ * @param {string} metric=null - The main metric to highlight on the card.
+ */
+
+export default Component.extend({
+  tagName: '',
+  title: null,
+  description: null,
+  metric: null,
+});