Skip to content

Commit

Permalink
HPCC-32834 Refactor WU Details fullscreen
Browse files Browse the repository at this point in the history 
Move fullscreen logic to WU Details to allow switching tabs in fullscreen mode

Signed-off-by: Gordon Smith <[email protected]>
  • Loading branch information
@GordonSmith
GordonSmith committed Oct 30, 2024
1 parent d7b689b commit d49c7e9
Show file tree
Hide file tree
Showing 9 changed files with 293 additions and 131 deletions.
7 changes: 6 additions & 1 deletion esp/src/src-react/components/Helpers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { HelperRow, useWorkunitHelpers } from "../hooks/workunit";
import { HolyGrail } from "../layouts/HolyGrail";
import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
import { ShortVerticalDivider } from "./Common";
import { SearchParams } from "../util/hashUrl";
import { hashHistory } from "../util/history";

function canShowContent(type: string) {
switch (type) {
Expand Down Expand Up @@ -135,8 +137,11 @@ export const Helpers: React.FunctionComponent<HelpersProps> = ({
formatter: (Type, row) => {
const target = getTarget(row.id, row);
if (target) {
const searchParams = new SearchParams(hashHistory.location.search);
searchParams.param("mode", encodeURIComponent(target.sourceMode));
searchParams.param("src", encodeURIComponent(target.url));
const linkText = Type.replace("Slave", "Worker") + (row?.Description ? " (" + row.Description + ")" : "");
return <Link href={`#/workunits/${row?.workunit?.Wuid}/helpers/${row.Type}?mode=${encodeURIComponent(target.sourceMode)}&src=${encodeURIComponent(target.url)}`}>{linkText}</Link>;
return <Link href={`#/workunits/${row?.workunit?.Wuid}/helpers/${row.Type}?${searchParams.serialize()}`}>{linkText}</Link>;
}
return Type;
}
Expand Down
45 changes: 12 additions & 33 deletions esp/src/src-react/components/Metrics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { HolyGrail } from "../layouts/HolyGrail";
import { AutosizeComponent, AutosizeHpccJSComponent } from "../layouts/HpccJSAdapter";
import { DockPanel, DockPanelItem, ResetableDockPanel } from "../layouts/DockPanel";
import { LayoutStatus, MetricGraph, MetricGraphWidget, isGraphvizWorkerResponse, layoutCache } from "../util/metricGraph";
import { pushUrl as _pushUrl } from "../util/history";
import { pushUrl } from "../util/history";
import { debounce } from "../util/throttle";
import { ErrorBoundary } from "../util/errorBoundary";
import { ShortVerticalDivider } from "./Common";
Expand Down Expand Up @@ -45,16 +45,14 @@ interface MetricsProps {
queryId?: string;
parentUrl?: string;
selection?: string;
fullscreen?: boolean;
}

export const Metrics: React.FunctionComponent<MetricsProps> = ({
wuid,
querySet = "",
queryId = "",
parentUrl = `/workunits/${wuid}/metrics`,
selection,
fullscreen = false
selection
}) => {
const [_uiState, _setUIState] = React.useState({ ...defaultUIState });
const [selectedMetricsSource, setSelectedMetricsSource] = React.useState<SelectedMetricsSource>("");
Expand Down Expand Up @@ -97,24 +95,10 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
}).catch(err => logger.error(err));
}, [wuid]);

const pushUrl = React.useCallback((selection?: string, fullscreen?: boolean) => {
const selectionStr = selection?.length ? `/${selection}` : "";
const fullscreenStr = fullscreen ? "?fullscreen" : "";
_pushUrl(`${parentUrl}${selectionStr}${fullscreenStr}`);
}, [parentUrl]);

const pushSelectionUrl = React.useCallback((selection: string) => {
pushUrl(selection, fullscreen);
}, [fullscreen, pushUrl]);

const pushFullscreenUrl = React.useCallback((fullscreen: boolean) => {
pushUrl(selection, fullscreen);
}, [pushUrl, selection]);

const onHotspot = React.useCallback(() => {
setSelectedMetricsSource("hotspot");
pushSelectionUrl(selection);
}, [pushSelectionUrl, selection]);
pushUrl(`${parentUrl}/${selection}`);
}, [parentUrl, selection]);

// Timeline ---
const timeline = useConst(() => new WUTimelineNoFetch()
Expand All @@ -129,11 +113,11 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
timeline.selection([]);
setSelectedMetricsSource("scopesTable");
setScopeFilter(`name:${row[7].__hpcc_id}`);
pushSelectionUrl(row[7].id);
pushUrl(`${parentUrl}/${row[7].id}`);
}
}, true)
;
}, [pushSelectionUrl, timeline]);
}, [parentUrl, timeline]);

React.useEffect(() => {
if (view.showTimeline) {
Expand All @@ -157,10 +141,10 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
.on("selectionChanged", () => {
const selection = metricGraphWidget.selection().filter(id => metricGraph.item(id)).map(id => metricGraph.item(id).id);
setSelectedMetricsSource("metricGraphWidget");
pushSelectionUrl(selection.join(","));
pushUrl(`${parentUrl}/${selection.join(",")}`);
}, true)
;
}, [metricGraph, metricGraphWidget, pushSelectionUrl]);
}, [metricGraph, metricGraphWidget, parentUrl]);

React.useEffect(() => {
metricGraph.load(metrics);
Expand Down Expand Up @@ -316,8 +300,8 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({

const scopesSelectionChanged = React.useCallback((source: SelectedMetricsSource, selection: IScope[]) => {
setSelectedMetricsSource(source);
pushSelectionUrl(selection.map(row => row.__lparam?.id ?? row.id).join(","));
}, [pushSelectionUrl]);
pushUrl(selection.map(row => row.__lparam?.id ?? row.id).join(","));
}, [pushUrl]);

Check warning on line 304 in esp/src/src-react/components/Metrics.tsx

View workflow job for this annotation

GitHub Actions / Check eclwatch and npm (18) 

React Hook React.useCallback has an unnecessary dependency: 'pushUrl'. Either exclude it or remove the dependency array. Outer scope values like 'pushUrl' aren't valid dependencies because mutating them doesn't re-render the component

Check warning on line 304 in esp/src/src-react/components/Metrics.tsx

View workflow job for this annotation

GitHub Actions / Check eclwatch and npm (20) 

React Hook React.useCallback has an unnecessary dependency: 'pushUrl'. Either exclude it or remove the dependency array. Outer scope values like 'pushUrl' aren't valid dependencies because mutating them doesn't re-render the component

Check warning on line 304 in esp/src/src-react/components/Metrics.tsx

View workflow job for this annotation

GitHub Actions / Check eclwatch and npm (16) 

React Hook React.useCallback has an unnecessary dependency: 'pushUrl'. Either exclude it or remove the dependency array. Outer scope values like 'pushUrl' aren't valid dependencies because mutating them doesn't re-render the component

const scopesTable = useConst(() => new ScopesTable()
.multiSelect(true)
Expand Down Expand Up @@ -532,18 +516,13 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
}]
}
},
{ key: "divider_2", itemType: ContextualMenuItemType.Divider, onRender: () => <ShortVerticalDivider /> },
{
key: "fullscreen", title: nlsHPCC.MaximizeRestore, iconProps: { iconName: fullscreen ? "ChromeRestore" : "FullScreen" },
onClick: () => pushFullscreenUrl(!fullscreen)
}
], [dot, formatColumns, fullscreen, metrics, pushFullscreenUrl, wuid]);
], [dot, formatColumns, metrics, wuid]);

const setShowMetricOptionsHook = React.useCallback((show: boolean) => {
setShowMetricOptions(show);
}, []);

return <HolyGrail fullscreen={fullscreen}
return <HolyGrail
header={<>
<CommandBar items={buttons} farItems={rightButtons} />
<AutosizeHpccJSComponent widget={timeline} fixedHeight={`${TIMELINE_FIXEDHEIGHT + 8}px`} padding={4} hidden={!view.showTimeline} />
Expand Down
8 changes: 6 additions & 2 deletions esp/src/src-react/components/Resources.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link } from "
import nlsHPCC from "src/nlsHPCC";
import { QuerySortItem } from "src/store/Store";
import { useWorkunitResources } from "../hooks/workunit";
import { updateParam } from "../util/history";
import { hashHistory, updateParam } from "../util/history";
import { SearchParams } from "../util/hashUrl";
import { HolyGrail } from "../layouts/HolyGrail";
import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
import { ShortVerticalDivider } from "./Common";
Expand All @@ -22,7 +23,9 @@ interface ResourcesProps {
const defaultSort = { attribute: "Wuid", descending: true };

function formatUrl(wuid: string, url: string) {
return `#/workunits/${wuid}/resources/content?url=/WsWorkunits/${url}`;
const searchParams = new SearchParams(hashHistory.location.search);
searchParams.param("url", `/WsWorkunits/${url}`);
return `#/workunits/${wuid}/resources/content?${searchParams.serialize()}`;
}

export const Resources: React.FunctionComponent<ResourcesProps> = ({
Expand All @@ -48,6 +51,7 @@ export const Resources: React.FunctionComponent<ResourcesProps> = ({
},
DisplayPath: {
label: nlsHPCC.Name, sortable: true,
width: 800,
formatter: (url, row) => {
return <Link href={formatUrl(wuid, row.URL)}>{url}</Link>;
}
Expand Down
9 changes: 5 additions & 4 deletions esp/src/src-react/components/Results.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { QuerySortItem } from "src/store/Store";
import { useWorkunitResults } from "../hooks/workunit";
import { HolyGrail } from "../layouts/HolyGrail";
import { pivotItemStyle } from "../layouts/pivot";
import { hashHistory } from "../util/history";
import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
import { ShortVerticalDivider } from "./Common";
import { Result } from "./Result";
Expand Down Expand Up @@ -44,13 +45,13 @@ export const Results: React.FunctionComponent<ResultsProps> = ({
Name: {
label: nlsHPCC.Name, width: 180, sortable: true,
formatter: (Name, row) => {
return <Link href={`#/workunits/${row.Wuid}/outputs/${Name}`}>{Name}</Link>;
return <Link href={`#/workunits/${row.Wuid}/outputs/${Name}${hashHistory.location.search}`}>{Name}</Link>;
}
},
FileName: {
label: nlsHPCC.FileName, sortable: true,
formatter: (FileName, row) => {
return <Link href={`#/files/${FileName}`}>{FileName}</Link>;
return <Link href={`#/files/${FileName}${hashHistory.location.search}`}>{FileName}</Link>;
}
},
Value: {
Expand Down Expand Up @@ -80,10 +81,10 @@ export const Results: React.FunctionComponent<ResultsProps> = ({
key: "open", text: nlsHPCC.Open, disabled: !uiState.hasSelection, iconProps: { iconName: "WindowEdit" },
onClick: () => {
if (selection.length === 1) {
window.location.href = `#/workunits/${wuid}/outputs/${selection[0].Name}`;
window.location.href = `#/workunits/${wuid}/outputs/${selection[0].Name}${hashHistory.location.search}`;
} else {
for (let i = selection.length - 1; i >= 0; --i) {
window.open(`#/workunits/${wuid}/outputs/${selection[i].Name}`, "_blank");
window.open(`#/workunits/${wuid}/outputs/${selection[i].Name}${hashHistory.location.search}`, "_blank");
}
}
}
Expand Down
Loading

0 comments on commit d49c7e9

Please sign in to comment.