ui: change invalid lease to expired lease on problem ranges page

When browsing the problem ranges page and invalid leases appears customers
regularly are concerned with this status as they interpret it as something
with the cluster is wrong which is often not the case. In order to imrpove this,
the invalid lease section has been changed to expired lease and there is a
description added below which explains that this status is often not a cause
for concern.

Release note (ui change): change invalid lease to expired lease on problem ranges page

pkg/ui/workspaces/db-console/src/views/reports/containers/problemRanges/connectionsTable.tsx

@@ -48,7 +48,7 @@ const connectionTableColumns: ConnectionTableColumn[] = [
     extract: problem => problem.no_raft_leader_range_ids.length,
   },
   {
-    title: "Invalid Lease",
+    title: "Expired Lease",
     extract: problem => problem.no_lease_range_ids.length,
   },
   {

pkg/ui/workspaces/db-console/src/views/reports/containers/problemRanges/index.tsx

@@ -46,6 +46,7 @@ function ProblemRangeList(props: {
   name: string;
   problems: NodeProblems$Properties[];
   extract: (p: NodeProblems$Properties) => Long[];
+  description?: string;
 }) {
   const ids = _.chain(props.problems)
     .filter(problem => _.isEmpty(problem.error_message))
@@ -61,6 +62,9 @@ function ProblemRangeList(props: {
   return (
     <div>
       <h2 className="base-heading">{props.name}</h2>
+      {props.description && (
+        <div className="problems-description">{props.description}</div>
+      )}
       <div className="problems-list">
         {_.map(ids, id => {
           return (
@@ -179,9 +183,10 @@ export class ProblemRanges extends React.Component<ProblemRangesProps, {}> {
           extract={problem => problem.no_raft_leader_range_ids}
         />
         <ProblemRangeList
-          name="Invalid Lease"
+          name="Expired Lease"
           problems={problems}
           extract={problem => problem.no_lease_range_ids}
+          description="Note that having expired leases is unlikely to be a problem. They can occur after node restarts and will clear on its own in up to 24 hours."
         />
         <ProblemRangeList
           name="Raft Leader but not Lease Holder"

pkg/ui/workspaces/db-console/styl/pages/reports.styl

@@ -47,6 +47,9 @@ $reports-table
     &--short
       max-width 1px
 
+.problems-description
+  padding-bottom 1rem
+
 .problems-list
   width 100%
   background-color white