[Stack Monitoring] Add breadcrumbs to ES pages after migrating from Angular (#114555)
* add breadcrumbs * fix bad merge * fix types Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
a054749c7a
commit
9e42b32015
8 changed files with 130 additions and 19 deletions
|
@ -4,7 +4,7 @@
|
|||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
import React, { useContext, useState, useCallback } from 'react';
|
||||
import React, { useContext, useState, useCallback, useEffect } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { find } from 'lodash';
|
||||
import { ElasticsearchTemplate } from './elasticsearch_template';
|
||||
|
@ -18,7 +18,7 @@ import { SetupModeContext } from '../../../components/setup_mode/setup_mode_cont
|
|||
import { AlertsByName } from '../../../alerts/types';
|
||||
import { fetchAlerts } from '../../../lib/fetch_alerts';
|
||||
import { ELASTICSEARCH_SYSTEM_ID, RULE_CCR_READ_EXCEPTIONS } from '../../../../common/constants';
|
||||
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
interface SetupModeProps {
|
||||
setupMode: any;
|
||||
flyoutComponent: any;
|
||||
|
@ -27,6 +27,7 @@ interface SetupModeProps {
|
|||
|
||||
export const ElasticsearchCcrPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
|
@ -37,6 +38,14 @@ export const ElasticsearchCcrPage: React.FC<ComponentProps> = ({ clusters }) =>
|
|||
const [data, setData] = useState({} as any);
|
||||
const [alerts, setAlerts] = useState<AlertsByName>({});
|
||||
|
||||
useEffect(() => {
|
||||
if (cluster) {
|
||||
generateBreadcrumbs(cluster.cluster_name, {
|
||||
inElasticsearch: true,
|
||||
});
|
||||
}
|
||||
}, [cluster, generateBreadcrumbs]);
|
||||
|
||||
const title = i18n.translate('xpack.monitoring.elasticsearch.ccr.title', {
|
||||
defaultMessage: 'Elasticsearch - Ccr',
|
||||
});
|
||||
|
|
|
@ -4,8 +4,9 @@
|
|||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
import React, { useContext, useState, useCallback } from 'react';
|
||||
import React, { useContext, useState, useCallback, useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { find } from 'lodash';
|
||||
import { get } from 'lodash';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { PageTemplate } from '../page_template';
|
||||
|
@ -19,6 +20,7 @@ import { SetupModeContext } from '../../../components/setup_mode/setup_mode_cont
|
|||
import { AlertsByName } from '../../../alerts/types';
|
||||
import { fetchAlerts } from '../../../lib/fetch_alerts';
|
||||
import { ELASTICSEARCH_SYSTEM_ID, RULE_CCR_READ_EXCEPTIONS } from '../../../../common/constants';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
interface SetupModeProps {
|
||||
setupMode: any;
|
||||
|
@ -26,14 +28,28 @@ interface SetupModeProps {
|
|||
bottomBarComponent: any;
|
||||
}
|
||||
|
||||
export const ElasticsearchCcrShardPage: React.FC<ComponentProps> = () => {
|
||||
export const ElasticsearchCcrShardPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const [data, setData] = useState({} as any);
|
||||
const { index, shardId }: { index: string; shardId: string } = useParams();
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const cluster = find(clusters, {
|
||||
cluster_uuid: clusterUuid,
|
||||
}) as any;
|
||||
|
||||
useEffect(() => {
|
||||
if (cluster) {
|
||||
generateBreadcrumbs(cluster.cluster_name, {
|
||||
inElasticsearch: true,
|
||||
name: 'ccr',
|
||||
instance: `Index: ${index} Shard: ${shardId}`,
|
||||
});
|
||||
}
|
||||
}, [cluster, generateBreadcrumbs, index, shardId]);
|
||||
const ccs = globalState.ccs;
|
||||
const [data, setData] = useState({} as any);
|
||||
const [alerts, setAlerts] = useState<AlertsByName>({});
|
||||
|
||||
const title = i18n.translate('xpack.monitoring.elasticsearch.ccr.shard.title', {
|
||||
|
|
|
@ -4,8 +4,9 @@
|
|||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
import React, { useContext, useState, useCallback } from 'react';
|
||||
import React, { useContext, useState, useCallback, useEffect } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { find } from 'lodash';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
|
||||
import { GlobalStateContext } from '../../contexts/global_state_context';
|
||||
|
@ -19,9 +20,11 @@ import { AdvancedIndex } from '../../../components/elasticsearch/index/advanced'
|
|||
import { AlertsByName } from '../../../alerts/types';
|
||||
import { fetchAlerts } from '../../../lib/fetch_alerts';
|
||||
import { ELASTICSEARCH_SYSTEM_ID, RULE_LARGE_SHARD_SIZE } from '../../../../common/constants';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const ElasticsearchIndexAdvancedPage: React.FC<ComponentProps> = () => {
|
||||
export const ElasticsearchIndexAdvancedPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { index }: { index: string } = useParams();
|
||||
const { zoomInfo, onBrush } = useCharts();
|
||||
|
@ -29,6 +32,20 @@ export const ElasticsearchIndexAdvancedPage: React.FC<ComponentProps> = () => {
|
|||
const [data, setData] = useState({} as any);
|
||||
const [alerts, setAlerts] = useState<AlertsByName>({});
|
||||
|
||||
const cluster = find(clusters, {
|
||||
cluster_uuid: clusterUuid,
|
||||
}) as any;
|
||||
|
||||
useEffect(() => {
|
||||
if (cluster) {
|
||||
generateBreadcrumbs(cluster.cluster_name, {
|
||||
inElasticsearch: true,
|
||||
name: 'indices',
|
||||
instance: index,
|
||||
});
|
||||
}
|
||||
}, [cluster, generateBreadcrumbs, index]);
|
||||
|
||||
const title = i18n.translate('xpack.monitoring.elasticsearch.index.advanced.title', {
|
||||
defaultMessage: 'Elasticsearch - Indices - {indexName} - Advanced',
|
||||
values: {
|
||||
|
|
|
@ -4,9 +4,10 @@
|
|||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
import React, { useContext, useState, useCallback } from 'react';
|
||||
import React, { useContext, useState, useCallback, useEffect } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { find } from 'lodash';
|
||||
import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
|
||||
import { GlobalStateContext } from '../../contexts/global_state_context';
|
||||
// @ts-ignore
|
||||
|
@ -23,9 +24,11 @@ import { labels } from '../../../components/elasticsearch/shard_allocation/lib/l
|
|||
import { AlertsByName } from '../../../alerts/types';
|
||||
import { fetchAlerts } from '../../../lib/fetch_alerts';
|
||||
import { ELASTICSEARCH_SYSTEM_ID, RULE_LARGE_SHARD_SIZE } from '../../../../common/constants';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const ElasticsearchIndexPage: React.FC<ComponentProps> = () => {
|
||||
export const ElasticsearchIndexPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { index }: { index: string } = useParams();
|
||||
const { zoomInfo, onBrush } = useCharts();
|
||||
|
@ -34,6 +37,19 @@ export const ElasticsearchIndexPage: React.FC<ComponentProps> = () => {
|
|||
const [indexLabel, setIndexLabel] = useState(labels.index as any);
|
||||
const [nodesByIndicesData, setNodesByIndicesData] = useState([]);
|
||||
const [alerts, setAlerts] = useState<AlertsByName>({});
|
||||
const cluster = find(clusters, {
|
||||
cluster_uuid: clusterUuid,
|
||||
}) as any;
|
||||
|
||||
useEffect(() => {
|
||||
if (cluster) {
|
||||
generateBreadcrumbs(cluster.cluster_name, {
|
||||
inElasticsearch: true,
|
||||
name: 'indices',
|
||||
instance: index,
|
||||
});
|
||||
}
|
||||
}, [cluster, generateBreadcrumbs, index]);
|
||||
|
||||
const title = i18n.translate('xpack.monitoring.elasticsearch.index.overview.title', {
|
||||
defaultMessage: 'Elasticsearch - Indices - {indexName} - Overview',
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
import React, { useContext, useState, useCallback } from 'react';
|
||||
import React, { useContext, useState, useCallback, useEffect } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { find } from 'lodash';
|
||||
import { ElasticsearchTemplate } from './elasticsearch_template';
|
||||
|
@ -19,16 +19,18 @@ import { useLocalStorage } from '../../hooks/use_local_storage';
|
|||
import { AlertsByName } from '../../../alerts/types';
|
||||
import { fetchAlerts } from '../../../lib/fetch_alerts';
|
||||
import { ELASTICSEARCH_SYSTEM_ID, RULE_LARGE_SHARD_SIZE } from '../../../../common/constants';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const ElasticsearchIndicesPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { getPaginationTableProps } = useTable('elasticsearch.indices');
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const ccs = globalState.ccs;
|
||||
const cluster = find(clusters, {
|
||||
cluster_uuid: clusterUuid,
|
||||
});
|
||||
}) as any;
|
||||
const [data, setData] = useState({} as any);
|
||||
const [showSystemIndices, setShowSystemIndices] = useLocalStorage<boolean>(
|
||||
'showSystemIndices',
|
||||
|
@ -36,6 +38,14 @@ export const ElasticsearchIndicesPage: React.FC<ComponentProps> = ({ clusters })
|
|||
);
|
||||
const [alerts, setAlerts] = useState<AlertsByName>({});
|
||||
|
||||
useEffect(() => {
|
||||
if (cluster) {
|
||||
generateBreadcrumbs(cluster.cluster_name, {
|
||||
inElasticsearch: true,
|
||||
});
|
||||
}
|
||||
}, [cluster, generateBreadcrumbs]);
|
||||
|
||||
const title = i18n.translate('xpack.monitoring.elasticsearch.indices.routeTitle', {
|
||||
defaultMessage: 'Elasticsearch - Indices',
|
||||
});
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
import React, { useContext, useState, useCallback } from 'react';
|
||||
import React, { useContext, useState, useCallback, useEffect } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { find } from 'lodash';
|
||||
import { ElasticsearchTemplate } from './elasticsearch_template';
|
||||
|
@ -16,6 +16,7 @@ import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
|
|||
import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
|
||||
import { useTable } from '../../hooks/use_table';
|
||||
import type { MLJobs } from '../../../types';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
|
||||
|
||||
interface SetupModeProps {
|
||||
|
@ -26,13 +27,22 @@ interface SetupModeProps {
|
|||
|
||||
export const ElasticsearchMLJobsPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { getPaginationTableProps } = useTable('elasticsearch.mlJobs');
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const ccs = globalState.ccs;
|
||||
const cluster = find(clusters, {
|
||||
cluster_uuid: clusterUuid,
|
||||
});
|
||||
}) as any;
|
||||
|
||||
useEffect(() => {
|
||||
if (cluster) {
|
||||
generateBreadcrumbs(cluster.cluster_name, {
|
||||
inElasticsearch: true,
|
||||
});
|
||||
}
|
||||
}, [cluster, generateBreadcrumbs]);
|
||||
const [data, setData] = useState({} as any);
|
||||
|
||||
const title = i18n.translate('xpack.monitoring.elasticsearch.mlJobs.routeTitle', {
|
||||
|
|
|
@ -4,8 +4,9 @@
|
|||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
import React, { useContext, useState, useCallback } from 'react';
|
||||
import React, { useContext, useState, useCallback, useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { find } from 'lodash';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { ItemTemplate } from './item_template';
|
||||
import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
|
||||
|
@ -24,19 +25,35 @@ import {
|
|||
RULE_DISK_USAGE,
|
||||
RULE_MEMORY_USAGE,
|
||||
} from '../../../../common/constants';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const ElasticsearchNodeAdvancedPage: React.FC<ComponentProps> = () => {
|
||||
export const ElasticsearchNodeAdvancedPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { zoomInfo, onBrush } = useCharts();
|
||||
const [data, setData] = useState({} as any);
|
||||
|
||||
const { node }: { node: string } = useParams();
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const ccs = globalState.ccs;
|
||||
const [data, setData] = useState({} as any);
|
||||
const [alerts, setAlerts] = useState<AlertsByName>({});
|
||||
|
||||
const cluster = find(clusters, {
|
||||
cluster_uuid: clusterUuid,
|
||||
}) as any;
|
||||
|
||||
useEffect(() => {
|
||||
if (cluster) {
|
||||
generateBreadcrumbs(cluster.cluster_name, {
|
||||
inElasticsearch: true,
|
||||
name: 'nodes',
|
||||
instance: data?.nodeSummary?.name,
|
||||
});
|
||||
}
|
||||
}, [cluster, generateBreadcrumbs, data?.nodeSummary?.name]);
|
||||
|
||||
const title = i18n.translate('xpack.monitoring.elasticsearch.node.advanced.title', {
|
||||
defaultMessage: 'Elasticsearch - Nodes - {nodeName} - Advanced',
|
||||
values: {
|
||||
|
|
|
@ -4,8 +4,9 @@
|
|||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
import React, { useContext, useState, useCallback } from 'react';
|
||||
import React, { useContext, useState, useCallback, useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { find } from 'lodash';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { ItemTemplate } from './item_template';
|
||||
import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
|
||||
|
@ -30,9 +31,11 @@ import {
|
|||
RULE_DISK_USAGE,
|
||||
RULE_MEMORY_USAGE,
|
||||
} from '../../../../common/constants';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const ElasticsearchNodePage: React.FC<ComponentProps> = () => {
|
||||
export const ElasticsearchNodePage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { zoomInfo, onBrush } = useCharts();
|
||||
const [showSystemIndices, setShowSystemIndices] = useLocalStorage<boolean>(
|
||||
'showSystemIndices',
|
||||
|
@ -42,10 +45,23 @@ export const ElasticsearchNodePage: React.FC<ComponentProps> = () => {
|
|||
|
||||
const { node }: { node: string } = useParams();
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const [data, setData] = useState({} as any);
|
||||
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const cluster = find(clusters, {
|
||||
cluster_uuid: clusterUuid,
|
||||
}) as any;
|
||||
|
||||
useEffect(() => {
|
||||
if (cluster) {
|
||||
generateBreadcrumbs(cluster.cluster_name, {
|
||||
inElasticsearch: true,
|
||||
name: 'nodes',
|
||||
instance: data?.nodeSummary?.name,
|
||||
});
|
||||
}
|
||||
}, [cluster, generateBreadcrumbs, data?.nodeSummary?.name]);
|
||||
const ccs = globalState.ccs;
|
||||
const [data, setData] = useState({} as any);
|
||||
const [nodesByIndicesData, setNodesByIndicesData] = useState([]);
|
||||
|
||||
const title = i18n.translate('xpack.monitoring.elasticsearch.node.overview.title', {
|
||||
|
|
Loading…
Reference in a new issue