Skip to content

Commit

Permalink
[GEN-1389] feat: filter sources by status and message (#1492)
Browse files Browse the repository at this point in the history 
add option to filter sources table with sources with error only and
group them by messages
  • Loading branch information
@alonkeyval
alonkeyval authored Sep 9, 2024
1 parent 3c63617 commit 8052e3d
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 8 deletions.
11 changes: 7 additions & 4 deletions frontend/webapp/components/overview/sources/managed.sources.table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { SourcesTableRow } from './sources.table.row';
import { SourcesTableHeader } from './sources.table.header';
import { EmptyList } from '@/components/lists';
import { OVERVIEW } from '@/utils';
import { ConnectionsIcons, DeleteSource } from '@/components';

import { ModalPositionX, ModalPositionY } from '@/design.system/modal/types';

type TableProps = {
Expand All @@ -16,8 +16,9 @@ type TableProps = {
filterSourcesByKind?: (kinds: string[]) => void;
filterSourcesByNamespace?: (namespaces: string[]) => void;
filterSourcesByLanguage?: (languages: string[]) => void;
toggleActionStatus?: (ids: string[], disabled: boolean) => void;
deleteSourcesHandler?: (sources: ManagedSource[]) => void;
filterByConditionStatus?: (status: 'All' | 'True' | 'False') => void;
filterByConditionMessage: (message: string[]) => void;
};

const SELECT_ALL_CHECKBOX = 'select_all';
Expand All @@ -27,11 +28,12 @@ export const ManagedSourcesTable: React.FC<TableProps> = ({
namespaces,
onRowClick,
sortSources,
toggleActionStatus,
filterSourcesByKind,
deleteSourcesHandler,
filterSourcesByNamespace,
filterSourcesByLanguage,
filterByConditionStatus,
filterByConditionMessage,
}) => {
const [selectedCheckbox, setSelectedCheckbox] = useState<string[]>([]);
const [showModal, setShowModal] = useState(false);
Expand Down Expand Up @@ -94,13 +96,14 @@ export const ManagedSourcesTable: React.FC<TableProps> = ({
data={data}
namespaces={namespaces}
sortSources={sortSources}
toggleActionStatus={toggleActionStatus}
filterSourcesByKind={filterSourcesByKind}
filterSourcesByNamespace={filterSourcesByNamespace}
filterSourcesByLanguage={filterSourcesByLanguage}
selectedCheckbox={selectedCheckbox}
onSelectedCheckboxChange={onSelectedCheckboxChange}
deleteSourcesHandler={() => setShowModal(true)}
filterByConditionStatus={filterByConditionStatus}
filterByConditionMessage={filterByConditionMessage}
/>
{showModal && (
<KeyvalModal
Expand Down
68 changes: 66 additions & 2 deletions frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import {
ActionsGroup,
KeyvalCheckbox,
KeyvalLink,
KeyvalSwitch,
KeyvalText,
} from '@/design.system';
import { ManagedSource, Namespace } from '@/types';
import { UnFocusSourcesIcon } from '@keyval-dev/design-system';
import { useSources } from '@/hooks';

enum K8SSourceTypes {
DEPLOYMENT = 'deployment',
Expand Down Expand Up @@ -55,11 +57,12 @@ interface ActionsTableHeaderProps {
sortSources?: (condition: string) => void;
filterSourcesByKind?: (kinds: string[]) => void;
filterSourcesByNamespace?: (namespaces: string[]) => void;
toggleActionStatus?: (ids: string[], disabled: boolean) => void;
selectedCheckbox: string[];
onSelectedCheckboxChange: (id: string) => void;
deleteSourcesHandler: () => void;
filterSourcesByLanguage?: (languages: string[]) => void;
filterByConditionStatus?: (status: 'All' | 'True' | 'False') => void;
filterByConditionMessage: (message: string[]) => void;
}

export function SourcesTableHeader({
Expand All @@ -72,9 +75,13 @@ export function SourcesTableHeader({
deleteSourcesHandler,
selectedCheckbox,
onSelectedCheckboxChange,
filterByConditionStatus,
filterByConditionMessage,
}: ActionsTableHeaderProps) {
const [currentSortId, setCurrentSortId] = useState('');
const [groupNamespaces, setGroupNamespaces] = useState<string[]>([]);
const [showSourcesWithIssues, setShowSourcesWithIssues] = useState(false);
const [groupErrorMessage, setGroupErrorMessage] = useState<string[]>([]);
const [groupLanguages, setGroupLanguages] = useState<string[]>([
'javascript',
'python',
Expand All @@ -88,6 +95,20 @@ export function SourcesTableHeader({
K8SSourceTypes.DAEMON_SET,
]);

const { groupErrorMessages } = useSources();

useEffect(() => {
if (!filterByConditionStatus) {
return;
}

setGroupErrorMessage(groupErrorMessages());

showSourcesWithIssues
? filterByConditionStatus('False')
: filterByConditionStatus('All');
}, [showSourcesWithIssues, data]);

useEffect(() => {
if (namespaces) {
setGroupNamespaces(
Expand Down Expand Up @@ -140,6 +161,21 @@ export function SourcesTableHeader({
filterSourcesByLanguage && filterSourcesByLanguage(newGroup);
}

function onErrorClick(message: string) {
let newGroup: string[] = [];
if (groupErrorMessage.includes(message)) {
setGroupErrorMessage(
groupErrorMessage.filter((item) => item !== message)
);
newGroup = groupErrorMessage.filter((item) => item !== message);
} else {
setGroupErrorMessage([...groupErrorMessage, message]);
newGroup = [...groupErrorMessage, message];
}

filterByConditionMessage(newGroup);
}

const sourcesGroups = useMemo(() => {
if (!namespaces) return [];

Expand All @@ -161,7 +197,7 @@ export function SourcesTableHeader({
totalNamespacesWithApps === 1,
}));

return [
const actionsGroup = [
{
label: 'Language',
subTitle: 'Filter',
Expand Down Expand Up @@ -323,6 +359,24 @@ export function SourcesTableHeader({
condition: true,
},
];

if (showSourcesWithIssues) {
actionsGroup.unshift({
label: 'Error',
subTitle: 'Filter by error message',
condition: true,
items: groupErrorMessages().map((item) => ({
label: item,
onClick: () => onErrorClick(item),
id: item,
selected: groupErrorMessage.includes(item),
disabled:
groupErrorMessage.length === 1 && groupErrorMessage.includes(item),
})),
});
}

return actionsGroup;
}, [namespaces, groupNamespaces, data]);

return (
Expand All @@ -336,6 +390,16 @@ export function SourcesTableHeader({
<KeyvalText size={14} weight={600} color={theme.text.white}>
{`${data.length} ${OVERVIEW.MENU.SOURCES}`}
</KeyvalText>

{groupErrorMessage.length > 0 && (
<KeyvalSwitch
toggle={showSourcesWithIssues}
handleToggleChange={() =>
setShowSourcesWithIssues(!showSourcesWithIssues)
}
label={'Show Sources with Errors'}
/>
)}
{selectedCheckbox.length > 0 && (
<KeyvalLink
onClick={deleteSourcesHandler}
Expand Down
8 changes: 6 additions & 2 deletions frontend/webapp/containers/main/sources/managed/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ export function ManagedSourcesContainer() {
filterSourcesByLanguage,
instrumentedNamespaces,
filterSourcesByNamespace,
filterByConditionStatus,
filterByConditionMessage,
} = useSources();

useEffect(() => {
Expand Down Expand Up @@ -119,12 +121,14 @@ export function ManagedSourcesContainer() {
<ManagedSourcesTable
sortSources={sortSources}
onRowClick={handleEditSource}
deleteSourcesHandler={deleteSourcesHandler}
namespaces={instrumentedNamespaces}
filterSourcesByKind={filterSourcesByKind}
filterSourcesByLanguage={filterSourcesByLanguage}
filterByConditionStatus={filterByConditionStatus}
deleteSourcesHandler={deleteSourcesHandler}
data={searchInput ? filterSources() : sources}
filterSourcesByLanguage={filterSourcesByLanguage}
filterSourcesByNamespace={filterSourcesByNamespace}
filterByConditionMessage={filterByConditionMessage}
/>
</Content>
</SourcesContainer>
Expand Down
48 changes: 48 additions & 0 deletions frontend/webapp/hooks/sources/useSources.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,51 @@ export function useSources() {
setSortedSources(filtered);
}

function filterByConditionMessage(message: string[]) {
const sourcesWithCondition = sources?.filter((deployment) =>
deployment.instrumented_application_details.conditions.some(
(condition) => condition.status === 'False'
)
);

const filteredSources = sourcesWithCondition?.filter((deployment) =>
deployment.instrumented_application_details.conditions.some((condition) =>
message.includes(condition.message)
)
);

setSortedSources(filteredSources || []);
}

const filterByConditionStatus = (status: 'All' | 'True' | 'False') => {
if (status === 'All') {
setSortedSources(sources);
return;
}

const filteredSources = sources?.filter((deployment) =>
deployment.instrumented_application_details.conditions.some(
(condition) => condition.status === status
)
);

setSortedSources(filteredSources || []);
};

const groupErrorMessages = (): string[] => {
const errorMessagesSet: Set<string> = new Set();

sources?.forEach((deployment) => {
deployment.instrumented_application_details?.conditions
.filter((condition) => condition.status === 'False')
.forEach((condition) => {
errorMessagesSet.add(condition.message); // Using Set to avoid duplicates
});
});

return Array.from(errorMessagesSet);
};

return {
upsertSources,
refetchSources,
Expand All @@ -187,5 +232,8 @@ export function useSources() {
instrumentedNamespaces,
namespaces: namespaces?.namespaces || [],
deleteSourcesHandler,
filterByConditionStatus,
groupErrorMessages,
filterByConditionMessage,
};
}

0 comments on commit 8052e3d

Please sign in to comment.