Skip to content

Commit

Permalink
Download metrics as JSON (#132)
Browse files Browse the repository at this point in the history 
* Implementing download metrics as json button

* [pre-commit.ci] Add auto fixes from pre-commit.com hooks
for more information, see https://pre-commit.ci

* Code cleanup

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
  • Loading branch information
@lotif @pre-commit-ci
lotif and pre-commit-ci[bot] authored Dec 9, 2024
1 parent 7113923 commit a6d0cf3
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 2 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
26 changes: 24 additions & 2 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;
clientIndex: number;
}): ReactElement {
const [collapsed, setCollapsed] = useState(true);

Expand Down Expand Up @@ -273,14 +275,16 @@ 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 +315,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 +346,20 @@ 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 +644,7 @@ export function JobDetailsClientsInfoTable({
<JobProgressBar
metrics={clientInfo.metrics}
totalEpochs={properties.localEpochs}
clientIndex={i}
/>
</span>
</div>
Expand Down
72 changes: 72 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,58 @@ 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 />);

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 +550,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 a6d0cf3

Please sign in to comment.