diff --git a/app-src/src/components/DashboardComponent.js b/app-src/src/components/DashboardComponent.js
index 871e47ad..9ccb77b2 100644
--- a/app-src/src/components/DashboardComponent.js
+++ b/app-src/src/components/DashboardComponent.js
@@ -46,7 +46,7 @@ function DashboardComponent() {
{node['Tasks'][service['ID']] && (
- {node['Tasks'][service['ID']].map((task) => (
+ {node['Tasks'][service['ID']].map((task, id) => (
-
diff --git a/app-src/src/components/DashboardVerticalComponent.js b/app-src/src/components/DashboardVerticalComponent.js
index 6f266ef9..36cda155 100644
--- a/app-src/src/components/DashboardVerticalComponent.js
+++ b/app-src/src/components/DashboardVerticalComponent.js
@@ -44,7 +44,7 @@ function DashboardVerticalComponent() {
{service['Tasks'][node['ID']] && (
- {service['Tasks'][node['ID']].map((task) => (
+ {service['Tasks'][node['ID']].map((task, id) => (
-
diff --git a/app-src/src/components/ServiceStatusBadge.js b/app-src/src/components/ServiceStatusBadge.js
index 8f596850..795bc827 100644
--- 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 (
+
+ {createdAt && (
+
+ Created at: {toDefaultDateTimeString(new Date(createdAt))}
+
+
+ )}
+ {updatedAt && (
+
+ Updated at: {toDefaultDateTimeString(new Date(updatedAt))}
+
+
+ )}
+ {serviceError && {serviceError}}
+
+ }
+ >
+
+ {serviceState}
+
+
+ )
+ }
return (
{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
index 13f17b09..f6db4047 100644
--- 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) => (
{toDefaultDateTimeString(new Date(task['Timestamp']))} |
-
+
|
{task['DesiredState']} |
| | |