Skip to content

Commit

Permalink
HPCC-31931 Manual copy/paste of WU errors
Browse files Browse the repository at this point in the history
Fix flicker + poor layout of the error/warning pane.

Signed-off-by: Gordon Smith <[email protected]>
  • Loading branch information
GordonSmith committed Jun 20, 2024
1 parent 54c98ff commit 0e0849e
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 40 deletions.
51 changes: 34 additions & 17 deletions esp/src/src-react/components/InfoGrid.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from "react";
import { Checkbox, CommandBar, ICommandBarItemProps, Link } from "@fluentui/react";
import { Checkbox, CommandBar, ICommandBarItemProps, Link, SelectionMode } from "@fluentui/react";
import { SizeMe } from "react-sizeme";
import { formatCost, formatTwoDigits } from "src/Session";
import nlsHPCC from "src/nlsHPCC";
Expand Down Expand Up @@ -123,6 +123,11 @@ export const InfoGrid: React.FunctionComponent<InfoGridProps> = ({
return <><span>{info?.prefix}<Link style={{ marginRight: 3 }} href={`#/workunits/${wuid}/metrics/sg${info.subgraphID}`}>{txt}</Link>{info?.message}</span></>;
}
return Message;
},
fluentColumn: {
flexGrow: 1,
minWidth: 320,
isResizable: true
}
},
Column: { label: nlsHPCC.Col, width: 36 },
Expand All @@ -133,7 +138,14 @@ export const InfoGrid: React.FunctionComponent<InfoGridProps> = ({
return activityId ? <Link href={`#/workunits/${wuid}/metrics/a${activityId}`}>a{activityId}</Link> : "";
}
},
FileName: { label: nlsHPCC.FileName, width: 360 }
FileName: {
label: nlsHPCC.FileName,
fluentColumn: {
flexGrow: 2,
minWidth: 320,
isResizable: true
}
}
};
}, [wuid]);

Expand Down Expand Up @@ -210,7 +222,8 @@ export const InfoGrid: React.FunctionComponent<InfoGridProps> = ({
});
setData(filteredExceptions);
setFilterCounts(filterCounts);
}, [costChecked, errorChecked, errors, infoChecked, otherChecked, warningChecked]);
setSelection(filteredExceptions);
}, [costChecked, errorChecked, errors, infoChecked, otherChecked, setSelection, warningChecked]);

React.useEffect(() => {
if (data.length) {
Expand All @@ -224,19 +237,23 @@ export const InfoGrid: React.FunctionComponent<InfoGridProps> = ({
}
}, [data.length]);

return <SizeMe monitorHeight>{({ size }) =>
<div style={{ height: "100%" }}>
<CommandBar items={buttons} farItems={copyButtons} />
<div style={pivotItemStyle(size)}>
<FluentGrid
data={data}
primaryID={"id"}
columns={columns}
setSelection={setSelection}
setTotal={setTotal}
refresh={refreshTable}
></FluentGrid>
return <div style={{ height: "100%", overflowY: "hidden" }}>
<CommandBar items={buttons} farItems={copyButtons} />
<SizeMe monitorHeight >{({ size }) =>
<div style={{ height: "100%", overflowY: "hidden" }}>
<div style={{ ...pivotItemStyle(size), overflowY: "hidden" }}>
<FluentGrid
data={data}
primaryID={"id"}
columns={columns}
setSelection={_ => { }}
setTotal={setTotal}
refresh={refreshTable}
height={`${size.height - (44 + 8 + 45 + 12)}px`}
selectionMode={SelectionMode.none}
></FluentGrid>
</div>
</div>
</div>
}</SizeMe>;
}</SizeMe>
</div>;
};
72 changes: 49 additions & 23 deletions esp/src/src-react/components/controls/Grid.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from "react";
import { DetailsList, DetailsListLayoutMode, Dropdown, IColumn as _IColumn, ICommandBarItemProps, IDetailsHeaderProps, IDetailsListStyles, mergeStyleSets, Selection, Stack, TooltipHost, TooltipOverflowMode, IDetailsList, IRenderFunction, IDetailsRowProps } from "@fluentui/react";
import { DetailsList, DetailsListLayoutMode, Dropdown, IColumn as _IColumn, ICommandBarItemProps, IDetailsHeaderProps, IDetailsListStyles, mergeStyleSets, Selection, Stack, TooltipHost, TooltipOverflowMode, IDetailsList, IRenderFunction, IDetailsRowProps, SelectionMode, ConstrainMode } from "@fluentui/react";
import { Pagination } from "@fluentui/react-experiments/lib/Pagination";
import { useConst, useId, useMount, useOnEvent } from "@fluentui/react-hooks";
import { BaseStore, Memory, QueryRequest, QuerySortItem } from "src/store/Memory";
Expand Down Expand Up @@ -34,6 +34,7 @@ export interface FluentColumn {
formatter?: (value: any, row: any) => any;
csvFormatter?: (value: any, row: any) => string;
className?: (value: any, row: any) => string;
fluentColumn?: Partial<_IColumn>;
}

export type FluentColumns = { [key: string]: FluentColumn };
Expand Down Expand Up @@ -72,25 +73,42 @@ function columnsAdapter(columns: FluentColumns, columnWidths: Map<string, any>):
const column = columns[key];
const width = columnWidths.get(key) ?? column.width;
if (column?.selectorType === undefined && column?.hidden !== true) {
retVal.push({
key,
name: column.label ?? key,
fieldName: column.field ?? key,
minWidth: width ?? 70,
maxWidth: width,
isResizable: true,
isSorted: false,
isSortedDescending: false,
iconName: column.headerIcon,
isIconOnly: !!column.headerIcon,
data: column,
styles: { root: { width, ":hover": { cursor: column?.sortable !== false ? "pointer" : "default" } } },
onRender: (item: any, index: number, col: IColumn) => {
col.minWidth = column.width ?? 70;
col.maxWidth = column.width;
return tooltipItemRenderer(item, index, col);
}
} as IColumn);
if (column?.fluentColumn) {
retVal.push({
key,
name: column.label ?? key,
fieldName: column.field ?? key,
iconName: column.headerIcon,
isIconOnly: !!column.headerIcon,
data: column,
styles: { root: { width, ":hover": { cursor: column?.sortable !== false ? "pointer" : "default" } } },
onRender: (item: any, index: number, col: IColumn) => {
col.minWidth = column.width ?? 70;
return tooltipItemRenderer(item, index, col);
},
...column.fluentColumn
} as IColumn);
} else {
retVal.push({
key,
name: column.label ?? key,
fieldName: column.field ?? key,
minWidth: width ?? 70,
maxWidth: width,
isResizable: true,
isSorted: false,
isSortedDescending: false,
iconName: column.headerIcon,
isIconOnly: !!column.headerIcon,
data: column,
styles: { root: { width, ":hover": { cursor: column?.sortable !== false ? "pointer" : "default" } } },
onRender: (item: any, index: number, col: IColumn) => {
col.minWidth = column.width ?? 70;
col.maxWidth = column.width;
return tooltipItemRenderer(item, index, col);
}
} as IColumn);
}
}
}
return retVal;
Expand Down Expand Up @@ -191,6 +209,7 @@ interface FluentStoreGridProps {
columns: FluentColumns,
height: string,
refresh: RefreshTable,
selectionMode?: SelectionMode,
setSelection: (selection: any[]) => void,
setTotal: (total: number) => void,
onRenderRow?: IRenderFunction<IDetailsRowProps>
Expand All @@ -205,6 +224,7 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
columns,
height,
refresh,
selectionMode = SelectionMode.multiple,
setSelection,
setTotal,
onRenderRow
Expand Down Expand Up @@ -315,7 +335,8 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
compact={true}
items={items}
columns={fluentColumns}
layoutMode={DetailsListLayoutMode.justified}
layoutMode={DetailsListLayoutMode.fixedColumns}
constrainMode={ConstrainMode.unconstrained}
selection={selectionHandler}
isSelectedOnFocus={false}
selectionPreservedOnEmptyClick={true}
Expand All @@ -324,6 +345,7 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
onColumnResize={columnResize}
onRenderRow={onRenderRow}
styles={gridStyles(height)}
selectionMode={selectionMode}
/>
</div>;
};
Expand All @@ -335,6 +357,7 @@ interface FluentGridProps {
sort?: QuerySortItem,
columns: FluentColumns,
height?: string,
selectionMode?: SelectionMode,
setSelection: (selection: any[]) => void,
setTotal: (total: number) => void,
refresh: RefreshTable,
Expand All @@ -348,6 +371,7 @@ export const FluentGrid: React.FunctionComponent<FluentGridProps> = ({
sort,
columns,
height,
selectionMode = SelectionMode.multiple,
setSelection,
setTotal,
refresh,
Expand All @@ -362,7 +386,7 @@ export const FluentGrid: React.FunctionComponent<FluentGridProps> = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [constStore, data, /*refresh*/]);

return <FluentStoreGrid store={constStore} columns={columns} sort={sort} start={0} count={data.length} height={height} setSelection={setSelection} setTotal={setTotal} refresh={refresh} onRenderRow={onRenderRow}>
return <FluentStoreGrid store={constStore} columns={columns} sort={sort} start={0} count={data.length} height={height} selectionMode={selectionMode} setSelection={setSelection} setTotal={setTotal} refresh={refresh} onRenderRow={onRenderRow}>
</FluentStoreGrid>;
};

Expand All @@ -375,6 +399,7 @@ interface FluentPagedGridProps {
total: number,
columns: FluentColumns,
height?: string,
selectionMode?: SelectionMode,
setSelection: (selection: any[]) => void,
setTotal: (total: number) => void,
refresh: RefreshTable,
Expand All @@ -390,6 +415,7 @@ export const FluentPagedGrid: React.FunctionComponent<FluentPagedGridProps> = ({
total,
columns,
height,
selectionMode = SelectionMode.multiple,
setSelection,
setTotal,
refresh,
Expand All @@ -414,7 +440,7 @@ export const FluentPagedGrid: React.FunctionComponent<FluentPagedGridProps> = ({
setPage(_page);
}, [pageNum]);

return <FluentStoreGrid store={store} query={query} columns={columns} sort={sortBy} start={page * pageSize} count={pageSize} height={height} setSelection={setSelection} setTotal={setTotal} refresh={refresh} onRenderRow={onRenderRow}>
return <FluentStoreGrid store={store} query={query} columns={columns} sort={sortBy} start={page * pageSize} count={pageSize} height={height} selectionMode={selectionMode} setSelection={setSelection} setTotal={setTotal} refresh={refresh} onRenderRow={onRenderRow}>
</FluentStoreGrid>;
};

Expand Down

0 comments on commit 0e0849e

Please sign in to comment.