@openshift-migration-advisor/shared-components 0.25.0-0ad1e70d1fa5 → 0.25.0-1701f64050d7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/report/ChartExportProvider.d.ts +3 -2
- package/dist/report/ChartExportProvider.d.ts.map +1 -1
- package/dist/report/ChartExportProvider.js +3 -3
- package/dist/report/ErrorTable.d.ts +18 -0
- package/dist/report/ErrorTable.d.ts.map +1 -0
- package/dist/report/ErrorTable.js +20 -0
- package/dist/report/HostsOverview.d.ts +13 -0
- package/dist/report/HostsOverview.d.ts.map +1 -0
- package/dist/report/HostsOverview.js +84 -0
- package/dist/report/NetworkOverview.d.ts +31 -0
- package/dist/report/NetworkOverview.d.ts.map +1 -0
- package/dist/report/NetworkOverview.js +201 -0
- package/dist/report/ReportTable.d.ts +14 -0
- package/dist/report/ReportTable.d.ts.map +1 -0
- package/dist/report/ReportTable.js +23 -0
- package/dist/report/WarningsTable.d.ts +9 -0
- package/dist/report/WarningsTable.d.ts.map +1 -0
- package/dist/report/WarningsTable.js +20 -0
- package/dist/report/chartExport.d.ts +16 -0
- package/dist/report/chartExport.d.ts.map +1 -1
- package/dist/report/chartExportContext.d.ts +6 -2
- package/dist/report/chartExportContext.d.ts.map +1 -1
- package/dist/report/constants.d.ts +2 -0
- package/dist/report/constants.d.ts.map +1 -1
- package/dist/report/constants.js +2 -0
- package/dist/report/index.d.ts +7 -2
- package/dist/report/index.d.ts.map +1 -1
- package/dist/report/index.js +5 -0
- package/dist/report/pdfExport.d.ts +2 -2
- package/dist/report/pdfExport.d.ts.map +1 -1
- package/dist/report/pdfExport.js +52 -3
- package/package.json +2 -2
- package/src/report/ChartExportProvider.tsx +13 -5
- package/src/report/ErrorTable.tsx +85 -0
- package/src/report/HostsOverview.tsx +185 -0
- package/src/report/NetworkOverview.tsx +405 -0
- package/src/report/ReportTable.tsx +81 -0
- package/src/report/WarningsTable.tsx +75 -0
- package/src/report/__tests__/ChartExportProvider.test.tsx +70 -2
- package/src/report/__tests__/HostsOverview.test.tsx +145 -0
- package/src/report/__tests__/NetworkOverview.test.tsx +269 -0
- package/src/report/__tests__/chartExportPackagers.test.ts +58 -0
- package/src/report/chartExport.ts +18 -0
- package/src/report/chartExportContext.tsx +9 -1
- package/src/report/constants.ts +2 -0
- package/src/report/index.ts +26 -0
- package/src/report/pdfExport.ts +81 -2
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { type FC, type ReactNode } from "react";
|
|
2
|
-
import { type ChartCaptureSource, type ChartExportFile } from "./chartExport.js";
|
|
2
|
+
import { type ChartCaptureSource, type ChartExportFile, type PdfTextPage } from "./chartExport.js";
|
|
3
3
|
export type CaptureChartElement = (element: HTMLElement) => Promise<HTMLCanvasElement>;
|
|
4
4
|
export type ZipChartFiles = (files: ChartExportFile[]) => Promise<Blob>;
|
|
5
5
|
export type EncodeChartPng = (canvas: HTMLCanvasElement) => Promise<Blob>;
|
|
6
6
|
export type BuildChartDocument = (charts: ChartCaptureSource[], documentTitle: string) => Promise<Blob>;
|
|
7
|
+
export type BuildPdfDocument = (charts: ChartCaptureSource[], documentTitle: string, extraPages?: PdfTextPage[]) => Promise<Blob>;
|
|
7
8
|
export type { ChartExportApi, ChartExportFormat, } from "./chartExportContext.js";
|
|
8
9
|
export { useChartExport, useRegisterChart } from "./chartExportContext.js";
|
|
9
10
|
export interface ChartExportProviderProps {
|
|
@@ -11,7 +12,7 @@ export interface ChartExportProviderProps {
|
|
|
11
12
|
capture?: CaptureChartElement;
|
|
12
13
|
zipFiles?: ZipChartFiles;
|
|
13
14
|
encodePng?: EncodeChartPng;
|
|
14
|
-
buildPdf?:
|
|
15
|
+
buildPdf?: BuildPdfDocument;
|
|
15
16
|
buildHtml?: BuildChartDocument;
|
|
16
17
|
downloadFile?: (blob: Blob, filename: string) => void;
|
|
17
18
|
getZipFilename?: () => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartExportProvider.d.ts","sourceRoot":"","sources":["../../src/report/ChartExportProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,eAAe,
|
|
1
|
+
{"version":3,"file":"ChartExportProvider.d.ts","sourceRoot":"","sources":["../../src/report/ChartExportProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,eAAe,EAGpB,KAAK,WAAW,EAMjB,MAAM,kBAAkB,CAAC;AAU1B,MAAM,MAAM,mBAAmB,GAAG,CAChC,OAAO,EAAE,WAAW,KACjB,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AACxE,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,CAC/B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,KAClB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,MAAM,MAAM,gBAAgB,GAAG,CAC7B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,EACrB,UAAU,CAAC,EAAE,WAAW,EAAE,KACvB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,YAAY,EACV,cAAc,EACd,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3E,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,MAAM,CAAC;CAChC;AAsED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAiQ5D,CAAC"}
|
|
@@ -156,17 +156,17 @@ export const ChartExportProvider = ({ children, capture, zipFiles, encodePng = c
|
|
|
156
156
|
runCapture,
|
|
157
157
|
zipFiles,
|
|
158
158
|
]);
|
|
159
|
-
const downloadPdf = useCallback(async (documentTitle) => {
|
|
159
|
+
const downloadPdf = useCallback(async (documentTitle, extraPages) => {
|
|
160
160
|
await runCapture(async () => {
|
|
161
161
|
const charts = listCharts();
|
|
162
|
-
if (charts.length === 0) {
|
|
162
|
+
if (charts.length === 0 && (extraPages?.length ?? 0) === 0) {
|
|
163
163
|
throw new Error("The report is not ready to export yet.");
|
|
164
164
|
}
|
|
165
165
|
const captureFn = await resolveCapture(capture);
|
|
166
166
|
const prepareElement = await resolvePrepareElement(capture);
|
|
167
167
|
const build = await resolvePdf(buildPdf);
|
|
168
168
|
try {
|
|
169
|
-
downloadFile(await build(toCaptureSources(charts, captureFn, prepareElement), documentTitle), getPdfFilename());
|
|
169
|
+
downloadFile(await build(toCaptureSources(charts, captureFn, prepareElement), documentTitle, extraPages), getPdfFilename());
|
|
170
170
|
}
|
|
171
171
|
finally {
|
|
172
172
|
await restoreChartExportViews(charts);
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type React from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Minimal shape of a migration issue consumed by {@link ErrorTable}. Declared
|
|
4
|
+
* locally so this package does not depend on a specific SDK (`agent-sdk` or
|
|
5
|
+
* `planner-sdk`); callers pass the subset of `MigrationIssue` fields read here.
|
|
6
|
+
*/
|
|
7
|
+
export interface MigrationIssueLike {
|
|
8
|
+
label: string;
|
|
9
|
+
assessment: string;
|
|
10
|
+
count: number;
|
|
11
|
+
}
|
|
12
|
+
export interface ErrorTableProps {
|
|
13
|
+
errors: MigrationIssueLike[];
|
|
14
|
+
/** Optional drill-down callback invoked with an issue's `label`. */
|
|
15
|
+
onConcernClick?: (concernLabel: string) => void;
|
|
16
|
+
}
|
|
17
|
+
export declare const ErrorTable: React.FC<ErrorTableProps>;
|
|
18
|
+
//# sourceMappingURL=ErrorTable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ErrorTable.d.ts","sourceRoot":"","sources":["../../src/report/ErrorTable.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,oEAAoE;IACpE,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgDhD,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Card, CardBody, CardTitle, Flex, FlexItem, Icon, } from "@patternfly/react-core";
|
|
3
|
+
import { ExclamationCircleIcon } from "@patternfly/react-icons";
|
|
4
|
+
import { CardEmptyState } from "./CardEmptyState.js";
|
|
5
|
+
import { ChartHeaderActions } from "./ChartDownloadButton.js";
|
|
6
|
+
import { ChartExportSurface } from "./ChartExportSurface.js";
|
|
7
|
+
import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
|
|
8
|
+
import { dashboardStyles } from "./dashboardStyles.js";
|
|
9
|
+
import { ReportTable } from "./ReportTable.js";
|
|
10
|
+
export const ErrorTable = ({ errors, onConcernClick, }) => {
|
|
11
|
+
const handleRowClick = (issue) => {
|
|
12
|
+
if (issue.label && onConcernClick) {
|
|
13
|
+
onConcernClick(issue.label);
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
const chartId = "errors-table";
|
|
17
|
+
const chartTitle = "Errors";
|
|
18
|
+
return (_jsx(ChartExportSurface, { id: chartId, title: chartTitle, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsxs(FlexItem, { children: [_jsx(Icon, { status: "danger", children: _jsx(ExclamationCircleIcon, {}) }), " ", "Errors"] }), _jsx(ChartHeaderActions, { chartId: chartId, title: chartTitle })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: errors.length === 0 ? (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.errors })) : (_jsx("div", { children: _jsx(ReportTable, { data: errors, columns: ["Description", "Total VMs"], fields: ["assessment", "count"], onRowClick: onConcernClick ? handleRowClick : undefined, clickableFields: onConcernClick ? ["assessment"] : [] }) })) })] }) }));
|
|
19
|
+
};
|
|
20
|
+
ErrorTable.displayName = "ErrorTable";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { FC } from "react";
|
|
2
|
+
import { type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
|
|
3
|
+
/** Smallest host shape this card reads. Apps pass SDK hosts structurally. */
|
|
4
|
+
export interface HostLike {
|
|
5
|
+
model?: string | number;
|
|
6
|
+
}
|
|
7
|
+
export interface HostsOverviewProps {
|
|
8
|
+
hosts?: HostLike[];
|
|
9
|
+
/** `"html"` in agent-ui; ui-app passes `"chart"`. */
|
|
10
|
+
legendVariant?: MigrationDonutChartLegendVariant;
|
|
11
|
+
}
|
|
12
|
+
export declare const HostsOverview: FC<HostsOverviewProps>;
|
|
13
|
+
//# sourceMappingURL=HostsOverview.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HostsOverview.d.ts","sourceRoot":"","sources":["../../src/report/HostsOverview.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAGL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAO1C,6EAA6E;AAC7E,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,qDAAqD;IACrD,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAuFD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwDhD,CAAC"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { css } from "@emotion/css";
|
|
3
|
+
import { Card, CardBody, CardTitle, Flex, FlexItem, } from "@patternfly/react-core";
|
|
4
|
+
import { ServerIcon } from "@patternfly/react-icons";
|
|
5
|
+
import { chart_color_blue_300, chart_color_green_300, chart_color_purple_100, chart_color_purple_300, chart_color_teal_200, chart_color_yellow_400, } from "@patternfly/react-tokens";
|
|
6
|
+
import { useMemo } from "react";
|
|
7
|
+
import { MigrationDonutChart, } from "../charts/MigrationDonutChart.js";
|
|
8
|
+
import { CardEmptyState } from "./CardEmptyState.js";
|
|
9
|
+
import { ChartHeaderActions } from "./ChartDownloadButton.js";
|
|
10
|
+
import { ChartExportSurface } from "./ChartExportSurface.js";
|
|
11
|
+
import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
|
|
12
|
+
import { dashboardStyles } from "./dashboardStyles.js";
|
|
13
|
+
const TOP_HOST_MODELS = 5;
|
|
14
|
+
const OTHER_MODELS_LABEL = "Other models";
|
|
15
|
+
const UNKNOWN_MODEL_LABEL = "Unknown model";
|
|
16
|
+
const CHART_ID = "hosts-overview";
|
|
17
|
+
const CHART_TITLE = "Host distribution by model";
|
|
18
|
+
/**
|
|
19
|
+
* Same categorical order as the ui-app host-model donut, mapped onto
|
|
20
|
+
* PatternFly `chart_color_*` tokens (nearest token where the old hex
|
|
21
|
+
* was not itself a token).
|
|
22
|
+
*/
|
|
23
|
+
const HOST_MODEL_COLORS = [
|
|
24
|
+
chart_color_blue_300.value,
|
|
25
|
+
chart_color_purple_300.value,
|
|
26
|
+
chart_color_purple_100.value,
|
|
27
|
+
chart_color_teal_200.value,
|
|
28
|
+
chart_color_yellow_400.value,
|
|
29
|
+
chart_color_green_300.value,
|
|
30
|
+
];
|
|
31
|
+
const cardSubtitle = css `
|
|
32
|
+
color: var(--pf-t--global--text--color--subtle);
|
|
33
|
+
font-size: 0.85rem;
|
|
34
|
+
`;
|
|
35
|
+
const hostModelLabel = (model) => {
|
|
36
|
+
const raw = typeof model === "string"
|
|
37
|
+
? model
|
|
38
|
+
: typeof model === "number"
|
|
39
|
+
? String(model)
|
|
40
|
+
: "";
|
|
41
|
+
const trimmed = raw.trim();
|
|
42
|
+
return trimmed !== "" ? trimmed : UNKNOWN_MODEL_LABEL;
|
|
43
|
+
};
|
|
44
|
+
const buildHostModelDonut = (hosts) => {
|
|
45
|
+
const counts = new Map();
|
|
46
|
+
for (const host of hosts) {
|
|
47
|
+
const label = hostModelLabel(host?.model);
|
|
48
|
+
counts.set(label, (counts.get(label) ?? 0) + 1);
|
|
49
|
+
}
|
|
50
|
+
const entries = [...counts.entries()]
|
|
51
|
+
.map(([model, count]) => ({ model, count }))
|
|
52
|
+
.sort((a, b) => b.count - a.count);
|
|
53
|
+
const top = entries.slice(0, TOP_HOST_MODELS);
|
|
54
|
+
const restSum = entries
|
|
55
|
+
.slice(TOP_HOST_MODELS)
|
|
56
|
+
.reduce((sum, entry) => sum + entry.count, 0);
|
|
57
|
+
const slices = top.map((entry) => ({
|
|
58
|
+
name: entry.model,
|
|
59
|
+
count: entry.count,
|
|
60
|
+
countDisplay: `${entry.count} hosts`,
|
|
61
|
+
legendCategory: entry.model,
|
|
62
|
+
}));
|
|
63
|
+
if (restSum > 0) {
|
|
64
|
+
slices.push({
|
|
65
|
+
name: OTHER_MODELS_LABEL,
|
|
66
|
+
count: restSum,
|
|
67
|
+
countDisplay: `${restSum} hosts`,
|
|
68
|
+
legendCategory: OTHER_MODELS_LABEL,
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
const legend = {};
|
|
72
|
+
slices.forEach((slice, index) => {
|
|
73
|
+
const color = HOST_MODEL_COLORS[index % HOST_MODEL_COLORS.length];
|
|
74
|
+
if (color) {
|
|
75
|
+
legend[slice.legendCategory] = color;
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
return { slices, legend, totalHosts: hosts.length };
|
|
79
|
+
};
|
|
80
|
+
export const HostsOverview = ({ hosts, legendVariant = "html", }) => {
|
|
81
|
+
const { slices, legend, totalHosts } = useMemo(() => buildHostModelDonut(Array.isArray(hosts) ? hosts : []), [hosts]);
|
|
82
|
+
return (_jsx(ChartExportSurface, { id: CHART_ID, title: CHART_TITLE, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: _jsxs("div", { children: [_jsxs("div", { children: [_jsx(ServerIcon, {}), " ", CHART_TITLE] }), _jsx("div", { className: cardSubtitle, children: "Top 5 models" })] }) }), _jsx(ChartHeaderActions, { chartId: CHART_ID, title: CHART_TITLE })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: slices.length === 0 ? (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.hosts })) : (_jsx(MigrationDonutChart, { legendVariant: legendVariant, data: slices, height: 300, width: 420, donutThickness: 18, titleFontSize: 34, legend: legend, legendWidth: 680, title: `${totalHosts}`, subTitle: "Hosts", subTitleColor: "var(--pf-t--global--text--color--subtle)", itemsPerRow: 2, labelFontSize: 16, marginLeft: "0%", tooltipLabelFormatter: ({ datum, percent }) => `${datum.countDisplay}\n${percent.toFixed(1)}%` })) })] }) }));
|
|
83
|
+
};
|
|
84
|
+
HostsOverview.displayName = "HostsOverview";
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { FC } from "react";
|
|
2
|
+
import { type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
|
|
3
|
+
/** Network fields this card reads. Apps pass SDK networks structurally. */
|
|
4
|
+
export interface NetworkLike {
|
|
5
|
+
vmsCount?: number;
|
|
6
|
+
vlanId?: string | number;
|
|
7
|
+
}
|
|
8
|
+
/** Infra fields this card reads. */
|
|
9
|
+
export interface NetworkInfraLike {
|
|
10
|
+
networks?: NetworkLike[];
|
|
11
|
+
}
|
|
12
|
+
/** Deprecated NIC histogram used when `distributionByNicCount` is absent. */
|
|
13
|
+
export interface NicCountHistogram {
|
|
14
|
+
data?: number[];
|
|
15
|
+
minValue?: number;
|
|
16
|
+
step?: number;
|
|
17
|
+
}
|
|
18
|
+
/** NIC summary fields this card reads from the VM resource breakdown. */
|
|
19
|
+
export interface NicCountSummary {
|
|
20
|
+
total?: number;
|
|
21
|
+
histogram?: NicCountHistogram;
|
|
22
|
+
}
|
|
23
|
+
export interface NetworkOverviewProps {
|
|
24
|
+
infra?: NetworkInfraLike;
|
|
25
|
+
nicCount?: NicCountSummary;
|
|
26
|
+
distributionByNicCount?: Record<string, number>;
|
|
27
|
+
/** `"html"` in agent-ui; ui-app passes `"chart"`. */
|
|
28
|
+
legendVariant?: MigrationDonutChartLegendVariant;
|
|
29
|
+
}
|
|
30
|
+
export declare const NetworkOverview: FC<NetworkOverviewProps>;
|
|
31
|
+
//# sourceMappingURL=NetworkOverview.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NetworkOverview.d.ts","sourceRoot":"","sources":["../../src/report/NetworkOverview.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAErC,OAAO,EAGL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAQ1C,2EAA2E;AAC3E,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,oCAAoC;AACpC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B;AAED,6EAA6E;AAC7E,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,yEAAyE;AACzE,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,qDAAqD;IACrD,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAiND,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2HpD,CAAC"}
|
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { css } from "@emotion/css";
|
|
3
|
+
import { Card, CardBody, CardTitle, Dropdown, DropdownItem, DropdownList, Flex, FlexItem, MenuToggle, } from "@patternfly/react-core";
|
|
4
|
+
import { TopologyIcon } from "@patternfly/react-icons";
|
|
5
|
+
import { chart_color_black_500, chart_color_blue_300, chart_color_green_300, chart_color_orange_100, chart_color_purple_100, chart_color_purple_300, chart_color_red_orange_200, chart_color_teal_200, chart_color_teal_400, chart_color_yellow_400, } from "@patternfly/react-tokens";
|
|
6
|
+
import { useMemo, useState } from "react";
|
|
7
|
+
import { MigrationDonutChart, } from "../charts/MigrationDonutChart.js";
|
|
8
|
+
import { CardEmptyState } from "./CardEmptyState.js";
|
|
9
|
+
import { ChartHeaderActions } from "./ChartDownloadButton.js";
|
|
10
|
+
import { ChartExportSurface } from "./ChartExportSurface.js";
|
|
11
|
+
import { chartExportViewsFromLabels } from "./chartExport.js";
|
|
12
|
+
import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
|
|
13
|
+
import { dashboardStyles } from "./dashboardStyles.js";
|
|
14
|
+
const VIEW_MODE_LABELS = {
|
|
15
|
+
networkDistribution: "VM distribution by network",
|
|
16
|
+
nicCount: "VM distribution by NIC count",
|
|
17
|
+
};
|
|
18
|
+
const TOP_NETWORKS = 4;
|
|
19
|
+
const REST_OF_NETWORKS_LABEL = "Rest of networks";
|
|
20
|
+
const CHART_ID = "network-overview";
|
|
21
|
+
const CHART_TITLE = "Networks";
|
|
22
|
+
/**
|
|
23
|
+
* Categorical order from the ui-app network donut, mapped onto PatternFly
|
|
24
|
+
* `chart_color_*` tokens (nearest token where the old hex was not a token).
|
|
25
|
+
*/
|
|
26
|
+
const NETWORK_COLORS = [
|
|
27
|
+
chart_color_blue_300.value,
|
|
28
|
+
chart_color_purple_300.value,
|
|
29
|
+
chart_color_purple_100.value,
|
|
30
|
+
chart_color_teal_200.value,
|
|
31
|
+
chart_color_yellow_400.value,
|
|
32
|
+
chart_color_green_300.value,
|
|
33
|
+
chart_color_orange_100.value,
|
|
34
|
+
chart_color_red_orange_200.value,
|
|
35
|
+
chart_color_teal_400.value,
|
|
36
|
+
chart_color_black_500.value,
|
|
37
|
+
];
|
|
38
|
+
const cardSubtitle = css `
|
|
39
|
+
color: var(--pf-t--global--text--color--subtle);
|
|
40
|
+
font-size: 0.85rem;
|
|
41
|
+
`;
|
|
42
|
+
const menuToggleMinWidth = css `
|
|
43
|
+
min-width: 250px;
|
|
44
|
+
`;
|
|
45
|
+
const titleRow = css `
|
|
46
|
+
width: 100%;
|
|
47
|
+
`;
|
|
48
|
+
const isViewMode = (value) => value === "networkDistribution" || value === "nicCount";
|
|
49
|
+
const legendFor = (categories) => {
|
|
50
|
+
const legend = {};
|
|
51
|
+
categories.forEach((category, index) => {
|
|
52
|
+
const color = NETWORK_COLORS[index % NETWORK_COLORS.length];
|
|
53
|
+
if (color) {
|
|
54
|
+
legend[category] = color;
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
return legend;
|
|
58
|
+
};
|
|
59
|
+
const vlanLabel = (vlanId) => {
|
|
60
|
+
if (typeof vlanId !== "string" && typeof vlanId !== "number") {
|
|
61
|
+
return "-";
|
|
62
|
+
}
|
|
63
|
+
const value = String(vlanId).trim();
|
|
64
|
+
return value !== "" ? value : "-";
|
|
65
|
+
};
|
|
66
|
+
const buildNetworkDonut = (networks) => {
|
|
67
|
+
const items = (Array.isArray(networks) ? networks : [])
|
|
68
|
+
.map((network) => ({
|
|
69
|
+
vmsCount: typeof network?.vmsCount === "number" ? network.vmsCount : Number.NaN,
|
|
70
|
+
vlanId: vlanLabel(network?.vlanId),
|
|
71
|
+
}))
|
|
72
|
+
.filter((network) => Number.isFinite(network.vmsCount) && network.vmsCount >= 0)
|
|
73
|
+
.sort((a, b) => b.vmsCount - a.vmsCount);
|
|
74
|
+
const totalVMs = items.reduce((sum, network) => sum + network.vmsCount, 0);
|
|
75
|
+
const top = items.slice(0, TOP_NETWORKS);
|
|
76
|
+
const restSum = items
|
|
77
|
+
.slice(TOP_NETWORKS)
|
|
78
|
+
.reduce((sum, network) => sum + network.vmsCount, 0);
|
|
79
|
+
const vlanBySlice = {};
|
|
80
|
+
const slices = top.map((network, index) => {
|
|
81
|
+
const name = `Network ${index + 1}`;
|
|
82
|
+
vlanBySlice[name] = network.vlanId;
|
|
83
|
+
return {
|
|
84
|
+
name,
|
|
85
|
+
count: network.vmsCount,
|
|
86
|
+
countDisplay: `${network.vmsCount} VMs`,
|
|
87
|
+
legendCategory: name,
|
|
88
|
+
};
|
|
89
|
+
});
|
|
90
|
+
if (restSum > 0) {
|
|
91
|
+
slices.push({
|
|
92
|
+
name: REST_OF_NETWORKS_LABEL,
|
|
93
|
+
count: restSum,
|
|
94
|
+
countDisplay: `${restSum} VMs`,
|
|
95
|
+
legendCategory: REST_OF_NETWORKS_LABEL,
|
|
96
|
+
});
|
|
97
|
+
vlanBySlice[REST_OF_NETWORKS_LABEL] = "-";
|
|
98
|
+
}
|
|
99
|
+
return {
|
|
100
|
+
slices,
|
|
101
|
+
legend: legendFor(slices.map((slice) => slice.legendCategory)),
|
|
102
|
+
title: `${totalVMs}`,
|
|
103
|
+
vlanBySlice,
|
|
104
|
+
};
|
|
105
|
+
};
|
|
106
|
+
const nicBucketLabel = (bucket) => {
|
|
107
|
+
const count = Number.parseInt(bucket, 10);
|
|
108
|
+
if (bucket.endsWith("+")) {
|
|
109
|
+
return `${count}+ NIC`;
|
|
110
|
+
}
|
|
111
|
+
return count === 1 ? "1 NIC" : `${count} NIC`;
|
|
112
|
+
};
|
|
113
|
+
const compareNicBuckets = (a, b) => {
|
|
114
|
+
const aPlus = a.bucket.endsWith("+");
|
|
115
|
+
const bPlus = b.bucket.endsWith("+");
|
|
116
|
+
if (aPlus !== bPlus) {
|
|
117
|
+
return aPlus ? 1 : -1;
|
|
118
|
+
}
|
|
119
|
+
const aNum = Number.parseInt(a.bucket, 10);
|
|
120
|
+
const bNum = Number.parseInt(b.bucket, 10);
|
|
121
|
+
if (Number.isFinite(aNum) && Number.isFinite(bNum)) {
|
|
122
|
+
return aNum - bNum;
|
|
123
|
+
}
|
|
124
|
+
return a.bucket.localeCompare(b.bucket);
|
|
125
|
+
};
|
|
126
|
+
const slicesFromBuckets = (entries) => entries.map((entry) => {
|
|
127
|
+
const label = nicBucketLabel(entry.bucket);
|
|
128
|
+
return {
|
|
129
|
+
name: label,
|
|
130
|
+
count: entry.count,
|
|
131
|
+
countDisplay: `${entry.count} VMs`,
|
|
132
|
+
legendCategory: label,
|
|
133
|
+
};
|
|
134
|
+
});
|
|
135
|
+
const buildNicDonut = (distributionByNicCount, nicCount) => {
|
|
136
|
+
if (distributionByNicCount != null) {
|
|
137
|
+
const entries = Object.entries(distributionByNicCount)
|
|
138
|
+
.map(([bucket, value]) => ({
|
|
139
|
+
bucket,
|
|
140
|
+
count: Number.isFinite(Number(value)) ? Number(value) : 0,
|
|
141
|
+
}))
|
|
142
|
+
.filter((entry) => entry.count > 0)
|
|
143
|
+
.sort(compareNicBuckets);
|
|
144
|
+
const slices = slicesFromBuckets(entries);
|
|
145
|
+
const total = entries.reduce((sum, entry) => sum + entry.count, 0);
|
|
146
|
+
return {
|
|
147
|
+
slices,
|
|
148
|
+
legend: legendFor(slices.map((slice) => slice.legendCategory)),
|
|
149
|
+
title: `${total}`,
|
|
150
|
+
};
|
|
151
|
+
}
|
|
152
|
+
const histogram = nicCount?.histogram;
|
|
153
|
+
const data = Array.isArray(histogram?.data) ? histogram.data : [];
|
|
154
|
+
const minValue = typeof histogram?.minValue === "number" ? histogram.minValue : 0;
|
|
155
|
+
const step = typeof histogram?.step === "number" ? histogram.step : 1;
|
|
156
|
+
const buckets = data
|
|
157
|
+
.map((count, index) => ({
|
|
158
|
+
bucket: String(minValue + index * step),
|
|
159
|
+
count: Number(count) || 0,
|
|
160
|
+
}))
|
|
161
|
+
.filter((entry) => entry.count > 0)
|
|
162
|
+
.sort((a, b) => Number(a.bucket) - Number(b.bucket));
|
|
163
|
+
const slices = slicesFromBuckets(buckets);
|
|
164
|
+
const total = typeof nicCount?.total === "number"
|
|
165
|
+
? nicCount.total
|
|
166
|
+
: buckets.reduce((sum, entry) => sum + entry.count, 0);
|
|
167
|
+
return {
|
|
168
|
+
slices,
|
|
169
|
+
legend: legendFor(slices.map((slice) => slice.legendCategory)),
|
|
170
|
+
title: `${total}`,
|
|
171
|
+
};
|
|
172
|
+
};
|
|
173
|
+
export const NetworkOverview = ({ infra, nicCount, distributionByNicCount, legendVariant = "html", }) => {
|
|
174
|
+
const [viewMode, setViewMode] = useState("networkDistribution");
|
|
175
|
+
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
176
|
+
const networkChart = useMemo(() => buildNetworkDonut(infra?.networks), [infra?.networks]);
|
|
177
|
+
const nicChart = useMemo(() => buildNicDonut(distributionByNicCount, nicCount), [distributionByNicCount, nicCount]);
|
|
178
|
+
const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
|
|
179
|
+
const activeChart = viewMode === "networkDistribution" ? networkChart : nicChart;
|
|
180
|
+
const emptyTitle = viewMode === "networkDistribution"
|
|
181
|
+
? REPORT_CARD_EMPTY_STATE_TITLES.networks
|
|
182
|
+
: REPORT_CARD_EMPTY_STATE_TITLES.nicCount;
|
|
183
|
+
return (_jsx(ChartExportSurface, { id: CHART_ID, title: chartTitle, exportViews: chartExportViewsFromLabels(CHART_TITLE, VIEW_MODE_LABELS), activeExportViewId: viewMode, onExportViewChange: (viewId) => {
|
|
184
|
+
if (isViewMode(viewId)) {
|
|
185
|
+
setViewMode(viewId);
|
|
186
|
+
}
|
|
187
|
+
}, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { className: titleRow, justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: _jsxs("div", { children: [_jsxs("div", { children: [_jsx(TopologyIcon, {}), " ", CHART_TITLE] }), viewMode === "networkDistribution" && (_jsx("div", { className: cardSubtitle, children: "Top 5 networks" }))] }) }), _jsx(ChartHeaderActions, { chartId: CHART_ID, title: chartTitle, children: _jsx(Dropdown, { isOpen: isDropdownOpen, onSelect: (_event, value) => {
|
|
188
|
+
if (isViewMode(value)) {
|
|
189
|
+
setViewMode(value);
|
|
190
|
+
}
|
|
191
|
+
setIsDropdownOpen(false);
|
|
192
|
+
}, onOpenChange: setIsDropdownOpen, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: () => setIsDropdownOpen((open) => !open), isExpanded: isDropdownOpen, className: menuToggleMinWidth, children: VIEW_MODE_LABELS[viewMode] })), children: _jsxs(DropdownList, { children: [_jsx(DropdownItem, { value: "networkDistribution", children: VIEW_MODE_LABELS.networkDistribution }, "networkDistribution"), _jsx(DropdownItem, { value: "nicCount", children: VIEW_MODE_LABELS.nicCount }, "nicCount")] }) }) })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: activeChart.slices.length === 0 ? (_jsx(CardEmptyState, { title: emptyTitle })) : (_jsx(MigrationDonutChart, { legendVariant: legendVariant, data: activeChart.slices, legend: activeChart.legend, height: 300, width: 420, donutThickness: 18, titleFontSize: 34, title: activeChart.title, subTitle: "VMs", subTitleColor: "var(--pf-t--global--text--color--subtle)", itemsPerRow: Math.ceil(activeChart.slices.length / 2), labelFontSize: 18, marginLeft: "0%", tooltipLabelFormatter: ({ datum, percent }) => {
|
|
193
|
+
const summary = `${datum.countDisplay}\n${percent.toFixed(1)}%`;
|
|
194
|
+
if (viewMode !== "networkDistribution") {
|
|
195
|
+
return summary;
|
|
196
|
+
}
|
|
197
|
+
const vlan = networkChart.vlanBySlice[datum.legendCategory];
|
|
198
|
+
return `${summary}\nVLAN: ${vlan ?? "-"}`;
|
|
199
|
+
} })) })] }) }));
|
|
200
|
+
};
|
|
201
|
+
NetworkOverview.displayName = "NetworkOverview";
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type React from "react";
|
|
2
|
+
export interface ReportTableProps<DataItem> {
|
|
3
|
+
columns: string[];
|
|
4
|
+
data: DataItem[];
|
|
5
|
+
fields: Array<keyof DataItem>;
|
|
6
|
+
caption?: string;
|
|
7
|
+
onRowClick?: (item: DataItem) => void;
|
|
8
|
+
clickableFields?: Array<keyof DataItem>;
|
|
9
|
+
}
|
|
10
|
+
export declare function ReportTable<DataItem>(props: ReportTableProps<DataItem>): React.ReactNode;
|
|
11
|
+
export declare namespace ReportTable {
|
|
12
|
+
var displayName: string;
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=ReportTable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ReportTable.d.ts","sourceRoot":"","sources":["../../src/report/ReportTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,gBAAgB,CAAC,QAAQ;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,MAAM,EAAE,KAAK,CAAC,MAAM,QAAQ,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,QAAQ,CAAC,CAAC;CACzC;AAED,wBAAgB,WAAW,CAAC,QAAQ,EAClC,KAAK,EAAE,gBAAgB,CAAC,QAAQ,CAAC,GAChC,KAAK,CAAC,SAAS,CA8DjB;yBAhEe,WAAW"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from "@patternfly/react-core";
|
|
3
|
+
import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
|
|
4
|
+
import { tableFullWidthStyle } from "./dashboardStyles.js";
|
|
5
|
+
export function ReportTable(props) {
|
|
6
|
+
const { columns, data, fields, caption, onRowClick, clickableFields = [], } = props;
|
|
7
|
+
const renderCell = (item, field) => {
|
|
8
|
+
const value = item[field];
|
|
9
|
+
if (value === "" || value == null) {
|
|
10
|
+
return "-";
|
|
11
|
+
}
|
|
12
|
+
if (typeof value === "boolean") {
|
|
13
|
+
return value ? "True" : "False";
|
|
14
|
+
}
|
|
15
|
+
// Make field clickable if specified
|
|
16
|
+
if (clickableFields.includes(field) && onRowClick) {
|
|
17
|
+
return (_jsx(Button, { variant: "link", isInline: true, onClick: () => onRowClick(item), style: { padding: 0, fontSize: "inherit" }, children: value }));
|
|
18
|
+
}
|
|
19
|
+
return value;
|
|
20
|
+
};
|
|
21
|
+
return (_jsxs(Table, { variant: "compact", borders: false, className: tableFullWidthStyle, children: [caption && _jsx("caption", { children: caption }), _jsx(Thead, { children: _jsx(Tr, { children: columns.map((name) => (_jsx(Th, { children: name }, name))) }) }), _jsx(Tbody, { children: data.map((item) => (_jsx(Tr, { children: fields.map((f) => (_jsx(Td, { children: renderCell(item, f) }, String(f)))) }, `row-${String(item[fields[0]])}`))) })] }));
|
|
22
|
+
}
|
|
23
|
+
ReportTable.displayName = "ReportTable";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type React from "react";
|
|
2
|
+
import type { MigrationIssueLike } from "./ErrorTable.js";
|
|
3
|
+
export interface WarningsTableProps {
|
|
4
|
+
warnings: MigrationIssueLike[];
|
|
5
|
+
/** Optional drill-down callback invoked with an issue's `label`. */
|
|
6
|
+
onConcernClick?: (concernLabel: string) => void;
|
|
7
|
+
}
|
|
8
|
+
export declare const WarningsTable: React.FC<WarningsTableProps>;
|
|
9
|
+
//# sourceMappingURL=WarningsTable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WarningsTable.d.ts","sourceRoot":"","sources":["../../src/report/WarningsTable.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,oEAAoE;IACpE,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgDtD,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Card, CardBody, CardTitle, Flex, FlexItem, Icon, } from "@patternfly/react-core";
|
|
3
|
+
import { ExclamationTriangleIcon } from "@patternfly/react-icons";
|
|
4
|
+
import { CardEmptyState } from "./CardEmptyState.js";
|
|
5
|
+
import { ChartHeaderActions } from "./ChartDownloadButton.js";
|
|
6
|
+
import { ChartExportSurface } from "./ChartExportSurface.js";
|
|
7
|
+
import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
|
|
8
|
+
import { dashboardStyles } from "./dashboardStyles.js";
|
|
9
|
+
import { ReportTable } from "./ReportTable.js";
|
|
10
|
+
export const WarningsTable = ({ warnings, onConcernClick, }) => {
|
|
11
|
+
const handleRowClick = (issue) => {
|
|
12
|
+
if (issue.label && onConcernClick) {
|
|
13
|
+
onConcernClick(issue.label);
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
const chartId = "warnings-table";
|
|
17
|
+
const chartTitle = "Warnings";
|
|
18
|
+
return (_jsx(ChartExportSurface, { id: chartId, title: chartTitle, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsxs(FlexItem, { children: [_jsx(Icon, { status: "warning", children: _jsx(ExclamationTriangleIcon, {}) }), " ", "Warnings"] }), _jsx(ChartHeaderActions, { chartId: chartId, title: chartTitle })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: warnings.length === 0 ? (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.warnings })) : (_jsx("div", { children: _jsx(ReportTable, { data: warnings, columns: ["Description", "Total VMs"], fields: ["assessment", "count"], onRowClick: onConcernClick ? handleRowClick : undefined, clickableFields: onConcernClick ? ["assessment"] : [] }) })) })] }) }));
|
|
19
|
+
};
|
|
20
|
+
WarningsTable.displayName = "WarningsTable";
|
|
@@ -38,6 +38,22 @@ export type ChartCaptureSource = {
|
|
|
38
38
|
filename: string;
|
|
39
39
|
capture: () => Promise<HTMLCanvasElement>;
|
|
40
40
|
};
|
|
41
|
+
/** One label/value row rendered on a {@link PdfTextPage}. */
|
|
42
|
+
export type PdfTextPageItem = {
|
|
43
|
+
label: string;
|
|
44
|
+
value: string;
|
|
45
|
+
};
|
|
46
|
+
/**
|
|
47
|
+
* A native-text PDF page appended after the captured chart images.
|
|
48
|
+
*
|
|
49
|
+
* Used for content that is not a chart/card (e.g. calculated recommendations)
|
|
50
|
+
* but still needs to be part of the exported PDF.
|
|
51
|
+
*/
|
|
52
|
+
export type PdfTextPage = {
|
|
53
|
+
title: string;
|
|
54
|
+
items: PdfTextPageItem[];
|
|
55
|
+
footer?: string;
|
|
56
|
+
};
|
|
41
57
|
export declare function releaseCanvas(canvas: HTMLCanvasElement): void;
|
|
42
58
|
export declare function waitForChartExportPaint(): Promise<void>;
|
|
43
59
|
export declare function chartExportViewsFromLabels(titlePrefix: string, labels: Record<string, string>): ChartExportView[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chartExport.d.ts","sourceRoot":"","sources":["../../src/report/chartExport.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAC/D,eAAO,MAAM,wBAAwB,6BAA6B,CAAC;AACnE,eAAO,MAAM,2BAA2B,yBAAyB,CAAC;AAElE,eAAO,MAAM,oBAAoB;;CAEvB,CAAC;AAEX,eAAO,MAAM,sBAAsB;;CAEzB,CAAC;AAEX,eAAO,MAAM,oBAAoB,EAAE,aAGlC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,iBAAiB,CAAC,CAAC;CAC3C,CAAC;AAEF,wBAAgB,aAAa,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAG7D;AAED,wBAAgB,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC,CASvD;AAED,wBAAgB,0BAA0B,CACxC,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,eAAe,EAAE,CAKnB;AAqBD,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,eAAe,EAAE,EACzB,OAAO,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAC,iBAAiB,CAAC,EAC7D,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,IAAI,GACpD,kBAAkB,EAAE,CAyBtB;AAED,wBAAsB,uBAAuB,CAC3C,MAAM,EAAE,eAAe,EAAE,GACxB,OAAO,CAAC,IAAI,CAAC,CAcf;AAED,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,eAAe,EAAE,GACxB,eAAe,EAAE,CAcnB;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAcrE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMvD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,SAAU,GAAG,MAAM,CAEpE;AAWD;;;;GAIG;AACH,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,OAAO,EACb,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,GAC3B,OAAO,CAeT;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAS/D"}
|
|
1
|
+
{"version":3,"file":"chartExport.d.ts","sourceRoot":"","sources":["../../src/report/chartExport.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { type RefCallback } from "react";
|
|
2
|
-
import { type ChartExportMeta, type ChartExportView, type RegisteredChart } from "./chartExport.js";
|
|
2
|
+
import { type ChartExportMeta, type ChartExportView, type PdfTextPage, type RegisteredChart } from "./chartExport.js";
|
|
3
3
|
export type ChartExportFormat = "pdf" | "png" | "html";
|
|
4
4
|
export type ChartExportApi = {
|
|
5
5
|
downloadChart: (id: string) => Promise<void>;
|
|
6
6
|
downloadAll: () => Promise<void>;
|
|
7
|
-
|
|
7
|
+
/**
|
|
8
|
+
* @param extraPages - Native-text pages appended after the captured chart
|
|
9
|
+
* images (e.g. calculated recommendations that aren't rendered as charts).
|
|
10
|
+
*/
|
|
11
|
+
downloadPdf: (documentTitle: string, extraPages?: PdfTextPage[]) => Promise<void>;
|
|
8
12
|
downloadHtml: (documentTitle: string) => Promise<void>;
|
|
9
13
|
downloadingChartId: string | null;
|
|
10
14
|
exportingFormat: ChartExportFormat | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chartExportContext.d.ts","sourceRoot":"","sources":["../../src/report/chartExportContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,EAIjB,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,eAAe,EAEpB,KAAK,eAAe,EACrB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG;IAC3B,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"chartExportContext.d.ts","sourceRoot":"","sources":["../../src/report/chartExportContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,EAIjB,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,eAAe,EAEpB,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG;IAC3B,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC;;;OAGG;IACH,WAAW,EAAE,CACX,aAAa,EAAE,MAAM,EACrB,UAAU,CAAC,EAAE,WAAW,EAAE,KACvB,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,YAAY,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,eAAe,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC1C,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,cAAc,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,0BAA0B,qDACU,CAAC;AAClD,eAAO,MAAM,qBAAqB,gDAA6C,CAAC;AAEhF,wBAAgB,cAAc,IAAI,cAAc,GAAG,IAAI,CAEtD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,KAAK,EACL,QAAQ,EACR,WAAW,EACX,kBAAkB,EAClB,aAAa,GACd,EAAE,eAAe,GAAG;IACnB,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnD,GAAG,WAAW,CAAC,WAAW,CAAC,CA8B3B"}
|
|
@@ -19,6 +19,8 @@ export declare const REPORT_CARD_EMPTY_STATE_TITLES: {
|
|
|
19
19
|
readonly operatingSystems: "Operating system data not collected";
|
|
20
20
|
readonly migrationStatus: "Migration status data not collected";
|
|
21
21
|
readonly issuesBreakdown: "Issues breakdown data not collected";
|
|
22
|
+
readonly errors: "Error data not collected";
|
|
23
|
+
readonly warnings: "Warning data not collected";
|
|
22
24
|
readonly hostPowerStates: "Host power state data not collected";
|
|
23
25
|
readonly vmPowerStates: "VM power state data not collected";
|
|
24
26
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/report/constants.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,WAA6B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,WAA+B,CAAC;AAE9D,eAAO,MAAM,8BAA8B
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/report/constants.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,WAA6B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,WAA+B,CAAC;AAE9D,eAAO,MAAM,8BAA8B;;;;;;;;;;;;;;;;;;CAkBjC,CAAC"}
|
package/dist/report/constants.js
CHANGED
|
@@ -20,6 +20,8 @@ export const REPORT_CARD_EMPTY_STATE_TITLES = {
|
|
|
20
20
|
operatingSystems: "Operating system data not collected",
|
|
21
21
|
migrationStatus: "Migration status data not collected",
|
|
22
22
|
issuesBreakdown: "Issues breakdown data not collected",
|
|
23
|
+
errors: "Error data not collected",
|
|
24
|
+
warnings: "Warning data not collected",
|
|
23
25
|
hostPowerStates: "Host power state data not collected",
|
|
24
26
|
vmPowerStates: "VM power state data not collected",
|
|
25
27
|
};
|