Skip to content

Commit

Permalink
HPCC-30537 ECL Watch v9 fix InfoGrid scrolling problem
Browse files Browse the repository at this point in the history 
Signed-off-by: Jeremy Clements <[email protected]>
  • Loading branch information
@jeclrsg
jeclrsg committed Nov 2, 2023
1 parent 986b595 commit 3818385
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 80 deletions.
43 changes: 29 additions & 14 deletions esp/src/src-react/components/InfoGrid.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import * as React from "react";
import { Checkbox, CommandBar, ICommandBarItemProps, Link } from "@fluentui/react";
import { SizeMe } from "react-sizeme";
import nlsHPCC from "src/nlsHPCC";
import { useWorkunitExceptions } from "../hooks/workunit";
import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
import { HolyGrail } from "../layouts/HolyGrail";
import { pivotItemStyle } from "../layouts/pivot";

function extractGraphInfo(msg) {
const regex = /^([a-zA-Z0-9 :]+: )(graph graph(\d+)\[(\d+)\], )(([a-zA-Z]+)\[(\d+)\]: )?(.*)$/gmi;
Expand Down Expand Up @@ -149,18 +150,32 @@ export const InfoGrid: React.FunctionComponent<InfoGridProps> = ({
setFilterCounts(filterCounts);
}, [errorChecked, exceptions, infoChecked, otherChecked, warningChecked]);

return <HolyGrail
header={<CommandBar items={buttons} farItems={copyButtons} />}
main={
<FluentGrid
data={data}
primaryID={"id"}
alphaNumColumns={{ Name: true, Value: true }}
columns={columns}
setSelection={setSelection}
setTotal={setTotal}
refresh={refreshTable}
></FluentGrid>
React.useEffect(() => {
if (data.length) {
const header = document.querySelector(".ms-DetailsList-headerWrapper");
const viewport = document.querySelector(".ms-Viewport");
if (header && viewport) {
header.remove();
header["style"].top = "-4px";
viewport.prepend(header);
}
}
/>;
}, [data.length]);

return <SizeMe monitorHeight>{({ size }) =>
<div style={{ height: "100%" }}>
<CommandBar items={buttons} farItems={copyButtons} />
<div style={pivotItemStyle(size)}>
<FluentGrid
data={data}
primaryID={"id"}
alphaNumColumns={{ Name: true, Value: true }}
columns={columns}
setSelection={setSelection}
setTotal={setTotal}
refresh={refreshTable}
></FluentGrid>
</div>
</div>
}</SizeMe>;
};
128 changes: 62 additions & 66 deletions esp/src/src-react/components/WorkunitSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { WUStatus } from "src/react/index";
import { formatCost } from "src/Session";
import { useConfirm } from "../hooks/confirm";
import { useWorkunit } from "../hooks/workunit";
import { ReflexContainer, ReflexElement, ReflexSplitter, classNames, styles } from "../layouts/react-reflex";
import { ReflexContainer, ReflexElement, ReflexSplitter } from "../layouts/react-reflex";
import { pushUrl, replaceUrl } from "../util/history";
import { ShortVerticalDivider } from "./Common";
import { TableGroup } from "./forms/Groups";
Expand Down Expand Up @@ -167,71 +167,67 @@ export const WorkunitSummary: React.FunctionComponent<WorkunitSummaryProps> = ({
}, [workunit?.ServiceNames?.Item]);

return <>
<div style={{ height: "100%", position: "relative" }}>
<ReflexContainer orientation="horizontal">
<ReflexElement className={classNames.reflexScrollPane}>
<div className="pane-content">
<ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
<Sticky stickyPosition={StickyPositionType.Header}>
<CommandBar items={buttons} />
{showMessageBar &&
<MessageBar
messageBarType={MessageBarType.success}
dismissButtonAriaLabel={nlsHPCC.Close}
onDismiss={dismissMessageBar}
>
{nlsHPCC.SuccessfullySaved}
</MessageBar>
}
</Sticky>
<Sticky stickyPosition={StickyPositionType.Header}>
<WorkunitPersona wuid={wuid} />
<div style={{ width: "512px", height: "64px", float: "right" }}>
<WUStatus wuid={wuid}></WUStatus>
</div>
</Sticky>
<TableGroup fields={{
"wuid": { label: nlsHPCC.WUID, type: "string", value: wuid, readonly: true },
"action": { label: nlsHPCC.Action, type: "string", value: workunit?.ActionEx, readonly: true },
"state": { label: nlsHPCC.State, type: "string", value: workunit?.State + (workunit?.StateEx ? ` (${workunit.StateEx})` : ""), readonly: true },
"owner": { label: nlsHPCC.Owner, type: "string", value: workunit?.Owner, readonly: true },
"jobname": { label: nlsHPCC.JobName, type: "string", value: jobname },
"description": { label: nlsHPCC.Description, type: "string", value: description },
"compileCost": { label: nlsHPCC.CompileCost, type: "string", value: `${formatCost(workunit?.CompileCost)}`, readonly: true },
"executeCost": { label: nlsHPCC.ExecuteCost, type: "string", value: `${formatCost(workunit?.ExecuteCost)}`, readonly: true },
"fileAccessCost": { label: nlsHPCC.FileAccessCost, type: "string", value: `${formatCost(workunit?.FileAccessCost)}`, readonly: true },
"protected": { label: nlsHPCC.Protected, type: "checkbox", value: _protected },
"cluster": { label: nlsHPCC.Cluster, type: "string", value: workunit?.Cluster, readonly: true },
"totalClusterTime": { label: nlsHPCC.TotalClusterTime, type: "string", value: workunit?.TotalClusterTime, readonly: true },
"abortedBy": { label: nlsHPCC.AbortedBy, type: "string", value: workunit?.AbortBy, readonly: true },
"abortedTime": { label: nlsHPCC.AbortedTime, type: "string", value: workunit?.AbortTime, readonly: true },
"ServiceNamesCustom": { label: nlsHPCC.Services, type: "string", value: serviceNames, readonly: true, multiline: true },
}} onChange={(id, value) => {
switch (id) {
case "jobname":
setJobname(value);
break;
case "description":
setDescription(value);
break;
case "protected":
setProtected(value);
break;
default:
logger.debug(`${id}: ${value}`);
}
}} />
</ScrollablePane>
</div>
</ReflexElement>
<ReflexSplitter style={styles.reflexSplitter}>
<div className={classNames.reflexSplitterDiv}></div>
</ReflexSplitter>
<ReflexElement propagateDimensions={true} className={classNames.reflexPane} style={{ overflow: "hidden" }}>
<InfoGrid wuid={wuid}></InfoGrid>
</ReflexElement>
</ReflexContainer>
</div>
<ReflexContainer orientation="horizontal">
<ReflexElement>
<div className="pane-content">
<ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
<Sticky stickyPosition={StickyPositionType.Header}>
<CommandBar items={buttons} />
{showMessageBar &&
<MessageBar
messageBarType={MessageBarType.success}
dismissButtonAriaLabel={nlsHPCC.Close}
onDismiss={dismissMessageBar}
>
{nlsHPCC.SuccessfullySaved}
</MessageBar>
}
</Sticky>
<Sticky stickyPosition={StickyPositionType.Header}>
<WorkunitPersona wuid={wuid} />
<div style={{ width: "512px", height: "64px", float: "right" }}>
<WUStatus wuid={wuid}></WUStatus>
</div>
</Sticky>
<TableGroup fields={{
"wuid": { label: nlsHPCC.WUID, type: "string", value: wuid, readonly: true },
"action": { label: nlsHPCC.Action, type: "string", value: workunit?.ActionEx, readonly: true },
"state": { label: nlsHPCC.State, type: "string", value: workunit?.State + (workunit?.StateEx ? ` (${workunit.StateEx})` : ""), readonly: true },
"owner": { label: nlsHPCC.Owner, type: "string", value: workunit?.Owner, readonly: true },
"jobname": { label: nlsHPCC.JobName, type: "string", value: jobname },
"description": { label: nlsHPCC.Description, type: "string", value: description },
"compileCost": { label: nlsHPCC.CompileCost, type: "string", value: `${formatCost(workunit?.CompileCost)}`, readonly: true },
"executeCost": { label: nlsHPCC.ExecuteCost, type: "string", value: `${formatCost(workunit?.ExecuteCost)}`, readonly: true },
"fileAccessCost": { label: nlsHPCC.FileAccessCost, type: "string", value: `${formatCost(workunit?.FileAccessCost)}`, readonly: true },
"protected": { label: nlsHPCC.Protected, type: "checkbox", value: _protected },
"cluster": { label: nlsHPCC.Cluster, type: "string", value: workunit?.Cluster, readonly: true },
"totalClusterTime": { label: nlsHPCC.TotalClusterTime, type: "string", value: workunit?.TotalClusterTime, readonly: true },
"abortedBy": { label: nlsHPCC.AbortedBy, type: "string", value: workunit?.AbortBy, readonly: true },
"abortedTime": { label: nlsHPCC.AbortedTime, type: "string", value: workunit?.AbortTime, readonly: true },
"ServiceNamesCustom": { label: nlsHPCC.Services, type: "string", value: serviceNames, readonly: true, multiline: true },
}} onChange={(id, value) => {
switch (id) {
case "jobname":
setJobname(value);
break;
case "description":
setDescription(value);
break;
case "protected":
setProtected(value);
break;
default:
logger.debug(`${id}: ${value}`);
}
}} />
</ScrollablePane>
</div>
</ReflexElement>
<ReflexSplitter />
<ReflexElement>
<InfoGrid wuid={wuid}></InfoGrid>
</ReflexElement>
</ReflexContainer>
<PublishQueryForm wuid={wuid} showForm={showPublishForm} setShowForm={setShowPublishForm} />
<ZAPDialog wuid={wuid} showForm={showZapForm} setShowForm={setShowZapForm} />
<SlaveLogs wuid={wuid} showForm={showThorSlaveLogs} setShowForm={setShowThorSlaveLogs} />
Expand Down

0 comments on commit 3818385

Please sign in to comment.