ui: Miscellaneous Lock Session fixes (#10225)

.changelog/10225.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Reflect the change of Session API response shape for Checks in post 1.7 Consul 
+```

ui/packages/consul-ui/app/components/consul/lock-session/form/index.hbs

@@ -16,30 +16,32 @@
           <a href="{{env 'CONSUL_DOCS_URL'}}/internals/sessions.html#session-design" rel="help noopener noreferrer" target="_blank">Lock Session</a>
         </h2>
         <dl>
+{{#if api.data.Name}}
           <dt>Name</dt>
           <dd>{{api.data.Name}}</dd>
-          <dt>Agent</dt>
+{{/if}}
+          <dt>ID</dt>
+          <dd>{{api.data.ID}}</dd>
+          <dt>Node</dt>
           <dd>
               <a href={{href-to 'dc.nodes.show' api.data.Node}}>{{api.data.Node}}</a>
           </dd>
-          <dt>ID</dt>
-          <dd>{{api.data.ID}}</dd>
-          <dt>Behavior</dt>
-          <dd>{{api.data.Behavior}}</dd>
-{{#if form.data.Delay }}
           <dt>Delay</dt>
           <dd>{{duration-from api.data.LockDelay}}</dd>
-{{/if}}
-{{#if form.data.TTL }}
           <dt>TTL</dt>
-          <dd>{{api.data.TTL}}</dd>
-{{/if}}
-{{#if (gt api.data.Checks.length 0)}}
+          <dd>{{or api.data.TTL '-'}}</dd>
+          <dt>Behavior</dt>
+          <dd>{{api.data.Behavior}}</dd>
+{{#let (union api.data.NodeChecks api.data.ServiceChecks) as |checks|}}
           <dt>Health Checks</dt>
           <dd>
-              {{ join ', ' api.data.Checks}}
+  {{#if (gt checks.length 0)}}
+              {{ join ', ' checks}}
+  {{else}}
+              -
+  {{/if}}
           </dd>
-{{/if}}
+{{/let}}
         </dl>
 {{#if (can 'delete session' item=api.data)}}
         <ConfirmationDialog @message="Are you sure you want to invalidate this session?">

ui/packages/consul-ui/app/components/consul/lock-session/list/index.hbs

@@ -17,27 +17,26 @@
     {{#if item.Name}}
     <dl>
       <dt>
+        ID
+      </dt>
+      <dd>
         <CopyButton
           @value={{item.ID}}
           @name="ID"
         />
-      </dt>
-      <dd>{{item.ID}}</dd>
+        {{item.ID}}
+      </dd>
     </dl>
     {{/if}}
     <dl class="lock-delay">
-      <dt>
-        <Tooltip>
-          Delay
-        </Tooltip>
+      <dt {{tooltip}}>
+        Delay
       </dt>
       <dd data-test-session-delay>{{duration-from item.LockDelay}}</dd>
     </dl>
     <dl class="ttl">
-      <dt>
-        <Tooltip>
-          TTL
-        </Tooltip>
+      <dt {{tooltip}}>
+        TTL
       </dt>
     {{#if (eq item.TTL "")}}
       <dd data-test-session-ttl={{item.TTL}}>-</dd>
@@ -46,25 +45,27 @@
     {{/if}}
     </dl>
     <dl class="behavior">
-      <dt>
-        <Tooltip>
-          Behavior
-        </Tooltip>
+      <dt {{tooltip}}>
+        Behavior
       </dt>
       <dd>{{item.Behavior}}</dd>
     </dl>
+{{#let (union item.NodeChecks item.ServiceChecks) as |checks|}}
     <dl class="checks">
-      <dt>
-        <Tooltip>
-          Checks
-        </Tooltip>
+      <dt {{tooltip}}>
+        Checks
       </dt>
       <dd>
-      {{#each item.Checks as |item|}}
+{{#if (gt checks.length 0)}}
+      {{#each checks as |item|}}
         <span>{{item}}</span>
       {{/each}}
+{{else}}
+        -
+{{/if}}
       </dd>
     </dl>
+{{/let}}
   </BlockSlot>
 {{#if (can "delete sessions")}}
   <BlockSlot @name="actions">

ui/packages/consul-ui/app/components/consul/lock-session/list/index.scss

@@ -0,0 +1,11 @@
+.consul-lock-session-list .checks dd {
+  display: inline-flex;
+  flex-wrap: wrap;
+  padding-left: 0px;
+}
+.consul-lock-session-list .checks dd > *:not(:last-child)::after {
+  content: ',';
+  margin-right: 0.3em;
+  display: inline;
+}
+

ui/packages/consul-ui/app/models/session.js

@@ -1,4 +1,5 @@
 import Model, { attr } from '@ember-data/model';
+import { nullValue } from 'consul-ui/decorators/replace';
 
 export const PRIMARY_KEY = 'uid';
 export const SLUG_KEY = 'ID';
@@ -18,6 +19,8 @@ export default class Session extends Model {
   @attr('number') CreateIndex;
   @attr('number') ModifyIndex;
 
-  @attr({ defaultValue: () => [] }) Checks;
+  @nullValue([]) @attr({ defaultValue: () => [] }) NodeChecks;
+  @nullValue([]) @attr({ defaultValue: () => [] }) ServiceChecks;
+
   @attr({ defaultValue: () => [] }) Resources; // []
 }

ui/packages/consul-ui/app/styles/components.scss

@@ -68,6 +68,7 @@
 @import 'consul-ui/components/consul/external-source';
 @import 'consul-ui/components/consul/kind';
 @import 'consul-ui/components/consul/intention';
+@import 'consul-ui/components/consul/lock-session/list';
 @import 'consul-ui/components/consul/lock-session/form';
 @import 'consul-ui/components/consul/auth-method';
 

ui/packages/consul-ui/app/styles/components/composite-row.scss

@@ -18,6 +18,7 @@
 }
 // TODO: This hides the iconless dt's in the below lists as they don't have
 // tooltips the todo would be to wrap these texts in spans
+.consul-lock-session-list ul > li:not(:first-child) dl:not([class]) dt,
 .consul-nspace-list > ul > li:not(:first-child) dt,
 .consul-token-list > ul > li:not(:first-child) dt,
 .consul-policy-list > ul li:not(:first-child) dl:not(.datacenter) dt,

ui/packages/consul-ui/mock-api/v1/session/info/_

@@ -7,7 +7,8 @@
             typeof http.body.Namespace !== 'undefined' ? http.body.Namespace : 'default'
         }",
         "Node":"node-1",
-        "Checks":["serfHealth"],
+        "NodeChecks":["serfHealth"],
+        "ServiceChecks": ["${fake.hacker.noun()}Health"],
         "LockDelay":15000000000,
         "Behavior":"${fake.helpers.randomize(['release', 'delete'])}",
         "TTL":"",

ui/packages/consul-ui/mock-api/v1/session/node/_

@@ -19,7 +19,8 @@ ${typeof location.search.ns !== 'undefined' ? `
                 "Namespace": "${location.search.ns}",
 ` : ``}
                 "Node":"${location.pathname.get(3)}",
-                "Checks":["serfHealth"],
+                "NodeChecks":["serfHealth"],
+                "ServiceChecks": ["${fake.hacker.noun()}Health"],
                 "LockDelay":15000000000,
                 "Behavior":"${fake.helpers.randomize(['release', 'delete'])}",
                 "TTL":"",