feat: update alert/report icons and column order (apache#12081)

* update alert/report icons and column order * add alert solid small * update status icon tooltip placement
alfonsodg · Dec 17, 2020 · 92fdf54 · 92fdf54
1 parent b61e243
commit 92fdf54
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 39 deletions.
diff --git a/superset-frontend/images/icons/alert_solid_small.svg b/superset-frontend/images/icons/alert_solid_small.svg
diff --git a/superset-frontend/images/icons/slack.svg b/superset-frontend/images/icons/slack.svg
diff --git a/superset-frontend/src/components/Icon/index.tsx b/superset-frontend/src/components/Icon/index.tsx
@@ -20,6 +20,7 @@ import React, { SVGProps } from 'react';
 
 import { ReactComponent as AlertIcon } from 'images/icons/alert.svg';
 import { ReactComponent as AlertSolidIcon } from 'images/icons/alert_solid.svg';
+import { ReactComponent as AlertSolidSmallIcon } from 'images/icons/alert_solid_small.svg';
 import { ReactComponent as BinocularsIcon } from 'images/icons/binoculars.svg';
 import { ReactComponent as BoltIcon } from 'images/icons/bolt.svg';
 import { ReactComponent as BoltSmallIcon } from 'images/icons/bolt_small.svg';
@@ -145,6 +146,7 @@ import { ReactComponent as XSmallIcon } from 'images/icons/x-small.svg';
 export type IconName =
   | 'alert'
   | 'alert-solid'
+  | 'alert-solid-small'
   | 'binoculars'
   | 'bolt'
   | 'bolt-small'
@@ -272,6 +274,7 @@ export const iconsRegistry: Record<
   React.ComponentType<SVGProps<SVGSVGElement>>
 > = {
   'alert-solid': AlertSolidIcon,
+  'alert-solid-small': AlertSolidSmallIcon,
   'bolt-small': BoltSmallIcon,
   'bolt-small-run': BoltSmallRunIcon,
   'cancel-solid': CancelSolidIcon,

diff --git a/superset-frontend/src/views/CRUD/alert/AlertList.tsx b/superset-frontend/src/views/CRUD/alert/AlertList.tsx
@@ -20,6 +20,7 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { t, SupersetClient, makeApi, styled } from '@superset-ui/core';
+import moment from 'moment';
 import ActionsBar, { ActionProps } from 'src/components/ListView/ActionsBar';
 import Button from 'src/components/Button';
 import FacePile from 'src/components/FacePile';
@@ -32,6 +33,7 @@ import ListView, {
 } from 'src/components/ListView';
 import SubMenu, { SubMenuProps } from 'src/components/Menu/SubMenu';
 import { Switch } from 'src/common/components/Switch';
+import { DATETIME_WITH_TIME_ZONE } from 'src/constants';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import AlertStatusIcon from 'src/views/CRUD/alert/components/AlertStatusIcon';
 import RecipientIcon from 'src/views/CRUD/alert/components/RecipientIcon';
@@ -192,27 +194,33 @@ function AlertList({
           row: {
             original: { last_state: lastState },
           },
-        }: any) => <AlertStatusIcon state={lastState} />,
+        }: any) => (
+          <AlertStatusIcon
+            state={lastState}
+            isReportEnabled={isReportEnabled}
+          />
+        ),
         accessor: 'last_state',
         size: 'xs',
         disableSortBy: true,
       },
-      {
-        accessor: 'name',
-        Header: t('Name'),
-      },
       {
         Cell: ({
           row: {
-            original: { recipients },
+            original: { last_eval_dttm: lastEvalDttm },
           },
-        }: any) =>
-          recipients.map((r: any) => (
-            <RecipientIcon key={r.id} type={r.type} />
-          )),
-        accessor: 'recipients',
-        Header: t('Notification Method'),
-        disableSortBy: true,
+        }: any) => {
+          return lastEvalDttm
+            ? moment.utc(lastEvalDttm).local().format(DATETIME_WITH_TIME_ZONE)
+            : '';
+        },
+        accessor: 'last_eval_dttm',
+        Header: t('Last Run'),
+        size: 'lg',
+      },
+      {
+        accessor: 'name',
+        Header: t('Name'),
         size: 'xl',
       },
       {
@@ -229,6 +237,20 @@ function AlertList({
           </Tooltip>
         ),
       },
+      {
+        Cell: ({
+          row: {
+            original: { recipients },
+          },
+        }: any) =>
+          recipients.map((r: any) => (
+            <RecipientIcon key={r.id} type={r.type} />
+          )),
+        accessor: 'recipients',
+        Header: t('Notification Method'),
+        disableSortBy: true,
+        size: 'xl',
+      },
       {
         accessor: 'created_by',
         disableSortBy: true,
@@ -307,7 +329,7 @@ function AlertList({
         size: 'xl',
       },
     ],
-    [canDelete, canEdit],
+    [canDelete, canEdit, isReportEnabled],
   );
 
   const subMenuButtons: SubMenuProps['buttons'] = [];

diff --git a/superset-frontend/src/views/CRUD/alert/ExecutionLog.tsx b/superset-frontend/src/views/CRUD/alert/ExecutionLog.tsx
@@ -87,7 +87,9 @@ function ExecutionLog({ addDangerToast, isReportEnabled }: ExecutionLogProps) {
           row: {
             original: { state },
           },
-        }: any) => <AlertStatusIcon state={state} />,
+        }: any) => (
+          <AlertStatusIcon state={state} isReportEnabled={isReportEnabled} />
+        ),
         accessor: 'state',
         Header: t('State'),
         size: 'xs',
@@ -125,7 +127,7 @@ function ExecutionLog({ addDangerToast, isReportEnabled }: ExecutionLogProps) {
         Header: t('Error Message'),
       },
     ],
-    [],
+    [isReportEnabled],
   );
   const path = `/${isReportEnabled ? 'report' : 'alert'}/list/`;
   return (

diff --git a/superset-frontend/src/views/CRUD/alert/components/AlertStatusIcon.tsx b/superset-frontend/src/views/CRUD/alert/components/AlertStatusIcon.tsx
@@ -22,53 +22,87 @@ import { Tooltip } from 'src/common/components/Tooltip';
 import Icon, { IconName } from 'src/components/Icon';
 import { AlertState } from '../types';
 
-const StatusIcon = styled(Icon)<{ status: string }>`
-  color: ${({ status, theme }) => {
+const StatusIcon = styled(Icon)<{ status: string; isReportEnabled: boolean }>`
+  color: ${({ status, theme, isReportEnabled }) => {
     switch (status) {
       case AlertState.working:
-        return theme.colors.alert.base;
+        return theme.colors.primary.base;
       case AlertState.error:
         return theme.colors.error.base;
       case AlertState.success:
+        return isReportEnabled
+          ? theme.colors.success.base
+          : theme.colors.alert.base;
+      case AlertState.noop:
         return theme.colors.success.base;
+      case AlertState.grace:
+        return theme.colors.alert.base;
       default:
         return theme.colors.grayscale.base;
     }
   }};
 `;
 
-export default function AlertStatusIcon({ state }: { state: string }) {
+export default function AlertStatusIcon({
+  state,
+  isReportEnabled = false,
+}: {
+  state: string;
+  isReportEnabled: boolean;
+}) {
   const lastStateConfig = {
     name: '',
     label: '',
     status: '',
   };
   switch (state) {
     case AlertState.success:
-      lastStateConfig.name = 'check';
-      lastStateConfig.label = t(`${AlertState.success}`);
+      lastStateConfig.name = isReportEnabled ? 'check' : 'alert-solid-small';
+      lastStateConfig.label = isReportEnabled
+        ? t('Report Sent')
+        : t('Alert Triggered, Notification Sent');
       lastStateConfig.status = AlertState.success;
       break;
     case AlertState.working:
-      lastStateConfig.name = 'exclamation';
-      lastStateConfig.label = t(`${AlertState.working}`);
+      lastStateConfig.name = 'running';
+      lastStateConfig.label = isReportEnabled
+        ? t('Report Sending')
+        : t('Alert Running');
       lastStateConfig.status = AlertState.working;
       break;
     case AlertState.error:
       lastStateConfig.name = 'x-small';
-      lastStateConfig.label = t(`${AlertState.error}`);
+      lastStateConfig.label = isReportEnabled
+        ? t('Report Failed')
+        : t('Alert Failed');
       lastStateConfig.status = AlertState.error;
       break;
+    case AlertState.noop:
+      lastStateConfig.name = 'check';
+      lastStateConfig.label = t('Nothing Triggered');
+      lastStateConfig.status = AlertState.noop;
+      break;
+    case AlertState.grace:
+      lastStateConfig.name = 'alert-solid-small';
+      lastStateConfig.label = t('Alert Triggered, In Grace Period');
+      lastStateConfig.status = AlertState.grace;
+      break;
     default:
-      lastStateConfig.name = 'exclamation';
-      lastStateConfig.label = t(`${AlertState.working}`);
-      lastStateConfig.status = AlertState.working;
+      lastStateConfig.name = 'check';
+      lastStateConfig.label = t('Nothing Triggered');
+      lastStateConfig.status = AlertState.noop;
   }
   return (
-    <Tooltip title={lastStateConfig.label} placement="bottom">
+    <Tooltip title={lastStateConfig.label} placement="bottomLeft">
       <StatusIcon
         name={lastStateConfig.name as IconName}
         status={lastStateConfig.status}
+        isReportEnabled={isReportEnabled}
+        viewBox={
+          lastStateConfig.name === 'alert-solid-small'
+            ? '-6 -6 24 24'
+            : '0 0 24 24'
+        }
       />
     </Tooltip>
   );

diff --git a/superset-frontend/src/views/CRUD/alert/components/RecipientIcon.tsx b/superset-frontend/src/views/CRUD/alert/components/RecipientIcon.tsx
@@ -16,12 +16,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t } from '@superset-ui/core';
+import { styled, t } from '@superset-ui/core';
 import React from 'react';
 import { Tooltip } from 'src/common/components/Tooltip';
 import Icon, { IconName } from 'src/components/Icon';
 import { RecipientIconName } from '../types';
 
+const StyledIcon = styled(Icon)`
+  color: ${({ theme }) => theme.colors.grayscale.light1};
+  margin-right: ${({ theme }) => theme.gridUnit * 2}px;
+`;
+
 export default function RecipientIcon({ type }: { type: string }) {
   const recipientIconConfig = {
     name: '',
@@ -42,7 +47,7 @@ export default function RecipientIcon({ type }: { type: string }) {
   }
   return recipientIconConfig.name.length ? (
     <Tooltip title={recipientIconConfig.label} placement="bottom">
-      <Icon name={recipientIconConfig.name as IconName} />
+      <StyledIcon name={recipientIconConfig.name as IconName} />
     </Tooltip>
   ) : null;
 }