Skip to content

Commit

Permalink
Merge pull request #19356 from GordonSmith/HPCC-33117-WUQUERY_WUMONITOR
Browse files Browse the repository at this point in the history
HPCC-33117 Switch Workunits page to use @hpcc-js/comms fully
  • Loading branch information
GordonSmith authored Dec 12, 2024
2 parents 73dc674 + 5eeb875 commit 1ff1fd6
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 8 deletions.
71 changes: 71 additions & 0 deletions esp/src/src-react/comms/workunit.ts
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
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

0 comments on commit 1ff1fd6

Please sign in to comment.