= () => {
- const { t } = useTranslation();
- return ;
-};
-
const Group: React.FC<{ value: string }> = ({ value }) => {
if (!value) {
return <>-;
@@ -134,42 +130,116 @@ const Group: React.FC<{ value: string }> = ({ value }) => {
);
};
-
-const tableClasses = [
- 'pf-v6-u-w-25-on-2xl',
- 'pf-v6-u-w-16-on-2xl',
- 'pf-v6-u-w-16-on-lg pf-v6-u-w-10-on-2xl',
- 'pf-m-hidden pf-m-visible-on-xl pf-v6-u-w-16-on-lg',
- 'pf-m-hidden pf-m-visible-on-lg',
+const TableColumnInfo = [
+ { id: 'kind' },
+ { id: 'group' },
+ { id: 'version' },
+ { id: 'namespaced' },
+ { id: 'description' },
];
-const APIResourceRows = ({ componentProps: { data } }) =>
- _.map(data, (model: K8sKind) => [
- {
- title: ,
- props: { className: tableClasses[0] },
- },
- {
- title: (
-
-
-
- ),
- props: { className: tableClasses[1] },
- },
- {
- title: model.apiVersion,
- props: { className: tableClasses[2] },
- },
- {
- title: model.namespaced ? i18next.t('public~true') : i18next.t('public~false'),
- props: { className: tableClasses[3] },
- },
- {
- title: {getResourceDescription(model)}
,
- props: { className: tableClasses[4] },
- },
- ]);
+const getAPIExplorerDataViewRows: GetDataViewRows = (data, columns) => {
+ return data.map(({ obj: model }) => {
+ const rowCells = {
+ [TableColumnInfo[0].id]: {
+ cell: ,
+ props: getNameCellProps(model.kind),
+ },
+ [TableColumnInfo[1].id]: {
+ cell: (
+
+
+
+ ),
+ props: {
+ modifier: 'nowrap',
+ },
+ },
+ [TableColumnInfo[2].id]: {
+ cell: model.apiVersion,
+ },
+ [TableColumnInfo[3].id]: {
+ cell: model.namespaced ? i18next.t('public~true') : i18next.t('public~false'),
+ props: {
+ modifier: 'nowrap',
+ props: {
+ width: 20,
+ },
+ },
+ },
+ [TableColumnInfo[4].id]: {
+ cell: {getResourceDescription(model)}
,
+ props: {
+ modifier: 'wrap',
+ width: 40,
+ },
+ },
+ };
+
+ return columns.map(({ id }) => {
+ const cell = rowCells[id]?.cell || DASH;
+ return {
+ id,
+ props: rowCells[id]?.props,
+ cell,
+ };
+ });
+ });
+};
+
+const useAPIExplorerColumns = () => {
+ const { t } = useTranslation();
+ const columns = React.useMemo(() => {
+ return [
+ {
+ title: t('public~Kind'),
+ id: TableColumnInfo[0].id,
+ sort: 'kind',
+ props: {
+ ...cellIsStickyProps,
+ modifier: 'nowrap',
+ 'data-test-id': 'api-kind-header',
+ },
+ },
+ {
+ title: t('public~Group'),
+ id: TableColumnInfo[1].id,
+ sort: 'apiGroup',
+ props: {
+ modifier: 'nowrap',
+ 'data-test-id': 'api-group-header',
+ },
+ },
+ {
+ title: t('public~Version'),
+ id: TableColumnInfo[2].id,
+ sort: 'apiVersion',
+ props: {
+ modifier: 'nowrap',
+ 'data-test-id': 'api-version-header',
+ },
+ },
+ {
+ title: t('public~Namespaced'),
+ id: TableColumnInfo[3].id,
+ sort: 'namespaced',
+ props: {
+ modifier: 'nowrap',
+ 'data-test-id': 'api-namespaced-header',
+ },
+ },
+ {
+ title: t('public~Description'),
+ id: TableColumnInfo[4].id,
+ props: {
+ modifier: 'nowrap',
+ 'data-test-id': 'api-description-header',
+ },
+ },
+ ];
+ }, [t]);
+ return columns;
+};
const stateToProps = ({ k8s }) => ({
models: k8s.getIn(['RESOURCES', 'models']),
@@ -185,24 +255,14 @@ const APIResourcesList = compose(
const TEXT_FILTER_PARAM = 'q';
const SCOPE_PARAM = 's';
const search = new URLSearchParams(location.search);
- // Differentiate between an empty group and an unspecified param.
const groupFilter = search.has(GROUP_PARAM) ? search.get(GROUP_PARAM) : ALL;
const versionFilter = search.get(VERSION_PARAM) || ALL;
const textFilter = search.get(TEXT_FILTER_PARAM) || '';
const scopeFilter = search.get(SCOPE_PARAM) || ALL;
- const { t } = useTranslation();
- // group options
const groups: Set = models.reduce((result: Set, { apiGroup }) => {
return apiGroup ? result.add(apiGroup) : result;
}, new Set());
const sortedGroups: string[] = [...groups].sort();
- const groupOptions = sortedGroups.reduce(
- (result, group: string) => {
- result[group] = ;
- return result;
- },
- { [ALL]: t('public~All groups'), '': t('public~No group') },
- );
const [isExactSearch] = useExactSearch();
const matchFn: Function = isExactSearch ? exactMatch : fuzzyCaseInsensitive;
@@ -211,35 +271,17 @@ const APIResourcesList = compose(
groupSpacer.add(sortedGroups[0]);
}
- const autocompleteGroups = (text: string, _item: string, key: string): boolean => {
- return key !== ALL && fuzzy(text, key);
- };
-
// version options
const versions: Set = models.reduce((result: Set, { apiVersion }) => {
return result.add(apiVersion);
}, new Set());
const sortedVersions: string[] = [...versions].sort();
- const versionOptions = sortedVersions.reduce(
- (result, version: string) => {
- result[version] = version;
- return result;
- },
- { [ALL]: t('public~All versions') },
- );
const versionSpacer = new Set();
if (sortedVersions.length) {
versionSpacer.add(sortedVersions[0]);
}
- const scopeOptions = {
- [ALL]: t('public~All scopes'),
- cluster: t('public~Cluster'),
- namespace: t('public~Namespace'),
- };
- const scopeSpacer = new Set(['cluster']);
-
// filter by group, version, or text
const filteredResources = models.filter(({ kind, apiGroup, apiVersion, namespaced }) => {
if (groupFilter !== ALL && (apiGroup || '') !== groupFilter) {
@@ -272,113 +314,25 @@ const APIResourcesList = compose(
'kind',
]);
- const updateURL = (k: string, v: string) => {
- if (v === ALL) {
- removeQueryArgument(k);
- } else {
- setQueryArgument(k, v);
- }
- };
- const onGroupSelected = (group: string) => updateURL(GROUP_PARAM, group);
- const onVersionSelected = (version: string) => updateURL(VERSION_PARAM, version);
- const onScopeSelected = (scope: string) => updateURL(SCOPE_PARAM, scope);
- const setTextFilter = (text: string) => {
- if (!text) {
- removeQueryArgument(TEXT_FILTER_PARAM);
- } else {
- setQueryArgument(TEXT_FILTER_PARAM, text);
- }
- };
-
- const APIResourceHeader = () => [
- {
- title: t('public~Kind'),
- sortField: 'kind',
- transforms: [sortable],
- props: { className: tableClasses[0] },
- },
- {
- title: t('public~Group'),
- sortField: 'apiGroup',
- transforms: [sortable],
- props: { className: tableClasses[1] },
- },
- {
- title: t('public~Version'),
- sortField: 'apiVersion',
- transforms: [sortable],
- props: { className: tableClasses[2] },
- },
- {
- title: t('public~Namespaced'),
- sortField: 'namespaced',
- transforms: [sortable],
- props: { className: tableClasses[3] },
- },
- {
- title: t('public~Description'),
- props: { className: tableClasses[4] },
- },
- ];
-
return (
-
-
- } breakpoint="md">
-
-
-
-
-
-
-
-
-
-
-
- setTextFilter(value)}
- />
-
-
-
-
+ }>
+
+ data={sortedResources.map((model) => ({
+ ...model,
+ metadata: {
+ name: model.kind,
+ uid: model.kind,
+ },
+ }))}
+ loaded={!!models.size}
+ columns={useAPIExplorerColumns()}
+ initialFilters={initialFiltersDefault}
+ getDataViewRows={getAPIExplorerDataViewRows}
+ hideColumnManagement={true}
+ label="API resources"
+ />
+
);
});
diff --git a/frontend/public/components/factory/list-page.tsx b/frontend/public/components/factory/list-page.tsx
index 9a41d7547ab..92788b33a6c 100644
--- a/frontend/public/components/factory/list-page.tsx
+++ b/frontend/public/components/factory/list-page.tsx
@@ -147,6 +147,7 @@ export const ListPageWrapper: React.FC = (props) => {
hideLabelFilter={hideLabelFilter}
columnLayout={columnLayout}
uniqueFilterName={name}
+ omitFilterToolbar={omitFilterToolbar}
{...props}
/>
);
diff --git a/frontend/public/components/factory/table.tsx b/frontend/public/components/factory/table.tsx
index 99a5c68bf5b..cb183885056 100644
--- a/frontend/public/components/factory/table.tsx
+++ b/frontend/public/components/factory/table.tsx
@@ -55,7 +55,7 @@ import { podPhase, podReadiness, podRestarts } from '../../module/k8s/pods';
import { useTableData } from './table-data-hook';
import TableHeader from './Table/TableHeader';
-const sorts = {
+export const sorts = {
alertingRuleStateOrder,
alertSeverityOrder,
crdLatestVersion: (crd: CustomResourceDefinitionKind): string => getLatestVersionForCRD(crd),
diff --git a/frontend/public/components/monitoring/alertmanager/alertmanager-config.tsx b/frontend/public/components/monitoring/alertmanager/alertmanager-config.tsx
index e76b327c4b7..a6c77f0334b 100644
--- a/frontend/public/components/monitoring/alertmanager/alertmanager-config.tsx
+++ b/frontend/public/components/monitoring/alertmanager/alertmanager-config.tsx
@@ -323,7 +323,13 @@ const ReceiverTableRow: React.FC
- {receiver.name}
+
+ {receiver.name}
+
{(receiver.name === InitialReceivers.Critical ||
receiver.name === InitialReceivers.Default) &&
diff --git a/frontend/public/locales/en/public.json b/frontend/public/locales/en/public.json
index 088b06321df..d8dbf29f812 100644
--- a/frontend/public/locales/en/public.json
+++ b/frontend/public/locales/en/public.json
@@ -16,7 +16,6 @@
"Labels": "Labels",
"Version": "Version",
"Node selector": "Node selector",
- "Alertmanagers": "Alertmanagers",
"API resources": "API resources",
"true": "true",
"false": "false",
@@ -1556,6 +1555,7 @@
"ServiceMonitors": "ServiceMonitors",
"PodMonitor": "PodMonitor",
"PodMonitors": "PodMonitors",
+ "Alertmanagers": "Alertmanagers",
"Service": "Service",
"Services": "Services",
"DaemonSet": "DaemonSet",