Action Center results MVP #5622

gilluminate · 2024-12-18T21:45:05Z

Closes HJ-290, HJ-334

Description Of Changes

As a user, I want to view the results of my website monitors in a list view that is by default grouped by monitor run, so that I can triage the results and make updates as needed to my system and data inventory.

Code Changes

Related maintenance:

Upgrade version of date-fns
Clean up Pagination to properly disable "Next" when there's only 1 page
Fix Ant typography's Title to be bold by default by including that in our global CSS

Feature work:

New Feature Flag "Website Monitor"
New route to new Action Center page
Stub out the System monitor page (HJ-314) for links to work
New RTK slice file with action center endpoint definitions
Cypress tests
New website icon utility

Steps to Confirm locally

Checkout and run the backend from Adam's branch in the fidesplus repo (asachs/HJ-295).
Run turbo dev from the clients directory
Visit AdminUI's "About" page and enable the new "Website Monitor" feature flag
Click the "Action center" left nav item
If you receive a message here saying it's disabled, contact Adam to update config.
You should see 2-3 monitors, which are all just dummy data from Adam's BE at the moment.
You should be able to search by monitor name (search for "BQ" for example) and the list should update with results as expected
Verify that each monitor has:

A total count in the title. The title should be clickable.
A description listing the assets found
the monitor's name
the last run date as relative time ("...ago"). when hovered, this should show a tooltip with the real date and time in your own local timezone.
A link to Review (which goes to the same place as the title)

Pre-Merge Checklist

vercel · 2024-12-18T21:45:09Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fides-plus-nightly	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 8, 2025 6:32pm

gilluminate · 2024-12-18T21:52:40Z

clients/admin-ui/src/features/common/utils.ts

@@ -32,7 +32,7 @@ export const debounce = (fn: (props?: any) => void, ms = 0) => {
 };

 export const formatDate = (value: string | number | Date): string =>
-  format(new Date(value), "MMMM d, Y, KK:mm:ss z");
+  format(new Date(value), "MMMM d, y, KK:mm:ss z");


this update was a breaking change in the new version of date-fns. It does NOT change our existing date formats.

cypress · 2024-12-18T22:22:50Z

fides Run #11669

Run Properties: Passed #11669 • dcf5d630e8 ℹ️: Merge 85d47faf2db8c0a34cf439a1c2e95a2f891cf389 into 2d9f1ef27026454fac915d635d9d...

Project	`fides`
Branch Review	`refs/pull/5622/merge`
Run status	`Passed #11669`
Run duration	`01m 03s`
Commit	`dcf5d630e8 ℹ️: Merge 85d47faf2db8c0a34cf439a1c2e95a2f891cf389 into 2d9f1ef27026454fac915d635d9d...`
Committer	`Jason Gill`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`0`
Pending	`0`
Skipped	`0`
Passing	`4`
View all changes introduced in this branch ↗︎

gilluminate · 2024-12-18T21:53:51Z

clients/admin-ui/src/features/common/table/v2/PaginationBar.tsx

@@ -53,7 +53,7 @@ export const useServerSidePagination = () => {
    setPageIndex((prev) => prev + 1);
  }, [setPageIndex]);
  const isNextPageDisabled = useMemo(
-    () => pageIndex === totalPages,
+    () => !!totalPages && (pageIndex === totalPages || totalPages < 2),


We should disable the "Next" button if there's only 1 page or if there was an error (0 pages).

gilluminate · 2024-12-18T21:57:28Z

clients/admin-ui/src/features/data-discovery-and-detection/action-center/MonitorResult.tsx

+
+  return (
+    <List.Item data-testid={`monitor-result-${key}`} {...props}>
+      <Skeleton avatar title={false} loading={showSkeleton} active>


This is how Ant's own examples utilize skeletons during loading state. Pretty cool that it just wraps the content!

gilluminate · 2024-12-18T21:58:24Z

clients/admin-ui/src/features/data-discovery-and-detection/action-center/actionCenter.slice.tsx

+
+import { MonitorSummaryPaginatedResponse } from "./types";
+
+const actionCenterApi = baseApi.injectEndpoints({


I opted to create a dedicated slice for this instead of building on the D&D slice. I may decide to change that depending how big this gets.

I'm in favor of splitting them up more in general, I think some of the slice files we have are too broad and get unwieldy.

revert Back Button enhancement in favor of Breadcrumbs migration

Update action-center.cy.ts

jpople

Tested locally, working for me:

jpople · 2025-01-08T17:57:03Z

clients/admin-ui/src/features/data-discovery-and-detection/action-center/MonitorResult.tsx

+
+  const assetCountString = Object.entries(updates)
+    .map((update) => {
+      return `${update[1]} ${update[0]}s`;


I see that this is formatted based on the API response and not part of this PR, just want to flag that we probably want these to be sentence-cased.

Good callout. @adamsachs this is for things like "Browser Request" which should be "Browser request", etc.

jpople · 2025-01-08T18:00:03Z

clients/admin-ui/src/features/data-discovery-and-detection/action-center/actionCenter.slice.tsx

+
+import { MonitorSummaryPaginatedResponse } from "./types";
+
+const actionCenterApi = baseApi.injectEndpoints({


I'm in favor of splitting them up more in general, I think some of the slice files we have are too broad and get unwieldy.

jpople · 2025-01-08T18:03:58Z

clients/admin-ui/src/pages/data-discovery/action-center/index.tsx

+  }, [data, setTotalPages]);
+
+  const results = data?.items || [];
+  const loadingResults = isFetching


What's this needed for, out of curiosity?

Good question. This is generating a dummy array for the skeleton loader rows and generates as many rows as the page size. Ant's List component has built in skeletons so it needs both a loading state as well as dummy array for the dataSource. See the "load more" example here https://ant.design/components/list#list-demo-loadmore (they use count instead of page size, but similar concept).

when there is more than one page of data here it will be more apparent how this works.

cypress · 2025-01-08T19:06:09Z

fides Run #11671

Run Properties: Passed #11671 • 483d7984e9: Action Center results MVP (#5622)

Project	`fides`
Branch Review	`main`
Run status	`Passed #11671`
Run duration	`00m 50s`
Commit	`483d7984e9: Action Center results MVP (#5622)`
Committer	`Jason Gill`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`0`
Pending	`0`
Skipped	`0`
Passing	`4`
View all changes introduced in this branch ↗︎

gilluminate commented Dec 18, 2024

View reviewed changes

gilluminate force-pushed the gill/HJ-290/action-center-to-show-results branch from 39bfa91 to 7ac5686 Compare December 18, 2024 22:06

gilluminate commented Dec 18, 2024

View reviewed changes

vercel bot deployed to Preview December 18, 2024 22:45 View deployment

vercel bot deployed to Preview December 18, 2024 22:56 View deployment

gilluminate added 10 commits December 18, 2024 16:18

Initialize Action Center page

c946c39

revert Back Button enhancement in favor of Breadcrumbs migration

Update Action Center data based on latest from BE

dd90507

add web monitor feature flag

c40fac0

Add disabled state

7fafbd9

Break down components and other minor tweaks

91eefb7

Initialize Cypress tests

315004f

update actions to prep for future work

243e489

Update types.ts

675569c

Update CHANGELOG.md

e21eb4a

fix broken tests

8f6b8a1

Update action-center.cy.ts

gilluminate force-pushed the gill/HJ-290/action-center-to-show-results branch from fd7dc1d to 8f6b8a1 Compare December 18, 2024 23:19

vercel bot had a problem deploying to Preview December 18, 2024 23:21 Failure

update to use new breadcrumbs/page header

1436ced

vercel bot deployed to Preview December 19, 2024 00:07 View deployment

gilluminate requested a review from jpople December 19, 2024 15:37

gilluminate marked this pull request as ready for review December 19, 2024 15:38

update to use property

6278be7

vercel bot deployed to Preview December 19, 2024 20:59 View deployment

fix test

3243d54

vercel bot deployed to Preview December 19, 2024 21:29 View deployment

Merge branch 'main' into gill/HJ-290/action-center-to-show-results

20ae9a0

vercel bot deployed to Preview January 6, 2025 19:33 View deployment

Merge branch 'main' into gill/HJ-290/action-center-to-show-results

e4ff656

jpople approved these changes Jan 8, 2025

View reviewed changes

Merge branch 'main' into gill/HJ-290/action-center-to-show-results

85d47fa

vercel bot deployed to Preview January 8, 2025 18:32 View deployment

gilluminate merged commit 483d798 into main Jan 8, 2025
20 checks passed

gilluminate deleted the gill/HJ-290/action-center-to-show-results branch January 8, 2025 18:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Action Center results MVP #5622

Action Center results MVP #5622

gilluminate commented Dec 18, 2024 •

edited by jira bot

Loading

vercel bot commented Dec 18, 2024 •

edited

Loading

gilluminate Dec 18, 2024

cypress bot commented Dec 18, 2024 •

edited

Loading

gilluminate Dec 18, 2024

gilluminate Dec 18, 2024

gilluminate Dec 18, 2024

jpople Jan 8, 2025

jpople left a comment

jpople Jan 8, 2025

gilluminate Jan 8, 2025 •

edited

Loading

jpople Jan 8, 2025

jpople Jan 8, 2025

gilluminate Jan 8, 2025

gilluminate Jan 8, 2025

cypress bot commented Jan 8, 2025


		import { MonitorSummaryPaginatedResponse } from "./types";

		const actionCenterApi = baseApi.injectEndpoints({

Action Center results MVP #5622

Action Center results MVP #5622

Conversation

gilluminate commented Dec 18, 2024 • edited by jira bot Loading

Description Of Changes

Code Changes

Steps to Confirm locally

Pre-Merge Checklist

vercel bot commented Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

cypress bot commented Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jpople left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gilluminate Jan 8, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cypress bot commented Jan 8, 2025

gilluminate commented Dec 18, 2024 •

edited by jira bot

Loading

vercel bot commented Dec 18, 2024 •

edited

Loading

cypress bot commented Dec 18, 2024 •

edited

Loading

gilluminate Jan 8, 2025 •

edited

Loading