Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #1764, created rows/page navigation #2328

Closed
wants to merge 2 commits into from
Closed

Fixes #1764, created rows/page navigation #2328

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c437c6c
Issue #1764, created rows/page navigation
SaniyaKalamkar Jan 14, 2025
a9582cd
Merge branch 'main' into pageNav
SaniyaKalamkar Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 99 additions & 44 deletions ui/src/components/common/SlidingSidebar/partials/K8sEvents/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,13 @@ import { useNamespaceK8sEventsFetch } from "../../../../../utils/fetchWrappers/n

import "./style.css";

const MAX_PAGE_SIZE = 6;
const DEFAULT_PAGE_SIZE_OPTIONS = [2, 4, 6, 8, 10, 15, 20];

const DEFAULT_FILTER_VALUE = "All";




export interface K8sEventsProps {
namespaceId: string;
pipelineId?: string;
Expand Down Expand Up @@ -49,6 +53,7 @@ export function K8sEvents({
useState<string>(DEFAULT_FILTER_VALUE);
const [page, setPage] = useState(1);
const [totalPages, setTotalPages] = useState(0);
const [pageSize, setPageSize] = useState<number>(6);
const [typeFilter, setTypeFilter] = useState<string | undefined>();
const [filteredEvents, setFilteredEvents] = useState<K8sEvent[]>([]);
const { data, loading, error } = useNamespaceK8sEventsFetch({
Expand All @@ -58,7 +63,6 @@ export function K8sEvents({
vertex: selectedVertex === DEFAULT_FILTER_VALUE ? vertexId : selectedVertex,
});

// Update filtered events based on page selected and filter
useEffect(() => {
if (!data) {
setFilteredEvents([]);
Expand All @@ -75,7 +79,7 @@ export function K8sEvents({

// Break list into pages
const pages = filtered.reduce((resultArray: any[], item, index) => {
const chunkIndex = Math.floor(index / MAX_PAGE_SIZE);
const chunkIndex = Math.floor(index / pageSize);
if (!resultArray[chunkIndex]) {
resultArray[chunkIndex] = [];
}
Expand All @@ -84,10 +88,8 @@ export function K8sEvents({
}, []);

if (page > pages.length) {
// Reset to page 1 if current page is greater than total pages after filtering
setPage(1);
}
// Set filtered namespaces with current page
setFilteredEvents(pages[page - 1] || []);
setTotalPages(pages.length);
}, [data, page, typeFilter]);
Expand Down Expand Up @@ -120,53 +122,106 @@ export function K8sEvents({
},
[]
);

const handlePageSizeChange = useCallback(
(event: React.ChangeEvent<{ value: unknown }>) => {
const value = Number(event.target.value);
setPageSize(value);
setPage(1);
},
[]
);



const typeCounts = useMemo(() => {
return (
<ToggleButtonGroup
value={typeFilter}
exclusive
onChange={handleTypeFilterChange}
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "1rem",
}}
>
<ToggleButton
value="normal"
aria-label="normal events filter"
data-testid="normal-filter"
<ToggleButtonGroup
value={typeFilter}
exclusive
onChange={handleTypeFilterChange}
>
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
<ToggleButton
value="normal"
aria-label="normal events filter"
data-testid="normal-filter"
>
<span className="namespace-k8s-type-count-text">Normal</span>
<div className="namespace-k8s-type-count-badge normal">
{data?.normalCount || 0}
</div>
</Box>
</ToggleButton>
<ToggleButton
value="warning"
aria-label="warning events filter"
data-testid="warn-filter"
>
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<span className="namespace-k8s-type-count-text">Normal</span>
<div className="namespace-k8s-type-count-badge normal">
{data?.normalCount || 0}
</div>
</Box>
</ToggleButton>
<ToggleButton
value="warning"
aria-label="warning events filter"
data-testid="warn-filter"
>
<span className="namespace-k8s-type-count-text">Warning</span>
<div className="namespace-k8s-type-count-badge warn">
{data?.warningCount || 0}
</div>
</Box>
</ToggleButton>
</ToggleButtonGroup>
<Box
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<span className="namespace-k8s-type-count-text">Warning</span>
<div className="namespace-k8s-type-count-badge warn">
{data?.warningCount || 0}
</div>
</Box>
</ToggleButton>
</ToggleButtonGroup>

{}
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
}}
>
<label style={{ fontSize: "1.4rem", color: "#6B6C72" }}>
Rows Per Page:
</label>
<Select
value={pageSize}
onChange={(event) => {
const newSize = Number(event.target.value);
setPageSize(newSize);
setPage(1);
}}
sx={{
fontSize: "1.6rem",
background: "#fff",
border: "1px solid #6B6C72",
height: "3.4rem",
}}
>
{DEFAULT_PAGE_SIZE_OPTIONS.map((size) => (
<MenuItem key={size} value={size}>
{size}
</MenuItem>
))}
</Select>
</Box>
</Box>
);
}, [data, typeFilter, handleTypeFilterChange]);
}, [data, typeFilter, pageSize, handleTypeFilterChange]);

const table = useMemo(() => {
if (loading) {
Expand Down
Loading