Skip to content

ECOPROJECT-3082: Improve styling of assessment report #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 11, 2025
Merged

ECOPROJECT-3082: Improve styling of assessment report #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
48e196b
Improve styling of assessment report
ammont82 Jun 6, 2025
47e1ad4
Solving problems with OSD graphic and tables
ammont82 Jun 11, 2025
18b9324
Adding icon to display if storage is supported or not
ammont82 Jun 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified public/example_report.pdf
View file
Open in desktop
Binary file not shown.
14 changes: 8 additions & 6 deletions src/migration-wizard/steps/discovery/ReportTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,29 @@ export namespace ReportTable {
data: DataList;
fields: Array<keyof DataList[0]>;
style?: React.CSSProperties;
withoutBorder?: boolean;
};
}

export function ReportTable<DataItem>(
props: ReportTable.Props<DataItem[]>,
withoutBorder = false
): React.ReactNode {
const { columns, data, fields, style } = props;

return (
<Table
variant="compact"
borders={true}
style={{ border: '1px solid lightgray', borderRight: 'none', ...style }}
style={{ border: withoutBorder ? 'none':'1px solid lightgray', borderRight: 'none', ...style }}
>
<Thead>
<Tr>
<Tr style={{ border: withoutBorder ? 'none':'1px solid lightgray'}}>
{columns.map((name, index) => (
<Th
key={index}
hasRightBorder
style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}
hasRightBorder={!withoutBorder}
style={{ whiteSpace: 'normal', wordBreak: 'break-word', border: withoutBorder ? 'none':'1px solid lightgray' }}
>
{name}
</Th>
Expand All @@ -37,9 +39,9 @@ export function ReportTable<DataItem>(
</Thead>
<Tbody>
{data.map((item, idx) => (
<Tr key={idx} style={{ width: 100 }}>
<Tr key={idx} style={{ width: 100, border: withoutBorder ? 'none':'1px solid lightgray' }}>
{fields.map((f, fieldIdx) => (
<Td key={fieldIdx} hasRightBorder>
<Td key={fieldIdx} hasRightBorder={!withoutBorder}>
{' '}
{item[f] === '' || item[f] === undefined
? '-'
Expand Down
54 changes: 54 additions & 0 deletions src/migration-wizard/steps/discovery/assessment-report/Dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
.dashboard-card-clip {
clip-path: inset(0 round 10px);
background: #fff;
height: 100%;
width: 100%;
}
.dashboard-card-scroll {
height: 100%;
min-height: 300px;
max-height: 500px;
overflow: auto;
display: flex;
flex-direction: column;
}
.dashboard-equal-height-row {
display: flex;
gap: var(--pf-global--gutter);
align-items: stretch;
}

.dashboard-equal-height {
display: flex;
flex-direction: column;
flex: 1 1 0;
height: 100%;
}
.pf-v5-c-card {
height: 100%;
display: flex;
flex-direction: column;
border-radius: 10px !important;
}
.dashboard-card {
border: 1px solid #d2d2d2 !important;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
min-height: 280px;
max-height: 340px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dashboard-card-border {
border: 1px solid #d2d2d2 !important;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.dashboard-card-print {
height: 100%;
}
.table-without-border {
border: none !important;
}
108 changes: 53 additions & 55 deletions src/migration-wizard/steps/discovery/assessment-report/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import { StorageOverview } from './StorageOverview';
import { OSDistribution } from './OSDistribution';
import { Datastores } from './Datastores';

import './Dashboard.css';

interface Props {
infra: Infra;
cpuCores: VMResourceBreakdown;
Expand All @@ -27,70 +29,66 @@ interface Props {
isExportMode?: boolean;
}



const getCardStyle = (isExportMode?: boolean): React.CSSProperties =>
isExportMode
? { }
: {
height: '400px',
overflow: 'auto',
};

export const Dashboard: React.FC<Props> = ({ infra, cpuCores, ramGB, vms, isExportMode }) => {

return(
<PageSection variant={PageSectionVariants.light}>
<Grid hasGutter>
<GridItem span={12} id='infrastructure-overview'>
<InfrastructureOverview
infra={infra}
cpuCores={cpuCores}
ramGB={ramGB}
/>
</GridItem>
<GridItem span={12}>
<Grid hasGutter>
<GridItem span={6}>
<div style={getCardStyle(isExportMode)}>
export const Dashboard: React.FC<Props> = ({
infra,
cpuCores,
ramGB,
vms,
isExportMode,
}) => {
return (
<PageSection variant={PageSectionVariants.light}>
<Grid hasGutter>
<GridItem span={12} id="infrastructure-overview">
<InfrastructureOverview
infra={infra}
cpuCores={cpuCores}
ramGB={ramGB}
/>
</GridItem>
<GridItem span={12}>
<Gallery hasGutter minWidths={{ default: '40%' }}>
<GalleryItem>
<VMMigrationStatus
data={{
migratable: vms.totalMigratableWithWarnings,
nonMigratable: vms.total - vms.totalMigratableWithWarnings,
}}
isExportMode={isExportMode}
/>
</div>
</GridItem>
<GridItem span={6}>
<div style={getCardStyle(isExportMode)}>
<OSDistribution osData={vms.os} />
</div>
</GridItem>
</Grid>
</GridItem>
<GridItem span={12}>
<Grid hasGutter>
<GridItem span={6}>
<div style={getCardStyle(isExportMode)}>
</GalleryItem>
<GalleryItem>
<OSDistribution osData={vms.os} isExportMode={isExportMode}/>
</GalleryItem>
</Gallery>
</GridItem>
<GridItem span={12}>
<Gallery hasGutter minWidths={{ default: '40%' }}>
<GalleryItem>
<StorageOverview
data={vms.diskGB.histogram.data}
minValue={vms.diskGB.histogram.minValue}
step={vms.diskGB.histogram.step}
isExportMode={isExportMode}
/>
</div>
</GridItem>
<GridItem span={6}>
<div style={getCardStyle(isExportMode)}>
<Datastores datastores={infra.datastores} isExportMode={isExportMode}/>
</div>
</GridItem>
</Grid>
</GridItem>
</Grid>
<Grid hasGutter>
<GridItem span={6}>
<NetworkTopology networks={infra.networks}/>
</GridItem>
</Grid>
</PageSection>)
</GalleryItem>
<GalleryItem>
<NetworkTopology networks={infra.networks} isExportMode={isExportMode}/>

</GalleryItem>
</Gallery>
</GridItem>
<GridItem span={12}>
<Gallery hasGutter minWidths={{ default: '80%' }}>
<GalleryItem>
<Datastores
datastores={infra.datastores}
isExportMode={isExportMode}
/>
</GalleryItem>
</Gallery>
</GridItem>
</Grid>
</PageSection>
);
};
79 changes: 61 additions & 18 deletions src/migration-wizard/steps/discovery/assessment-report/Datastores.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,48 +3,91 @@ import {
Card,
CardBody,
CardTitle,
Icon,
Progress,
} from '@patternfly/react-core';
import { Datastore } from '@migration-planner-ui/api-client/models';
import { ReportTable } from '../ReportTable';

import { ExclamationCircleIcon, CheckCircleIcon } from '@patternfly/react-icons';
import { global_danger_color_100 as globalDangerColor100 } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
import { global_success_color_100 as globalSuccessColor100 } from '@patternfly/react-tokens/dist/js/global_success_color_100';

interface DatastoresProps {
datastores: Datastore[];
isExportMode: boolean;
}

export const Datastores: React.FC<DatastoresProps> = ({
datastores,
isExportMode = false,
}) => {
const tableWidth = isExportMode ? "100%" : "55rem";
datastores: Datastore[];
isExportMode: boolean;
}

export const Datastores: React.FC<DatastoresProps> = ({
datastores,
isExportMode = false,
}) => {
const tableWidth = isExportMode ? '100%' : '55rem';
const tableHeight = isExportMode ? '100%' : '250px';
return (
<Card>
<CardTitle><i className="fas fa-database" /> Datastores</CardTitle>
<CardBody>
<Card className={isExportMode ? 'dashboard-card-print' : 'dashboard-card'}>
<CardTitle>
<i className="fas fa-database" /> Datastores
</CardTitle>
<CardBody>
<div
style={{
maxHeight: tableHeight,
overflowY: 'auto',
overflowX: 'auto',
padding: 16,
}}
>
<ReportTable<
Datastore & {
usage: JSX.Element;
hardwareAcceleratedMoveDisplay: JSX.Element;
}
>
data={datastores.map((ds) => ({
...ds,
usage: (
<div style={{ minWidth: "10rem", flexGrow: 1 }}>
<div style={{ minWidth: '10rem', flexGrow: 1 }}>
<Progress
value={(ds.freeCapacityGB / ds.totalCapacityGB) * 100}
size="sm"
aria-label="Disk usage"
/>
</div>
),
hardwareAcceleratedMoveDisplay: ds.hardwareAcceleratedMove ? (
<Icon size="md" isInline>
<CheckCircleIcon color={globalSuccessColor100.value} />
</Icon>
) : (
<Icon size="md" isInline>
<ExclamationCircleIcon color={globalDangerColor100.value}/>
</Icon>
),
}))}
columns={[ "Type", "Vendor", "Storage offload support", "Protocol type", "Model", "Total capacity", "Usage %"]}
fields={["type", "vendor", "hardwareAcceleratedMove", "protocolType", "model", "totalCapacityGB", , "usage"]}
columns={[
'Type',
'Vendor',
'Storage offload support',
'Protocol type',
'Model',
'Total capacity',
'Usage %',
]}
fields={[
'type',
'vendor',
'hardwareAcceleratedMoveDisplay',
'protocolType',
'model',
'totalCapacityGB',
,
'usage',
]}
style={{ width: tableWidth }}
withoutBorder
/>
</CardBody>
</Card>
</div>
</CardBody>
</Card>
);
};
8 changes: 4 additions & 4 deletions src/migration-wizard/steps/discovery/assessment-report/InfastructureOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,25 @@ interface Props {
export const InfrastructureOverview: React.FC<Props> = ({ infra, cpuCores, ramGB}) => (
<Gallery hasGutter minWidths={{ default: '20%' }} >
<GalleryItem>
<Card>
<Card className="dashboard-card-border">
<CardTitle><NetworkIcon /> Clusters</CardTitle>
<CardBody>{infra.totalClusters}</CardBody>
</Card>
</GalleryItem>
<GalleryItem>
<Card>
<Card className="dashboard-card-border">
<CardTitle><ClusterIcon /> Hosts</CardTitle>
<CardBody>{infra.totalHosts}</CardBody>
</Card>
</GalleryItem>
<GalleryItem>
<Card>
<Card className="dashboard-card-border">
<CardTitle><i className="fas fa-microchip" /> CPU Cores</CardTitle>
<CardBody>{cpuCores.total}</CardBody>
</Card>
</GalleryItem>
<GalleryItem>
<Card>
<Card className="dashboard-card-border">
<CardTitle><i className="fas fa-memory" /> Total Memory</CardTitle>
<CardBody>{Humanize.fileSize(ramGB.total * 1024 ** 3, 0)}</CardBody>
</Card>
Expand Down
Loading