bunny-lab/Borealis-Github-Replica
1
0
Fork 0
mirror of https://github.com/bunny-lab-io/Borealis.git synced 2025-12-15 16:55:48 -07:00
Code Issues Packages Projects Releases Wiki Activity

Additional UI Tweaks for Filter Editor Results Tab

Browse Source
This commit is contained in:
Nicole Rappe
2025-11-28 15:32:42 -07:00
parent ab8af18457
commit 6e0f985a19
1 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
Data/Engine/web-interface/src/Devices/Filters/Filter_Editor.jsx
View File

@@ -23,7 +23,6 @@ import {
Add as AddIcon, Add as AddIcon,
Remove as RemoveIcon, Remove as RemoveIcon,
Cached as CachedIcon, Cached as CachedIcon,
PlayArrow as PlayIcon,
CheckCircle as CheckCircleIcon, CheckCircle as CheckCircleIcon,
HighlightOff as HighlightOffIcon, HighlightOff as HighlightOffIcon,
} from "@mui/icons-material"; } from "@mui/icons-material";
@@ -141,7 +140,7 @@ const TabPanel = ({ value, active, children }) => {
); );
}; };
const AUTO_SIZE_COLUMNS = ["status", "site", "hostname", "description", "type", "os"]; const AUTO_SIZE_COLUMNS = ["status", "site", "hostname", "description", "type"];
const resolveApplyAll = (filter) => Boolean(filter?.applyToAllSites ?? filter?.apply_to_all_sites); const resolveApplyAll = (filter) => Boolean(filter?.applyToAllSites ?? filter?.apply_to_all_sites);
@@ -436,12 +435,23 @@ export default function DeviceFilterEditor({ initialFilter, onCancel, onSaved, o
} }
}, [autoSizeGrid, evaluateCriteria]); }, [autoSizeGrid, evaluateCriteria]);
const applyCriteriaRef = useRef(applyCriteria);
useEffect(() => {
applyCriteriaRef.current = applyCriteria;
}, [applyCriteria]);
useEffect(() => {
if (tab === "results") {
applyCriteriaRef.current?.();
}
}, [tab]);
const previewColumns = useMemo( const previewColumns = useMemo(
() => [ () => [
{ {
field: "status", field: "status",
headerName: "Status", headerName: "Status",
minWidth: 120, minWidth: 100,
cellRenderer: (params) => { cellRenderer: (params) => {
const status = params.value || ""; const status = params.value || "";
const theme = statusTokenTheme[status] || statusTokenTheme.default; const theme = statusTokenTheme[status] || statusTokenTheme.default;
@@ -465,7 +475,7 @@ export default function DeviceFilterEditor({ initialFilter, onCancel, onSaved, o
}, },
cellClass: "auto-col-tight", cellClass: "auto-col-tight",
}, },
{ field: "site", headerName: "Site", minWidth: 140, cellClass: "auto-col-tight" }, { field: "site", headerName: "Site", minWidth: 180, cellClass: "auto-col-tight" },
{ {
field: "hostname", field: "hostname",
headerName: "Hostname", headerName: "Hostname",
@@ -499,12 +509,13 @@ export default function DeviceFilterEditor({ initialFilter, onCancel, onSaved, o
); );
}, },
}, },
{ field: "description", headerName: "Description", minWidth: 220, cellClass: "auto-col-tight" }, { field: "description", headerName: "Description", minWidth: 260, cellClass: "auto-col-tight" },
{ field: "type", headerName: "Device Type", minWidth: 140, cellClass: "auto-col-tight" }, { field: "type", headerName: "Device Type", minWidth: 160, cellClass: "auto-col-tight" },
{ {
field: "os", field: "os",
headerName: "OS", headerName: "OS",
minWidth: 170, minWidth: 200,
flex: 1,
cellClass: "auto-col-tight", cellClass: "auto-col-tight",
cellRenderer: (params) => { cellRenderer: (params) => {
const value = params.value || ""; const value = params.value || "";
@@ -529,7 +540,6 @@ export default function DeviceFilterEditor({ initialFilter, onCancel, onSaved, o
sortable: true, sortable: true,
filter: "agTextColumnFilter", filter: "agTextColumnFilter",
resizable: true, resizable: true,
flex: 1,
cellClass: "auto-col-tight", cellClass: "auto-col-tight",
suppressMenu: true, suppressMenu: true,
}), }),
@@ -1160,7 +1170,7 @@ export default function DeviceFilterEditor({ initialFilter, onCancel, onSaved, o
<Box> <Box>
<Typography sx={{ fontWeight: 700 }}>Results</Typography> <Typography sx={{ fontWeight: 700 }}>Results</Typography>
<Typography sx={{ color: AURORA_SHELL.subtext, fontSize: "0.95rem" }}> <Typography sx={{ color: AURORA_SHELL.subtext, fontSize: "0.95rem" }}>
Apply criteria to preview matching devices. Opening this tab auto-applies the current criteria to preview matching devices.
</Typography> </Typography>
{previewAppliedAt && ( {previewAppliedAt && (
<Typography sx={{ color: AURORA_SHELL.subtext, fontSize: "0.85rem" }}> <Typography sx={{ color: AURORA_SHELL.subtext, fontSize: "0.85rem" }}>
@@ -1171,15 +1181,6 @@ export default function DeviceFilterEditor({ initialFilter, onCancel, onSaved, o
<Typography sx={{ color: "#ffb4b4", fontSize: "0.9rem", mt: 0.5 }}>{previewError}</Typography> <Typography sx={{ color: "#ffb4b4", fontSize: "0.9rem", mt: 0.5 }}>{previewError}</Typography>
) : null} ) : null}
</Box> </Box>
<Button
variant="contained"
startIcon={previewLoading ? <CachedIcon /> : <PlayIcon />}
onClick={applyCriteria}
disabled={previewLoading}
sx={gradientButtonSx}
>
{previewLoading ? "Applying..." : "Apply Criteria"}
</Button>
</Stack> </Stack>
<Box <Box