Added Quicklinks, Job status and system status to dashboard #1572

Sameera-05 · 2025-06-17T18:38:39Z

Overview:

This PR adds three new components to the dashboard: Quick Links, Recent Jobs, and System Status. These components aim to enhance the user experience by providing faster access to commonly used features, job summaries, and system health status.

PR Status:

Ready.
Work in Progress.
Hold.

Related Jira tickets:

Summary of Changes:

Added Quicklinks sidebar component to dashboard layout.
Implemented JobStatus component to display user's recent job runs.
Integrated System Status table using live data from TACC API (via CORS proxy).

Testing Steps:

Navigate to the Dashboard page.

Verify the following:

- Sidebar with Quicklinks appears on the left.
- Recent Jobs list is displayed under the dashboard heading.
- System Status table appears on the right with status, load, and job metrics.

Confirm live data is rendered via proxy without CORS issues.
Confirm layout does not break and displays without horizontal scrollbars.

UI Photos:

Notes:

Currently using https://corsproxy.io to bypass CORS for live system status. Ideally, this should be replaced with a backend proxy for production.

…splay

jarosenb · 2025-06-27T17:24:36Z

client/modules/_hooks/src/systems/useGetLiveSystemStatus.ts

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';


We can use the existing useSystemOverview hook for system status, which proxies tup-services on the backend without having to use a CORS proxy.

Made suggested changes. Used existing useSystemOverview hook. Deleted useGetLiveSystemStatus.ts file.

jarosenb · 2025-06-27T17:40:55Z

designsafe/apps/api/users/utils.py


 logger = logging.getLogger(__name__)
+def get_detailed_tas_allocations(username):
+    import logging


The logger is configured at the top of the file, so you don't need to import/define it inside this method.

Removed import logging statement inside get_detailed_tas_allocations(username):

client/modules/workspace/src/AppsSideNav/AppsSideNav.tsx

client/modules/dashboard/src/Dashboard/SUAllocationsCard.tsx

client/modules/workspace/src/utils/apps.ts

…CI/portal into task/WP-1000

jarosenb · 2025-07-14T20:35:30Z

client/modules/dashboard/src/Dashboard/setupTests.ts

@@ -0,0 +1,32 @@
+import { vi } from 'vitest';


Is this setupTests code required to get the initial unit test to pass? If it is, I think it might be masking a deeper issue where we need to be mocking the backend API calls. We haven't really discussed how to do that, and that's an oversight on my part- we can schedule a pair programming session to write some initial tests using mock API calls.

Yes Jake, this setup was mainly added to get the tests passing initially due to issues with matchMedia and IntersectionObserver. But I agree it’s not the ideal long-term solution. Mocking the backend API would definitely be the better approach. I'd appreciate a pair programming session to get started with that!

Thanks, Jake — you were absolutely right. I removed the setupTests.ts file and updated Dashboard.spec.tsx to locally mock matchMedia and getComputedStyle, which were the main blockers. The test now runs successfully without relying on global setup. Let me know if this approach looks good to you — and if not, I’m happy to arrange a pair programming session to improve it further.

client/modules/dashboard/src/Dashboard/JobsListingWrapper.tsx

client/tsconfig.base.json

designsafe/apps/workspace/api/urls.py

designsafe/apps/workspace/api/views.py

jarosenb · 2025-07-14T20:56:41Z

client/modules/dashboard/src/Dashboard/SUAllocationsCard.tsx

+  'data.tacc.utexas.edu': 'Corral (Storage)',
+};
+
+const SUAllocationsCard = () => {


For users that have a lot of allocations, this section takes up a lot of vertical screen space. I think you have some options for how to deal with this:

Use the Collapse component so that the projects for each system are hidden until the user clicks on them

Add an internal scroll so that the card has a fixed height of around 500px

I had already added the collapsible sections earlier, but I’ve now updated them to stay hidden by default until the user clicks to expand. This helps reduce the vertical space on initial load.

jarosenb · 2025-07-14T21:02:04Z

client/modules/dashboard/src/Dashboard/Dashboard.tsx

+  const [showJobs, setShowJobs] = useState(true);
+  const [showAllocations, setShowAllocations] = useState(true);
+
+  const columns = [


If a system is down, some of the column cells show invalid values:

Let's display (N/A) instead of a value for the Load/Running Jobs/Waiting jobs.

I’ve updated the table to show (N/A) instead of invalid values for load, running jobs, and waiting jobs when a system is down.

fnets

A couple of small changes, but great work!

client/modules/dashboard/src/Dashboard/Dashboard.tsx

client/modules/dashboard/src/Dashboard/Jobstatus.tsx

client/modules/dashboard/src/Dashboard/SUAllocationsCard.tsx

client/modules/dashboard/src/Dashboard/UserGuides.tsx

client/src/main.tsx

designsafe/apps/api/users/utils.py

client/vite.config.ts

fnets

This is looking really good! I think Jake's requests still need to be addressed, especially the API testing. Once those are done, I think we should be good to merge this. Great job!

jarosenb · 2025-08-01T18:28:51Z

Closing this PR- dashboard changes have been consolidated into #1612

Added Quicklinks, Job status and system status to dashbaord

0042a02

Sameera-05 force-pushed the task/WP-1000 branch from 5624e21 to 0042a02 Compare June 17, 2025 20:46

Sameera Sineen added 10 commits June 18, 2025 10:22

Merge branch 'feat/react-dashboard' into task/WP-1000

0106bb1

Merge branch 'feat/react-dashboard' into task/WP-1000

f903667

revert NPM package changes

14b2c80

Changed css file import error

812c343

Changed Dashboard.spec.tsx for client query error

3a51712

Changed Dashboard.specs.ts

b1da8ae

Removed useQuery() from my files

1fcdb01

Removed useQuery() from my files

91d0c10

Removed unit tests

51c8fd1

test cases issue padted

9acbc98

Sameera-05 requested a review from jarosenb June 18, 2025 18:49

Sameera Sineen and others added 5 commits June 18, 2025 14:58

Merge branch 'feat/react-dashboard' into task/WP-1000

8b11918

Fix Tools & Applications navigation issue and added SU allocations di…

0287861

…splay

Added SU allocations component on Dashbaord

fc71cf5

Added user guide tutorials to Dashboard

14ef73c

changed Dashboard spec file

bb4db54

jarosenb requested changes Jun 27, 2025

View reviewed changes

Sameera Sineen added 11 commits June 27, 2025 16:35

Made required changes to Dashboard and SUAllocationsCard files

c52fbba

Fixed react unit tests and linting error

322e52e

Fixed linting error

6dd374c

Fixed linting error

f7d2475

Fixed linting error

8c6cd55

changed main.tsx for linting error

3eb8be5

changed index.ts back to index.tsx

4d0a507

format error fixed

b63befa

Merge branch 'feat/react-dashboard' of https://github.com/DesignSafe-…

b78308a

…CI/portal into task/WP-1000

merge feat/react-dashbaord and task/WP-1000

7b5202f

format fix

ad9dde4

Sameera Sineen added 9 commits July 3, 2025 10:26

changed index.tsx to index.ts

c51a02c

fixed import errors

ac5a008

fixed import errors of Jobstatus

f1e03e8

fixed import errors of Jobstatus.tsx

cf466b7

Solved all Linting errors

b8cc307

Solved all Linting errors and finished linting format

bf54369

Added collapsible section function to recent jobs and allocations

f57c208

Merged feat/react-dashboard into Task/WP-1000 and resolved conflicts

bca7ecb

Updated apps.ts

7903532

jarosenb requested changes Jul 14, 2025

View reviewed changes

Sameera Sineen added 4 commits July 16, 2025 10:19

Made suggested changes after code review

138a00c

Updated Dashboard.tsx to pass linting

5220a45

Updated Dashboard.tsx to pass client side unit tests

a220aa6

Updated Quicklinks to add icons

9aede58

Sameera-05 requested a review from fnets July 22, 2025 16:09

fnets requested changes Jul 23, 2025

View reviewed changes

Sameera Sineen added 2 commits July 24, 2025 14:30

Made suggested changes to follow best practices

3c94d8d

removed BrowserRouter import from main.tsx

0ce7d37

fnets requested changes Jul 28, 2025

View reviewed changes

Removed setupTests file

7d3af80

jarosenb closed this Aug 1, 2025

		@@ -0,0 +1,54 @@
		import { useState, useEffect } from 'react';

Added Quicklinks, Job status and system status to dashboard #1572

Added Quicklinks, Job status and system status to dashboard #1572

Uh oh!

Conversation

Sameera-05 commented Jun 17, 2025 • edited by fnets Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview:

PR Status:

Related Jira tickets:

Summary of Changes:

Testing Steps:

UI Photos:

Notes:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Sameera-05 Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fnets left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fnets left a comment

Choose a reason for hiding this comment

Uh oh!

jarosenb commented Aug 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Sameera-05 commented Jun 17, 2025 •

edited by fnets

Loading

Sameera-05 Jul 16, 2025 •

edited

Loading