Skip to content
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

HPCC-33117 Switch Workunits page to use @hpcc-js/comms fully #19356

Merged
merged 1 commit into from
Dec 12, 2024
Merged

HPCC-33117 Switch Workunits page to use @hpcc-js/comms fully #19356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
71 changes: 71 additions & 0 deletions esp/src/src-react/comms/workunit.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { Workunit, WorkunitsService, type WsWorkunits } from "@hpcc-js/comms";
import { Thenable } from "src/store/Deferred";
import { Paged } from "src/store/Paged";
import { BaseStore } from "src/store/Store";
import { wuidToDateTime } from "src/Utility";

const service = new WorkunitsService({ baseUrl: "" });

export type WUQueryStore = BaseStore<WsWorkunits.WUQuery, Workunit>;

export function CreateWUQueryStore(): BaseStore<WsWorkunits.WUQuery, Workunit> {
const store = new Paged<WsWorkunits.WUQuery, Workunit>({
start: "PageStartFrom",
count: "PageSize",
sortBy: "Sortby",
descending: "Descending"
}, "Wuid", (request, abortSignal): Thenable<{ data: Workunit[], total: number }> => {
if (request.Sortby && request.Sortby === "TotalClusterTime") {
request.Sortby = "ClusterTime";
}
return service.WUQuery(request, abortSignal).then(response => {
const page = {
start: undefined,
end: undefined
};
const data = response.Workunits.ECLWorkunit.map((wu): Workunit => {
const start = wuidToDateTime(wu.Wuid);
if (!page.start || page.start > start) {
page.start = start;
}
let timePartsSection = 0;
const end = new Date(start);
const timeParts = wu.TotalClusterTime?.split(":") ?? [];
while (timeParts.length) {
const timePart = timeParts.pop();
switch (timePartsSection) {
case 0:
end.setSeconds(end.getSeconds() + +timePart);
break;
case 1:
end.setMinutes(end.getMinutes() + +timePart);
break;
case 2:
end.setHours(end.getHours() + +timePart);
break;
case 3:
end.setDate(end.getDate() + +timePart);
break;
}
++timePartsSection;
}
if (!page.end || page.end < end) {
page.end = end;
}
const retVal = Workunit.attach(service, wu.Wuid, wu);
// HPCC-33121 - Move to @hpcc-js/comms ---
retVal["__timeline_timings"] = {
start,
end,
page
};
return retVal;
});
return {
data,
total: response.NumWUs
};
});
});
return store;
}
17 changes: 9 additions & 8 deletions esp/src/src-react/components/Workunits.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import * as React from "react";
import { CommandBar, ContextualMenuItemType, DetailsRow, ICommandBarItemProps, IDetailsRowProps, Icon, Image, Link } from "@fluentui/react";
import { hsl as d3Hsl } from "@hpcc-js/common";
import { Workunit } from "@hpcc-js/comms";
import { SizeMe } from "react-sizeme";
import { CreateWUQueryStore, defaultSort, emptyFilter, Get, WUQueryStore, formatQuery } from "src/ESPWorkunit";
import { defaultSort, emptyFilter, getStateImage, WUQueryStore, formatQuery } from "src/ESPWorkunit";
import * as WsWorkunits from "src/WsWorkunits";
import { formatCost } from "src/Session";
import { userKeyValStore } from "src/KeyValStore";
Expand All @@ -14,6 +15,7 @@ import { useLogicalClustersPalette } from "../hooks/platform";
import { calcSearch, pushParams } from "../util/history";
import { useHasFocus, useIsMounted } from "../hooks/util";
import { HolyGrail } from "../layouts/HolyGrail";
import { CreateWUQueryStore } from "../comms/workunit";
import { FluentPagedGrid, FluentPagedFooter, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
import { Fields } from "./forms/Fields";
import { Filter } from "./forms/Filter";
Expand Down Expand Up @@ -122,11 +124,10 @@ export const Workunits: React.FunctionComponent<WorkunitsProps> = ({
Wuid: {
label: nlsHPCC.WUID, width: 120,
sortable: true,
formatter: (Wuid, row) => {
const wu = Get(Wuid);
formatter: (Wuid: string, wu: Workunit) => {
const search = calcSearch(filter);
return <>
<Image src={wu.getStateImage()} styles={{ root: { minWidth: "16px" } }} />
<Image src={getStateImage(wu.StateID, wu.isComplete(), wu.Archived)} styles={{ root: { minWidth: "16px" } }} />
&nbsp;
<Link href={search ? `#/workunits!${calcSearch(filter)}/${Wuid}` : `#/workunits/${Wuid}`}>{Wuid}</Link >
</>;
Expand Down Expand Up @@ -294,10 +295,10 @@ export const Workunits: React.FunctionComponent<WorkunitsProps> = ({
}, [selection]);

const renderRowTimings = React.useCallback((props: IDetailsRowProps, size: { readonly width: number; readonly height: number; }) => {
if (showTimeline && props?.item?.timings) {
const total = props.item.timings.page.end - props.item.timings.page.start;
const startPct = 100 - (props.item.timings.start - props.item.timings.page.start) / total * 100;
const endPct = 100 - (props.item.timings.end - props.item.timings.page.start) / total * 100;
if (showTimeline && props?.item?.__timeline_timings) {
const total = props.item.__timeline_timings.page.end - props.item.__timeline_timings.page.start;
const startPct = 100 - (props.item.__timeline_timings.start - props.item.__timeline_timings.page.start) / total * 100;
const endPct = 100 - (props.item.__timeline_timings.end - props.item.__timeline_timings.page.start) / total * 100;
const backgroundColor = palette(props.item.Cluster);
const borderColor = d3Hsl(backgroundColor).darker().toString();

Expand Down
Loading