You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by li...@apache.org on 2020/12/17 23:27:41 UTC
[incubator-superset] branch master updated: feat: update
alert/report icons and column order (#12081)
This is an automated email from the ASF dual-hosted git repository.
lilykuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 92fdf54 feat: update alert/report icons and column order (#12081)
92fdf54 is described below
commit 92fdf54aa34ed2edd5c85b5b47053bf4ce559517
Author: Lily Kuang <li...@preset.io>
AuthorDate: Thu Dec 17 15:27:19 2020 -0800
feat: update alert/report icons and column order (#12081)
* update alert/report icons and column order
* add alert solid small
* update status icon tooltip placement
---
.../images/icons/alert_solid_small.svg | 22 ++++++++
superset-frontend/images/icons/slack.svg | 17 +++---
superset-frontend/src/components/Icon/index.tsx | 3 ++
.../src/views/CRUD/alert/AlertList.tsx | 50 +++++++++++++-----
.../src/views/CRUD/alert/ExecutionLog.tsx | 6 ++-
.../CRUD/alert/components/AlertStatusIcon.tsx | 60 +++++++++++++++++-----
.../views/CRUD/alert/components/RecipientIcon.tsx | 9 +++-
7 files changed, 128 insertions(+), 39 deletions(-)
diff --git a/superset-frontend/images/icons/alert_solid_small.svg b/superset-frontend/images/icons/alert_solid_small.svg
new file mode 100644
index 0000000..092c37f
--- /dev/null
+++ b/superset-frontend/images/icons/alert_solid_small.svg
@@ -0,0 +1,22 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.335 8.735L7.30998 1.735C7.04507 1.26004 6.54382 0.965683 5.99998 0.965683C5.45614 0.965683 4.9549 1.26004 4.68998 1.735L0.689984 8.735C0.416009 9.19706 0.410037 9.77036 0.674327 10.238C0.938617 10.7057 1.43282 10.9963 1.96998 11H10.03C10.5716 11.0053 11.0741 10.7182 11.3445 10.2489C11.6149 9.77957 11.6113 9.20091 11.335 8.735Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 4.5C5.5 4.22386 5.72386 4 6 4C6.27614 4 6.5 4.22386 6.5 4.5V6.5C6.5 6.77614 6.27614 7 6 7C5.72386 7 5.5 6.77614 5.5 6.5V4.5ZM5.5 8.5C5.5 8.22386 5.72386 8 6 8C6.27614 8 6.5 8.22386 6.5 8.5C6.5 8.77614 6.27614 9 6 9C5.72386 9 5.5 8.77614 5.5 8.5Z" fill="white"/>
+</svg>
diff --git a/superset-frontend/images/icons/slack.svg b/superset-frontend/images/icons/slack.svg
index 3d10ce6..3ee9ffd 100644
--- a/superset-frontend/images/icons/slack.svg
+++ b/superset-frontend/images/icons/slack.svg
@@ -16,12 +16,13 @@
specific language governing permissions and limitations
under the License.
-->
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<rect y="0.5" width="24" height="24" fill="url(#pattern0)"/>
-<defs>
-<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0" transform="scale(0.00195312)"/>
-</pattern>
-<image id="image0" width="512" height="512" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAgAElEQVR4Ae3dCbx261w38B/HcAgd81wITd7MQyIJL4WSISIkyfiiKFR0UJnrNQ8ZS0RH5lkkY2QWlQwhs0hmzqnPv/Z+ejznuffe972ue933Wtd3fT7PZ+/n3mtda63v+q/r+t9ruK7ERIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECB [...]
-</defs>
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.36155 14.6109C7.36155 15.536 6.60586 16.2917 5.68078 16.2917C4.7557 16.2917 4 15.536 4 14.6109C4 13.6858 4.7557 12.9301 5.68078 12.9301H7.36155V14.6109Z" fill="currentColor"/>
+<path d="M8.2085 14.6109C8.2085 13.6858 8.96419 12.9301 9.88927 12.9301C10.8144 12.9301 11.5701 13.6858 11.5701 14.6109V18.8193C11.5701 19.7444 10.8144 20.5001 9.88927 20.5001C8.96419 20.5001 8.2085 19.7444 8.2085 18.8193V14.6109Z" fill="currentColor"/>
+<path d="M9.88927 7.86155C8.96419 7.86155 8.2085 7.10586 8.2085 6.18078C8.2085 5.2557 8.96419 4.5 9.88927 4.5C10.8144 4.5 11.5701 5.2557 11.5701 6.18078V7.86155H9.88927Z" fill="currentColor"/>
+<path d="M9.88926 8.70845C10.8143 8.70845 11.57 9.46415 11.57 10.3892C11.57 11.3143 10.8143 12.07 9.88926 12.07H5.68079C4.7557 12.07 4 11.3143 4 10.3892C4 9.46415 4.7557 8.70845 5.68079 8.70845H9.88926Z" fill="currentColor"/>
+<path d="M16.6385 10.3892C16.6385 9.46415 17.3942 8.70845 18.3193 8.70845C19.2444 8.70845 20.0001 9.46415 20.0001 10.3892C20.0001 11.3143 19.2444 12.07 18.3193 12.07H16.6385V10.3892Z" fill="currentColor"/>
+<path d="M15.7917 10.3893C15.7917 11.3143 15.036 12.07 14.111 12.07C13.1859 12.07 12.4302 11.3143 12.4302 10.3893V6.18079C12.4302 5.2557 13.1859 4.5 14.111 4.5C15.036 4.5 15.7917 5.2557 15.7917 6.18079V10.3893Z" fill="currentColor"/>
+<path d="M14.111 17.1385C15.036 17.1385 15.7917 17.8942 15.7917 18.8193C15.7917 19.7444 15.036 20.5001 14.111 20.5001C13.1859 20.5001 12.4302 19.7444 12.4302 18.8193V17.1385H14.111Z" fill="currentColor"/>
+<path d="M14.111 16.2917C13.1859 16.2917 12.4302 15.536 12.4302 14.6109C12.4302 13.6858 13.1859 12.9301 14.111 12.9301H18.3194C19.2445 12.9301 20.0002 13.6858 20.0002 14.6109C20.0002 15.536 19.2445 16.2917 18.3194 16.2917H14.111Z" fill="currentColor"/>
</svg>
diff --git a/superset-frontend/src/components/Icon/index.tsx b/superset-frontend/src/components/Icon/index.tsx
index c841a51..3577998 100644
--- 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
index 7676865..83d352b 100644
--- 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',
},
{
@@ -230,6 +238,20 @@ function AlertList({
),
},
{
+ 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,
hidden: 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
index fe5966a..5806255 100644
--- 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
index cb6d3a0..6bbfa06 100644
--- a/superset-frontend/src/views/CRUD/alert/components/AlertStatusIcon.tsx
+++ b/superset-frontend/src/views/CRUD/alert/components/AlertStatusIcon.tsx
@@ -22,22 +22,34 @@ 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: '',
@@ -45,30 +57,52 @@ export default function AlertStatusIcon({ state }: { state: string }) {
};
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
index d437488..606d05a 100644
--- 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;
}