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

lilykuang · 2020-12-16T21:20:02Z

SUMMARY

new icons for alert and report state: Success, Working, Error, Not triggered, On Grace
Column reorder to put last execution time on first column
update email and slack icon to lighter color and add right margin
update slack icon svg

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Alert State:
Error

Success

On Grace

Working

Not Triggered

Report State
Success

Error

TEST PLAN

ADDITIONAL INFORMATION

ktmud · 2020-12-16T21:35:34Z

Does anyone else feel the size of the status icons looks kind of odd? The warning icon is too large while the others are too small.

nytai · 2020-12-16T21:41:23Z

It looks like it's only warning that's a bit larger. I'm guessing it's the underlying SVGs size and viewBox properties. This may be intentional, to draw attention to the failed ones? @mihir174 can you confirm?

nytai · 2020-12-16T21:51:37Z

Actually, they all look the same size in the designs

We should either add another variant of the icon alert-solid-small like we do with other icons or we can apply a width and height (and maybe position) styles. The figma mocks have width: 12px; height: 12px; applied to the icon

codecov-io · 2020-12-16T22:15:51Z

Codecov Report

Merging #12081 (c135f8e) into master (90ca49f) will decrease coverage by 3.89%.
The diff coverage is 51.92%.

@@            Coverage Diff             @@
##           master   #12081      +/-   ##
==========================================
- Coverage   67.58%   63.69%   -3.90%     
==========================================
  Files         959      959              
  Lines       47221    47243      +22     
  Branches     4620     4638      +18     
==========================================
- Hits        31914    30090    -1824     
- Misses      15195    16966    +1771     
- Partials      112      187      +75

Flag	Coverage Δ
cypress	`?`
javascript	`62.69% <51.92%> (-0.06%)`	⬇️
python	`64.29% <ø> (-0.02%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...rc/views/CRUD/alert/components/AlertStatusIcon.tsx	`46.87% <40.54%> (-17.23%)`	⬇️
.../src/views/CRUD/alert/components/RecipientIcon.tsx	`56.00% <50.00%> (-3.10%)`	⬇️
...perset-frontend/src/views/CRUD/alert/AlertList.tsx	`76.80% <88.88%> (+0.32%)`	⬆️
superset-frontend/src/components/Icon/index.tsx	`100.00% <100.00%> (ø)`
...set-frontend/src/views/CRUD/alert/ExecutionLog.tsx	`100.00% <100.00%> (ø)`
superset-frontend/src/SqlLab/App.jsx	`0.00% <0.00%> (-100.00%)`	⬇️
superset-frontend/src/explore/App.jsx	`0.00% <0.00%> (-100.00%)`	⬇️
superset-frontend/src/dashboard/App.jsx	`0.00% <0.00%> (-100.00%)`	⬇️
superset-frontend/src/setup/setupColors.js	`0.00% <0.00%> (-100.00%)`	⬇️
superset-frontend/src/chart/ChartContainer.jsx	`0.00% <0.00%> (-100.00%)`	⬇️
... and 176 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 90ca49f...c135f8e. Read the comment docs.

lilykuang · 2020-12-17T17:34:32Z

superset-frontend/src/views/CRUD/alert/components/AlertStatusIcon.tsx

+        isReportEnabled={isReportEnabled}
+        viewBox={
+          lastStateConfig.name === 'alert-solid-small'
+            ? '-6 -6 24 24'
+            : '0 0 24 24'


might be a better way to assign viewBox

Why do we need to do this, anyway? The viewbox on that icon is 0 0 24 24, is there something strange going on with the spacing?

riahk · 2020-12-17T19:55:22Z

superset-frontend/src/views/CRUD/alert/AlertList.tsx

-        disableSortBy: true,
+        }: any) => {
+          return lastEvalDttm
+            ? moment.utc(lastEvalDttm).local().format(DATETIME_WITH_TIME_ZONE)


Unrelated but we should update other lists where we use moment to properly handle timezones

riahk · 2020-12-17T19:57:17Z

superset-frontend/src/views/CRUD/alert/components/AlertStatusIcon.tsx

+        isReportEnabled={isReportEnabled}
+        viewBox={
+          lastStateConfig.name === 'alert-solid-small'
+            ? '-6 -6 24 24'
+            : '0 0 24 24'


Why do we need to do this, anyway? The viewbox on that icon is 0 0 24 24, is there something strange going on with the spacing?

lilykuang · 2020-12-17T20:49:59Z

@riahk yea there is a strange spacing with alert-solid-small have to use '-6 -6 24 24' to fix it

* upstream/master: (55 commits) feat(explore): time picker enhancement (apache#11418) feat: update alert/report icons and column order (apache#12081) feat(explore): metrics and filters controls redesign (apache#12095) feat(alerts/reports): add refresh action (apache#12071) chore: add latest tag action (apache#11148) fix(reports): increase crontab size and alert fixes (apache#12056) Small typo fix in Athena connection docs (apache#12099) feat(queries): security perm simplification (apache#12072) feat(databases): security perm simplification (apache#12036) feat(dashboards): security permissions simplification (apache#12012) feat(logs): security permissions simplification (apache#12061) chore: Remove unused CodeModal (apache#11972) Fix typescript error (apache#12074) fix: handle context-dependent feature flags in CLI (apache#12088) fix: Fix "View in SQLLab" bug (apache#12086) feat(alert/report): add 'not null' condition option to modal (apache#12077) bumping superset ui to 15.18 and deckgl to 0.3.2 (apache#12078) fix: Python dependencies in apache#11499 (apache#12079) reset active tab on open (apache#12048) fix: improve import flow UI/UX (apache#12070) ...

superset-github-bot bot added the preset-io label Dec 16, 2020

pull-request-size bot added the size/L label Dec 16, 2020

lilykuang force-pushed the lily/alert-report-list-2 branch 2 times, most recently from b43205c to b7371db Compare December 16, 2020 21:28

lilykuang changed the title ~~update alert/report icons and column order~~ feat: update alert/report icons and column order Dec 16, 2020

lilykuang force-pushed the lily/alert-report-list-2 branch from b7371db to c135f8e Compare December 17, 2020 00:45

lilykuang requested a review from nytai December 17, 2020 02:12

lilykuang marked this pull request as ready for review December 17, 2020 02:12

lilykuang commented Dec 17, 2020

View reviewed changes

nytai approved these changes Dec 17, 2020

View reviewed changes

riahk approved these changes Dec 17, 2020

View reviewed changes

lilykuang force-pushed the lily/alert-report-list-2 branch from 730818b to 249c91d Compare December 17, 2020 21:23

Lily Kuang added 3 commits December 17, 2020 13:27

update alert/report icons and column order

e0df7ff

add alert solid small

39d6a2c

update status icon tooltip placement

7489f07

lilykuang force-pushed the lily/alert-report-list-2 branch from 249c91d to 7489f07 Compare December 17, 2020 21:28

lilykuang merged commit 92fdf54 into apache:master Dec 17, 2020

lilykuang deleted the lily/alert-report-list-2 branch December 17, 2020 23:27

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.0.0 labels Mar 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

lilykuang commented Dec 16, 2020 •

edited

Loading

ktmud commented Dec 16, 2020 •

edited

Loading

nytai commented Dec 16, 2020

nytai commented Dec 16, 2020 •

edited

Loading

codecov-io commented Dec 16, 2020 •

edited

Loading

lilykuang Dec 17, 2020

riahk Dec 17, 2020

riahk Dec 17, 2020

riahk Dec 17, 2020

lilykuang commented Dec 17, 2020

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

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

Conversation

lilykuang commented Dec 16, 2020 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

ADDITIONAL INFORMATION

ktmud commented Dec 16, 2020 • edited Loading

nytai commented Dec 16, 2020

nytai commented Dec 16, 2020 • edited Loading

codecov-io commented Dec 16, 2020 • edited Loading

Codecov Report

lilykuang Dec 17, 2020

Choose a reason for hiding this comment

riahk Dec 17, 2020

Choose a reason for hiding this comment

riahk Dec 17, 2020

Choose a reason for hiding this comment

riahk Dec 17, 2020

Choose a reason for hiding this comment

lilykuang commented Dec 17, 2020

lilykuang commented Dec 16, 2020 •

edited

Loading

ktmud commented Dec 16, 2020 •

edited

Loading

nytai commented Dec 16, 2020 •

edited

Loading

codecov-io commented Dec 16, 2020 •

edited

Loading