Skip to content

Commit

Permalink
Implementing download metrics as json button
Browse files Browse the repository at this point in the history
  • Loading branch information
@lotif
lotif committed Nov 27, 2024
1 parent 3cc970e commit fcda5e8
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 5 deletions.
5 changes: 5 additions & 0 deletions florist/app/assets/css/florist.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,11 @@
margin: 0;
}

.job-details-download-button a.btn {
padding: 0;
margin: 15px 0 0 0;
}

.job-round-details {
padding-left: 40px;
}
Expand Down
35 changes: 30 additions & 5 deletions florist/app/jobs/details/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,10 +177,12 @@ export function JobProgressBar({
metrics,
totalEpochs,
status,
clientIndex,
}: {
metrics: string;
totalEpochs: number;
status: status;
metrics: string,
totalEpochs: number,
status: status,
clientIndex: number,
}): ReactElement {
const [collapsed, setCollapsed] = useState(true);

Expand Down Expand Up @@ -273,14 +275,18 @@ export function JobProgressBar({
</a>
</div>
</div>
<div className="row pb-2">{!collapsed ? <JobProgressDetails metrics={metricsJson} /> : null}</div>
<div className="row pb-2">
{!collapsed ? (
<JobProgressDetails metrics={metricsJson} clientIndex={clientIndex}/>
) : null}
</div>
</div>
</div>
</div>
);
}

export function JobProgressDetails({ metrics }: { metrics: Object }): ReactElement {
export function JobProgressDetails({ metrics, clientIndex }: { metrics: Object, clientIndex: number }): ReactElement {
if (!metrics) {
return null;
}
Expand Down Expand Up @@ -311,6 +317,9 @@ export function JobProgressDetails({ metrics }: { metrics: Object }): ReactEleme
}
}

let metricsFileName = metrics.host_type === "server" ? "server-metrics.json" : `client-metrics-${clientIndex}.json`;
let metricsFileURL = window.URL.createObjectURL(new Blob([JSON.stringify(metrics, null, 4)]));

return (
<div className="job-progress-detail">
<div className="row">
Expand Down Expand Up @@ -339,6 +348,21 @@ export function JobProgressDetails({ metrics }: { metrics: Object }): ReactEleme
{roundMetricsArray.map((roundMetrics, i) => (
<JobProgressRound roundMetrics={roundMetrics} key={i} index={i} />
))}

<div className="row">
<div className="col-sm-4 job-details-download-button">
<a
className="btn btn-link download-metrics-button"
title="Download metrics as JSON"
href={metricsFileURL}
download={metricsFileName}
>
<i className="material-icons">download</i>
Download Metrics as JSON
</a>
</div>
</div>

</div>
);
}
Expand Down Expand Up @@ -623,6 +647,7 @@ export function JobDetailsClientsInfoTable({
<JobProgressBar
metrics={clientInfo.metrics}
totalEpochs={properties.localEpochs}
clientIndex={i}
/>
</span>
</div>
Expand Down
66 changes: 66 additions & 0 deletions florist/tests/unit/app/jobs/details/page.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@ function setupGetJobMock(data: JobData, isLoading: boolean = false, error = null
});
}

function setupURLSpyMock(urlSpy, testURL: string = "foo") {
urlSpy = jest.spyOn(window, "URL");
urlSpy.createObjectURL = jest.fn((_) => testURL);
return urlSpy;
}

function makeTestJob(): JobData {
return {
_id: testJobId,
Expand Down Expand Up @@ -292,6 +298,14 @@ describe("Job Details Page", () => {
expect(progressBar).toHaveClass("bg-danger");
});
describe("Details", () => {
let urlSpy;
afterEach(() => {
if (urlSpy) {
// making sure the mock is clear even on error,
// otherwise some weird errors start popping up
urlSpy.mockRestore();
}
});
it("Should be collapsed by default", () => {
setupGetJobMock(makeTestJob());
const { container } = render(<JobDetails />);
Expand All @@ -300,6 +314,7 @@ describe("Job Details Page", () => {
});
it("Should open when the toggle button is clicked", () => {
setupGetJobMock(makeTestJob());
setupURLSpyMock(urlSpy);
const { container } = render(<JobDetails />);
const toggleButton = container.querySelector(".job-details-toggle a");
expect(toggleButton).toHaveTextContent("Expand");
Expand All @@ -315,6 +330,7 @@ describe("Job Details Page", () => {
const testJob = makeTestJob();
const serverMetrics = JSON.parse(testJob.server_metrics);
setupGetJobMock(testJob);
setupURLSpyMock(urlSpy);
const { container } = render(<JobDetails />);
const toggleButton = container.querySelector(".job-details-toggle a");
act(() => toggleButton.click());
Expand Down Expand Up @@ -365,6 +381,7 @@ describe("Job Details Page", () => {
const testJob = makeTestJob();
const serverMetrics = JSON.parse(testJob.server_metrics);
setupGetJobMock(testJob);
setupURLSpyMock(urlSpy);
const { container } = render(<JobDetails />);
const progressToggleButton = container.querySelector(".job-details-toggle a");
act(() => progressToggleButton.click());
Expand All @@ -378,6 +395,7 @@ describe("Job Details Page", () => {
const testJob = makeTestJob();
const serverMetrics = JSON.parse(testJob.server_metrics);
setupGetJobMock(testJob);
setupURLSpyMock(urlSpy);
const { container } = render(<JobDetails />);
const progressToggleButton = container.querySelector(".job-details-toggle a");
act(() => progressToggleButton.click());
Expand All @@ -398,6 +416,7 @@ describe("Job Details Page", () => {
const testJob = makeTestJob();
const serverMetrics = JSON.parse(testJob.server_metrics);
setupGetJobMock(testJob);
setupURLSpyMock(urlSpy);
const { container } = render(<JobDetails />);
const progressToggleButton = container.querySelector(".job-details-toggle a");
act(() => progressToggleButton.click());
Expand Down Expand Up @@ -461,6 +480,52 @@ describe("Job Details Page", () => {
);
});
});
describe("Download metrics", () => {
it("Should render the download server metrics button correctly", async () => {
const testJob = makeTestJob();
setupGetJobMock(testJob);
const { container } = render(<JobDetails />);

let blobSpy = jest.spyOn(Blob.prototype, "constructor");
const testURL = "test url";
urlSpy = setupURLSpyMock(urlSpy, testURL);

const progressToggleButton = container.querySelector(".job-details-toggle a");
act(() => progressToggleButton.click());

const expectedServerMetrics = JSON.stringify(JSON.parse(testJob.server_metrics), null, 4);
expect(urlSpy.createObjectURL).toHaveBeenCalledWith(new Blob([expectedServerMetrics]));

const jobProgressDetailsComponent = container.querySelector(".job-progress-detail");
const downloadMetricsButton = jobProgressDetailsComponent.querySelector(".download-metrics-button");
expect(downloadMetricsButton.getAttribute("href")).toBe(testURL);
expect(downloadMetricsButton.getAttribute("download")).toBe("server-metrics.json");
});
it("Should render the download client metrics button correctly", () => {
const testJob = makeTestJob();
setupGetJobMock(testJob);
const { container } = render(<JobDetails />);

const testURL = "test url";
urlSpy = setupURLSpyMock(urlSpy, testURL);

const testClientIndex = 1;
let toggleButton = container.querySelectorAll(".job-client-progress .job-details-toggle a")[
testClientIndex
];
act(() => toggleButton.click());

const expectedClientMetrics = JSON.stringify(JSON.parse(testJob.clients_info[testClientIndex].metrics), null, 4);
expect(urlSpy.createObjectURL).toHaveBeenCalledWith(new Blob([expectedClientMetrics]));

const clientProgressDetailsComponent = container.querySelector(
`#job-details-client-config-progress-${testClientIndex} .job-progress-detail`,
);
const downloadMetricsButton = clientProgressDetailsComponent.querySelector(".download-metrics-button");
expect(downloadMetricsButton.getAttribute("href")).toBe(testURL);
expect(downloadMetricsButton.getAttribute("download")).toBe(`client-metrics-${testClientIndex}.json`);
});
});
describe("Clients", () => {
it("Renders their progress bars correctly", () => {
const testJob = makeTestJob();
Expand All @@ -479,6 +544,7 @@ describe("Job Details Page", () => {
it("Renders the progress details correctly", () => {
const testJob = makeTestJob();
setupGetJobMock(testJob);
setupURLSpyMock(urlSpy);
const { container } = render(<JobDetails />);

let toggleButton = container.querySelectorAll(".job-client-progress .job-details-toggle a")[0];
Expand Down

0 comments on commit fcda5e8

Please sign in to comment.