feat: Optional Tooltip on ServiceStatusBadges

Tooltip can display service creation and update timestamps as well as error message
StatensPensjonskasse · May 7, 2024 · e7fe816 · e7fe816
1 parent 3990dd0
commit e7fe816
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 6 deletions.
diff --git a/app-src/src/components/DashboardComponent.js b/app-src/src/components/DashboardComponent.js
@@ -46,7 +46,7 @@ function DashboardComponent() {
       <td className="align-middle" key={'td' + node['ID'] + service['ID']}>
         {node['Tasks'][service['ID']] && (
           <ul>
-            {node['Tasks'][service['ID']].map((task) => (
+            {node['Tasks'][service['ID']].map((task, id) => (
               <li
                 key={
                   'li' +
@@ -57,7 +57,11 @@ function DashboardComponent() {
                 }
               >
                 <ServiceStatusBadge
+                  id={id}
                   serviceState={task['Status']['State']}
+                  createdAt={task['CreatedAt']}
+                  updatedAt={task['UpdatedAt']}
+                  serviceError={task['Status']['Err']}
                   hiddenStates={dashboardSettings.hiddenServiceStates}
                 />
               </li>

diff --git a/app-src/src/components/DashboardVerticalComponent.js b/app-src/src/components/DashboardVerticalComponent.js
@@ -44,7 +44,7 @@ function DashboardVerticalComponent() {
       <td className="align-middle" key={'td' + node['ID'] + service['ID']}>
         {service['Tasks'][node['ID']] && (
           <ul>
-            {service['Tasks'][node['ID']].map((task) => (
+            {service['Tasks'][node['ID']].map((task, id) => (
               <li
                 key={
                   'li' +
@@ -55,7 +55,11 @@ function DashboardVerticalComponent() {
                 }
               >
                 <ServiceStatusBadge
+                  id={id}
                   serviceState={task['Status']['State']}
+                  createdAt={task['CreatedAt']}
+                  updatedAt={task['UpdatedAt']}
+                  serviceError={task['Status']['Err']}
                   hiddenStates={dashboardSettings.hiddenServiceStates}
                 />
               </li>

diff --git a/app-src/src/components/ServiceStatusBadge.js b/app-src/src/components/ServiceStatusBadge.js
@@ -1,11 +1,48 @@
-import { Badge } from 'react-bootstrap'
+import { Badge, OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { getStyleClassForState } from '../Helper'
 import PropTypes from 'prop-types'
+import { toDefaultDateTimeString } from '../common/DefaultDateTimeFormat'
 
-const ServiceStatusBadge = ({ serviceState, hiddenStates }) => {
+const ServiceStatusBadge = ({
+  id,
+  serviceState,
+  createdAt,
+  updatedAt,
+  serviceError,
+  hiddenStates,
+}) => {
   if (hiddenStates.includes(serviceState)) {
     return
   }
+  if (createdAt || updatedAt || serviceError) {
+    return (
+      <OverlayTrigger
+        placement="top"
+        delay={100}
+        overlay={
+          <Tooltip id={`tooltip-task-status-sate-${id}`}>
+            {createdAt && (
+              <span>
+                Created at: {toDefaultDateTimeString(new Date(createdAt))}
+                <br />
+              </span>
+            )}
+            {updatedAt && (
+              <span>
+                Updated at: {toDefaultDateTimeString(new Date(updatedAt))}
+                <br />
+              </span>
+            )}
+            {serviceError && <span>{serviceError}</span>}
+          </Tooltip>
+        }
+      >
+        <Badge bg={getStyleClassForState(serviceState)} className="w-100">
+          {serviceState}
+        </Badge>
+      </OverlayTrigger>
+    )
+  }
   return (
     <Badge bg={getStyleClassForState(serviceState)} className="w-100">
       {serviceState}
@@ -14,7 +51,11 @@ const ServiceStatusBadge = ({ serviceState, hiddenStates }) => {
 }
 
 ServiceStatusBadge.propTypes = {
+  id: PropTypes.number.isRequired,
   serviceState: PropTypes.string.isRequired,
+  createdAt: PropTypes.string,
+  updatedAt: PropTypes.string,
+  serviceError: PropTypes.string,
   hiddenStates: PropTypes.arrayOf(PropTypes.string),
 }
 

diff --git a/app-src/src/components/TasksComponent.js b/app-src/src/components/TasksComponent.js
@@ -20,14 +20,14 @@ function TasksComponent() {
   let rows
 
   const tasks = useAtomValue(tasksAtomNew)
-  rows = tasks.map((task) => (
+  rows = tasks.map((task, id) => (
     <tr
       key={'tasksTable-' + task['ID']}
       className={task['State'] === 'failed' ? 'table-danger' : null}
     >
       <td>{toDefaultDateTimeString(new Date(task['Timestamp']))}</td>
       <td>
-        <ServiceStatusBadge serviceState={task['State']} />
+        <ServiceStatusBadge id={id} serviceState={task['State']} />
       </td>
       <td>{task['DesiredState']}</td>
       <td