Skip to content

Commit

Permalink
[Connectors] Update connector stats panels (elastic#183829)
Browse files Browse the repository at this point in the history 
(cherry picked from commit 68becd2)
  • Loading branch information
@jedrazb
jedrazb committed May 21, 2024
1 parent e844f24 commit dea0962
Showing 1 changed file with 103 additions and 55 deletions.
158 changes: 103 additions & 55 deletions ...ic/applications/enterprise_search_content/components/connector_detail/connector_stats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ import { useValues } from 'kea';

import {
EuiBadge,
EuiButtonIcon,
EuiCode,
EuiCopy,
EuiFlexGrid,
EuiFlexGroup,
EuiFlexItem,
Expand All @@ -21,6 +24,7 @@ import {
} from '@elastic/eui';

import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';

import { Connector, ConnectorStatus, ElasticsearchIndex } from '@kbn/search-connectors';

Expand Down Expand Up @@ -127,40 +131,66 @@ export const ConnectorStats: React.FC<ConnectorStatsProps> = ({ connector, index
</EuiFlexGroup>
}
footer={
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
<EuiFlexItem grow={false}>
<EuiIcon type="documents" />
</EuiFlexItem>
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiFlexGroup alignItems="center" gutterSize="xs">
<EuiFlexItem grow={false}>
<EuiText size="s">
<p>
{i18n.translate(
'xpack.enterpriseSearch.connectors.connectorStats.p.DocumentsLabel',
{
defaultMessage: '{documentAmount} Documents',
values: {
documentAmount: indexData?.count ?? 0,
},
}
)}
</p>
<FormattedMessage
id="xpack.enterpriseSearch.connectors.connectorStats.connectorIdLabel"
defaultMessage="ID: {connectorId}"
values={{
connectorId: <EuiCode>{connector.id}</EuiCode>,
}}
/>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiCopy textToCopy={connector.id}>
{(copy) => (
<EuiButtonIcon
onClick={copy}
color="text"
iconType="copyClipboard"
aria-label={i18n.translate(
'xpack.enterpriseSearch.connectors.connectorStats.copyConnectorIdButton',
{
defaultMessage: 'Copy Connector ID',
}
)}
data-test-subj="copyConnectorIdButton"
/>
)}
</EuiCopy>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmptyTo
isDisabled={!(connector.index_name && indexData)}
size="s"
to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
connectorId: connector.id,
tabId: ConnectorDetailTabId.DOCUMENTS,
})}
>
{seeDocumentsLabel}
</EuiButtonEmptyTo>
{[ConnectorStatus.CONNECTED, ConnectorStatus.CONFIGURED].includes(
connector.status
) && connector.index_name ? (
<EuiButtonEmptyTo
size="s"
to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
connectorId: connector.id,
tabId: ConnectorDetailTabId.CONFIGURATION,
})}
>
{configureLabel}
</EuiButtonEmptyTo>
) : (
<EuiButtonTo
color="primary"
size="s"
fill
to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
connectorId: connector.id,
tabId: ConnectorDetailTabId.CONFIGURATION,
})}
>
{configureLabel}
</EuiButtonTo>
)}
</EuiFlexItem>
</EuiFlexGroup>
}
Expand All @@ -169,7 +199,7 @@ export const ConnectorStats: React.FC<ConnectorStatsProps> = ({ connector, index
<EuiFlexItem>
<StatCard
title={i18n.translate('xpack.enterpriseSearch.connectors.connectorStats.indexTitle', {
defaultMessage: 'Index',
defaultMessage: 'Attached index',
})}
content={
connector.index_name ? (
Expand All @@ -179,7 +209,18 @@ export const ConnectorStats: React.FC<ConnectorStatsProps> = ({ connector, index
<EuiBadge>{connector.index_name}</EuiBadge>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiHealth color="success" />
<EuiFlexGroup alignItems="center" gutterSize="xs">
<EuiFlexItem grow={false}>
<EuiHealth color="success" />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText size="s">
{i18n.translate('xpack.enterpriseSearch.content.conectors.indexHealth', {
defaultMessage: 'Healthy',
})}
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
) : (
Expand All @@ -201,33 +242,40 @@ export const ConnectorStats: React.FC<ConnectorStatsProps> = ({ connector, index
)
}
footer={
<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
<EuiFlexItem grow={false}>
<EuiIcon type="documents" />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText size="s">
<p>
{i18n.translate(
'xpack.enterpriseSearch.connectors.connectorStats.p.DocumentsLabel',
{
defaultMessage: '{documentAmount} Documents',
values: {
documentAmount: indexData?.count ?? 0,
},
}
)}
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
{[ConnectorStatus.CONNECTED, ConnectorStatus.CONFIGURED].includes(
connector.status
) && connector.index_name ? (
<EuiButtonEmptyTo
size="s"
to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
connectorId: connector.id,
tabId: ConnectorDetailTabId.CONFIGURATION,
})}
>
{configureLabel}
</EuiButtonEmptyTo>
) : (
<EuiButtonTo
color="primary"
size="s"
fill
to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
connectorId: connector.id,
tabId: ConnectorDetailTabId.CONFIGURATION,
})}
>
{configureLabel}
</EuiButtonTo>
)}
<EuiButtonEmptyTo
isDisabled={!(connector.index_name && indexData)}
size="s"
to={generateEncodedPath(CONNECTOR_DETAIL_TAB_PATH, {
connectorId: connector.id,
tabId: ConnectorDetailTabId.DOCUMENTS,
})}
>
{seeDocumentsLabel}
</EuiButtonEmptyTo>
</EuiFlexItem>
</EuiFlexGroup>
}
Expand Down

0 comments on commit dea0962

Please sign in to comment.