Skip to content

Commit ecf4220

Browse files
jeclrsgGordonSmith
jeclrsg
authored and
GordonSmith
committed
HPCC-32669 ECL Watch v9 fix grids missing command bars
fixes an issue where the CommandBar components for some WU and File details tabs were hidden by the contents of the grid contents Signed-off-by: Jeremy Clements <[email protected]>
1 parent f07d1d0 commit ecf4220

12 files changed

+182
-170
lines changed

‎esp/src/src-react/components/Helpers.tsx

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import * as React from "react";
2-
import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link, ScrollablePane, Sticky } from "@fluentui/react";
2+
import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link } from "@fluentui/react";
33
import * as ESPRequest from "src/ESPRequest";
44
import nlsHPCC from "src/nlsHPCC";
55
import { HelperRow, useWorkunitHelpers } from "../hooks/workunit";
6+
import { HolyGrail } from "../layouts/HolyGrail";
67
import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
78
import { ShortVerticalDivider } from "./Common";
89

@@ -223,18 +224,18 @@ export const Helpers: React.FunctionComponent<HelpersProps> = ({
223224
setData(helpers);
224225
}, [helpers]);
225226

226-
return <ScrollablePane>
227-
<Sticky>
228-
<CommandBar items={buttons} farItems={copyButtons} />
229-
</Sticky>
230-
<FluentGrid
231-
data={data}
232-
primaryID={"id"}
233-
alphaNumColumns={{ Value: true }}
234-
columns={columns}
235-
setSelection={setSelection}
236-
setTotal={setTotal}
237-
refresh={refreshTable}
238-
></FluentGrid>
239-
</ScrollablePane>;
227+
return <HolyGrail
228+
header={<CommandBar items={buttons} farItems={copyButtons} />}
229+
main={
230+
<FluentGrid
231+
data={data}
232+
primaryID={"id"}
233+
alphaNumColumns={{ Value: true }}
234+
columns={columns}
235+
setSelection={setSelection}
236+
setTotal={setTotal}
237+
refresh={refreshTable}
238+
></FluentGrid>
239+
}
240+
/>;
240241
};

‎esp/src/src-react/components/InfoGrid.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,7 @@ export const InfoGrid: React.FunctionComponent<InfoGridProps> = ({
236236
}
237237
}, [data.length]);
238238

239-
return <div style={{ height: "100%" }}>
239+
return <div style={{ height: "100%", overflow: "hidden" }}>
240240
<CommandBar items={buttons} farItems={copyButtons} />
241241
<SizeMe monitorHeight >{({ size }) =>
242242
<FluentGrid

‎esp/src/src-react/components/LogViewer.tsx

+8-10
Original file line numberDiff line numberDiff line change
@@ -102,16 +102,14 @@ export const LogViewer: React.FunctionComponent<LogViewerProps> = ({
102102
return <HolyGrail
103103
header={<CommandBar items={buttons} farItems={copyButtons} />}
104104
main={
105-
<div style={{ position: "relative", height: "100%" }}>
106-
<FluentGrid
107-
data={data}
108-
primaryID={"dateTime"}
109-
columns={columns}
110-
setSelection={setSelection}
111-
setTotal={setTotal}
112-
refresh={refreshTable}
113-
></FluentGrid>
114-
</div>
105+
<FluentGrid
106+
data={data}
107+
primaryID={"dateTime"}
108+
columns={columns}
109+
setSelection={setSelection}
110+
setTotal={setTotal}
111+
refresh={refreshTable}
112+
></FluentGrid>
115113
}
116114
/>;
117115
};

‎esp/src/src-react/components/MetricsOptions.tsx

+12-10
Original file line numberDiff line numberDiff line change
@@ -67,16 +67,18 @@ const GridOptions: React.FunctionComponent<GridOptionsProps> = ({
6767
}
6868
}, [selectionHandler, strSelection]);
6969

70-
return <FluentGrid
71-
data={data}
72-
primaryID={"id"}
73-
columns={columns}
74-
selectionMode={SelectionMode.multiple}
75-
setSelection={selectionHandler}
76-
setTotal={setTotal}
77-
refresh={refreshTable}
78-
height={`${innerHeight}px`}
79-
></FluentGrid>;
70+
return <div style={{ position: "relative", height: 400 }}>
71+
<FluentGrid
72+
data={data}
73+
primaryID={"id"}
74+
columns={columns}
75+
selectionMode={SelectionMode.multiple}
76+
setSelection={selectionHandler}
77+
setTotal={setTotal}
78+
refresh={refreshTable}
79+
height={`${innerHeight}px`}
80+
></FluentGrid>
81+
</div>;
8082
};
8183

8284
interface AddLabelProps {

‎esp/src/src-react/components/Resources.tsx

+19-18
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import * as React from "react";
2-
import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link, ScrollablePane, Sticky } from "@fluentui/react";
2+
import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link } from "@fluentui/react";
33
import nlsHPCC from "src/nlsHPCC";
44
import { QuerySortItem } from "src/store/Store";
55
import { useWorkunitResources } from "../hooks/workunit";
66
import { updateParam } from "../util/history";
7+
import { HolyGrail } from "../layouts/HolyGrail";
78
import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
89
import { ShortVerticalDivider } from "./Common";
910
import { IFrame } from "./IFrame";
@@ -108,21 +109,21 @@ export const Resources: React.FunctionComponent<ResourcesProps> = ({
108109
}));
109110
}, [resources, wuid]);
110111

111-
return <ScrollablePane>
112-
<Sticky>
113-
<CommandBar items={buttons} farItems={copyButtons} />
114-
</Sticky>
115-
{preview && webUrl ?
116-
<IFrame src={webUrl} /> :
117-
<FluentGrid
118-
data={data}
119-
primaryID={"DisplayPath"}
120-
alphaNumColumns={{ Value: true }}
121-
sort={sort}
122-
columns={columns}
123-
setSelection={setSelection}
124-
setTotal={setTotal}
125-
refresh={refreshTable}
126-
></FluentGrid>}
127-
</ScrollablePane>;
112+
return <HolyGrail
113+
header={<CommandBar items={buttons} farItems={copyButtons} />}
114+
main={
115+
preview && webUrl ?
116+
<IFrame src={webUrl} /> :
117+
<FluentGrid
118+
data={data}
119+
primaryID={"DisplayPath"}
120+
alphaNumColumns={{ Value: true }}
121+
sort={sort}
122+
columns={columns}
123+
setSelection={setSelection}
124+
setTotal={setTotal}
125+
refresh={refreshTable}
126+
></FluentGrid>
127+
}
128+
/>;
128129
};

‎esp/src/src-react/components/Results.tsx

+17-16
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import * as React from "react";
2-
import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link, Pivot, PivotItem, ScrollablePane, Sticky } from "@fluentui/react";
2+
import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link, Pivot, PivotItem } from "@fluentui/react";
33
import { SizeMe } from "react-sizeme";
44
import nlsHPCC from "src/nlsHPCC";
55
import { QuerySortItem } from "src/store/Store";
66
import { useWorkunitResults } from "../hooks/workunit";
7+
import { HolyGrail } from "../layouts/HolyGrail";
78
import { pivotItemStyle } from "../layouts/pivot";
89
import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
910
import { ShortVerticalDivider } from "./Common";
@@ -141,21 +142,21 @@ export const Results: React.FunctionComponent<ResultsProps> = ({
141142
}));
142143
}, [results]);
143144

144-
return <ScrollablePane>
145-
<Sticky>
146-
<CommandBar items={buttons} farItems={copyButtons} />
147-
</Sticky>
148-
<FluentGrid
149-
data={data}
150-
primaryID={"__hpcc_id"}
151-
alphaNumColumns={{ Name: true, Value: true }}
152-
sort={sort}
153-
columns={columns}
154-
setSelection={setSelection}
155-
setTotal={setTotal}
156-
refresh={refreshTable}
157-
></FluentGrid>
158-
</ScrollablePane >;
145+
return <HolyGrail
146+
header={<CommandBar items={buttons} farItems={copyButtons} />}
147+
main={
148+
<FluentGrid
149+
data={data}
150+
primaryID={"__hpcc_id"}
151+
alphaNumColumns={{ Name: true, Value: true }}
152+
sort={sort}
153+
columns={columns}
154+
setSelection={setSelection}
155+
setTotal={setTotal}
156+
refresh={refreshTable}
157+
></FluentGrid>
158+
}
159+
/>;
159160
};
160161

161162
interface TabbedResultsProps {

‎esp/src/src-react/components/SourceFiles.tsx

+20-17
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import * as React from "react";
2-
import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Image, Link, ScrollablePane, Sticky } from "@fluentui/react";
2+
import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Image, Link } from "@fluentui/react";
33
import * as Utility from "src/Utility";
44
import { QuerySortItem } from "src/store/Store";
55
import nlsHPCC from "src/nlsHPCC";
66
import { useWorkunitSourceFiles } from "../hooks/workunit";
77
import { pushParams } from "../util/history";
8+
import { HolyGrail } from "../layouts/HolyGrail";
89
import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
910
import { Fields } from "./forms/Fields";
1011
import { Filter } from "./forms/Filter";
@@ -131,20 +132,22 @@ export const SourceFiles: React.FunctionComponent<SourceFilesProps> = ({
131132
setData(files);
132133
}, [filter, sourceFiles]);
133134

134-
return <ScrollablePane>
135-
<Sticky>
136-
<CommandBar items={buttons} farItems={copyButtons} />
137-
</Sticky>
138-
<FluentGrid
139-
data={data}
140-
primaryID={"Name"}
141-
alphaNumColumns={{ Value: true }}
142-
sort={sort}
143-
columns={columns}
144-
setSelection={setSelection}
145-
setTotal={setTotal}
146-
refresh={refreshTable}
147-
></FluentGrid>
148-
<Filter showFilter={showFilter} setShowFilter={setShowFilter} filterFields={filterFields} onApply={pushParams} />
149-
</ScrollablePane>;
135+
return <HolyGrail
136+
header={<CommandBar items={buttons} farItems={copyButtons} />}
137+
main={
138+
<div style={{ position: "relative", height: "100%" }}>
139+
<FluentGrid
140+
data={data}
141+
primaryID={"Name"}
142+
alphaNumColumns={{ Value: true }}
143+
sort={sort}
144+
columns={columns}
145+
setSelection={setSelection}
146+
setTotal={setTotal}
147+
refresh={refreshTable}
148+
></FluentGrid>
149+
<Filter showFilter={showFilter} setShowFilter={setShowFilter} filterFields={filterFields} onApply={pushParams} />
150+
</div>
151+
}
152+
/>;
150153
};

‎esp/src/src-react/components/SubFiles.tsx

+19-18
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import * as React from "react";
2-
import { CommandBar, ContextualMenuItemType, FontIcon, ICommandBarItemProps, Link, ScrollablePane, Sticky } from "@fluentui/react";
2+
import { CommandBar, ContextualMenuItemType, FontIcon, ICommandBarItemProps, Link } from "@fluentui/react";
33
import * as ESPLogicalFile from "src/ESPLogicalFile";
44
import nlsHPCC from "src/nlsHPCC";
55
import { QuerySortItem } from "src/store/Store";
66
import * as WsDfu from "src/WsDfu";
77
import { useConfirm } from "../hooks/confirm";
88
import { useFile, useSubfiles } from "../hooks/file";
9+
import { HolyGrail } from "../layouts/HolyGrail";
910
import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
1011
import { ShortVerticalDivider } from "./Common";
1112
import { pushUrl } from "../util/history";
@@ -159,21 +160,21 @@ export const SubFiles: React.FunctionComponent<SubFilesProps> = ({
159160
setUIState(state);
160161
}, [selection]);
161162

162-
return <>
163-
<ScrollablePane>
164-
<Sticky>
165-
<CommandBar items={buttons} farItems={copyButtons} />
166-
</Sticky>
167-
<FluentGrid
168-
data={data}
169-
primaryID={"Name"}
170-
columns={columns}
171-
alphaNumColumns={{ RecordCount: true, Totalsize: true }}
172-
setSelection={setSelection}
173-
setTotal={setTotal}
174-
refresh={refreshTable}
175-
></FluentGrid>
176-
</ScrollablePane >
177-
<DeleteSubfilesConfirm />
178-
</>;
163+
return <HolyGrail
164+
header={<CommandBar items={buttons} farItems={copyButtons} />}
165+
main={
166+
<div style={{ position: "relative", height: "100%" }}>
167+
<FluentGrid
168+
data={data}
169+
primaryID={"Name"}
170+
columns={columns}
171+
alphaNumColumns={{ RecordCount: true, Totalsize: true }}
172+
setSelection={setSelection}
173+
setTotal={setTotal}
174+
refresh={refreshTable}
175+
></FluentGrid>
176+
<DeleteSubfilesConfirm />
177+
</div>
178+
}
179+
/>;
179180
};

‎esp/src/src-react/components/SuperFiles.tsx

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import * as React from "react";
2-
import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link, ScrollablePane, Sticky } from "@fluentui/react";
2+
import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link } from "@fluentui/react";
33
import nlsHPCC from "src/nlsHPCC";
44
import { QuerySortItem } from "src/store/Store";
55
import { useFile } from "../hooks/file";
6+
import { HolyGrail } from "../layouts/HolyGrail";
67
import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
78
import { ShortVerticalDivider } from "./Common";
89

@@ -88,18 +89,18 @@ export const SuperFiles: React.FunctionComponent<SuperFilesProps> = ({
8889
}
8990
}, [file]);
9091

91-
return <ScrollablePane>
92-
<Sticky>
93-
<CommandBar items={buttons} farItems={copyButtons} />
94-
</Sticky>
95-
<FluentGrid
96-
data={data}
97-
primaryID={"Name"}
98-
sort={sort}
99-
columns={columns}
100-
setSelection={setSelection}
101-
setTotal={setTotal}
102-
refresh={refreshTable}
103-
></FluentGrid>
104-
</ScrollablePane>;
92+
return <HolyGrail
93+
header={<CommandBar items={buttons} farItems={copyButtons} />}
94+
main={
95+
<FluentGrid
96+
data={data}
97+
primaryID={"Name"}
98+
sort={sort}
99+
columns={columns}
100+
setSelection={setSelection}
101+
setTotal={setTotal}
102+
refresh={refreshTable}
103+
></FluentGrid>
104+
}
105+
/>;
105106
};

0 commit comments

Comments
 (0)