✨ Add application tasks status icon and popover to application table #1985

sjd78 · 2024-06-28T06:26:38Z

Summary

On the application table's name column, add a status icon. The icon summarizes the status of the various kinds of tasks attached to an application (a single application has 0 or more tasks while a task acts on a single application).

The icon will be driven off looking at the most recent task (by createTime) per kind for an application:

If there are no tasks, show the application in No Tasks state
Else if any are "running", show the application in Running
Else if any are "queued", show the application in Queued state
Else if any are "failed", show the application as Failed
Else if any are "canceled", show the application as Canceled
Else if any are "succeeded", show the application as Success

A popover on hover will render on the application name column to display summary information about the application's
tasks. The popover will have a table that shows the most recent tasks for each kind of task associated to the application.

Task id
Task status icon with the task kind
How long ago the task was started/created (exact time in a tooltip)

Based on refactoring PR #1988 and PR #1989
Closes: #1934
Fixes: #1772

Change Details

Created useDecoratedApplications() hook to run all calculations and cross-referencing necessary to render most of the table.
Created ColumnApplicationName to handle the application name column with the status icon and popover.
Refactored useFetchTasks() hook to only do a simple sort. The filtering based on kind is no longer necessary.
The base ApplicationsTable received some basic refactoring to utilize the content of DecoratedApplication

Screen Shots

Base view with various application task statuses:

Popover details of an application with canceled tasks:

Popover details of an application with successful tasks:

Popover details of an application with failed tasks:

codecov · 2024-06-28T06:32:01Z

Codecov Report

Attention: Patch coverage is 33.33333% with 4 lines in your changes missing coverage. Please review.

Project coverage is 42.32%. Comparing base (b654645) to head (8cf2f5e).
Report is 183 commits behind head on main.

Files	Patch %	Lines
client/src/app/queries/tasks.ts	33.33%	4 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1985      +/-   ##
==========================================
+ Coverage   39.20%   42.32%   +3.12%     
==========================================
  Files         146      170      +24     
  Lines        4857     5434     +577     
  Branches     1164     1364     +200     
==========================================
+ Hits         1904     2300     +396     
- Misses       2939     3017      +78     
- Partials       14      117     +103

Flag	Coverage Δ
client	`42.32% <33.33%> (+3.12%)`	⬆️
server	`?`

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

client/src/app/pages/applications/applications-table/applications-table.tsx

client/src/app/pages/applications/applications-table/components/column-application-name.tsx

client/src/app/pages/applications/applications-table/useDecoratedApplications.ts

sjd78 · 2024-06-28T20:45:48Z

Note: Once konveyor/tackle-ui-tests#1150 is merged, CI will pass again. The problem fixed isn't from this PR.

sjd78 · 2024-07-01T15:21:48Z

Created #1988 for the base refactoring that happend in the first few commits of this PR. It'll make this PR much easier to review.

sjd78 · 2024-07-01T15:26:36Z

Note: Once konveyor/tackle-ui-tests#1150 is merged, CI will pass again. The problem fixed isn't from this PR.

There is another e2e ui test fail in spec cypress/e2e/tests/migration/applicationinventory/assessment/miscellaneous.test.ts. I'm looking at that issue now.

Includes: - Basic refactoring of applications-table.tsx - Add radash as a dependency for future use Pre-work for #1985 --------- Signed-off-by: Scott J Dickerson <[email protected]>

dymurray

I just want to add my approval that I have tested the UI changes in my minikube instance with latest images and can verify the functionality.

Assuming tests are passing I am good to merge

Align `TaskStateIcon` Icon status fields with `IconedStatus`. This amounts to setting some icons blue instead of black consistently across tables and the drawer. Related to #1985 Signed-off-by: Scott J Dickerson <[email protected]>

On the application table's name column, add a status icon. The icon summarizes the status of the various kinds of tasks attached to an application (a single application has 0 or more tasks while a task acts on a single application). The icon will be driven off looking at the most recent task (by `createTime`) per `kind` for an application: - If there are no tasks, show the application in No Tasks state - Else if any are "running", show the application in Running - Else if any are "queued", show the application in Queued state - Else if any are "failed", show the application as Failed - Else if any are "canceled", show the application as Canceled - Else if any are "succeeded", show the application as Success A popover on hover will render on the application name column to display summary information about the application's tasks. The popover will have a table that shows the most recent tasks for each kind of task associated to the application. - Task id - Task status icon with the task kind - How long ago the task was started/created (exact time in a tooltip) Changes: - Created `useDecoratedApplications()` hook to run all calculations and cross-referencing necessary to render most of the table. - Created `ColumnApplicationName` to handle the application name column with the status icon and popover. - Refactored `useFetchTasks()` hook to only do a simple sort. The filtering based on kind is no longer necessary. - The base `ApplicationsTable` received some basic refactoring to: - group like function together - utilize the `DecoratedApplication` Signed-off-by: Scott J Dickerson <[email protected]>

client/src/app/pages/applications/applications-table/components/column-application-name.tsx

rszwajko · 2024-07-01T16:48:02Z

client/src/app/queries/tasks.ts

-  addon?: string;
-  kind?: string;
-}
+export const TaskStates = {


follow-up candidate:

enforce types at least on the "value" part (TaskState[])

the keys are named almost like task state but there are differences that may cause bugs

client/src/app/queries/tasks.ts

client/src/app/pages/applications/applications-table/useDecoratedApplications.ts

rszwajko · 2024-07-01T17:28:07Z

@sjd78
feedback from my smoke tests:

when there are no tasks we could skip the table (see below)
tooltip positioning on larger screen (see below)
seems you fixed [BUG] Application names are not sorted in multi select filter #1772 !
not a bug but feels strange - tooltip is technically part of the row so clicking inside (i.e. by accident because you missed the link) opens a drawer

The tasks status looks better being calculated in the hook than in the component. Moved it there and readjusted the component. Now the summarized tasks status is available everywhere a `DecoratedApplication` is used. Signed-off-by: Scott J Dickerson <[email protected]>

Signed-off-by: Scott J Dickerson <[email protected]>

sjd78 · 2024-07-01T19:27:13Z

@sjd78 feedback from my smoke tests:

when there are no tasks we could skip the table (see below)

Done!

tooltip positioning on larger screen (see below)

Not much to do about that since the popover wraps IconWithLabel and that will automatically expand the component to fill the space.

seems you fixed [BUG] Application names are not sorted in multi select filter #1772 !

👍

not a bug but feels strange - tooltip is technically part of the row so clicking inside (i.e. by accident because you missed the link) opens a drawer

I'm not worried about that one right now but good to think about in the near future.

rszwajko

LGTM

JustinXHale · 2024-07-01T20:26:35Z

@sjd78 this looks great!

dymurray · 2024-07-02T01:53:06Z

Making executive decision to merge in favor of cutting the new alpha, will be fixing the tests tomorrow, thanks @sjd78 !

sjd78 requested review from ibolton336 and rszwajko as code owners June 28, 2024 06:26

sjd78 requested a review from dymurray June 28, 2024 06:26

sjd78 changed the title ~~✨ Add an application tasks status icon and popover~~ ✨ Add application tasks status icon and popover to application table Jun 28, 2024

sjd78 requested a review from pranavgaikwad June 28, 2024 06:33

sjd78 commented Jun 28, 2024

View reviewed changes

client/src/app/pages/applications/applications-table/applications-table.tsx Show resolved Hide resolved

sjd78 commented Jun 28, 2024

View reviewed changes

client/src/app/pages/applications/applications-table/applications-table.tsx Show resolved Hide resolved

sjd78 commented Jun 28, 2024

View reviewed changes

client/src/app/pages/applications/applications-table/components/column-application-name.tsx Show resolved Hide resolved

sjd78 commented Jun 28, 2024

View reviewed changes

client/src/app/pages/applications/applications-table/useDecoratedApplications.ts Show resolved Hide resolved

sjd78 added this to the v0.5.0 milestone Jun 28, 2024

sjd78 mentioned this pull request Jul 1, 2024

🌱 refactor application table #1988

Merged

sjd78 force-pushed the task-app-table branch from 063bda7 to de4ae26 Compare July 1, 2024 15:36

sjd78 mentioned this pull request Jul 1, 2024

👻 Align TaskStateIcon Icon status fields with IconedStatus #1989

Merged

dymurray approved these changes Jul 1, 2024

View reviewed changes

sjd78 force-pushed the task-app-table branch from de4ae26 to 065cc30 Compare July 1, 2024 15:57

pranavgaikwad approved these changes Jul 1, 2024

View reviewed changes

sjd78 force-pushed the task-app-table branch from 065cc30 to 4d9d987 Compare July 1, 2024 17:03

rszwajko reviewed Jul 1, 2024

View reviewed changes

sjd78 added 4 commits July 1, 2024 14:25

Fix sort and unique operations in useDecoratedApplications

4c72fdd

Signed-off-by: Scott J Dickerson <[email protected]>

Add some jsdoc to the DecoratedApplication type

9de8187

Signed-off-by: Scott J Dickerson <[email protected]>

Don't display a table in the popover if no tasks exist

8cf2f5e

Signed-off-by: Scott J Dickerson <[email protected]>

rszwajko self-requested a review July 1, 2024 19:51

rszwajko approved these changes Jul 1, 2024

View reviewed changes

dymurray merged commit f30ea01 into konveyor:main Jul 2, 2024
11 of 12 checks passed

rszwajko mentioned this pull request Jul 2, 2024

Use closest Tr tag when searching by app name konveyor/tackle-ui-tests#1154

Merged

This was referenced Jul 10, 2024

operator konveyor-operator (0.5.0-beta.1) k8s-operatorhub/community-operators#4636

Merged

operator konveyor-operator (0.5.0-beta.1) redhat-openshift-ecosystem/community-operators-prod#4775

Merged

sjd78 mentioned this pull request Jul 11, 2024

[BUG] Cannot edit an application that has a credential/identity assigned #2007

Closed

1 task

sjd78 deleted the task-app-table branch July 17, 2024 12:22

This was referenced Jul 30, 2024

operator konveyor-operator (0.5.0) k8s-operatorhub/community-operators#4759

Merged

operator konveyor-operator (0.5.0) redhat-openshift-ecosystem/community-operators-prod#4884

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨ Add application tasks status icon and popover to application table #1985

✨ Add application tasks status icon and popover to application table #1985

sjd78 commented Jun 28, 2024 •

edited

Loading

codecov bot commented Jun 28, 2024 •

edited

Loading

sjd78 commented Jun 28, 2024

sjd78 commented Jul 1, 2024

sjd78 commented Jul 1, 2024

dymurray left a comment

rszwajko Jul 1, 2024

rszwajko commented Jul 1, 2024

sjd78 commented Jul 1, 2024

rszwajko left a comment

JustinXHale commented Jul 1, 2024

dymurray commented Jul 2, 2024

✨ Add application tasks status icon and popover to application table #1985

✨ Add application tasks status icon and popover to application table #1985

Conversation

sjd78 commented Jun 28, 2024 • edited Loading

Summary

Change Details

Screen Shots

codecov bot commented Jun 28, 2024 • edited Loading

Codecov Report

sjd78 commented Jun 28, 2024

sjd78 commented Jul 1, 2024

sjd78 commented Jul 1, 2024

dymurray left a comment

Choose a reason for hiding this comment

rszwajko Jul 1, 2024

Choose a reason for hiding this comment

rszwajko commented Jul 1, 2024

sjd78 commented Jul 1, 2024

rszwajko left a comment

Choose a reason for hiding this comment

JustinXHale commented Jul 1, 2024

dymurray commented Jul 2, 2024

sjd78 commented Jun 28, 2024 •

edited

Loading

codecov bot commented Jun 28, 2024 •

edited

Loading