health badges on indices table link to index overview (#137337) (#137344)

(cherry picked from commit cfbda0b249)

Co-authored-by: Byron Hulcher <byron.hulcher@elastic.co>
This commit is contained in:
Kibana Machine 2022-07-27 16:43:39 -04:00 committed by GitHub
parent 8d6a862600
commit c134aa3130
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 11 deletions

View file

@ -11,7 +11,6 @@ import { generatePath } from 'react-router-dom';
import {
CriteriaWithPagination,
EuiBadge,
EuiBasicTable,
EuiBasicTableColumn,
EuiIcon,
@ -22,6 +21,7 @@ import { FormattedRelative } from '@kbn/i18n-react';
import { Meta } from '../../../../../common/types';
import { EuiLinkTo, EuiButtonIconTo } from '../../../shared/react_router_helpers';
import { EuiBadgeTo } from '../../../shared/react_router_helpers/eui_components';
import { convertMetaToPagination } from '../../../shared/table_pagination';
import { SEARCH_INDEX_PATH } from '../../routes';
import { ElasticsearchViewIndex, IngestionMethod } from '../../types';
@ -126,17 +126,29 @@ const columns: Array<EuiBasicTableColumn<ElasticsearchViewIndex>> = [
defaultMessage: 'Ingestion status',
}
),
render: (index: ElasticsearchViewIndex) =>
isCrawlerIndex(index) ? (
<EuiBadge color={crawlerStatusToColor(index.crawler?.most_recent_crawl_request_status)}>
{crawlerStatusToText(index.crawler?.most_recent_crawl_request_status)}
</EuiBadge>
) : (
<EuiBadge color={ingestionStatusToColor(index.ingestionStatus)}>
{ingestionStatusToText(index.ingestionStatus)}
</EuiBadge>
),
render: (index: ElasticsearchViewIndex) => {
const overviewPath = generatePath(SEARCH_INDEX_PATH, { indexName: index.name });
if (isCrawlerIndex(index)) {
const label = crawlerStatusToText(index.crawler?.most_recent_crawl_request_status);
return (
<EuiBadgeTo
to={overviewPath}
label={label}
color={crawlerStatusToColor(index.crawler?.most_recent_crawl_request_status)}
/>
);
} else {
const label = ingestionStatusToText(index.ingestionStatus);
return (
<EuiBadgeTo
to={overviewPath}
label={label}
color={ingestionStatusToColor(index.ingestionStatus)}
/>
);
}
},
truncateText: true,
},
{

View file

@ -21,6 +21,8 @@ import {
EuiPanel,
EuiCard,
EuiCardProps,
EuiBadge,
EuiBadgeProps,
} from '@elastic/eui';
import { EuiPanelProps } from '@elastic/eui/src/components/panel/panel';
@ -91,3 +93,30 @@ export const EuiListGroupItemTo: React.FC<ReactRouterEuiListGroupItemProps> = ({
}) => (
<EuiListGroupItem {...rest} {...generateReactRouterProps({ to, onClick, shouldNotCreateHref })} />
);
// TODO Right now this only supports the `color` prop of EuiBadgeProps
// Trying to use EuiBadgeProps in its entirety causes a succession of Typescript errors
type ReactRouterEuiBadgeProps = ReactRouterProps & Pick<EuiBadgeProps, 'color'> & { label: string };
export const EuiBadgeTo: React.FC<ReactRouterEuiBadgeProps> = ({
label,
onClick,
shouldNotCreateHref,
to,
...rest
}) => {
const routerProps = generateReactRouterProps({ onClick, shouldNotCreateHref, to });
const badgeProps: EuiBadgeProps = {
...rest,
iconOnClick: routerProps.onClick,
iconOnClickAriaLabel: label,
onClick: routerProps.onClick,
onClickAriaLabel: label,
};
return (
<EuiBadge {...badgeProps} className="enterpriseSearchEuiBadgeTo">
{label}
</EuiBadge>
);
};