diff --git a/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerOverviewTab.tsx b/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerOverviewTab.tsx index 0e814b39ab..a2358a583c 100644 --- a/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerOverviewTab.tsx +++ b/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerOverviewTab.tsx @@ -126,6 +126,198 @@ const TrueNASDetailSectionTables: Component<{ ); +const InlineResourceSummaryTables: Component<{ + resource: Resource; + drawer: UseResourceDetailDrawerStateResult; + showPlatformId: boolean; +}> = (props) => ( +
+ + + + + + + + + + + {(issue) => ( + <> + + + + + 0}> + + + + + + + )} + + + + + + + + + + + + + + + {(source) => ( + + + + + )} + + 0}> + + + + + + + + + + + + + + + + + + {(row) => ( + + + + + )} + + 0}> + + + + + + 0}> + + + + + + 0}> + + + + + + + + + + + +
+ Current state +
State + {props.resource.status || 'unknown'} +
Reason + {issue().primary} +
Also + {issue().details.slice(0, 2).join(' · ')} +
Uptime + {formatUptime(props.resource.uptime ?? 0)} +
Last Seen + {props.drawer.lastSeen() || '—'} +
Sources + {source().label} +
Alerts + {formatInteger(props.resource.alerts?.length)} +
Platform ID + {props.resource.platformId} +
+ Identity +
{row.label} + {row.value} +
IP Addresses +
+ + {(ip) => ( + + {ip} + + )} + +
+
Tags +
+ +
+
Aliases +
+ + {(value) => ( + + {value} + + )} + + + + + + {props.drawer.identityAliasValues().length - + props.drawer.aliasPreviewValues().length} + + +
+
+ No identity metadata yet. +
+
+); + const pbsEvidenceBadgeClass = (tone: string): string => { switch (tone) { case 'danger': @@ -191,90 +383,87 @@ export const ResourceDetailDrawerOverviewTab: Component -
- -
- Current state -
-
-
- State - - {resource.status || 'unknown'} - -
- - {(issue) => ( - <> -
- Reason - - {issue().primary} + + +
+ Current state +
+
+
+ State + + {resource.status || 'unknown'} + +
+ + {(issue) => ( + <> +
+ Reason + + {issue().primary} + +
+ 0}> +
+ Also + + {issue().details.slice(0, 2).join(' · ')} + +
+ + + )} + + +
+ Uptime + + {formatUptime(resource.uptime ?? 0)}
- 0}> -
- Also - - {issue().details.slice(0, 2).join(' · ')} - -
- - - )} - - -
- Uptime - - {formatUptime(resource.uptime ?? 0)} - -
- - -
- Last Seen - - {drawer.lastSeen() || '—'} - -
- - -
- Sources - - {drawer.sourceSummary()!.label} - -
- - 0}> -
- Alerts - - {formatInteger(resource.alerts?.length)} - -
- - -
- Platform ID - - {resource.platformId} - -
- - -
- + + +
+ Last Seen + + {drawer.lastSeen() || '—'} + +
+ + +
+ Sources + + {drawer.sourceSummary()!.label} + +
+ + 0}> +
+ Alerts + + {formatInteger(resource.alerts?.length)} + +
+ +
Platform ID
- 0}> + +
+ +
+ Platform ID + + {resource.platformId} + +
+ + 0}> +
+ Platform signals +
+ + {(badge) => ( + + {badge.label} + + )} + +
+
+ +
+ +
+ + + +
+ Identity +
+
+ + {(row) => ( +
+ {row.label} + + {row.value} + +
+ )} + + 0}>
- Platform signals + IP Addresses
- - {(badge) => ( - - {badge.label} + + {(ip) => ( + + {ip} )}
-
- -
- - - -
- Identity -
-
- - {(row) => ( -
- {row.label} - - {row.value} - -
- )} - - 0}> -
- IP Addresses -
- - {(ip) => ( - - {ip} - - )} - -
-
- - 0}> -
- Tags - -
- - 0}> - - Aliases -
- - {(value) => ( - - {value} - - )} - -
+ 0}> +
+ Tags +
- } - > -
- - Aliases - {drawer.identityAliasValues().length} - -
- - {(value) => ( - - {value} - - )} - + + 0}> + + Aliases +
+ + {(value) => ( + + {value} + + )} + +
+
+ } + > +
+ + Aliases + {drawer.identityAliasValues().length} + +
+ + {(value) => ( + + {value} + + )} + +
+
+ + + +
+ No identity metadata yet.
-
- - - -
- No identity metadata yet. +
- +
- -
+ } + > + +
diff --git a/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.truenas-details.test.tsx b/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.truenas-details.test.tsx index 578939d82c..41c3dbca3d 100644 --- a/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.truenas-details.test.tsx +++ b/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.truenas-details.test.tsx @@ -185,6 +185,11 @@ describe('ResourceDetailDrawer TrueNAS details', () => { /> )); + const summary = getByTestId('resource-summary-section'); + expect(summary.querySelector('table')).toBeTruthy(); + expect(getByTestId('resource-current-state-section').tagName).toBe('TBODY'); + expect(getByTestId('resource-identity-section').tagName).toBe('TBODY'); + expect(summary.querySelector('[class*="shadow-sm"]')).toBeNull(); expect(getByRole('button', { name: 'Hide TrueNAS' })).toBeInTheDocument(); const section = within(getByTestId('resource-truenas-details-section')); expect(getByTestId('resource-truenas-details-section').querySelector('table')).toBeTruthy();