diff --git a/awx/ui_next/src/components/StatusLabel/StatusLabel.jsx b/awx/ui_next/src/components/StatusLabel/StatusLabel.jsx
new file mode 100644
index 0000000000..95ba558cea
--- /dev/null
+++ b/awx/ui_next/src/components/StatusLabel/StatusLabel.jsx
@@ -0,0 +1,67 @@
+import 'styled-components/macro';
+import React from 'react';
+import { oneOf } from 'prop-types';
+import { Label } from '@patternfly/react-core';
+import {
+ CheckCircleIcon,
+ ExclamationCircleIcon,
+ SyncAltIcon,
+ ExclamationTriangleIcon,
+ ClockIcon,
+} from '@patternfly/react-icons';
+import styled, { keyframes } from 'styled-components';
+
+const Spin = keyframes`
+ from {
+ transform: rotate(0);
+ }
+ to {
+ transform: rotate(1turn);
+ }
+`;
+
+const RunningIcon = styled(SyncAltIcon)`
+ animation: ${Spin} 1.75s linear infinite;
+`;
+
+const colors = {
+ success: 'green',
+ failed: 'red',
+ error: 'red',
+ running: 'blue',
+ pending: 'blue',
+ waiting: 'grey',
+ canceled: 'orange',
+};
+const icons = {
+ success: CheckCircleIcon,
+ failed: ExclamationCircleIcon,
+ error: ExclamationCircleIcon,
+ running: RunningIcon,
+ pending: ClockIcon,
+ waiting: ClockIcon,
+ canceled: ExclamationTriangleIcon,
+};
+
+export default function StatusLabel({ status }) {
+ const label = status.charAt(0).toUpperCase() + status.slice(1);
+ const color = colors[status] || 'grey';
+ const Icon = icons[status];
+
+ return (
+ : null}>
+ {label}
+
+ );
+}
+
+StatusLabel.propTypes = {
+ status: oneOf([
+ 'success',
+ 'failed',
+ 'error',
+ 'running',
+ 'pending',
+ 'canceled',
+ ]).isRequired,
+};
diff --git a/awx/ui_next/src/components/StatusLabel/index.js b/awx/ui_next/src/components/StatusLabel/index.js
new file mode 100644
index 0000000000..b9dfc8cd99
--- /dev/null
+++ b/awx/ui_next/src/components/StatusLabel/index.js
@@ -0,0 +1 @@
+export { default } from './StatusLabel';
diff --git a/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.jsx b/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.jsx
index f5bf5f8be4..102e4b9777 100644
--- a/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.jsx
+++ b/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.jsx
@@ -1,3 +1,4 @@
+import 'styled-components/macro';
import React from 'react';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
@@ -14,6 +15,7 @@ import {
} from '@patternfly/react-core';
import { PencilAltIcon, BellIcon } from '@patternfly/react-icons';
import DataListCell from '../../../components/DataListCell';
+import StatusLabel from '../../../components/StatusLabel';
import { NOTIFICATION_TYPES } from '../constants';
const DataListAction = styled(_DataListAction)`
@@ -33,6 +35,8 @@ function NotificationTemplateListItem({
const sendTestNotification = () => {};
const labelId = `template-name-${template.id}`;
+ const lastNotification = template.summary_fields?.recent_notifications[0];
+
return (
@@ -49,13 +53,28 @@ function NotificationTemplateListItem({
{template.name}
,
+
+ {lastNotification && (
+
+ )}
+ ,
+ {i18n._(t`Type`)}
{NOTIFICATION_TYPES[template.notification_type] ||
template.notification_type}
,
]}
/>
+
+
+
{template.summary_fields.user_capabilities.edit ? (
)}
-
-
-