From 327b3c90cba8e0688aa98bca6988e6c082b16cd9 Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Thu, 22 Aug 2019 19:40:00 -0400 Subject: [PATCH 1/8] move stat component out of jobStatsBar for reuse --- .../legacy/plugins/ml/common/types/common.ts | 6 ++++++ .../ml/public/components/stat/_stat.scss | 7 +++++++ .../ml/public/components/stat/index.scss | 1 + .../ml/public/components/stat/index.ts | 7 +++++++ .../ml/public/components/stat/stat.tsx | 20 +++++++++++++++++++ x-pack/legacy/plugins/ml/public/index.scss | 1 + .../jobs_stats_bar/_jobs_stats_bar.scss | 8 -------- .../jobs_stats_bar/jobs_stats_bar.js | 12 +---------- 8 files changed, 43 insertions(+), 19 deletions(-) create mode 100644 x-pack/legacy/plugins/ml/public/components/stat/_stat.scss create mode 100644 x-pack/legacy/plugins/ml/public/components/stat/index.scss create mode 100644 x-pack/legacy/plugins/ml/public/components/stat/index.ts create mode 100644 x-pack/legacy/plugins/ml/public/components/stat/stat.tsx diff --git a/x-pack/legacy/plugins/ml/common/types/common.ts b/x-pack/legacy/plugins/ml/common/types/common.ts index 0dff3979140c0..5662cc9c80865 100644 --- a/x-pack/legacy/plugins/ml/common/types/common.ts +++ b/x-pack/legacy/plugins/ml/common/types/common.ts @@ -8,6 +8,12 @@ export interface Dictionary { [id: string]: TValue; } +export interface StatsBarStat { + label: string; + value: string | number; + show?: boolean; +} + // converts a dictionary to an array. note this loses the dictionary `key` information. // however it's able to retain the type information of the dictionary elements. export function dictionaryToArray(dict: Dictionary): TValue[] { diff --git a/x-pack/legacy/plugins/ml/public/components/stat/_stat.scss b/x-pack/legacy/plugins/ml/public/components/stat/_stat.scss new file mode 100644 index 0000000000000..d05c1f7195587 --- /dev/null +++ b/x-pack/legacy/plugins/ml/public/components/stat/_stat.scss @@ -0,0 +1,7 @@ +.stat { + margin-right: $euiSizeS; + + .stat-value { + font-weight: bold + } +} diff --git a/x-pack/legacy/plugins/ml/public/components/stat/index.scss b/x-pack/legacy/plugins/ml/public/components/stat/index.scss new file mode 100644 index 0000000000000..bb1c6e67baebc --- /dev/null +++ b/x-pack/legacy/plugins/ml/public/components/stat/index.scss @@ -0,0 +1 @@ +@import 'stat'; diff --git a/x-pack/legacy/plugins/ml/public/components/stat/index.ts b/x-pack/legacy/plugins/ml/public/components/stat/index.ts new file mode 100644 index 0000000000000..3a97d6afb7ea7 --- /dev/null +++ b/x-pack/legacy/plugins/ml/public/components/stat/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { Stat } from './stat'; diff --git a/x-pack/legacy/plugins/ml/public/components/stat/stat.tsx b/x-pack/legacy/plugins/ml/public/components/stat/stat.tsx new file mode 100644 index 0000000000000..8b26791ee0ee0 --- /dev/null +++ b/x-pack/legacy/plugins/ml/public/components/stat/stat.tsx @@ -0,0 +1,20 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { FC } from 'react'; +import { StatsBarStat } from '../../../common/types/common'; + +interface StatProps { + stat: StatsBarStat; +} + +export const Stat: FC = ({ stat }) => { + return ( + + {stat.label}: {stat.value} + + ); +}; diff --git a/x-pack/legacy/plugins/ml/public/index.scss b/x-pack/legacy/plugins/ml/public/index.scss index 0b7811cb0504b..f04cb36b2a921 100644 --- a/x-pack/legacy/plugins/ml/public/index.scss +++ b/x-pack/legacy/plugins/ml/public/index.scss @@ -50,6 +50,7 @@ @import 'components/messagebar/index'; @import 'components/navigation_menu/index'; @import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly + @import 'components/stat/index'; // Hacks are last so they can overwrite anything above if needed @import 'hacks'; diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_jobs_stats_bar.scss b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_jobs_stats_bar.scss index 63a1bc01c94ae..dce3a30b8aa67 100644 --- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_jobs_stats_bar.scss +++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_jobs_stats_bar.scss @@ -3,12 +3,4 @@ height: 42px; padding: 14px; background-color: $euiColorLightestShade; - - .stat { - margin-right: $euiSizeS; - - .stat-value { - font-weight: bold - } - } } diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/jobs_stats_bar.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/jobs_stats_bar.js index f82b3f5b07b05..d2c8cac17ed2b 100644 --- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/jobs_stats_bar.js +++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/jobs_stats_bar.js @@ -6,6 +6,7 @@ import { JOB_STATE, DATAFEED_STATE } from 'plugins/ml/../common/constants/states'; +import { Stat } from '../../../../components/stat'; import PropTypes from 'prop-types'; import React from 'react'; @@ -99,17 +100,6 @@ function createJobStats(jobsSummaryList) { return jobStats; } -function Stat({ stat }) { - return ( - - {stat.label}: {stat.value} - - ); -} -Stat.propTypes = { - stat: PropTypes.object.isRequired, -}; - export const JobStatsBar = ({ jobsSummaryList }) => { const jobStats = createJobStats(jobsSummaryList); const stats = Object.keys(jobStats).map(k => jobStats[k]); From 8cdc2098e5da32f173c661bd52a8db5d2525ea4b Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Thu, 22 Aug 2019 19:40:41 -0400 Subject: [PATCH 2/8] create transformStatsBar component --- .../transform_list/transforms_stats_bar.tsx | 112 ++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transforms_stats_bar.tsx diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transforms_stats_bar.tsx b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transforms_stats_bar.tsx new file mode 100644 index 0000000000000..a0bb374980e91 --- /dev/null +++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transforms_stats_bar.tsx @@ -0,0 +1,112 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { FC } from 'react'; +import { i18n } from '@kbn/i18n'; +import { Stat } from '../../../../../components/stat'; +import { DATA_FRAME_TRANSFORM_STATE, DATA_FRAME_MODE, DataFrameTransformListRow } from './common'; + +import { StatsBarStat } from '../../../../../../common/types/common'; + +interface TransFormStats { + total: StatsBarStat; + batch: StatsBarStat; + continuous: StatsBarStat; + failed: StatsBarStat; + started: StatsBarStat; +} + +function createTranformStats(transformsList: DataFrameTransformListRow[]) { + const transformStats = { + total: { + label: i18n.translate('xpack.ml.dataFrame.statsBar.totalTransformsLabel', { + defaultMessage: 'Total transforms', + }), + value: 0, + show: true, + }, + batch: { + label: i18n.translate('xpack.ml.dataFrame.statsBar.batchTransformsLabel', { + defaultMessage: 'Batch transforms', + }), + value: 0, + show: true, + }, + continuous: { + label: i18n.translate('xpack.ml.dataFrame.statsBar.continuousTransformsLabel', { + defaultMessage: 'Continuous transforms', + }), + value: 0, + show: true, + }, + failed: { + label: i18n.translate('xpack.ml.dataFrame.statsBar.failedTransformsLabel', { + defaultMessage: 'Failed transforms', + }), + value: 0, + show: false, + }, + started: { + label: i18n.translate('xpack.ml.dataFrame.statsBar.startedTransformsLabel', { + defaultMessage: 'Started transforms', + }), + value: 0, + show: true, + }, + }; + + if (transformsList === undefined) { + return transformStats; + } + + let failedTransforms = 0; + let startedTransforms = 0; + + transformsList.forEach(transform => { + if (transform.mode === DATA_FRAME_MODE.CONTINUOUS) { + transformStats.continuous.value++; + } else if (transform.mode === DATA_FRAME_MODE.BATCH) { + transformStats.batch.value++; + } else if (transform.stats.state === DATA_FRAME_TRANSFORM_STATE.FAILED) { + failedTransforms++; + } else if (transform.stats.state === DATA_FRAME_TRANSFORM_STATE.STARTED) { + startedTransforms++; + } + }); + + transformStats.total.value = transformsList.length; + transformStats.started.value = startedTransforms; + + if (failedTransforms !== 0) { + transformStats.failed.value = failedTransforms; + transformStats.failed.show = true; + } else { + transformStats.failed.show = false; + } + + return transformStats; +} + +interface Props { + transformsList: DataFrameTransformListRow[]; +} + +type StatsKey = keyof TransFormStats; + +export const TransformStatsBar: FC = ({ transformsList }) => { + const transformStats: TransFormStats = createTranformStats(transformsList); + const stats = Object.keys(transformStats).map(k => transformStats[k as StatsKey]); + + return ( +
+ {stats + .filter(s => s.show) + .map(s => ( + + ))} +
+ ); +}; From c15692863c277c20f832ff43e9996d40480697ac Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Fri, 23 Aug 2019 09:33:28 -0400 Subject: [PATCH 3/8] add transformStatsBar to DF page --- .../transform_list/transform_list.tsx | 48 +++++++------------ .../pages/transform_management/page.tsx | 32 ++++++++++++- 2 files changed, 49 insertions(+), 31 deletions(-) diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transform_list.tsx b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transform_list.tsx index 449753365a4ae..d42cf6c55bf43 100644 --- a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transform_list.tsx +++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transform_list.tsx @@ -19,11 +19,7 @@ import { SortDirection, } from '@elastic/eui'; -import { - DataFrameTransformId, - moveToDataFrameWizard, - useRefreshTransformList, -} from '../../../../common'; +import { DataFrameTransformId, moveToDataFrameWizard } from '../../../../common'; import { checkPermission } from '../../../../../privilege/check_privilege'; import { getTaskStateBadge } from './columns'; import { DeleteAction } from './action_delete'; @@ -39,11 +35,9 @@ import { Query, Clause, } from './common'; -import { getTransformsFactory } from '../../services/transform_service'; import { getColumns } from './columns'; import { ExpandedRow } from './expanded_row'; import { ProgressBar, TransformTable } from './transform_table'; -import { useRefreshInterval } from './use_refresh_interval'; function getItemIdToExpandedRowMap( itemIds: DataFrameTransformId[], @@ -69,20 +63,28 @@ function stringMatch(str: string | undefined, substr: string) { ); } -export const DataFrameTransformList: SFC = () => { - const [isInitialized, setIsInitialized] = useState(false); +interface Props { + isInitialized: boolean; + transforms: DataFrameTransformListRow[]; + errorMessage: any; + transformsLoading: boolean; +} + +export const DataFrameTransformList: SFC = ({ + isInitialized, + transforms, + errorMessage, + transformsLoading, +}) => { const [isLoading, setIsLoading] = useState(false); - const [blockRefresh, setBlockRefresh] = useState(false); const [filterActive, setFilterActive] = useState(false); - const [transforms, setTransforms] = useState([]); const [filteredTransforms, setFilteredTransforms] = useState([]); const [expandedRowItemIds, setExpandedRowItemIds] = useState([]); const [transformSelection, setTransformSelection] = useState([]); const [isActionsMenuOpen, setIsActionsMenuOpen] = useState(false); - const [errorMessage, setErrorMessage] = useState(undefined); const [searchError, setSearchError] = useState(undefined); const [pageIndex, setPageIndex] = useState(0); @@ -96,20 +98,6 @@ export const DataFrameTransformList: SFC = () => { !checkPermission('canPreviewDataFrame') || !checkPermission('canStartStopDataFrame'); - const getTransforms = getTransformsFactory( - setTransforms, - setErrorMessage, - setIsInitialized, - blockRefresh - ); - // Subscribe to the refresh observable to trigger reloading the transform list. - useRefreshTransformList({ - isLoading: setIsLoading, - onRefresh: () => getTransforms(true), - }); - // Call useRefreshInterval() after the subscription above is set up. - useRefreshInterval(setBlockRefresh); - const onQueryChange = ({ query, error }: { query: Query; error: any }) => { if (error) { setSearchError(error.message); @@ -188,13 +176,13 @@ export const DataFrameTransformList: SFC = () => { // Before the transforms have been loaded for the first time, display the loading indicator only. // Otherwise a user would see 'No data frame transforms found' during the initial loading. if (!isInitialized) { - return ; + return ; } if (typeof errorMessage !== 'undefined') { return ( - + { if (transforms.length === 0) { return ( - + @@ -368,7 +356,7 @@ export const DataFrameTransformList: SFC = () => { return ( - + { const [isLoading, setIsLoading] = useState(false); + const [transformsLoading, setTransformsLoading] = useState(false); + const [isInitialized, setIsInitialized] = useState(false); + const [blockRefresh, setBlockRefresh] = useState(false); + const [transforms, setTransforms] = useState([]); + const [errorMessage, setErrorMessage] = useState(undefined); const { refresh } = useRefreshTransformList({ isLoading: setIsLoading }); + const getTransforms = getTransformsFactory( + setTransforms, + setErrorMessage, + setIsInitialized, + blockRefresh + ); + + // Subscribe to the refresh observable to trigger reloading the transform list. + useRefreshTransformList({ + isLoading: setTransformsLoading, + onRefresh: () => getTransforms(true), + }); + // Call useRefreshInterval() after the subscription above is set up. + useRefreshInterval(setBlockRefresh); + return ( + @@ -77,7 +102,12 @@ export const Page: FC = () => { - + From 0111711ed802bec113b3b6d9424fa88eb2de7ca5 Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Fri, 23 Aug 2019 09:42:55 -0400 Subject: [PATCH 4/8] update tests --- .../__snapshots__/page.test.tsx.snap | 9 +++++- .../transform_list.test.tsx.snap | 30 +++++++++++++++++-- .../transform_list/transform_list.test.tsx | 9 +++++- 3 files changed, 43 insertions(+), 5 deletions(-) diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/__snapshots__/page.test.tsx.snap b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/__snapshots__/page.test.tsx.snap index af70dccfad236..dc16e6843ba91 100644 --- a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/__snapshots__/page.test.tsx.snap +++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/__snapshots__/page.test.tsx.snap @@ -5,6 +5,9 @@ exports[`Data Frame: Job List Minimal initialization 1`] = ` + Minimal initialization 1`] = ` hasShadow={false} paddingSize="m" > - + diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap index d7ccbb57382f4..dd3763d054b14 100644 --- a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap +++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap @@ -1,7 +1,31 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Data Frame: Transform List Minimal initialization 1`] = ` - + + + + Create your first data frame transform + , + ] + } + data-test-subj="mlNoDataFrameTransformsFound" + iconColor="subdued" + title={ +

+ No data frame transforms found +

+ } + /> + `; diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transform_list.test.tsx b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transform_list.test.tsx index e4e7537aae6ea..522f17c3382d2 100644 --- a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transform_list.test.tsx +++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transform_list.test.tsx @@ -12,7 +12,14 @@ import { DataFrameTransformList } from './transform_list'; describe('Data Frame: Transform List ', () => { test('Minimal initialization', () => { - const wrapper = shallow(); + const wrapper = shallow( + + ); expect(wrapper).toMatchSnapshot(); }); From 8bd96d877b8d024b56c68d877065359644503c5c Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Fri, 23 Aug 2019 10:52:02 -0400 Subject: [PATCH 5/8] move create statsBar component for reuse --- .../legacy/plugins/ml/common/types/common.ts | 19 +++++++++++++ .../stats_bar/_stats_bar.scss} | 2 +- .../ml/public/components/stats_bar/index.scss | 1 + .../ml/public/components/stats_bar/index.ts | 7 +++++ .../public/components/stats_bar/stats_bar.tsx | 27 +++++++++++++++++++ .../transform_list/transforms_stats_bar.tsx | 27 +++---------------- x-pack/legacy/plugins/ml/public/index.scss | 1 + .../components/jobs_stats_bar/_index.scss | 1 - .../jobs_stats_bar/jobs_stats_bar.js | 9 ++----- 9 files changed, 62 insertions(+), 32 deletions(-) rename x-pack/legacy/plugins/ml/public/{jobs/jobs_list/components/jobs_stats_bar/_jobs_stats_bar.scss => components/stats_bar/_stats_bar.scss} (85%) create mode 100644 x-pack/legacy/plugins/ml/public/components/stats_bar/index.scss create mode 100644 x-pack/legacy/plugins/ml/public/components/stats_bar/index.ts create mode 100644 x-pack/legacy/plugins/ml/public/components/stats_bar/stats_bar.tsx delete mode 100644 x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_index.scss diff --git a/x-pack/legacy/plugins/ml/common/types/common.ts b/x-pack/legacy/plugins/ml/common/types/common.ts index 5662cc9c80865..02149757ab0ee 100644 --- a/x-pack/legacy/plugins/ml/common/types/common.ts +++ b/x-pack/legacy/plugins/ml/common/types/common.ts @@ -14,6 +14,25 @@ export interface StatsBarStat { show?: boolean; } +export interface TransformStatsBarStats { + total: StatsBarStat; + batch: StatsBarStat; + continuous: StatsBarStat; + failed: StatsBarStat; + started: StatsBarStat; +} + +export interface JobStatsBarStats { + activeNodes: StatsBarStat; + total: StatsBarStat; + open: StatsBarStat; + failed: StatsBarStat; + closed: StatsBarStat; + activeDatafeeds: StatsBarStat; +} + +export type StatsBarStats = TransformStatsBarStats | JobStatsBarStats; +export type StatsKey = keyof StatsBarStats; // converts a dictionary to an array. note this loses the dictionary `key` information. // however it's able to retain the type information of the dictionary elements. export function dictionaryToArray(dict: Dictionary): TValue[] { diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_jobs_stats_bar.scss b/x-pack/legacy/plugins/ml/public/components/stats_bar/_stats_bar.scss similarity index 85% rename from x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_jobs_stats_bar.scss rename to x-pack/legacy/plugins/ml/public/components/stats_bar/_stats_bar.scss index dce3a30b8aa67..c433b53789573 100644 --- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_jobs_stats_bar.scss +++ b/x-pack/legacy/plugins/ml/public/components/stats_bar/_stats_bar.scss @@ -1,4 +1,4 @@ -.jobs-stats-bar { +.mlStatsBar { // SASSTODO: proper calcs height: 42px; padding: 14px; diff --git a/x-pack/legacy/plugins/ml/public/components/stats_bar/index.scss b/x-pack/legacy/plugins/ml/public/components/stats_bar/index.scss new file mode 100644 index 0000000000000..3f9b874cb2e80 --- /dev/null +++ b/x-pack/legacy/plugins/ml/public/components/stats_bar/index.scss @@ -0,0 +1 @@ +@import 'stats_bar'; diff --git a/x-pack/legacy/plugins/ml/public/components/stats_bar/index.ts b/x-pack/legacy/plugins/ml/public/components/stats_bar/index.ts new file mode 100644 index 0000000000000..b8366fb38966a --- /dev/null +++ b/x-pack/legacy/plugins/ml/public/components/stats_bar/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { StatsBar } from './stats_bar'; diff --git a/x-pack/legacy/plugins/ml/public/components/stats_bar/stats_bar.tsx b/x-pack/legacy/plugins/ml/public/components/stats_bar/stats_bar.tsx new file mode 100644 index 0000000000000..ae88489715212 --- /dev/null +++ b/x-pack/legacy/plugins/ml/public/components/stats_bar/stats_bar.tsx @@ -0,0 +1,27 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { FC } from 'react'; +import { Stat } from '../stat'; +import { StatsBarStat, StatsBarStats, StatsKey } from '../../../common/types/common'; + +interface StatsBarProps { + stats: StatsBarStats; + dataTestSub: string; +} + +export const StatsBar: FC = ({ stats, dataTestSub }) => { + const statsList = Object.keys(stats).map(k => stats[k as StatsKey]); + return ( +
+ {statsList + .filter((s: StatsBarStat) => s.show) + .map((s: StatsBarStat) => ( + + ))} +
+ ); +}; diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transforms_stats_bar.tsx b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transforms_stats_bar.tsx index a0bb374980e91..71d4ad2ddece8 100644 --- a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transforms_stats_bar.tsx +++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transforms_stats_bar.tsx @@ -6,18 +6,10 @@ import React, { FC } from 'react'; import { i18n } from '@kbn/i18n'; -import { Stat } from '../../../../../components/stat'; +import { StatsBar } from '../../../../../components/stats_bar'; import { DATA_FRAME_TRANSFORM_STATE, DATA_FRAME_MODE, DataFrameTransformListRow } from './common'; -import { StatsBarStat } from '../../../../../../common/types/common'; - -interface TransFormStats { - total: StatsBarStat; - batch: StatsBarStat; - continuous: StatsBarStat; - failed: StatsBarStat; - started: StatsBarStat; -} +import { TransformStatsBarStats } from '../../../../../../common/types/common'; function createTranformStats(transformsList: DataFrameTransformListRow[]) { const transformStats = { @@ -94,19 +86,8 @@ interface Props { transformsList: DataFrameTransformListRow[]; } -type StatsKey = keyof TransFormStats; - export const TransformStatsBar: FC = ({ transformsList }) => { - const transformStats: TransFormStats = createTranformStats(transformsList); - const stats = Object.keys(transformStats).map(k => transformStats[k as StatsKey]); + const transformStats: TransformStatsBarStats = createTranformStats(transformsList); - return ( -
- {stats - .filter(s => s.show) - .map(s => ( - - ))} -
- ); + return ; }; diff --git a/x-pack/legacy/plugins/ml/public/index.scss b/x-pack/legacy/plugins/ml/public/index.scss index f04cb36b2a921..e1bc011b84ceb 100644 --- a/x-pack/legacy/plugins/ml/public/index.scss +++ b/x-pack/legacy/plugins/ml/public/index.scss @@ -51,6 +51,7 @@ @import 'components/navigation_menu/index'; @import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly @import 'components/stat/index'; + @import 'components/stats_bar/index'; // Hacks are last so they can overwrite anything above if needed @import 'hacks'; diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_index.scss b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_index.scss deleted file mode 100644 index 995478bc0966c..0000000000000 --- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'jobs_stats_bar'; \ No newline at end of file diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/jobs_stats_bar.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/jobs_stats_bar.js index d2c8cac17ed2b..83116579a2adb 100644 --- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/jobs_stats_bar.js +++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/jobs_stats_bar.js @@ -6,7 +6,7 @@ import { JOB_STATE, DATAFEED_STATE } from 'plugins/ml/../common/constants/states'; -import { Stat } from '../../../../components/stat'; +import { StatsBar } from '../../../../components/stats_bar'; import PropTypes from 'prop-types'; import React from 'react'; @@ -102,14 +102,9 @@ function createJobStats(jobsSummaryList) { export const JobStatsBar = ({ jobsSummaryList }) => { const jobStats = createJobStats(jobsSummaryList); - const stats = Object.keys(jobStats).map(k => jobStats[k]); return ( -
- { - stats.filter(s => (s.show)).map(s => ) - } -
+ ); }; From a9ea63a63ddd566e487e33f803b6a49aca5ac95e Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Fri, 23 Aug 2019 10:58:25 -0400 Subject: [PATCH 6/8] move stat component into statsBar component --- x-pack/legacy/plugins/ml/public/components/stat/index.scss | 1 - x-pack/legacy/plugins/ml/public/components/stat/index.ts | 7 ------- .../ml/public/components/{stat => stats_bar}/_stat.scss | 0 .../plugins/ml/public/components/stats_bar/index.scss | 1 + .../ml/public/components/{stat => stats_bar}/stat.tsx | 0 .../plugins/ml/public/components/stats_bar/stats_bar.tsx | 2 +- x-pack/legacy/plugins/ml/public/index.scss | 1 - 7 files changed, 2 insertions(+), 10 deletions(-) delete mode 100644 x-pack/legacy/plugins/ml/public/components/stat/index.scss delete mode 100644 x-pack/legacy/plugins/ml/public/components/stat/index.ts rename x-pack/legacy/plugins/ml/public/components/{stat => stats_bar}/_stat.scss (100%) rename x-pack/legacy/plugins/ml/public/components/{stat => stats_bar}/stat.tsx (100%) diff --git a/x-pack/legacy/plugins/ml/public/components/stat/index.scss b/x-pack/legacy/plugins/ml/public/components/stat/index.scss deleted file mode 100644 index bb1c6e67baebc..0000000000000 --- a/x-pack/legacy/plugins/ml/public/components/stat/index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'stat'; diff --git a/x-pack/legacy/plugins/ml/public/components/stat/index.ts b/x-pack/legacy/plugins/ml/public/components/stat/index.ts deleted file mode 100644 index 3a97d6afb7ea7..0000000000000 --- a/x-pack/legacy/plugins/ml/public/components/stat/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -export { Stat } from './stat'; diff --git a/x-pack/legacy/plugins/ml/public/components/stat/_stat.scss b/x-pack/legacy/plugins/ml/public/components/stats_bar/_stat.scss similarity index 100% rename from x-pack/legacy/plugins/ml/public/components/stat/_stat.scss rename to x-pack/legacy/plugins/ml/public/components/stats_bar/_stat.scss diff --git a/x-pack/legacy/plugins/ml/public/components/stats_bar/index.scss b/x-pack/legacy/plugins/ml/public/components/stats_bar/index.scss index 3f9b874cb2e80..e8d8e85763eff 100644 --- a/x-pack/legacy/plugins/ml/public/components/stats_bar/index.scss +++ b/x-pack/legacy/plugins/ml/public/components/stats_bar/index.scss @@ -1 +1,2 @@ +@import 'stat'; @import 'stats_bar'; diff --git a/x-pack/legacy/plugins/ml/public/components/stat/stat.tsx b/x-pack/legacy/plugins/ml/public/components/stats_bar/stat.tsx similarity index 100% rename from x-pack/legacy/plugins/ml/public/components/stat/stat.tsx rename to x-pack/legacy/plugins/ml/public/components/stats_bar/stat.tsx diff --git a/x-pack/legacy/plugins/ml/public/components/stats_bar/stats_bar.tsx b/x-pack/legacy/plugins/ml/public/components/stats_bar/stats_bar.tsx index ae88489715212..15bf6607451d9 100644 --- a/x-pack/legacy/plugins/ml/public/components/stats_bar/stats_bar.tsx +++ b/x-pack/legacy/plugins/ml/public/components/stats_bar/stats_bar.tsx @@ -5,7 +5,7 @@ */ import React, { FC } from 'react'; -import { Stat } from '../stat'; +import { Stat } from './stat'; import { StatsBarStat, StatsBarStats, StatsKey } from '../../../common/types/common'; interface StatsBarProps { diff --git a/x-pack/legacy/plugins/ml/public/index.scss b/x-pack/legacy/plugins/ml/public/index.scss index e1bc011b84ceb..2a751aea1d831 100644 --- a/x-pack/legacy/plugins/ml/public/index.scss +++ b/x-pack/legacy/plugins/ml/public/index.scss @@ -50,7 +50,6 @@ @import 'components/messagebar/index'; @import 'components/navigation_menu/index'; @import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly - @import 'components/stat/index'; @import 'components/stats_bar/index'; // Hacks are last so they can overwrite anything above if needed From 401f93e3de58956b7efde42de3f3b3174b191499 Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Mon, 26 Aug 2019 12:35:02 -0500 Subject: [PATCH 7/8] move statsBar related types to stats_bar dir --- .../legacy/plugins/ml/common/types/common.ts | 25 ------------------- .../ml/public/components/stats_bar/index.ts | 2 +- .../ml/public/components/stats_bar/stat.tsx | 6 ++++- .../public/components/stats_bar/stats_bar.tsx | 23 +++++++++++++++-- .../transform_list/transforms_stats_bar.tsx | 4 +-- 5 files changed, 28 insertions(+), 32 deletions(-) diff --git a/x-pack/legacy/plugins/ml/common/types/common.ts b/x-pack/legacy/plugins/ml/common/types/common.ts index 02149757ab0ee..0dff3979140c0 100644 --- a/x-pack/legacy/plugins/ml/common/types/common.ts +++ b/x-pack/legacy/plugins/ml/common/types/common.ts @@ -8,31 +8,6 @@ export interface Dictionary { [id: string]: TValue; } -export interface StatsBarStat { - label: string; - value: string | number; - show?: boolean; -} - -export interface TransformStatsBarStats { - total: StatsBarStat; - batch: StatsBarStat; - continuous: StatsBarStat; - failed: StatsBarStat; - started: StatsBarStat; -} - -export interface JobStatsBarStats { - activeNodes: StatsBarStat; - total: StatsBarStat; - open: StatsBarStat; - failed: StatsBarStat; - closed: StatsBarStat; - activeDatafeeds: StatsBarStat; -} - -export type StatsBarStats = TransformStatsBarStats | JobStatsBarStats; -export type StatsKey = keyof StatsBarStats; // converts a dictionary to an array. note this loses the dictionary `key` information. // however it's able to retain the type information of the dictionary elements. export function dictionaryToArray(dict: Dictionary): TValue[] { diff --git a/x-pack/legacy/plugins/ml/public/components/stats_bar/index.ts b/x-pack/legacy/plugins/ml/public/components/stats_bar/index.ts index b8366fb38966a..4c781afe0a64c 100644 --- a/x-pack/legacy/plugins/ml/public/components/stats_bar/index.ts +++ b/x-pack/legacy/plugins/ml/public/components/stats_bar/index.ts @@ -4,4 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -export { StatsBar } from './stats_bar'; +export { StatsBar, TransformStatsBarStats } from './stats_bar'; diff --git a/x-pack/legacy/plugins/ml/public/components/stats_bar/stat.tsx b/x-pack/legacy/plugins/ml/public/components/stats_bar/stat.tsx index 8b26791ee0ee0..55fa902fe41ed 100644 --- a/x-pack/legacy/plugins/ml/public/components/stats_bar/stat.tsx +++ b/x-pack/legacy/plugins/ml/public/components/stats_bar/stat.tsx @@ -5,8 +5,12 @@ */ import React, { FC } from 'react'; -import { StatsBarStat } from '../../../common/types/common'; +export interface StatsBarStat { + label: string; + value: string | number; + show?: boolean; +} interface StatProps { stat: StatsBarStat; } diff --git a/x-pack/legacy/plugins/ml/public/components/stats_bar/stats_bar.tsx b/x-pack/legacy/plugins/ml/public/components/stats_bar/stats_bar.tsx index 15bf6607451d9..0995b1e70df5d 100644 --- a/x-pack/legacy/plugins/ml/public/components/stats_bar/stats_bar.tsx +++ b/x-pack/legacy/plugins/ml/public/components/stats_bar/stats_bar.tsx @@ -5,8 +5,27 @@ */ import React, { FC } from 'react'; -import { Stat } from './stat'; -import { StatsBarStat, StatsBarStats, StatsKey } from '../../../common/types/common'; +import { Stat, StatsBarStat } from './stat'; + +interface JobStatsBarStats { + activeNodes: StatsBarStat; + total: StatsBarStat; + open: StatsBarStat; + failed: StatsBarStat; + closed: StatsBarStat; + activeDatafeeds: StatsBarStat; +} + +export interface TransformStatsBarStats { + total: StatsBarStat; + batch: StatsBarStat; + continuous: StatsBarStat; + failed: StatsBarStat; + started: StatsBarStat; +} + +type StatsBarStats = TransformStatsBarStats | JobStatsBarStats; +type StatsKey = keyof StatsBarStats; interface StatsBarProps { stats: StatsBarStats; diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transforms_stats_bar.tsx b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transforms_stats_bar.tsx index 71d4ad2ddece8..662fdd489f42d 100644 --- a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transforms_stats_bar.tsx +++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transforms_stats_bar.tsx @@ -6,11 +6,9 @@ import React, { FC } from 'react'; import { i18n } from '@kbn/i18n'; -import { StatsBar } from '../../../../../components/stats_bar'; +import { StatsBar, TransformStatsBarStats } from '../../../../../components/stats_bar'; import { DATA_FRAME_TRANSFORM_STATE, DATA_FRAME_MODE, DataFrameTransformListRow } from './common'; -import { TransformStatsBarStats } from '../../../../../../common/types/common'; - function createTranformStats(transformsList: DataFrameTransformListRow[]) { const transformStats = { total: { From 8f2a9a6f24c50662681db59565281a86eff5cb81 Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Mon, 26 Aug 2019 13:58:00 -0500 Subject: [PATCH 8/8] rename scss file. remove unnecessary import --- .../ml/public/components/stats_bar/{index.scss => _index.scss} | 0 x-pack/legacy/plugins/ml/public/jobs/jobs_list/_index.scss | 3 +-- 2 files changed, 1 insertion(+), 2 deletions(-) rename x-pack/legacy/plugins/ml/public/components/stats_bar/{index.scss => _index.scss} (100%) diff --git a/x-pack/legacy/plugins/ml/public/components/stats_bar/index.scss b/x-pack/legacy/plugins/ml/public/components/stats_bar/_index.scss similarity index 100% rename from x-pack/legacy/plugins/ml/public/components/stats_bar/index.scss rename to x-pack/legacy/plugins/ml/public/components/stats_bar/_index.scss diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/_index.scss b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/_index.scss index a215ff2d1a835..2d26cd644eca2 100644 --- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/_index.scss +++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/_index.scss @@ -6,6 +6,5 @@ @import 'components/job_group/index'; @import 'components/jobs_list/index'; // SASSTODO: Dangerous EUI overwrites @import 'components/jobs_list_view/index'; -@import 'components/jobs_stats_bar/index'; @import 'components/multi_job_actions/index'; // SASSTODO: Dangerous EUI overwrites -@import 'components/start_datafeed_modal/index'; // SASSTODO: Needs a rewrite \ No newline at end of file +@import 'components/start_datafeed_modal/index'; // SASSTODO: Needs a rewrite