From a927e07a0d88975b5bd621bac82c95b9d293ebdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien?= Date: Fri, 14 Dec 2018 18:18:21 +0100 Subject: [PATCH] [CCR] UI updates --- x-pack/package.json | 1 + .../components/auto_follow_pattern_form.js | 38 +++--------------- .../auto_follow_pattern_indices_preview.js | 39 +++++++++++++++++++ .../public/app/components/index.js | 1 + .../auto_follow_pattern_table.js | 19 +++------ .../app/services/auto_follow_pattern.js | 15 ++++++- .../app/store/reducers/auto_follow_pattern.js | 12 +++++- yarn.lock | 5 +++ 8 files changed, 81 insertions(+), 49 deletions(-) create mode 100644 x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_indices_preview.js diff --git a/x-pack/package.json b/x-pack/package.json index 30b35e35678b6..c7ab398ac119c 100644 --- a/x-pack/package.json +++ b/x-pack/package.json @@ -160,6 +160,7 @@ "d3": "3.5.6", "d3-scale": "1.0.6", "dataloader": "^1.4.0", + "date-fns": "^1.30.1", "dedent": "^0.7.0", "dragselect": "1.8.1", "elasticsearch": "^15.2.0", diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_form.js b/x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_form.js index fe43c1bb85cbb..b5e577866aeec 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_form.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_form.js @@ -34,8 +34,7 @@ import { INDEX_ILLEGAL_CHARACTERS_VISIBLE } from 'ui/indices'; import routing from '../services/routing'; import { API_STATUS } from '../constants'; -import { SectionError } from './'; -import { getPrefixSuffixFromFollowPattern, getPreviewIndicesFromAutoFollowPattern } from '../services/auto_follow_pattern'; +import { SectionError, AutoFollowPatternIndicesPreview } from './'; import { validateAutoFollowPattern, validateLeaderIndexPattern } from '../services/auto_follow_pattern_validators'; const indexPatternIllegalCharacters = INDEX_PATTERN_ILLEGAL_CHARACTERS_VISIBLE.join(' '); @@ -83,7 +82,6 @@ export class AutoFollowPatternFormUI extends PureComponent { ? getEmptyAutoFollowPattern(this.props.remoteClusters) : { ...this.props.autoFollowPattern, - ...getPrefixSuffixFromFollowPattern(this.props.autoFollowPattern.followIndexPattern) }; this.state = { @@ -438,34 +436,6 @@ export class AutoFollowPatternFormUI extends PureComponent { const isPrefixInvalid = areErrorsVisible && !!fieldsErrors.followIndexPatternPrefix; const isSuffixInvalid = areErrorsVisible && !!fieldsErrors.followIndexPatternSuffix; - const renderFollowIndicesPreview = () => { - const { indicesPreview } = getPreviewIndicesFromAutoFollowPattern({ - prefix: followIndexPatternPrefix, - suffix: followIndexPatternSuffix, - leaderIndexPatterns - }); - - const title = intl.formatMessage({ - id: 'xpack.crossClusterReplication.autoFollowPatternForm.indicesPreviewTitle', - defaultMessage: 'Index name examples', - }); - - return ( - - -
    - {indicesPreview.map((followerIndex, i) =>
  • {followerIndex}
    • )} -
- - ); - }; - return ( - {renderFollowIndicesPreview()} + )} diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_indices_preview.js b/x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_indices_preview.js new file mode 100644 index 0000000000000..1cc8bcb87f49b --- /dev/null +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_indices_preview.js @@ -0,0 +1,39 @@ +/* + * 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 from 'react'; + +import { EuiCallOut } from '@elastic/eui'; +import { injectI18n, FormattedMessage } from '@kbn/i18n/react'; +import { getPreviewIndicesFromAutoFollowPattern } from '../services/auto_follow_pattern'; + +export const AutoFollowPatternIndicesPreview = injectI18n(({ prefix, suffix, leaderIndexPatterns, intl }) => { + const { indicesPreview } = getPreviewIndicesFromAutoFollowPattern({ + prefix, + suffix, + leaderIndexPatterns + }); + + const title = intl.formatMessage({ + id: 'xpack.crossClusterReplication.autoFollowPatternForm.indicesPreviewTitle', + defaultMessage: 'Index name examples', + }); + + return ( + + +
    + {indicesPreview.map((followerIndex, i) =>
  • {followerIndex}
    • )} +
+ + ); +}); diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/index.js b/x-pack/plugins/cross_cluster_replication/public/app/components/index.js index f28fc3aeee1d7..5b4a7b407eda0 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/components/index.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/index.js @@ -11,3 +11,4 @@ export { RemoteClustersProvider } from './remote_clusters_provider'; export { AutoFollowPatternForm } from './auto_follow_pattern_form'; export { AutoFollowPatternDeleteProvider } from './auto_follow_pattern_delete_provider'; export { AutoFollowPatternPageTitle } from './auto_follow_pattern_page_title'; +export { AutoFollowPatternIndicesPreview } from './auto_follow_pattern_indices_preview'; diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js index a26a9cd544983..20ed152c2816e 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js @@ -19,7 +19,6 @@ import { import { API_STATUS } from '../../../../../constants'; import { AutoFollowPatternDeleteProvider } from '../../../../../components'; import routing from '../../../../../services/routing'; -import { getPrefixSuffixFromFollowPattern } from '../../../../../services/auto_follow_pattern'; export class AutoFollowPatternTableUI extends PureComponent { static propTypes = { @@ -44,12 +43,14 @@ export class AutoFollowPatternTableUI extends PureComponent { if(queryText) { return autoFollowPatterns.filter(autoFollowPattern => { - const { name, remoteCluster } = autoFollowPattern; + const { name, remoteCluster, followIndexPatternPrefix, followIndexPatternSuffix } = autoFollowPattern; const inName = name.toLowerCase().includes(queryText); const inRemoteCluster = remoteCluster.toLowerCase().includes(queryText); + const inPrefix = followIndexPatternPrefix.toLowerCase().includes(queryText); + const inSuffix = followIndexPatternSuffix.toLowerCase().includes(queryText); - return inName || inRemoteCluster; + return inName || inRemoteCluster || inPrefix || inSuffix; }); } @@ -89,29 +90,21 @@ export class AutoFollowPatternTableUI extends PureComponent { ), render: (leaderPatterns) => leaderPatterns.join(', '), }, { - field: 'followIndexPattern', + field: 'followIndexPatternPrefix', name: ( ), - render: (followIndexPattern) => { - const { followIndexPatternPrefix } = getPrefixSuffixFromFollowPattern(followIndexPattern); - return followIndexPatternPrefix; - } }, { - field: 'followIndexPattern', + field: 'followIndexPatternSuffix', name: ( ), - render: (followIndexPattern) => { - const { followIndexPatternSuffix } = getPrefixSuffixFromFollowPattern(followIndexPattern); - return followIndexPatternSuffix; - } }, { name: '', actions: [ diff --git a/x-pack/plugins/cross_cluster_replication/public/app/services/auto_follow_pattern.js b/x-pack/plugins/cross_cluster_replication/public/app/services/auto_follow_pattern.js index 1d9eada0bae31..963dfebcea198 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/services/auto_follow_pattern.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/services/auto_follow_pattern.js @@ -4,8 +4,15 @@ * you may not use this file except in compliance with the Elastic License. */ +import React, { Fragment } from 'react'; +import { format, addDays } from 'date-fns'; + export const getFollowPattern = (prefix = '', suffix = '', template = '{{leader_index}}') => ( - prefix + template + suffix + + {prefix} + {template} + {suffix} + ); /** @@ -20,7 +27,11 @@ export const getPreviewIndicesFromAutoFollowPattern = ({ suffix, leaderIndexPatterns, limit = 5, - wildcardPlaceHolders = ['0', '1', '2'] + wildcardPlaceHolders = [ + format(new Date(), 'YYYY-MM-DD'), + format(addDays(new Date(), 1), 'YYYY-MM-DD'), + format(addDays(new Date(), 2), 'YYYY-MM-DD'), + ] }) => { const indicesPreview = []; let indexPreview; diff --git a/x-pack/plugins/cross_cluster_replication/public/app/store/reducers/auto_follow_pattern.js b/x-pack/plugins/cross_cluster_replication/public/app/store/reducers/auto_follow_pattern.js index 71f1378fb0e90..102d44efb2219 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/store/reducers/auto_follow_pattern.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/store/reducers/auto_follow_pattern.js @@ -6,6 +6,7 @@ import * as t from '../action_types'; import { arrayToObject } from '../../services/utils'; +import { getPrefixSuffixFromFollowPattern } from '../../services/auto_follow_pattern'; const initialState = { byId: {}, @@ -14,13 +15,20 @@ const initialState = { const success = action => `${action}_SUCCESS`; +const parseAutoFollowPattern = (autoFollowPattern) => { + // Extract prefix and suffix from follow index pattern + const { followIndexPatternPrefix, followIndexPatternSuffix } = getPrefixSuffixFromFollowPattern(autoFollowPattern.followIndexPattern); + + return { ...autoFollowPattern, followIndexPatternPrefix, followIndexPatternSuffix }; +}; + export const reducer = (state = initialState, action) => { switch (action.type) { case success(t.AUTO_FOLLOW_PATTERN_LOAD): { - return { ...state, byId: arrayToObject(action.payload.patterns, 'name') }; + return { ...state, byId: arrayToObject(action.payload.patterns.map(parseAutoFollowPattern), 'name') }; } case success(t.AUTO_FOLLOW_PATTERN_GET): { - return { ...state, byId: { ...state.byId, [action.payload.name]: action.payload } }; + return { ...state, byId: { ...state.byId, [action.payload.name]: parseAutoFollowPattern(action.payload) } }; } case t.AUTO_FOLLOW_PATTERN_SELECT: { return { ...state, selectedId: action.payload }; diff --git a/yarn.lock b/yarn.lock index 554fbdcefc669..f09e4b1e49dcf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6476,6 +6476,11 @@ date-fns@^1.27.2: resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6" integrity sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw== +date-fns@^1.30.1: + version "1.30.1" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c" + integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw== + date-now@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"