From f3917c2decddcb30db64bf573ec694a7b317bce9 Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Thu, 2 Jul 2020 02:42:57 -0700 Subject: [PATCH 01/29] Redesigns home page Adds auto scroll to advanced setting provided in the URL hash Registered plugins to feature catalogue to be displayed on home page Rearrange add data section Fix solution panel conditional rendering Removed extraneous import Remmoved environment update from observability plugin Registrered features to feature catalog for ingest manager, ml, and index lifecycle management Fixed import Added max width to Kibana solution card Fixed feature id Fixed enterprise search link Updated solutions logos Fixed beta label on ingest manager card Fixed logos Cleaned up CSS Change home route redirects user to advanced settings Conditionally renders default route advanced setting link Restored app search logo Hides graph description on home page on basic license Style home page header and other misc design tweaks (#72481) --- src/plugins/advanced_settings/kibana.json | 2 +- .../management_app/advanced_settings.tsx | 13 + .../management_app/components/field/field.tsx | 1 + .../advanced_settings/public/plugin.ts | 17 +- src/plugins/advanced_settings/public/types.ts | 3 + src/plugins/home/common/constants.ts | 21 + .../application/components/_add_data.scss | 63 +-- .../public/application/components/_home.scss | 29 ++ .../public/application/components/_index.scss | 1 + .../components/_solutions_panel.scss | 100 ++++ .../application/components/_synopsis.scss | 4 + .../public/application/components/add_data.js | 320 ------------- .../application/components/add_data.test.js | 68 --- .../components/app_navigation_handler.ts | 1 + .../change_home_route.test.tsx | 18 + .../change_home_route/change_home_route.tsx | 65 +++ .../components/change_home_route/index.tsx | 20 + .../public/application/components/home.js | 288 ++++++++---- .../public/application/components/home_app.js | 4 - .../components/solutions_panel/index.ts | 20 + .../solutions_panel/solutions_panel.tsx | 433 ++++++++++++++++++ .../solutions_panel/solutions_title.tsx | 53 +++ ...ound_enterprise_search_bottom_right_2x.png | Bin 0 -> 236 bytes ...ckground_enterprise_search_top_left_2x.png | Bin 0 -> 951 bytes .../background_kibana_bottom_right_2x.png | Bin 0 -> 2353 bytes .../assets/background_kibana_top_left_2x.png | Bin 0 -> 2125 bytes .../background_observability_top_right_2x.png | Bin 0 -> 312 bytes ...ckground_security_solution_top_left_2x.png | Bin 0 -> 764 bytes src/plugins/home/public/index.ts | 1 + src/plugins/home/public/plugin.ts | 30 +- .../feature_catalogue_registry.ts | 18 +- src/plugins/management/public/plugin.ts | 2 +- x-pack/plugins/apm/public/plugin.ts | 1 + x-pack/plugins/graph/public/plugin.ts | 14 +- .../public/plugin.tsx | 20 +- .../public/types.ts | 2 + x-pack/plugins/infra/server/features.ts | 14 +- x-pack/plugins/ingest_manager/kibana.json | 4 +- .../plugins/ingest_manager/public/plugin.ts | 20 +- .../plugins/ingest_manager/server/plugin.ts | 3 + .../plugins/ml/common/types/capabilities.ts | 2 + x-pack/plugins/ml/public/register_feature.ts | 19 + x-pack/plugins/ml/server/plugin.ts | 2 +- x-pack/plugins/observability/kibana.json | 3 + x-pack/plugins/observability/public/plugin.ts | 28 +- .../security_solution/common/constants.ts | 2 +- .../security_solution/public/plugin.tsx | 28 +- .../plugins/snapshot_restore/public/plugin.ts | 24 +- 48 files changed, 1184 insertions(+), 597 deletions(-) create mode 100644 src/plugins/home/common/constants.ts create mode 100644 src/plugins/home/public/application/components/_solutions_panel.scss delete mode 100644 src/plugins/home/public/application/components/add_data.js delete mode 100644 src/plugins/home/public/application/components/add_data.test.js create mode 100644 src/plugins/home/public/application/components/change_home_route/change_home_route.test.tsx create mode 100644 src/plugins/home/public/application/components/change_home_route/change_home_route.tsx create mode 100644 src/plugins/home/public/application/components/change_home_route/index.tsx create mode 100644 src/plugins/home/public/application/components/solutions_panel/index.ts create mode 100644 src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx create mode 100644 src/plugins/home/public/application/components/solutions_panel/solutions_title.tsx create mode 100644 src/plugins/home/public/assets/background_enterprise_search_bottom_right_2x.png create mode 100644 src/plugins/home/public/assets/background_enterprise_search_top_left_2x.png create mode 100644 src/plugins/home/public/assets/background_kibana_bottom_right_2x.png create mode 100644 src/plugins/home/public/assets/background_kibana_top_left_2x.png create mode 100644 src/plugins/home/public/assets/background_observability_top_right_2x.png create mode 100644 src/plugins/home/public/assets/background_security_solution_top_left_2x.png diff --git a/src/plugins/advanced_settings/kibana.json b/src/plugins/advanced_settings/kibana.json index 8cf9b9c656d8f..2f83ccf332dbd 100644 --- a/src/plugins/advanced_settings/kibana.json +++ b/src/plugins/advanced_settings/kibana.json @@ -3,6 +3,6 @@ "version": "kibana", "server": true, "ui": true, - "requiredPlugins": ["management"], + "requiredPlugins": ["management", "home"], "requiredBundles": ["kibanaReact"] } diff --git a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx b/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx index d8853015d362a..dd4383d76a738 100644 --- a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx +++ b/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx @@ -114,6 +114,19 @@ export class AdvancedSettingsComponent extends Component< filteredSettings: this.mapSettings(Query.execute(query, this.settings)), }); }); + + // scrolls to setting provided in the URL hash + const { hash } = window.location; + if (hash !== '') { + setTimeout(() => { + const id = hash.replace('#', ''); + const element = document.getElementById(id); + if (element) { + element.scrollIntoView(); + window.scrollBy(0, -48); // offsets scroll by height of the global nav + } + }, 0); + } } componentWillUnmount() { diff --git a/src/plugins/advanced_settings/public/management_app/components/field/field.tsx b/src/plugins/advanced_settings/public/management_app/components/field/field.tsx index 32bfc0826e7c4..83b702ecef0e9 100644 --- a/src/plugins/advanced_settings/public/management_app/components/field/field.tsx +++ b/src/plugins/advanced_settings/public/management_app/components/field/field.tsx @@ -671,6 +671,7 @@ export class Field extends PureComponent { return ( { - public setup(core: CoreSetup, { management }: AdvancedSettingsPluginSetup) { + public setup(core: CoreSetup, { management, home }: AdvancedSettingsPluginSetup) { const kibanaSection = management.sections.section.kibana; kibanaSection.registerApp({ @@ -44,6 +45,20 @@ export class AdvancedSettingsPlugin }, }); + if (home) { + home.featureCatalogue.register({ + id: 'advanced_settings', + title, + description: i18n.translate('xpack.advancedSettings.featureCatalogueTitle', { + defaultMessage: 'Customize your Kibana experience', + }), + icon: 'gear', // TODO: Do we want to use this icon here? + path: '/app/management/kibana/settings', + showOnHomePage: true, + category: FeatureCatalogueCategory.ADMIN, + }); + } + return { component: component.setup, }; diff --git a/src/plugins/advanced_settings/public/types.ts b/src/plugins/advanced_settings/public/types.ts index a233b3debab8d..cc59f52b1f30f 100644 --- a/src/plugins/advanced_settings/public/types.ts +++ b/src/plugins/advanced_settings/public/types.ts @@ -18,6 +18,8 @@ */ import { ComponentRegistry } from './component_registry'; +import { HomePublicPluginSetup } from '../../home/public'; + import { ManagementSetup } from '../../management/public'; export interface AdvancedSettingsSetup { @@ -29,6 +31,7 @@ export interface AdvancedSettingsStart { export interface AdvancedSettingsPluginSetup { management: ManagementSetup; + home?: HomePublicPluginSetup; } export { ComponentRegistry }; diff --git a/src/plugins/home/common/constants.ts b/src/plugins/home/common/constants.ts new file mode 100644 index 0000000000000..a9457a9d3307c --- /dev/null +++ b/src/plugins/home/common/constants.ts @@ -0,0 +1,21 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export const PLUGIN_ID = 'home'; +export const HOME_APP_BASE_PATH = `/app/${PLUGIN_ID}`; diff --git a/src/plugins/home/public/application/components/_add_data.scss b/src/plugins/home/public/application/components/_add_data.scss index 836b34227a37c..115f957059475 100644 --- a/src/plugins/home/public/application/components/_add_data.scss +++ b/src/plugins/home/public/application/components/_add_data.scss @@ -1,63 +1,8 @@ -.homAddData__card { - border: none; - box-shadow: none; -} - -.homAddData__cardDivider { - position: relative; - - &:after { - position: absolute; - content: ''; - width: 1px; - right: -$euiSizeS; - top: 0; - bottom: 0; - background: $euiBorderColor; - } -} - -.homAddData__icon { - width: $euiSizeXL * 2; - height: $euiSizeXL * 2; -} - -.homAddData__footerItem--highlight { - background-color: tintOrShade($euiColorPrimary, 90%, 70%); - padding: $euiSize; -} - -.homAddData__footerItem { +.homAddData__image { text-align: center; -} - -.homAddData__logo { - margin-left: $euiSize; -} - -@include euiBreakpoint('xs', 's') { - .homeAddData__flexGroup { - flex-wrap: wrap; - } -} - -@include euiBreakpoint('xs', 's', 'm') { - .homAddDat__flexTablet { - flex-direction: column; - } - - .homAddData__cardDivider:after { - display: none; - } - - .homAddData__cardDivider { - flex-grow: 0 !important; - flex-basis: 100% !important; - } -} -@include euiBreakpoint('l', 'xl') { - .homeAddData__flexGroup { - flex-wrap: nowrap; + .euiImage__img { + max-height: $euiSize * 16; // too tall if only two "Add data" features are enabled + width: auto; } } diff --git a/src/plugins/home/public/application/components/_home.scss b/src/plugins/home/public/application/components/_home.scss index 4101f6519829b..77d401d5af43e 100644 --- a/src/plugins/home/public/application/components/_home.scss +++ b/src/plugins/home/public/application/components/_home.scss @@ -1,3 +1,32 @@ +// Local page vars +$homePageHeaderHeight: $euiSize * 8; +$homePageWidth: 1200px; + +.homPageHeader { + height: $homePageHeaderHeight; + margin: 0 auto; + max-width: $homePageWidth; + padding: $euiSizeXL $euiSize 0; +} + +.homPageContainer { + min-height: calc(100vh - #{$homePageHeaderHeight}); + background-color: $euiColorEmptyShade; + border-top: 1px solid $euiColorLightShade; +} + +.homPage { + display: flex; + max-width: $homePageWidth; + margin: 0 auto; + padding: 0 $euiSize $euiSizeXL; + background-color: transparent; +} + +.homHome__synopsisItem { + max-width: 50%; +} + @include euiBreakpoint('xs', 's', 'm') { .homHome__synopsisItem { flex-basis: 100% !important; diff --git a/src/plugins/home/public/application/components/_index.scss b/src/plugins/home/public/application/components/_index.scss index 870099ffb350e..59bcdd0e8f289 100644 --- a/src/plugins/home/public/application/components/_index.scss +++ b/src/plugins/home/public/application/components/_index.scss @@ -8,6 +8,7 @@ @import 'add_data'; @import 'home'; @import 'sample_data_set_cards'; +@import 'solutions_panel'; @import 'synopsis'; @import 'welcome'; diff --git a/src/plugins/home/public/application/components/_solutions_panel.scss b/src/plugins/home/public/application/components/_solutions_panel.scss new file mode 100644 index 0000000000000..1b2d246818574 --- /dev/null +++ b/src/plugins/home/public/application/components/_solutions_panel.scss @@ -0,0 +1,100 @@ +.homSolutionsPanel { + margin-top: -$euiSizeXL; + min-height: $euiSize*16; + display: flex; + + .homSolutionsPanel--restrictHalfWidth { + max-width: 50%; + } + + .homSolutionsPanel__solutionPanel { + display: flex; + align-items: stretch; + + .homSolutionsPanel__solutionTitle { + padding: $euiSize; + + .euiToken { + padding: $euiSizeS; + } + } + + .homSolutionsPanel__CTA { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + padding: $euiSize; + } + } + + .homSolutionsPanel__header { + border-radius: $euiBorderRadius 0 0 $euiBorderRadius; + color: $euiColorEmptyShade; + + img { + position: absolute; + width: auto; + } + } + + .homSolutionsPanel__enterpriseSearch { + .homSolutionsPanel__enterpriseSearchHeader { + background-color: #017d73; + + .homSolutionsPanel__enterpriseSearchTopLeftImage img { + top: $euiSizeS; + left: 0; + height: $euiSizeXL; + } + + .homSolutionsPanel__enterpriseSearchBottomRightImage img { + right: $euiSizeS; + bottom: $euiSizeS; + height: $euiSizeXL; + } + } + } + + .homSolutionsPanel__observability { + .homSolutionsPanel__observabilityHeader { + background-color: #c42373; + + .homSolutionsPanel__observabilityTopRightImage img { + top: $euiSizeS; + right: $euiSizeS; + height: $euiSizeXL; + } + } + } + + .homSolutionsPanel__securitySolution { + .homSolutionsPanel__securitySolutionHeader { + background-color: #343741; + + .homSolutionsPanel__securitySolutionTopLeftImage img { + top: $euiSizeS; + left: $euiSizeS; + height: $euiSizeXXL; + } + } + } + + .homSolutionsPanel__kibana { + .homSolutionsPanel__kibanaHeader { + background-color: #006bb4; + + .homSolutionsPanel__kibanaTopLeftImage img { + top: 0; + left: 0; + height: $euiSizeXXL * 4; + } + + .homSolutionsPanel__kibanaBottomRightImage img { + right: 0; + bottom: 0; + height: $euiSizeXXL * 4; + } + } + } +} diff --git a/src/plugins/home/public/application/components/_synopsis.scss b/src/plugins/home/public/application/components/_synopsis.scss index 49e71f159fe6f..3eac2bc9705e0 100644 --- a/src/plugins/home/public/application/components/_synopsis.scss +++ b/src/plugins/home/public/application/components/_synopsis.scss @@ -5,6 +5,10 @@ box-shadow: none; } + .homSynopsis__cardTitle { + display: flex; + } + // SASSTODO: Fix in EUI .euiCard__content { padding-top: 0 !important; diff --git a/src/plugins/home/public/application/components/add_data.js b/src/plugins/home/public/application/components/add_data.js deleted file mode 100644 index c35b7b04932fb..0000000000000 --- a/src/plugins/home/public/application/components/add_data.js +++ /dev/null @@ -1,320 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import { injectI18n, FormattedMessage } from '@kbn/i18n/react'; -import { getServices } from '../kibana_services'; - -import { - EuiButton, - EuiLink, - EuiPanel, - EuiTitle, - EuiSpacer, - EuiFlexGroup, - EuiFlexItem, - EuiText, - EuiCard, - EuiIcon, - EuiHorizontalRule, - EuiFlexGrid, -} from '@elastic/eui'; - -const AddDataUi = ({ apmUiEnabled, isNewKibanaInstance, intl, mlEnabled }) => { - const basePath = getServices().getBasePath(); - - const renderCards = () => { - const apmData = { - title: intl.formatMessage({ - id: 'home.addData.apm.nameTitle', - defaultMessage: 'APM', - }), - description: intl.formatMessage({ - id: 'home.addData.apm.nameDescription', - defaultMessage: - 'APM automatically collects in-depth performance metrics and errors from inside your applications.', - }), - ariaDescribedby: 'aria-describedby.addAmpButtonLabel', - }; - const loggingData = { - title: intl.formatMessage({ - id: 'home.addData.logging.nameTitle', - defaultMessage: 'Logs', - }), - description: intl.formatMessage({ - id: 'home.addData.logging.nameDescription', - defaultMessage: - 'Ingest logs from popular data sources and easily visualize in preconfigured dashboards.', - }), - ariaDescribedby: 'aria-describedby.addLogDataButtonLabel', - }; - const metricsData = { - title: intl.formatMessage({ - id: 'home.addData.metrics.nameTitle', - defaultMessage: 'Metrics', - }), - description: intl.formatMessage({ - id: 'home.addData.metrics.nameDescription', - defaultMessage: - 'Collect metrics from the operating system and services running on your servers.', - }), - ariaDescribedby: 'aria-describedby.addMetricsButtonLabel', - }; - const siemData = { - title: intl.formatMessage({ - id: 'home.addData.securitySolution.nameTitle', - defaultMessage: 'SIEM + Endpoint Security', - }), - description: intl.formatMessage({ - id: 'home.addData.securitySolution.nameDescription', - defaultMessage: - 'Protect hosts, analyze security information and events, hunt threats, automate detections, and create cases.', - }), - ariaDescribedby: 'aria-describedby.addSiemButtonLabel', - }; - - const getApmCard = () => ( - - {apmData.description}} - footer={ - - - - } - /> - - ); - - return ( - - - - - - - - - -

- -

- - - - - - {apmUiEnabled !== false && getApmCard()} - - - {loggingData.description} - } - footer={ - - - - } - /> - - - - {metricsData.description} - } - footer={ - - - - } - /> - - - - - - - - - - - -

- -

- - - - - {siemData.description}} - footer={ - - - - } - /> - - - ); - }; - - const footerItemClasses = classNames('homAddData__footerItem', { - 'homAddData__footerItem--highlight': isNewKibanaInstance, - }); - - return ( - - {renderCards()} - - - - - - - - - - - - - - - {mlEnabled !== false ? ( - - - - - - - - - - - ) : null} - - - - - - - - - - - - - ); -}; - -AddDataUi.propTypes = { - apmUiEnabled: PropTypes.bool.isRequired, - mlEnabled: PropTypes.bool.isRequired, - isNewKibanaInstance: PropTypes.bool.isRequired, -}; - -export const AddData = injectI18n(AddDataUi); diff --git a/src/plugins/home/public/application/components/add_data.test.js b/src/plugins/home/public/application/components/add_data.test.js deleted file mode 100644 index 9457f766409b8..0000000000000 --- a/src/plugins/home/public/application/components/add_data.test.js +++ /dev/null @@ -1,68 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; -import { AddData } from './add_data'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; -import { getServices } from '../kibana_services'; - -jest.mock('../kibana_services', () => { - const mock = { - getBasePath: jest.fn(() => 'path'), - }; - return { - getServices: () => mock, - }; -}); - -beforeEach(() => { - jest.clearAllMocks(); -}); - -test('render', () => { - const component = shallowWithIntl( - - ); - expect(component).toMatchSnapshot(); // eslint-disable-line - expect(getServices().getBasePath).toHaveBeenCalledTimes(1); -}); - -test('mlEnabled', () => { - const component = shallowWithIntl( - - ); - expect(component).toMatchSnapshot(); // eslint-disable-line - expect(getServices().getBasePath).toHaveBeenCalledTimes(1); -}); - -test('apmUiEnabled', () => { - const component = shallowWithIntl( - - ); - expect(component).toMatchSnapshot(); // eslint-disable-line - expect(getServices().getBasePath).toHaveBeenCalledTimes(1); -}); - -test('isNewKibanaInstance', () => { - const component = shallowWithIntl( - - ); - expect(component).toMatchSnapshot(); // eslint-disable-line - expect(getServices().getBasePath).toHaveBeenCalledTimes(1); -}); diff --git a/src/plugins/home/public/application/components/app_navigation_handler.ts b/src/plugins/home/public/application/components/app_navigation_handler.ts index 6e78af7f42f52..61d85c033b544 100644 --- a/src/plugins/home/public/application/components/app_navigation_handler.ts +++ b/src/plugins/home/public/application/components/app_navigation_handler.ts @@ -17,6 +17,7 @@ * under the License. */ +import { MouseEvent } from 'react'; import { getServices } from '../kibana_services'; export const createAppNavigationHandler = (targetUrl: string) => (event: MouseEvent) => { diff --git a/src/plugins/home/public/application/components/change_home_route/change_home_route.test.tsx b/src/plugins/home/public/application/components/change_home_route/change_home_route.test.tsx new file mode 100644 index 0000000000000..9880b336e76e5 --- /dev/null +++ b/src/plugins/home/public/application/components/change_home_route/change_home_route.test.tsx @@ -0,0 +1,18 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ diff --git a/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx b/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx new file mode 100644 index 0000000000000..1dc1bcc60ae4c --- /dev/null +++ b/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx @@ -0,0 +1,65 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FunctionComponent } from 'react'; +import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { HOME_APP_BASE_PATH } from '../../../../common/constants'; +import { getServices } from '../../kibana_services'; +import { createAppNavigationHandler } from '../app_navigation_handler'; + +interface Props { + defaultRoute?: string; +} + +export const ChangeHomeRoute: FunctionComponent = ({ defaultRoute }) => { + const { uiSettings } = getServices(); + const changeDefaultRoute = () => uiSettings.set('defaultRoute', defaultRoute); + + return ( + + + +

+ +

+ + + + + + + + + ); +}; + +ChangeHomeRoute.defaultProps = { + defaultRoute: HOME_APP_BASE_PATH, +}; diff --git a/src/plugins/home/public/application/components/change_home_route/index.tsx b/src/plugins/home/public/application/components/change_home_route/index.tsx new file mode 100644 index 0000000000000..430100a29b161 --- /dev/null +++ b/src/plugins/home/public/application/components/change_home_route/index.tsx @@ -0,0 +1,20 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export * from './change_home_route'; diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js index f8769bfd0d618..f44fb914c7fda 100644 --- a/src/plugins/home/public/application/components/home.js +++ b/src/plugins/home/public/application/components/home.js @@ -17,30 +17,27 @@ * under the License. */ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import { Synopsis } from './synopsis'; -import { AddData } from './add_data'; +import { ChangeHomeRoute } from './change_home_route'; +import { SolutionsPanel } from './solutions_panel'; import { FormattedMessage } from '@kbn/i18n/react'; import { - EuiButton, - EuiPage, - EuiPanel, + EuiButtonEmpty, EuiTitle, - EuiSpacer, EuiFlexGroup, EuiFlexItem, - EuiFlexGrid, - EuiText, - EuiPageBody, EuiScreenReaderOnly, + EuiSpacer, + EuiHorizontalRule, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { Welcome } from './welcome'; import { getServices } from '../kibana_services'; -import { FeatureCatalogueCategory } from '../../services'; +import { HOME_APP_BASE_PATH } from '../../../common/constants'; import { createAppNavigationHandler } from './app_navigation_handler'; const KEY_ENABLE_WELCOME = 'home:welcome:show'; @@ -116,105 +113,204 @@ export class Home extends Component { this._isMounted && this.setState({ isWelcomeEnabled: false }); }; - renderDirectories = (category) => { - const { addBasePath, directories } = this.props; - return directories - .filter((directory) => { - return directory.showOnHomePage && directory.category === category; - }) - .map((directory) => { - return ( - - - - ); - }); + findDirectoryById = (id) => + this.props.directories.find((directory) => directory.showOnHomePage && directory.id === id); + + renderDirectory = (directory) => { + const { addBasePath } = this.props; + + return directory ? ( + + + + ) : null; }; renderNormal() { - const { apmUiEnabled, mlEnabled } = this.props; + const { addBasePath, directories } = this.props; + + const fileDataVisualizer = this.findDirectoryById('ml_file_data_visualizer'); + const ingestManager = this.findDirectoryById('ingestManager'); + const security = this.findDirectoryById('security'); + const monitoring = this.findDirectoryById('monitoring'); + const snapshotRestore = this.findDirectoryById('snapshot_restore'); + const indexLifecycleManagement = this.findDirectoryById('index_lifecycle_management'); + const devTools = this.findDirectoryById('console'); + const stackManagement = this.findDirectoryById('stack-management'); + const advancedSettings = this.findDirectoryById('advanced_settings'); + + console.log({ directories }); return ( - - - -

- -

- - - - - - - + +
+ - - -

+ +

+ +

+ + + +

-

+

- - - {this.renderDirectories(FeatureCatalogueCategory.DATA)} - - + - - -

- -

- - - - {this.renderDirectories(FeatureCatalogueCategory.ADMIN)} - - + + + + {i18n.translate('home.pageHeader.addDataButtonLabel', { + defaultMessage: 'Add data', + })} + + + {stackManagement ? ( + + + {i18n.translate('home.pageHeader.stackManagementButtonLabel', { + defaultMessage: 'Manage stack', + })} + + + ) : null} + {devTools ? ( + + + {i18n.translate('home.pageHeader.devToolsButtonLabel', { + defaultMessage: 'Dev tools', + })} + + + ) : null} + {/* + + {i18n.translate('home.pageHeader.appDirectoryButtonLabel', { + defaultMessage: 'App directory', + })} + + */} + +
+
+
+
+ +
- - - - - -

- -

- - - - - - - - - + + + +
+ + + +

+ {i18n.translate('home.addData.sectionTitle', { + defaultMessage: 'Add your data', + })} +

+ + + + + + + + + + + + + + + + + + {this.renderDirectory(ingestManager)} + {this.renderDirectory(fileDataVisualizer)} + + + +
+ + {security || monitoring || snapshotRestore || indexLifecycleManagement ? ( + + + + +
+ +

+ {i18n.translate('home.manageData.sectionTitle', { + defaultMessage: 'Manage your data', + })} +

+ + + + + + {this.renderDirectory(security)} + {this.renderDirectory(monitoring)} + {this.renderDirectory(snapshotRestore)} + {this.renderDirectory(indexLifecycleManagement)} + +
+ + ) : null} + + {advancedSettings && ( + + + + + )} +
+
+ ); } @@ -262,11 +358,9 @@ Home.propTypes = { category: PropTypes.string.isRequired, }) ), - apmUiEnabled: PropTypes.bool.isRequired, find: PropTypes.func.isRequired, localStorage: PropTypes.object.isRequired, urlBasePath: PropTypes.string.isRequired, - mlEnabled: PropTypes.bool.isRequired, telemetry: PropTypes.shape({ telemetryService: PropTypes.any, telemetryNotifications: PropTypes.any, diff --git a/src/plugins/home/public/application/components/home_app.js b/src/plugins/home/public/application/components/home_app.js index 648915b6dae0c..53f094943480d 100644 --- a/src/plugins/home/public/application/components/home_app.js +++ b/src/plugins/home/public/application/components/home_app.js @@ -48,8 +48,6 @@ export function HomeApp({ directories }) { } = getServices(); const environment = environmentService.getEnvironment(); const isCloudEnabled = environment.cloud; - const mlEnabled = environment.ml; - const apmUiEnabled = environment.apmUi; const renderTutorialDirectory = (props) => { return ( @@ -87,8 +85,6 @@ export function HomeApp({ directories }) { string; + findDirectoryById: (id: string) => FeatureCatalogueEntry; +} + +// TODO: Bolding the first word/verb won't look write in other languages +const getActionText = ({ verb, text }: { verb: string; text: string }): JSX.Element => ( + +

+ {verb} {text} +

+ +); + +// TODO: Should this live here? Should it be registered per app? +const solutionCTAs: { [key: string]: any } = { + enterpriseSearch: { + websiteSearch: { + verb: i18n.translate('home.solutionsPanel.enterpriseSearch.firstActionVerb', { + defaultMessage: 'Build', + description: + 'The first word of this sentence is bolded. Full sentence: "Build a powerful website search."', + }), + text: i18n.translate('home.solutionsPanel.enterpriseSearch.firstActionText', { + defaultMessage: 'a powerful website search.', + description: 'Full sentence: "Build a powerful website search."', + }), + }, + appSearch: { + verb: i18n.translate('home.solutionsPanel.enterpriseSearch.secondActionVerb', { + defaultMessage: 'Search', + description: + 'The first word of this sentence is bolded. Full sentence: "Search any data from any application."', + }), + text: i18n.translate('home.solutionsPanel.enterpriseSearch.secondActionText', { + defaultMessage: 'any data from any application.', + description: 'Full sentence: "Search any data from any application."', + }), + }, + workplaceSearch: { + verb: i18n.translate('home.solutionsPanel.enterpriseSearch.thirdActionVerb', { + defaultMessage: 'Unify', + description: + 'The first word of this sentence is bolded. Full sentence: "Unify searchable workplace content."', + }), + text: i18n.translate('home.solutionsPanel.enterpriseSearch.thirdActionText', { + defaultMessage: 'searchable workplace content.', + description: 'Full sentence: "Unify searchable workplace content."', + }), + }, + }, + observability: { + metrics: { + verb: i18n.translate('home.solutionsPanel.observability.firstActionVerb', { + defaultMessage: 'Monitor', + description: + 'The first word of this sentence is bolded. Full sentence: "Monitor all infrastructure metrics."', + }), + text: i18n.translate('home.solutionsPanel.observability.firstActionText', { + defaultMessage: 'all infrastructure metrics.', + description: 'Full sentence: "Monitor all infrastructure metrics."', + }), + }, + apm: { + verb: i18n.translate('home.solutionsPanel.observability.secondActionVerb', { + defaultMessage: 'Track', + description: + 'The first word of this sentence is bolded. Full sentence: "Track application performance."', + }), + text: i18n.translate('home.solutionsPanel.observability.secondActionText', { + defaultMessage: 'application performance.', + description: 'Full sentence: "Track application performance."', + }), + }, + uptime: { + verb: i18n.translate('home.solutionsPanel.observability.thirdActionVerb', { + defaultMessage: 'Measure', + description: + 'The first word of the following sentence is bolded. Full sentence: "Measure SLAs and react to issues."', + }), + text: i18n.translate('home.solutionsPanel.observability.thirdActionText', { + defaultMessage: 'SLAs and react to issues.', + description: 'Full sentence: "Measure SLAs and react to issues."', + }), + }, + }, + securitySolution: [ + { + verb: i18n.translate('home.solutionsPanel.securitySolution.firstActionVerb', { + defaultMessage: 'Detect', + description: + 'The first word of this sentence is bolded. Full sentence: "Detect critical security events."', + }), + text: i18n.translate('home.solutionsPanel.securitySolution.firstActionText', { + defaultMessage: 'critical security events.', + description: 'Full sentence: "Detect critical security events."', + }), + }, + { + verb: i18n.translate('home.solutionsPanel.securitySolution.secondActionVerb', { + defaultMessage: 'Investigate', + description: + 'The first word of this sentence is bolded. Full sentence: "Investigate incidents and collaborate."', + }), + text: i18n.translate('home.solutionsPanel.securitySolution.secondActionText', { + defaultMessage: 'incidents and collaborate.', + description: 'Full sentence: "Investigate incidents and collaborate."', + }), + }, + { + verb: i18n.translate('home.solutionsPanel.securitySolution.thirdActionVerb', { + defaultMessage: 'Prevent', + description: + 'The first word of the following sentence is bolded. Full sentence: "Prevent threats autonomously."', + }), + text: i18n.translate('home.solutionsPanel.securitySolution.thirdActionText', { + defaultMessage: 'threats autonomously.', + description: 'Full sentence: "Prevent threats autonomously."', + }), + }, + ], + kibana: { + dashboard: { + verb: i18n.translate('home.solutionsPanel.kibana.dashboardVerb', { + defaultMessage: 'Visualize', + description: + 'The first word of this sentence is bolded. Full sentence: "Visualize every aspect of your data."', + }), + text: i18n.translate('home.solutionsPanel.kibana.dashboardText', { + defaultMessage: 'every aspect of your data.', + description: 'Full sentence: "Visualize every aspect of your data."', + }), + }, + discover: { + verb: i18n.translate('home.solutionsPanel.kibana.discoverVerb', { + defaultMessage: 'Search', + description: + 'The first word of this sentence is bolded. Full sentence: "Search and explore your data."', + }), + text: i18n.translate('home.solutionsPanel.kibana.discoverText', { + defaultMessage: 'and explore your data.', + description: 'Full sentence: "Search and explore your data."', + }), + }, + canvas: { + verb: i18n.translate('home.solutionsPanel.kibana.fourthActionVerb', { + defaultMessage: 'Craft', + description: + 'The first word of this sentence is bolded. Full sentence: "Craft pixel-perfect reports."', + }), + text: i18n.translate('home.solutionsPanel.kibana.fourthActionText', { + defaultMessage: 'pixel-perfect reports.', + description: 'Full sentence: "Craft pixel-perfect reports."', + }), + }, + maps: { + verb: i18n.translate('home.solutionsPanel.kibana.thirdActionVerb', { + defaultMessage: 'Plot', + description: + 'The first word of the following sentence is bolded. Full sentence: "Plot your geographic information."', + }), + text: i18n.translate('home.solutionsPanel.kibana.thirdActionText', { + defaultMessage: 'your geographic information.', + description: 'Full sentence: "Plot your geographic information."', + }), + }, + ml: { + verb: i18n.translate('home.solutionsPanel.kibana.fifthActionVerb', { + defaultMessage: 'Detect', + description: + 'The first word of this sentence is bolded. Full sentence: "Detect anomalous events."', + }), + text: i18n.translate('home.solutionsPanel.kibana.fifthActionText', { + defaultMessage: 'anomalous events.', + description: 'Full sentence: "Detect anomalous events."', + }), + }, + graph: { + verb: i18n.translate('home.solutionsPanel.kibana.sixthActionVerb', { + defaultMessage: 'Reveal', + description: + 'The first word of the following sentence is bolded. Full sentence: "Reveal patterns and relationships."', + }), + text: i18n.translate('home.solutionsPanel.kibana.sixthActionText', { + defaultMessage: 'patterns and relationships.', + description: 'Full sentence: "Reveal patterns and relationships."', + }), + }, + }, +}; + +const halfWidthClass = 'homeSolutionsPanel--restrictHalfWidth'; + +export const SolutionsPanel: FunctionComponent = ({ + addBasePath, + findDirectoryById +}) => { + const observability = findDirectoryById('observability'); + const enterpriseSearch = findDirectoryById('appSearch'); + const securitySolution = findDirectoryById('securitySolution'); + + + const addSpacersBetweenReducer = ( + acc: JSX.Element[], + element: JSX.Element, + index: number, + elements: JSX.Element[] + ) => { + acc.push(element); + if (index < elements.length - 1) { + acc.push(); + } + return acc; + }; + + const getActionsBySolution = (solution: string, appIds: string[]): JSX.Element[] => + appIds.reduce((acc: JSX.Element[], appId: string, index: number) => { + const directory = findDirectoryById(appId); + if (directory) { + const CTA = solutionCTAs[solution][appId] as { verb: string; text: string }; + if (CTA) { + // acc.push(directory.description); + acc.push(getActionText(CTA)); + } + } + return acc; + }, [] as JSX.Element[]); + + const enterpriseSearchAppIds = ['webSearch', 'appSearch', 'workplaceSearch']; + const observabilityAppIds = ['metrics', 'apm', 'uptime']; + const kibanaAppIds = ['dashboard', 'discover', 'canvas', 'maps', 'ml', 'graph']; + + const enterpriseSearchActions = getActionsBySolution( + 'enterpriseSearch', + enterpriseSearchAppIds + ).reduce(addSpacersBetweenReducer, []); + const observabilityActions = getActionsBySolution('observability', observabilityAppIds).reduce( + addSpacersBetweenReducer, + [] + ); + const securitySolutionActions = solutionCTAs.securitySolution + .map(getActionText) + .reduce(addSpacersBetweenReducer, []); + const kibanaActions = getActionsBySolution('kibana', kibanaAppIds).reduce( + addSpacersBetweenReducer, + [] + ); + +const halfWidthClass = 'homSolutionsPanel--restrictHalfWidth'; + + return ( + + {enterpriseSearchActions.length || observabilityActions.length || securitySolution ? ( + + + {/* TODO: once app search is merged, register add to feature catalogue and remove hard coded text here */} + + {enterpriseSearchActions.length ? ( + + + + + + + + + + + {enterpriseSearchActions} + + + + + ) : null} + {observabilityActions.length ? ( + + + + + + + + + + {observabilityActions} + + + + + ) : null} + {securitySolution ? ( + + + + + + + + + {securitySolutionActions} + + + + + ) : null} + + + ) : null} +{kibanaActions.length ? ( + + + + + + + + + + {kibanaActions} + + + + ):null} + +);} diff --git a/src/plugins/home/public/application/components/solutions_panel/solutions_title.tsx b/src/plugins/home/public/application/components/solutions_panel/solutions_title.tsx new file mode 100644 index 0000000000000..3503edf885044 --- /dev/null +++ b/src/plugins/home/public/application/components/solutions_panel/solutions_title.tsx @@ -0,0 +1,53 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FunctionComponent } from 'react'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiToken, + EuiTitle, + EuiText, + EuiIcon, + IconType, +} from '@elastic/eui'; + +interface Props { + title: string; + subtitle: string; + iconType: IconType; +} + +export const SolutionsTitle: FunctionComponent = ({ title, subtitle, iconType }) => ( + + +

+ +

+ +

{title}

+ + +

+ {subtitle} +

+ + + +); diff --git a/src/plugins/home/public/assets/background_enterprise_search_bottom_right_2x.png b/src/plugins/home/public/assets/background_enterprise_search_bottom_right_2x.png new file mode 100644 index 0000000000000000000000000000000000000000..7f2037d3afb699a50ff074304090ffa8e94dfcc1 GIT binary patch literal 236 zcmeAS@N?(olHy`uVBq!ia0vp^4nSy1^tdQ* z-6YTAy|X6O@O5f`zaoDTtHU~m6QT?|nH0hqo^Un9Fiy~B01EoaCv42$u_s6!E`p>i qs%6I2*>_$dR3piO1uwJzVAR{eH2LttUEhF?VeoYIb6Mw<&;$S-n?_~; literal 0 HcmV?d00001 diff --git a/src/plugins/home/public/assets/background_enterprise_search_top_left_2x.png b/src/plugins/home/public/assets/background_enterprise_search_top_left_2x.png new file mode 100644 index 0000000000000000000000000000000000000000..3e6e016bd73a7cf1b49ad4faf7477c21757dd9cf GIT binary patch literal 951 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 SpKGGoz{}mwt=2{Gw|@hbY)Z8N literal 0 HcmV?d00001 diff --git a/src/plugins/home/public/assets/background_observability_top_right_2x.png b/src/plugins/home/public/assets/background_observability_top_right_2x.png new file mode 100644 index 0000000000000000000000000000000000000000..860491733ab65fae3321d6af347ed6b4a8227501 GIT binary patch literal 312 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY1|&n@ZgvM!oCO|{#S9E$svykh8Km+7D9BhG z1ThT)cdUbxqFZ|6Y*? z!&nrLvHl6|I#68@^Z((g-De!P(^b literal 0 HcmV?d00001 diff --git a/src/plugins/home/public/assets/background_security_solution_top_left_2x.png b/src/plugins/home/public/assets/background_security_solution_top_left_2x.png new file mode 100644 index 0000000000000000000000000000000000000000..5cb0358d02f025d092006eb84990300669e06339 GIT binary patch literal 764 zcmV4j_O|qHHBsniEYAXmnwAkHK6cPCnW?q<%y%58^@c)q* z#)XT|fw2>2Qn>m0AjB{!Jh+V*28AcL1LH$jwZe=0zJ(ao3M=;!qf#N_eqg){Q*8}m z`5s~@7XyKSKn%rVArLVXOMyVdP%0Gy5ksLI2()0l2`f@A1R_Skwm_gyAx4q5LZAhM zZKwnU0>(jDcBLQ?PMs4Yvyu>q7@3uZK)~Sj@5D495XT6KX+a=jB%}#}h!L4K1R_R6 zH6Rc%R;mSoIAD8GO$fxz)RSsMAYweo0s?Wsc9RtZ;%4e1O9&3wF0zDJem<{%i#>!0 zG3Go#py8JxULerW7@i=|uo&JT(2y7&A<%G}DX$P{C=AaKXqW+;cL+4ZfUN}x)ct_1 z6$sSzW~wC!)GbD95U9%mTZ<5=yD>tm5QxhVPn}MuE-+etL@e!rF&)x!JwTxOX{u$6 zULX)Kn*GzZCkV8g9u>pz|QXE5;}g$Th}D5XddYXb{LH#)uHe9mc2-2pGrd`0#)+G6Xum zS;iV;bO_`EgAjk=_kb6DJ1Y!ATsOb<*aCwP_nBZ2;&H&Jdg+xA&#QVJoDi?8hCzt+ zs$dWzE_Dn-#HWfuh_vSIlm-SN(o>o15F)SQ7=*~L=yr+_+bXu5BEOMb#OwIEgORn<;%h#gigsAgwQJqgAlq!Z>I>MU({TO5OrF`AVj@hZl?%QzlU=j uLfCYNK?u99wo`<#?R*`a|GU9HV8}16vY(otGVFl>0000N;oC} literal 0 HcmV?d00001 diff --git a/src/plugins/home/public/index.ts b/src/plugins/home/public/index.ts index dc48332e052de..6079449554b08 100644 --- a/src/plugins/home/public/index.ts +++ b/src/plugins/home/public/index.ts @@ -24,6 +24,7 @@ export { EnvironmentSetup, TutorialSetup, HomePublicPluginSetup, + HomePublicPluginStart, } from './plugin'; export { FeatureCatalogueEntry, diff --git a/src/plugins/home/public/plugin.ts b/src/plugins/home/public/plugin.ts index 6859d916a61af..ec272c3f38399 100644 --- a/src/plugins/home/public/plugin.ts +++ b/src/plugins/home/public/plugin.ts @@ -42,6 +42,7 @@ import { TelemetryPluginStart } from '../../telemetry/public'; import { UsageCollectionSetup } from '../../usage_collection/public'; import { KibanaLegacySetup, KibanaLegacyStart } from '../../kibana_legacy/public'; import { AppNavLinkStatus } from '../../../core/public'; +import { PLUGIN_ID, HOME_APP_BASE_PATH } from '../common/constants'; export interface HomePluginStartDependencies { data: DataPublicPluginStart; @@ -56,7 +57,12 @@ export interface HomePluginSetupDependencies { export class HomePublicPlugin implements - Plugin { + Plugin< + HomePublicPluginSetup, + HomePublicPluginStart, + HomePluginSetupDependencies, + HomePluginStartDependencies + > { private readonly featuresCatalogueRegistry = new FeatureCatalogueRegistry(); private readonly environmentService = new EnvironmentService(); private readonly tutorialService = new TutorialService(); @@ -66,9 +72,9 @@ export class HomePublicPlugin public setup( core: CoreSetup, { kibanaLegacy, usageCollection }: HomePluginSetupDependencies - ): HomePublicPluginSetup { + ) { core.application.register({ - id: 'home', + id: PLUGIN_ID, title: 'Home', navLinkStatus: AppNavLinkStatus.hidden, mount: async (params: AppMountParameters) => { @@ -120,11 +126,9 @@ export class HomePublicPlugin { application: { capabilities, currentAppId$ }, http }: CoreStart, { kibanaLegacy }: HomePluginStartDependencies ) { - this.featuresCatalogueRegistry.start({ capabilities }); - // If the home app is the initial location when loading Kibana... if ( - window.location.pathname === http.basePath.prepend(`/app/home`) && + window.location.pathname === http.basePath.prepend(HOME_APP_BASE_PATH) && window.location.hash === '' ) { // ...wait for the app to mount initially and then... @@ -136,6 +140,8 @@ export class HomePublicPlugin } }); } + + return { featureCatalogue: { ...this.featuresCatalogueRegistry.start({ capabilities }) } }; } } @@ -149,13 +155,5 @@ export type EnvironmentSetup = EnvironmentServiceSetup; export type TutorialSetup = TutorialServiceSetup; /** @public */ -export interface HomePublicPluginSetup { - tutorials: TutorialServiceSetup; - featureCatalogue: FeatureCatalogueSetup; - /** - * The environment service is only available for a transition period and will - * be replaced by display specific extension points. - * @deprecated - */ - environment: EnvironmentSetup; -} +export type HomePublicPluginSetup = ReturnType; +export type HomePublicPluginStart = ReturnType; diff --git a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts index c70fc0464b131..d4e9b35d5fa43 100644 --- a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts +++ b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts @@ -42,7 +42,7 @@ export interface FeatureCatalogueEntry { /** URL path to link to this future. Should not include the basePath. */ readonly path: string; /** Whether or not this link should be shown on the front page of Kibana. */ - readonly showOnHomePage: boolean; + showOnHomePage: boolean; } export class FeatureCatalogueRegistry { @@ -65,6 +65,22 @@ export class FeatureCatalogueRegistry { public start({ capabilities }: { capabilities: Capabilities }) { this.capabilities = capabilities; + return { + showOnHomePage: (featureId: string) => { + const feature = this.features.get(featureId); + if (feature) { + feature.showOnHomePage = true; + this.features.set(featureId, feature); + } + }, + hideFromHomePage: (featureId: string) => { + const feature = this.features.get(featureId); + if (feature) { + feature.showOnHomePage = false; + this.features.set(featureId, feature); + } + }, + }; } public get(): readonly FeatureCatalogueEntry[] { diff --git a/src/plugins/management/public/plugin.ts b/src/plugins/management/public/plugin.ts index 8be130b4028c6..93a5e36679c0d 100644 --- a/src/plugins/management/public/plugin.ts +++ b/src/plugins/management/public/plugin.ts @@ -56,7 +56,7 @@ export class ManagementPlugin implements Plugin { const config = this.initializerContext.config.get(); const pluginSetupDeps = plugins; + // TODO: Can this be removed now with homepage redesign work, or would it be a breaking change? APM is no longer displayed on the new home page design pluginSetupDeps.home.environment.update({ apmUi: true }); pluginSetupDeps.home.featureCatalogue.register(featureCatalogueEntry); diff --git a/x-pack/plugins/graph/public/plugin.ts b/x-pack/plugins/graph/public/plugin.ts index 5b2566ffab7c0..1c36d09069c6d 100644 --- a/x-pack/plugins/graph/public/plugin.ts +++ b/x-pack/plugins/graph/public/plugin.ts @@ -23,6 +23,7 @@ import { checkLicense } from '../common/check_license'; import { FeatureCatalogueCategory, HomePublicPluginSetup, + HomePublicPluginStart, } from '../../../../src/plugins/home/public'; import { DEFAULT_APP_CATEGORIES } from '../../../../src/core/public'; import { ConfigSchema } from '../config'; @@ -38,6 +39,7 @@ export interface GraphPluginStartDependencies { data: DataPublicPluginStart; savedObjects: SavedObjectsStart; kibanaLegacy: KibanaLegacyStart; + home?: HomePublicPluginStart; } export class GraphPlugin @@ -108,12 +110,20 @@ export class GraphPlugin }); } - start(core: CoreStart) { + start(core: CoreStart, { home }: GraphPluginStartDependencies) { if (this.licensing === null) { throw new Error('Start called before setup'); } this.licensing.license$.subscribe((license) => { - toggleNavLink(checkLicense(license), core.chrome.navLinks); + const licenseInformation = checkLicense(license); + toggleNavLink(licenseInformation, core.chrome.navLinks); + if (home) { + if (licenseInformation.showAppLink) { + home.featureCatalogue.showOnHomePage('graph'); + } else { + home.featureCatalogue.hideFromHomePage('graph'); + } + } }); } diff --git a/x-pack/plugins/index_lifecycle_management/public/plugin.tsx b/x-pack/plugins/index_lifecycle_management/public/plugin.tsx index 1d26aa53752a9..b93ce200ce19a 100644 --- a/x-pack/plugins/index_lifecycle_management/public/plugin.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/plugin.tsx @@ -4,8 +4,9 @@ * you may not use this file except in compliance with the Elastic License. */ +import { i18n } from '@kbn/i18n'; import { CoreSetup, PluginInitializerContext } from 'src/core/public'; - +import { FeatureCatalogueCategory } from '../../../../src/plugins/home/public'; import { PLUGIN } from '../common/constants'; import { init as initHttp } from './application/services/http'; import { init as initDocumentation } from './application/services/documentation'; @@ -30,7 +31,7 @@ export class IndexLifecycleManagementPlugin { getStartServices, } = coreSetup; - const { usageCollection, management, indexManagement } = plugins; + const { usageCollection, management, indexManagement, home } = plugins; // Initialize services even if the app isn't mounted, because they're used by index management extensions. initHttp(http); @@ -67,6 +68,21 @@ export class IndexLifecycleManagementPlugin { }, }); + home.featureCatalogue.register({ + id: PLUGIN.ID, + title: i18n.translate('xpack.indexLifecycleManagement.featureCatalogueTitle', { + defaultMessage: 'Manage index lifecycles', + }), + description: i18n.translate('xpack.indexLifecycleManagement.featureCatalogueTitle', { + defaultMessage: + 'Attach a policy to automate when and how to transition an index through its lifecycle.', + }), + icon: 'indexSettings', // TODO: This is the same icon used for rollups in the feature catalogue. Do we need to pick a different one here? + path: '/app/management/data/index_lifecycle_management', + showOnHomePage: true, + category: FeatureCatalogueCategory.ADMIN, + }); + if (indexManagement) { addAllExtensions(indexManagement.extensionsService); } diff --git a/x-pack/plugins/index_lifecycle_management/public/types.ts b/x-pack/plugins/index_lifecycle_management/public/types.ts index 178884a7ee679..beb7753f32592 100644 --- a/x-pack/plugins/index_lifecycle_management/public/types.ts +++ b/x-pack/plugins/index_lifecycle_management/public/types.ts @@ -4,6 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ +import { HomePublicPluginSetup } from '../../../../src/plugins/home/public'; import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public'; import { ManagementSetup } from '../../../../src/plugins/management/public'; import { IndexManagementPluginSetup } from '../../index_management/public'; @@ -12,6 +13,7 @@ export interface PluginsDependencies { usageCollection?: UsageCollectionSetup; management: ManagementSetup; indexManagement?: IndexManagementPluginSetup; + home: HomePublicPluginSetup; } export interface ClientConfigType { diff --git a/x-pack/plugins/infra/server/features.ts b/x-pack/plugins/infra/server/features.ts index 0de431186b151..b1268f0f77cc0 100644 --- a/x-pack/plugins/infra/server/features.ts +++ b/x-pack/plugins/infra/server/features.ts @@ -18,12 +18,12 @@ export const METRICS_FEATURE = { icon: 'metricsApp', navLinkId: 'metrics', app: ['infra', 'kibana'], - catalogue: ['infraops'], + catalogue: ['infraops', 'metrics'], alerting: [METRIC_THRESHOLD_ALERT_TYPE_ID, METRIC_INVENTORY_THRESHOLD_ALERT_TYPE_ID], privileges: { all: { app: ['infra', 'kibana'], - catalogue: ['infraops'], + catalogue: ['infraops','metrics'], api: ['infra'], savedObject: { all: ['infrastructure-ui-source'], @@ -36,7 +36,7 @@ export const METRICS_FEATURE = { }, read: { app: ['infra', 'kibana'], - catalogue: ['infraops'], + catalogue: ['infraops','metrics'], api: ['infra'], savedObject: { all: [], @@ -59,12 +59,16 @@ export const LOGS_FEATURE = { icon: 'logsApp', navLinkId: 'logs', app: ['infra', 'kibana'], +<<<<<<< HEAD catalogue: ['infralogging'], alerting: [LOG_DOCUMENT_COUNT_ALERT_TYPE_ID], +======= + catalogue: ['infralogging', 'logs'], +>>>>>>> Redesigns home page privileges: { all: { app: ['infra', 'kibana'], - catalogue: ['infralogging'], + catalogue: ['infralogging', 'logs'], api: ['infra'], savedObject: { all: ['infrastructure-ui-source'], @@ -77,7 +81,7 @@ export const LOGS_FEATURE = { }, read: { app: ['infra', 'kibana'], - catalogue: ['infralogging'], + catalogue: ['infralogging', 'logs'], api: ['infra'], alerting: { all: [LOG_DOCUMENT_COUNT_ALERT_TYPE_ID], diff --git a/x-pack/plugins/ingest_manager/kibana.json b/x-pack/plugins/ingest_manager/kibana.json index ab0a2ba24ba66..7bbbcde027fd4 100644 --- a/x-pack/plugins/ingest_manager/kibana.json +++ b/x-pack/plugins/ingest_manager/kibana.json @@ -4,8 +4,8 @@ "server": true, "ui": true, "configPath": ["xpack", "ingestManager"], - "requiredPlugins": ["licensing", "data", "encryptedSavedObjects"], - "optionalPlugins": ["security", "features", "cloud", "usageCollection", "home"], + "requiredPlugins": ["licensing", "data", "encryptedSavedObjects", "home"], + "optionalPlugins": ["security", "features", "cloud", "usageCollection" ], "extraPublicDirs": ["common"], "requiredBundles": ["kibanaReact", "esUiShared"] } diff --git a/x-pack/plugins/ingest_manager/public/plugin.ts b/x-pack/plugins/ingest_manager/public/plugin.ts index fde4e93f8e39f..bab4140517dd5 100644 --- a/x-pack/plugins/ingest_manager/public/plugin.ts +++ b/x-pack/plugins/ingest_manager/public/plugin.ts @@ -13,9 +13,13 @@ import { import { i18n } from '@kbn/i18n'; import { DEFAULT_APP_CATEGORIES } from '../../../../src/core/public'; import { DataPublicPluginSetup, DataPublicPluginStart } from '../../../../src/plugins/data/public'; -import { HomePublicPluginSetup } from '../../../../src/plugins/home/public'; +import { + HomePublicPluginSetup, + FeatureCatalogueCategory, +} from '../../../../src/plugins/home/public'; import { LicensingPluginSetup } from '../../licensing/public'; import { PLUGIN_ID, CheckPermissionsResponse, PostIngestSetupResponse } from '../common'; +import { BASE_PATH } from './applications/ingest_manager/constants'; import { IngestManagerConfigType } from '../common/types'; import { setupRouteService, appRoutesService } from '../common'; @@ -95,6 +99,20 @@ export class IngestManagerPlugin deps.home.tutorials.registerDirectoryNotice(PLUGIN_ID, TutorialDirectoryNotice); deps.home.tutorials.registerDirectoryHeaderLink(PLUGIN_ID, TutorialDirectoryHeaderLink); deps.home.tutorials.registerModuleNotice(PLUGIN_ID, TutorialModuleNotice); + + deps.home.featureCatalogue.register({ + id: 'ingestManager', + title: i18n.translate('xpack.ingestManager.featureCatalogueTitle', { + defaultMessage: 'Manage ingest', + }), + description: i18n.translate('xpack.ingestManager.featureCatalogueTitle', { + defaultMessage: 'Management for Elastic Agents and integrations.', + }), + icon: 'logstashInput', + showOnHomePage: true, + path: BASE_PATH, + category: FeatureCatalogueCategory.ADMIN, // TODO: is the correct category for this plugin? + }); } return {}; diff --git a/x-pack/plugins/ingest_manager/server/plugin.ts b/x-pack/plugins/ingest_manager/server/plugin.ts index 69af475886bb9..a73ac8307f26a 100644 --- a/x-pack/plugins/ingest_manager/server/plugin.ts +++ b/x-pack/plugins/ingest_manager/server/plugin.ts @@ -176,10 +176,12 @@ export class IngestManagerPlugin icon: 'savedObjectsApp', navLinkId: PLUGIN_ID, app: [PLUGIN_ID, 'kibana'], + catalogue: ['ingestManager'], privileges: { all: { api: [`${PLUGIN_ID}-read`, `${PLUGIN_ID}-all`], app: [PLUGIN_ID, 'kibana'], + catalogue: ['ingestManager'], savedObject: { all: allSavedObjectTypes, read: [], @@ -189,6 +191,7 @@ export class IngestManagerPlugin read: { api: [`${PLUGIN_ID}-read`], app: [PLUGIN_ID, 'kibana'], + catalogue: ['ingestManager'], savedObject: { all: [], read: allSavedObjectTypes, diff --git a/x-pack/plugins/ml/common/types/capabilities.ts b/x-pack/plugins/ml/common/types/capabilities.ts index 504cd28b8fa14..9553a0bc5384d 100644 --- a/x-pack/plugins/ml/common/types/capabilities.ts +++ b/x-pack/plugins/ml/common/types/capabilities.ts @@ -86,6 +86,7 @@ export function getPluginPrivileges() { admin: { ...privilege, api: allMlCapabilitiesKeys.map((k) => `ml:${k}`), + catalogue: [PLUGIN_ID, `${PLUGIN_ID}_file_data_visualizer`], ui: allMlCapabilitiesKeys, savedObject: { all: savedObjects, @@ -95,6 +96,7 @@ export function getPluginPrivileges() { user: { ...privilege, api: userMlCapabilitiesKeys.map((k) => `ml:${k}`), + catalogue: [PLUGIN_ID], ui: userMlCapabilitiesKeys, savedObject: { all: [], diff --git a/x-pack/plugins/ml/public/register_feature.ts b/x-pack/plugins/ml/public/register_feature.ts index ca60de612c3d5..179f8ed3b0769 100644 --- a/x-pack/plugins/ml/public/register_feature.ts +++ b/x-pack/plugins/ml/public/register_feature.ts @@ -12,6 +12,9 @@ import { import { PLUGIN_ID } from '../common/constants/app'; export const registerFeature = (home: HomePublicPluginSetup) => { + // TODO: Can this be removed now with homepage redesign work, or does this constitute a breaking change? This is no longer necessary for the home plugin + // if file data visualizer can be registered as its own feature + // register ML for the kibana home screen. // so the file data visualizer appears to allow people to import data home.environment.update({ ml: true }); @@ -31,4 +34,20 @@ export const registerFeature = (home: HomePublicPluginSetup) => { showOnHomePage: true, category: FeatureCatalogueCategory.DATA, }); + + // TODO: is it okay to register this as a separate feature in the feature catalogue? + // register data visualizer so it appears on the Kibana home page + home.featureCatalogue.register({ + id: `${PLUGIN_ID}_file_data_visualizer`, + title: i18n.translate('xpack.ml.fileDataVisualizerTitle', { + defaultMessage: 'Upload a file', + }), + description: i18n.translate('xpack.ml.fileDataVisualizerDescription', { + defaultMessage: 'Import your own CSV, NDJSON, or log file', + }), + icon: 'importAction', + path: '/app/ml#/filedatavisualizer', + showOnHomePage: true, + category: FeatureCatalogueCategory.DATA, + }); }; diff --git a/x-pack/plugins/ml/server/plugin.ts b/x-pack/plugins/ml/server/plugin.ts index 812db744d1bda..fb1abc868e965 100644 --- a/x-pack/plugins/ml/server/plugin.ts +++ b/x-pack/plugins/ml/server/plugin.ts @@ -86,7 +86,7 @@ export class MlServerPlugin implements Plugin { constructor(context: PluginInitializerContext) {} - public setup(core: CoreSetup) { + public setup(core: CoreSetup, plugins: SetupPlugins) { core.application.register({ id: 'observability-overview', title: 'Overview', @@ -41,6 +51,22 @@ export class Plugin implements PluginClass, plugins: SetupPlugins) { initTelemetry(plugins.usageCollection, APP_ID); - plugins.home.featureCatalogue.register({ - id: APP_ID, - title: i18n.translate('xpack.securitySolution.featureCatalogue.title', { - defaultMessage: 'Security', - }), - description: i18n.translate('xpack.securitySolution.featureCatalogue.description', { - defaultMessage: 'Explore security metrics and logs for events and alerts', - }), - icon: APP_ICON, - path: APP_OVERVIEW_PATH, - showOnHomePage: true, - category: FeatureCatalogueCategory.DATA, - }); + if (plugins.home) { + plugins.home.featureCatalogue.register({ + id: APP_ID, + title: i18n.translate('xpack.securitySolution.featureCatalogue.title', { + defaultMessage: 'Security', + }), + description: i18n.translate('xpack.securitySolution.featureCatalogue.description', { + defaultMessage: 'Protect & prevent', + }), + icon: APP_ICON, + path: APP_OVERVIEW_PATH, + showOnHomePage: true, + category: FeatureCatalogueCategory.DATA, + }); + } plugins.triggers_actions_ui.actionTypeRegistry.register(jiraActionType()); plugins.triggers_actions_ui.actionTypeRegistry.register(resilientActionType()); diff --git a/x-pack/plugins/snapshot_restore/public/plugin.ts b/x-pack/plugins/snapshot_restore/public/plugin.ts index b864e70708652..e1b04730bfa64 100644 --- a/x-pack/plugins/snapshot_restore/public/plugin.ts +++ b/x-pack/plugins/snapshot_restore/public/plugin.ts @@ -8,6 +8,10 @@ import { CoreSetup, PluginInitializerContext } from 'src/core/public'; import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public'; import { ManagementSetup } from '../../../../src/plugins/management/public'; +import { + HomePublicPluginSetup, + FeatureCatalogueCategory, +} from '../../../../src/plugins/home/public'; import { PLUGIN } from '../common/constants'; import { ClientConfigType } from './types'; @@ -20,6 +24,7 @@ import { UIM_APP_NAME } from './application/constants'; interface PluginsDependencies { usageCollection: UsageCollectionSetup; management: ManagementSetup; + home?: HomePublicPluginSetup; } export class SnapshotRestoreUIPlugin { @@ -33,7 +38,7 @@ export class SnapshotRestoreUIPlugin { public setup(coreSetup: CoreSetup, plugins: PluginsDependencies): void { const config = this.initializerContext.config.get(); const { http } = coreSetup; - const { management, usageCollection } = plugins; + const { home, management, usageCollection } = plugins; // Initialize services this.uiMetricService.setup(usageCollection); @@ -54,6 +59,23 @@ export class SnapshotRestoreUIPlugin { return await mountManagementSection(coreSetup, services, config, params); }, }); + + if (home) { + home.featureCatalogue.register({ + id: PLUGIN.id, + title: i18n.translate('xpack.snapshotRestore.featureCatalogueTitle', { + defaultMessage: 'Store & recover backups', + }), + description: i18n.translate('xpack.snapshotRestore.featureCatalogueDescription', { + defaultMessage: + 'Use repositories to snapshot and restore Elasticsearch indices and clusters.', + }), + icon: 'storage', + path: '/app/management/data/snapshot_restore', + showOnHomePage: true, + category: FeatureCatalogueCategory.ADMIN, + }); + } } public start() {} From 4a5e35a2ad0ea14079d7b90bbe99ab30eb2bf92e Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Tue, 21 Jul 2020 13:34:14 -0700 Subject: [PATCH 02/29] Fixed home page header links spacing --- .../public/application/components/_home.scss | 1 - .../public/application/components/home.js | 74 ++++++++----------- src/plugins/home/public/plugin.ts | 33 ++++++++- .../plugins/ingest_manager/public/plugin.ts | 2 +- 4 files changed, 63 insertions(+), 47 deletions(-) diff --git a/src/plugins/home/public/application/components/_home.scss b/src/plugins/home/public/application/components/_home.scss index 77d401d5af43e..39d13f2b8f93c 100644 --- a/src/plugins/home/public/application/components/_home.scss +++ b/src/plugins/home/public/application/components/_home.scss @@ -16,7 +16,6 @@ $homePageWidth: 1200px; } .homPage { - display: flex; max-width: $homePageWidth; margin: 0 auto; padding: 0 $euiSize $euiSizeXL; diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js index f44fb914c7fda..da91bcaa5b7d8 100644 --- a/src/plugins/home/public/application/components/home.js +++ b/src/plugins/home/public/application/components/home.js @@ -116,9 +116,11 @@ export class Home extends Component { findDirectoryById = (id) => this.props.directories.find((directory) => directory.showOnHomePage && directory.id === id); - renderDirectory = (directory) => { + renderDirectory = (featureId) => { const { addBasePath } = this.props; + const directory = this.findDirectoryById(featureId); + return directory ? ( - + @@ -237,46 +246,28 @@ export class Home extends Component { - - - - - + {sampleData ? ( + + + + + + ) : null} - - - - - {this.renderDirectory(ingestManager)} - {this.renderDirectory(fileDataVisualizer)} - + {addDataFeatureCards} - {security || monitoring || snapshotRestore || indexLifecycleManagement ? ( + {manageDataFeatureCards.length ? ( @@ -292,12 +283,7 @@ export class Home extends Component { - - {this.renderDirectory(security)} - {this.renderDirectory(monitoring)} - {this.renderDirectory(snapshotRestore)} - {this.renderDirectory(indexLifecycleManagement)} - + {manageDataFeatureCards} ) : null} diff --git a/src/plugins/home/public/plugin.ts b/src/plugins/home/public/plugin.ts index ec272c3f38399..6e568d02f4d90 100644 --- a/src/plugins/home/public/plugin.ts +++ b/src/plugins/home/public/plugin.ts @@ -30,6 +30,7 @@ import { first } from 'rxjs/operators'; import { EnvironmentService, EnvironmentServiceSetup, + FeatureCatalogueCategory, FeatureCatalogueRegistry, FeatureCatalogueRegistrySetup, TutorialService, @@ -115,8 +116,38 @@ export class HomePublicPlugin }); kibanaLegacy.forwardApp('home', 'home'); + const featureCatalogue = { ...this.featuresCatalogueRegistry.setup() }; + + featureCatalogue.register({ + id: 'home_tutorial_directory', + title: i18n.translate('home.tutorialDirectory.featureCatalogueTitle', { + defaultMessage: 'Add an integration', + }), + description: i18n.translate('home.tutorialDirectory.featureCatalogueDescription', { + defaultMessage: 'Add data from a variety of common sources.', + }), + icon: 'indexOpen', + showOnHomePage: true, + path: `${HOME_APP_BASE_PATH}#/tutorial_directory`, + category: FeatureCatalogueCategory.DATA, // TODO: is the correct category for this plugin? + }); + + featureCatalogue.register({ + id: 'home_sample_data', + title: i18n.translate('home.sampleData.featureCatalogueTitle', { + defaultMessage: 'Sample Data', + }), + description: i18n.translate('home.sampleData.featureCatalogueDescription', { + defaultMessage: 'Load a data set and a Kibana dashboard', + }), + icon: 'tableDensityExpanded', + showOnHomePage: true, + path: `${HOME_APP_BASE_PATH}#/tutorial_directory/sampleData`, + category: FeatureCatalogueCategory.DATA, // TODO: is the correct category for this plugin? + }); + return { - featureCatalogue: { ...this.featuresCatalogueRegistry.setup() }, + featureCatalogue, environment: { ...this.environmentService.setup() }, tutorials: { ...this.tutorialService.setup() }, }; diff --git a/x-pack/plugins/ingest_manager/public/plugin.ts b/x-pack/plugins/ingest_manager/public/plugin.ts index bab4140517dd5..a05a8e1b97279 100644 --- a/x-pack/plugins/ingest_manager/public/plugin.ts +++ b/x-pack/plugins/ingest_manager/public/plugin.ts @@ -105,7 +105,7 @@ export class IngestManagerPlugin title: i18n.translate('xpack.ingestManager.featureCatalogueTitle', { defaultMessage: 'Manage ingest', }), - description: i18n.translate('xpack.ingestManager.featureCatalogueTitle', { + description: i18n.translate('xpack.ingestManager.featureCatalogueDescription', { defaultMessage: 'Management for Elastic Agents and integrations.', }), icon: 'logstashInput', From bb3bdd1b5743c60e123d221703245fd7508a7df0 Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Tue, 21 Jul 2020 13:58:19 -0700 Subject: [PATCH 03/29] Hide solutions wrapper when no solutions are available --- .../public/application/components/home.js | 8 +- .../solutions_panel/solutions_panel.tsx | 333 +++++++++--------- 2 files changed, 171 insertions(+), 170 deletions(-) diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js index da91bcaa5b7d8..f0f3aff43888c 100644 --- a/src/plugins/home/public/application/components/home.js +++ b/src/plugins/home/public/application/components/home.js @@ -225,14 +225,8 @@ export class Home extends Component {

-
- -
+ -
diff --git a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx index a0724717ff22b..26c211f4bdd0c 100644 --- a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx +++ b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx @@ -17,9 +17,17 @@ * under the License. */ -import React, { FunctionComponent } from 'react'; +import React, { Fragment, FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiFlexGroup, EuiFlexItem, EuiImage, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiImage, + EuiPanel, + EuiSpacer, + EuiText, + EuiHorizontalRule, +} from '@elastic/eui'; import { SolutionsTitle } from './solutions_title'; import { FeatureCatalogueEntry } from '../../../'; import { createAppNavigationHandler } from '../app_navigation_handler'; @@ -215,17 +223,11 @@ const solutionCTAs: { [key: string]: any } = { }, }; -const halfWidthClass = 'homeSolutionsPanel--restrictHalfWidth'; - -export const SolutionsPanel: FunctionComponent = ({ - addBasePath, - findDirectoryById -}) => { +export const SolutionsPanel: FunctionComponent = ({ addBasePath, findDirectoryById }) => { const observability = findDirectoryById('observability'); const enterpriseSearch = findDirectoryById('appSearch'); const securitySolution = findDirectoryById('securitySolution'); - const addSpacersBetweenReducer = ( acc: JSX.Element[], element: JSX.Element, @@ -272,162 +274,167 @@ export const SolutionsPanel: FunctionComponent = ({ [] ); -const halfWidthClass = 'homSolutionsPanel--restrictHalfWidth'; - - return ( - - {enterpriseSearchActions.length || observabilityActions.length || securitySolution ? ( + const halfWidthClass = 'homSolutionsPanel--restrictHalfWidth'; - - {/* TODO: once app search is merged, register add to feature catalogue and remove hard coded text here */} - - {enterpriseSearchActions.length ? ( - - - - - + + {enterpriseSearchActions.length || observabilityActions.length || securitySolution ? ( + + {/* TODO: once app search is merged, register add to feature catalogue and remove hard coded text here */} + + {enterpriseSearchActions.length ? ( + + - - - - - - {enterpriseSearchActions} - - - - - ) : null} - {observabilityActions.length ? ( - - - - - + + + + + + + {enterpriseSearchActions} + + + + + ) : null} + {observabilityActions.length ? ( + + - - - - - {observabilityActions} - - - - - ) : null} - {securitySolution ? ( - - - - + + + + + + {observabilityActions} + + + + + ) : null} + {securitySolution ? ( + + - - - - - {securitySolutionActions} - - - - - ) : null} - - - ) : null} -{kibanaActions.length ? ( - - - - - - - + + + + + + + {securitySolutionActions} + + + + + ) : null} + + + ) : null} + {kibanaActions.length ? ( + + + + + + + + + + {kibanaActions} + + + - - {kibanaActions} - - - - ):null} - -);} + ) : null} + + + + + ) : null; +}; From 338f38562759b954c354699a436fa69528f0f801 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Mon, 27 Jul 2020 16:15:02 -0500 Subject: [PATCH 04/29] Design PR: layout tweaks, responsive styles (#72944) * layout tweaks, responsive styles * address feedback, improve bg color setup * use EUI var for header height --- .../public/application/components/_home.scss | 49 +++++-- .../public/application/components/_index.scss | 1 + .../application/components/_manage_data.scss | 9 ++ .../components/_solutions_panel.scss | 23 +++- .../change_home_route/change_home_route.tsx | 58 +++++--- .../public/application/components/home.js | 127 +++++++++--------- .../solutions_panel/solutions_panel.tsx | 15 ++- 7 files changed, 188 insertions(+), 94 deletions(-) create mode 100644 src/plugins/home/public/application/components/_manage_data.scss diff --git a/src/plugins/home/public/application/components/_home.scss b/src/plugins/home/public/application/components/_home.scss index 39d13f2b8f93c..945f1bde041b6 100644 --- a/src/plugins/home/public/application/components/_home.scss +++ b/src/plugins/home/public/application/components/_home.scss @@ -1,21 +1,43 @@ // Local page vars -$homePageHeaderHeight: $euiSize * 8; $homePageWidth: 1200px; +.homPageContainer { + display: flex; + height: calc(100vh - #{$euiHeaderHeightCompensation}); + flex-direction: column; + background-color: $euiColorEmptyShade; +} + +.homPageHeaderContainer { + background-color: $euiColorLightestShade; + border-bottom: 1px solid $euiColorLightShade; +} + .homPageHeader { - height: $homePageHeaderHeight; margin: 0 auto; max-width: $homePageWidth; - padding: $euiSizeXL $euiSize 0; + padding: $euiSizeXL $euiSize $euiSizeXXL; } -.homPageContainer { - min-height: calc(100vh - #{$homePageHeaderHeight}); - background-color: $euiColorEmptyShade; - border-top: 1px solid $euiColorLightShade; +.homPageHeader__title { + @include euiBreakpoint('xs', 's') { + text-align: center; + } } -.homPage { +.homPageHeader__menu { + + @include euiBreakpoint('xs', 's') { + margin-top: 0; + + .homPageHeader__menuItem { + margin-bottom: 0 !important; + margin-top: 0 !important; + } + } +} + +.homPageMain { max-width: $homePageWidth; margin: 0 auto; padding: 0 $euiSize $euiSizeXL; @@ -24,10 +46,15 @@ $homePageWidth: 1200px; .homHome__synopsisItem { max-width: 50%; + min-width: $euiSizeL * 9; + + @include euiBreakpoint('xs', 's') { + max-width: 100%; + } } -@include euiBreakpoint('xs', 's', 'm') { - .homHome__synopsisItem { - flex-basis: 100% !important; +.homPageFooter__mainAction { + @include euiBreakpoint('xs', 's') { + flex-direction: column; } } diff --git a/src/plugins/home/public/application/components/_index.scss b/src/plugins/home/public/application/components/_index.scss index 59bcdd0e8f289..7c013fb416db1 100644 --- a/src/plugins/home/public/application/components/_index.scss +++ b/src/plugins/home/public/application/components/_index.scss @@ -7,6 +7,7 @@ @import 'add_data'; @import 'home'; +@import 'manage_data'; @import 'sample_data_set_cards'; @import 'solutions_panel'; @import 'synopsis'; diff --git a/src/plugins/home/public/application/components/_manage_data.scss b/src/plugins/home/public/application/components/_manage_data.scss new file mode 100644 index 0000000000000..0e3968eb0c3bd --- /dev/null +++ b/src/plugins/home/public/application/components/_manage_data.scss @@ -0,0 +1,9 @@ +.homManageData .homManageData__container { + @include euiBreakpoint('xs', 's') { + flex-direction: column; + } +} + +.homManageData .euiIcon__fillSecondary { + fill: $euiColorDarkestShade; +} \ No newline at end of file diff --git a/src/plugins/home/public/application/components/_solutions_panel.scss b/src/plugins/home/public/application/components/_solutions_panel.scss index 1b2d246818574..736218ac9ecaa 100644 --- a/src/plugins/home/public/application/components/_solutions_panel.scss +++ b/src/plugins/home/public/application/components/_solutions_panel.scss @@ -3,10 +3,22 @@ min-height: $euiSize*16; display: flex; - .homSolutionsPanel--restrictHalfWidth { + .homSolutionsPanel__column { max-width: 50%; } + @include euiBreakpoint('xs', 's') { + flex-direction: column; + + .homSolutionsPanel__column { + max-width: 100%; + } + } + + .homSolutionPanel__cardSecondary { + flex-basis: $euiSizeXL * 4; + } + .homSolutionsPanel__solutionPanel { display: flex; align-items: stretch; @@ -25,6 +37,11 @@ flex-direction: column; justify-content: center; padding: $euiSize; + + @include euiBreakpoint('xs', 's') { + height: auto; + text-align: center; + } } } @@ -36,6 +53,10 @@ position: absolute; width: auto; } + + @include euiBreakpoint('xs', 's') { + border-radius: $euiBorderRadius $euiBorderRadius 0 0; + } } .homSolutionsPanel__enterpriseSearch { diff --git a/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx b/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx index 1dc1bcc60ae4c..81240afa661f4 100644 --- a/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx +++ b/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx @@ -33,26 +33,50 @@ export const ChangeHomeRoute: FunctionComponent = ({ defaultRoute }) => { const changeDefaultRoute = () => uiSettings.set('defaultRoute', defaultRoute); return ( - - - -

- -

- + + + + + +

+ +

+ + + + + + + + - + {/* TODO: Hook up link to app directory */} + diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js index f0f3aff43888c..f202b0ce15a9d 100644 --- a/src/plugins/home/public/application/components/home.js +++ b/src/plugins/home/public/application/components/home.js @@ -29,7 +29,6 @@ import { EuiTitle, EuiFlexGroup, EuiFlexItem, - EuiScreenReaderOnly, EuiSpacer, EuiHorizontalRule, } from '@elastic/eui'; @@ -50,6 +49,10 @@ export class Home extends Component { getServices().homeConfig.disableWelcomeScreen || props.localStorage.getItem(KEY_ENABLE_WELCOME) === 'false' ); + + const body = document.querySelector('body'); + body.classList.add('isHomPage'); + this.state = { // If welcome is enabled, we wait for loading to complete // before rendering. This prevents an annoying flickering @@ -158,16 +161,11 @@ export class Home extends Component { console.log({ directories }); return ( - -
- - - -

- -

- - +
+
+
+ +

- - - - - - - {i18n.translate('home.pageHeader.addDataButtonLabel', { - defaultMessage: 'Add data', - })} - - - {stackManagement ? ( - - - {i18n.translate('home.pageHeader.stackManagementButtonLabel', { - defaultMessage: 'Manage stack', + + + + + + {i18n.translate('home.pageHeader.addDataButtonLabel', { + defaultMessage: 'Add data', })} - ) : null} - {devTools ? ( - - - {i18n.translate('home.pageHeader.devToolsButtonLabel', { - defaultMessage: 'Dev tools', + {stackManagement ? ( + + + {i18n.translate('home.pageHeader.stackManagementButtonLabel', { + defaultMessage: 'Manage stack', + })} + + + ) : null} + {devTools ? ( + + + {i18n.translate('home.pageHeader.devToolsButtonLabel', { + defaultMessage: 'Dev tools', + })} + + + ) : null} + {/* + + {i18n.translate('home.pageHeader.appDirectoryButtonLabel', { + defaultMessage: 'App directory', })} - - ) : null} - {/* - - {i18n.translate('home.pageHeader.appDirectoryButtonLabel', { - defaultMessage: 'App directory', - })} - - */} - - - -
-
-
+ */} + + + +
+
+
+
- -
- +

@@ -242,7 +238,12 @@ export class Home extends Component { {sampleData ? ( - + - {manageDataFeatureCards} + + {manageDataFeatureCards} +

) : null} @@ -290,7 +297,7 @@ export class Home extends Component { )}
- +
); } diff --git a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx index 26c211f4bdd0c..375bbb6f4cf65 100644 --- a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx +++ b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx @@ -274,7 +274,7 @@ export const SolutionsPanel: FunctionComponent = ({ addBasePath, findDire [] ); - const halfWidthClass = 'homSolutionsPanel--restrictHalfWidth'; + const halfWidthClass = 'homSolutionsPanel__column'; return enterpriseSearchActions.length || observabilityActions.length || @@ -287,7 +287,7 @@ export const SolutionsPanel: FunctionComponent = ({ addBasePath, findDire {/* TODO: once app search is merged, register add to feature catalogue and remove hard coded text here */} {enterpriseSearchActions.length ? ( - + = ({ addBasePath, findDire ) : null} {observabilityActions.length ? ( - + = ({ addBasePath, findDire ) : null} {securitySolution ? ( - + = ({ addBasePath, findDire + - ) : null; + ) : ( + + + + ); }; From 507656b5528cf95798832deed460ac3da0d20549 Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Mon, 27 Jul 2020 20:14:23 -0700 Subject: [PATCH 05/29] Fixed merge conflict --- x-pack/plugins/infra/server/features.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/infra/server/features.ts b/x-pack/plugins/infra/server/features.ts index b1268f0f77cc0..cf951c196b9cc 100644 --- a/x-pack/plugins/infra/server/features.ts +++ b/x-pack/plugins/infra/server/features.ts @@ -23,7 +23,7 @@ export const METRICS_FEATURE = { privileges: { all: { app: ['infra', 'kibana'], - catalogue: ['infraops','metrics'], + catalogue: ['infraops', 'metrics'], api: ['infra'], savedObject: { all: ['infrastructure-ui-source'], @@ -36,7 +36,7 @@ export const METRICS_FEATURE = { }, read: { app: ['infra', 'kibana'], - catalogue: ['infraops','metrics'], + catalogue: ['infraops', 'metrics'], api: ['infra'], savedObject: { all: [], @@ -59,12 +59,8 @@ export const LOGS_FEATURE = { icon: 'logsApp', navLinkId: 'logs', app: ['infra', 'kibana'], -<<<<<<< HEAD - catalogue: ['infralogging'], - alerting: [LOG_DOCUMENT_COUNT_ALERT_TYPE_ID], -======= catalogue: ['infralogging', 'logs'], ->>>>>>> Redesigns home page + alerting: [LOG_DOCUMENT_COUNT_ALERT_TYPE_ID], privileges: { all: { app: ['infra', 'kibana'], From 65d3c1a2428c57e7327c5ecd7d2024882383d85f Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Mon, 27 Jul 2020 20:23:03 -0700 Subject: [PATCH 06/29] Fixed click handler for change home route button --- .../change_home_route/change_home_route.tsx | 108 ++++++++---------- 1 file changed, 47 insertions(+), 61 deletions(-) diff --git a/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx b/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx index 81240afa661f4..19c1552ff7fbd 100644 --- a/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx +++ b/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx @@ -24,66 +24,52 @@ import { HOME_APP_BASE_PATH } from '../../../../common/constants'; import { getServices } from '../../kibana_services'; import { createAppNavigationHandler } from '../app_navigation_handler'; -interface Props { - defaultRoute?: string; -} - -export const ChangeHomeRoute: FunctionComponent = ({ defaultRoute }) => { - const { uiSettings } = getServices(); - const changeDefaultRoute = () => uiSettings.set('defaultRoute', defaultRoute); - - return ( - - - - - -

- -

- - - - +export const ChangeHomeRoute: FunctionComponent<{}> = () => ( + + + + + +

- - - - - - {/* TODO: Hook up link to app directory */} - - - - - - ); -}; - -ChangeHomeRoute.defaultProps = { - defaultRoute: HOME_APP_BASE_PATH, -}; +

+ + + + + + + + + + + {/* TODO: Hook up link to app directory */} + + + + + +); From 8ddb840e7f65092a34bc351e5bb0d76d7b186847 Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Mon, 27 Jul 2020 20:35:50 -0700 Subject: [PATCH 07/29] Updated app directory link --- .../components/change_home_route/change_home_route.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx b/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx index 19c1552ff7fbd..25a40f770ab0c 100644 --- a/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx +++ b/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx @@ -63,8 +63,7 @@ export const ChangeHomeRoute: FunctionComponent<{}> = () => ( - {/* TODO: Hook up link to app directory */} - + Date: Tue, 28 Jul 2020 11:58:02 -0700 Subject: [PATCH 08/29] Moved app directory link from ChangeHomeRoute component to home component --- .../change_home_route/change_home_route.tsx | 53 +++++++------------ .../public/application/components/home.js | 37 +++++++------ 2 files changed, 39 insertions(+), 51 deletions(-) diff --git a/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx b/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx index 25a40f770ab0c..cd35558e8e42f 100644 --- a/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx +++ b/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx @@ -26,47 +26,30 @@ import { createAppNavigationHandler } from '../app_navigation_handler'; export const ChangeHomeRoute: FunctionComponent<{}> = () => ( - - - - -

- -

- - - - - - - - + + +

+ +

+ - + diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js index f202b0ce15a9d..59fa6fba60620 100644 --- a/src/plugins/home/public/application/components/home.js +++ b/src/plugins/home/public/application/components/home.js @@ -139,7 +139,7 @@ export class Home extends Component { }; renderNormal() { - const { addBasePath, directories } = this.props; + const { addBasePath } = this.props; const devTools = this.findDirectoryById('console'); const stackManagement = this.findDirectoryById('stack-management'); @@ -158,8 +158,6 @@ export class Home extends Component { 'index_lifecycle_management', ].map(this.renderDirectory); - console.log({ directories }); - return (
@@ -209,13 +207,6 @@ export class Home extends Component { ) : null} - {/* - - {i18n.translate('home.pageHeader.appDirectoryButtonLabel', { - defaultMessage: 'App directory', - })} - - */} @@ -289,12 +280,26 @@ export class Home extends Component { ) : null} - {advancedSettings && ( - - - - - )} + + + + + {advancedSettings && } + + + + + + +
From f73bbe30b173986e7da7b2ac6f14c007163e95e4 Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Tue, 28 Jul 2020 14:07:56 -0700 Subject: [PATCH 09/29] Updated tests --- src/plugins/advanced_settings/kibana.json | 5 +- src/plugins/console/public/plugin.ts | 28 +- .../__snapshots__/add_data.test.js.snap | 1163 ---------- .../__snapshots__/home.test.js.snap | 2028 +++++++++-------- .../components/add_data/add_data.tsx | 55 + .../application/components/add_data/index.ts | 20 + .../change_home_route.test.tsx.snap | 69 + .../change_home_route.test.tsx | 10 + .../public/application/components/home.js | 92 +- .../components/manage_data/index.tsx | 20 + .../components/manage_data/manage_data.tsx | 50 + src/plugins/home/public/plugin.test.ts | 26 + .../feature_catalogue_registry.mock.ts | 9 + 13 files changed, 1353 insertions(+), 2222 deletions(-) delete mode 100644 src/plugins/home/public/application/components/__snapshots__/add_data.test.js.snap create mode 100644 src/plugins/home/public/application/components/add_data/add_data.tsx create mode 100644 src/plugins/home/public/application/components/add_data/index.ts create mode 100644 src/plugins/home/public/application/components/change_home_route/__snapshots__/change_home_route.test.tsx.snap create mode 100644 src/plugins/home/public/application/components/manage_data/index.tsx create mode 100644 src/plugins/home/public/application/components/manage_data/manage_data.tsx diff --git a/src/plugins/advanced_settings/kibana.json b/src/plugins/advanced_settings/kibana.json index 2f83ccf332dbd..0e49fe17089f0 100644 --- a/src/plugins/advanced_settings/kibana.json +++ b/src/plugins/advanced_settings/kibana.json @@ -3,6 +3,7 @@ "version": "kibana", "server": true, "ui": true, - "requiredPlugins": ["management", "home"], - "requiredBundles": ["kibanaReact"] + "requiredPlugins": ["management"], + "optionalPlugins": ["home"], + "requiredBundles": ["kibanaReact", "home"] } diff --git a/src/plugins/console/public/plugin.ts b/src/plugins/console/public/plugin.ts index 851dc7a063d7b..12513435859cb 100644 --- a/src/plugins/console/public/plugin.ts +++ b/src/plugins/console/public/plugin.ts @@ -28,19 +28,21 @@ export class ConsoleUIPlugin implements Plugin - - - - - - - - - -

- -

- - - - - - - - APM automatically collects in-depth performance metrics and errors from inside your applications. - - } - footer={ - - - - } - textAlign="left" - title="APM" - titleSize="xs" - /> - - - - Ingest logs from popular data sources and easily visualize in preconfigured dashboards. - - } - footer={ - - - - } - textAlign="left" - title="Logs" - titleSize="xs" - /> - - - - Collect metrics from the operating system and services running on your servers. - - } - footer={ - - - - } - textAlign="left" - title="Metrics" - titleSize="xs" - /> - - - - - - - - - - -

- -

- - - - - - Protect hosts, analyze security information and events, hunt threats, automate detections, and create cases. - - } - footer={ - - - - } - textAlign="left" - title="SIEM + Endpoint Security" - titleSize="xs" - /> - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`isNewKibanaInstance 1`] = ` - - - - - - - - - - -

- -

- - - - - - - - Ingest logs from popular data sources and easily visualize in preconfigured dashboards. - - } - footer={ - - - - } - textAlign="left" - title="Logs" - titleSize="xs" - /> - - - - Collect metrics from the operating system and services running on your servers. - - } - footer={ - - - - } - textAlign="left" - title="Metrics" - titleSize="xs" - /> - - - - - - - - - - -

- -

- - - - - - Protect hosts, analyze security information and events, hunt threats, automate detections, and create cases. - - } - footer={ - - - - } - textAlign="left" - title="SIEM + Endpoint Security" - titleSize="xs" - /> - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`mlEnabled 1`] = ` - - - - - - - - - - -

- -

- - - - - - - - APM automatically collects in-depth performance metrics and errors from inside your applications. - - } - footer={ - - - - } - textAlign="left" - title="APM" - titleSize="xs" - /> - - - - Ingest logs from popular data sources and easily visualize in preconfigured dashboards. - - } - footer={ - - - - } - textAlign="left" - title="Logs" - titleSize="xs" - /> - - - - Collect metrics from the operating system and services running on your servers. - - } - footer={ - - - - } - textAlign="left" - title="Metrics" - titleSize="xs" - /> - - - - - - - - - - -

- -

- - - - - - Protect hosts, analyze security information and events, hunt threats, automate detections, and create cases. - - } - footer={ - - - - } - textAlign="left" - title="SIEM + Endpoint Security" - titleSize="xs" - /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`render 1`] = ` - - - - - - - - - - -

- -

- - - - - - - - Ingest logs from popular data sources and easily visualize in preconfigured dashboards. - - } - footer={ - - - - } - textAlign="left" - title="Logs" - titleSize="xs" - /> - - - - Collect metrics from the operating system and services running on your servers. - - } - footer={ - - - - } - textAlign="left" - title="Metrics" - titleSize="xs" - /> - - - - - - - - - - -

- -

- - - - - - Protect hosts, analyze security information and events, hunt threats, automate detections, and create cases. - - } - footer={ - - - - } - textAlign="left" - title="SIEM + Endpoint Security" - titleSize="xs" - /> - - - - - - - - - - - - - - - - - - - - - - - - - - -`; diff --git a/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap b/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap index 4fa04bb64b177..e4c5e6db743ee 100644 --- a/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap +++ b/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap @@ -1,1066 +1,1119 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`home directories should not render directory entry when showOnHomePage is false 1`] = ` - - - -

- -

- - - - - - + + -

+

-

+ - - - - - - + - -

- -

- - - - - - - - + + Add data + + + + + + + +
+
- +
- -

- + +

+ Add your data +

+ + + + + + + -

- - + +
+ + +
+ - - - - - - - +

+ Manage your data +

+ + + +
+
+
+ `; exports[`home directories should render ADMIN directory entry in "Manage" panel 1`] = ` - - - -

- -

- - - - - - + + -

- -

- - - - - - - - -

+

-

+ - - + + - + + Add data + - - - - - - + + + + +
+
- +
- -

- + +

+ Add your data +

+ + + + + + + -

- - + +
+ + +
+ - - - - - - - +

+ Manage your data +

+ + + +
+
+
+ `; exports[`home directories should render DATA directory entry in "Explore Data" panel 1`] = ` - - - -

- -

- - - - - - + + -

+

-

+ - - + + - + + Add data + - - - - - - -

- -

- - - - - - - - + + + + +
+
- +
- -

- + +

+ Add your data +

+ + + + + + + -

- - + +
+ + +
+ - - - - - - - +

+ Manage your data +

+ + + +
+
+
+ `; exports[`home isNewKibanaInstance should safely handle execeptions 1`] = ` - - - -

- -

- - - - - - + + -

+

-

+ - - - - - - + - -

- -

- - - - - - - - + + Add data + + + + + + + +
+
- +
- -

- + +

+ Add your data +

+ + + + + + + -

- - + +
+ + +
+ - - - - - - - +

+ Manage your data +

+ + + +
+
+
+ `; exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when there are index patterns 1`] = ` - - - -

- -

- - - - - - + + -

+

-

+ - - - - - - + - -

- -

- - - - - - - - + + Add data + + + + + + + +
+
- +
- -

- + +

+ Add your data +

+ + + + + + + -

- - + +
+ + +
+ - - - - - - - +

+ Manage your data +

+ + + +
+
+
+ `; exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when there are no index patterns 1`] = ` - - - -

- -

- - - - - - + + -

+

-

+ - - - - - - + - -

- -

- - - - - - - - + + Add data + + + + + + + +
+
- +
- -

- + +

+ Add your data +

+ + + + + + + -

- - + +
+ + +
+ - - - - - - - +

+ Manage your data +

+ + + +
+
+
+ `; exports[`home should render home component 1`] = ` - - - -

- -

- - - - - - + + -

+

-

+ - - - - - - + - -

- -

- - - - - - - - + + Add data + + + + + + + +
+
- +
- -

- + +

+ Add your data +

+ + + + + + + -

- - + +
+ + +
+ - - - - - - - +

+ Manage your data +

+ + + +
+
+
+ `; exports[`home welcome should show the normal home page if loading fails 1`] = ` - - - -

- -

- - - - - - + + -

+

-

+ - - - - - - + - -

- -

- - - - - - - - + + Add data + + + + + + + +
+
- +
- -

- + +

+ Add your data +

+ + + + + + + -

- - + +
+ + +
+ - - - - - - - +

+ Manage your data +

+ + + +
+
+
+ `; exports[`home welcome should show the normal home page if welcome screen is disabled locally 1`] = ` - - - -

- -

- - - - - - + + -

+

-

+ - - - - - - + - -

- -

- - - - - - - - + + Add data + + + + + + + +
+
- +
- -

- + +

+ Add your data +

+ + + + + + + -

- - + +
+ + +
+ - - - - - - - +

+ Manage your data +

+ + + +
+
+
+ `; exports[`home welcome should show the welcome screen if enabled, and there are no index patterns defined 1`] = ` @@ -1071,116 +1124,125 @@ exports[`home welcome should show the welcome screen if enabled, and there are n `; exports[`home welcome stores skip welcome setting if skipped 1`] = ` - - - -

- -

- - - - - - + + -

+

-

+ - - - - - - + - -

- -

- - - - - - - - + + Add data + + + + + + + +
+
- +
- -

- + +

+ Add your data +

+ + + + + + + -

- - + +
+ + +
+ - - - - - - - +

+ Manage your data +

+ + + +
+
+
+ `; diff --git a/src/plugins/home/public/application/components/add_data/add_data.tsx b/src/plugins/home/public/application/components/add_data/add_data.tsx new file mode 100644 index 0000000000000..f6f1fd9e5f8c0 --- /dev/null +++ b/src/plugins/home/public/application/components/add_data/add_data.tsx @@ -0,0 +1,55 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; + +interface Props { + sampleData?: FeatureCatalogueEntry; + cards?: JSX.Element[]; +} + +export const AddData: FC = ({ sampleData, cards }) => ( +
+ + + +

+ +

+ + + {sampleData ? ( + + + + + + ) : null} + + + + + {cards} +
+); diff --git a/src/plugins/home/public/application/components/add_data/index.ts b/src/plugins/home/public/application/components/add_data/index.ts new file mode 100644 index 0000000000000..a7d465d177636 --- /dev/null +++ b/src/plugins/home/public/application/components/add_data/index.ts @@ -0,0 +1,20 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export * from './add_data'; diff --git a/src/plugins/home/public/application/components/change_home_route/__snapshots__/change_home_route.test.tsx.snap b/src/plugins/home/public/application/components/change_home_route/__snapshots__/change_home_route.test.tsx.snap new file mode 100644 index 0000000000000..d11a1a8753605 --- /dev/null +++ b/src/plugins/home/public/application/components/change_home_route/__snapshots__/change_home_route.test.tsx.snap @@ -0,0 +1,69 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChangeHomeRoute render 1`] = ` + + + + + +

+ +

+ + + + + + + + + + + + + + + +`; diff --git a/src/plugins/home/public/application/components/change_home_route/change_home_route.test.tsx b/src/plugins/home/public/application/components/change_home_route/change_home_route.test.tsx index 9880b336e76e5..e1a332b1a81c0 100644 --- a/src/plugins/home/public/application/components/change_home_route/change_home_route.test.tsx +++ b/src/plugins/home/public/application/components/change_home_route/change_home_route.test.tsx @@ -16,3 +16,13 @@ * specific language governing permissions and limitations * under the License. */ +import React from 'react'; +import { shallow } from 'enzyme'; +import { ChangeHomeRoute } from './change_home_route'; + +describe('ChangeHomeRoute', () => { + test('render', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js index 59fa6fba60620..dbf57eca3c738 100644 --- a/src/plugins/home/public/application/components/home.js +++ b/src/plugins/home/public/application/components/home.js @@ -22,6 +22,8 @@ import PropTypes from 'prop-types'; import { Synopsis } from './synopsis'; import { ChangeHomeRoute } from './change_home_route'; import { SolutionsPanel } from './solutions_panel'; +import { ManageData } from './manage_data'; +import { AddData } from './add_data'; import { FormattedMessage } from '@kbn/i18n/react'; import { @@ -29,7 +31,6 @@ import { EuiTitle, EuiFlexGroup, EuiFlexItem, - EuiSpacer, EuiHorizontalRule, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -150,13 +151,23 @@ export class Home extends Component { 'home_tutorial_directory', 'ingestManager', 'ml_file_data_visualizer', - ].map(this.renderDirectory); + ] + .map(this.renderDirectory) + .filter((card) => card); + const manageDataFeatureCards = [ 'security', 'monitoring', 'snapshot_restore', 'index_lifecycle_management', - ].map(this.renderDirectory); + ] + .map(this.renderDirectory) + .filter((card) => card); + + // Show card for console if none of the manage data plugins are available, most likely in OSS + if (manageDataFeatureCards.length < 1) { + manageDataFeatureCards.push(this.renderDirectory('console')); + } return (
@@ -216,69 +227,28 @@ export class Home extends Component {
-
- - - -

- {i18n.translate('home.addData.sectionTitle', { - defaultMessage: 'Add your data', - })} -

- - - {sampleData ? ( - - - - - - ) : null} - - - - + {/* If there is only one card in each add and manage data section, this displays the two sections side by side */} + {addDataFeatureCards.length === 1 && manageDataFeatureCards.length === 1 ? ( - - {addDataFeatureCards} + + + + + -
- - {manageDataFeatureCards.length ? ( + ) : ( - - - -
- -

- {i18n.translate('home.manageData.sectionTitle', { - defaultMessage: 'Manage your data', - })} -

- - - - - - {manageDataFeatureCards} - -
+ + - ) : null} + )} diff --git a/src/plugins/home/public/application/components/manage_data/index.tsx b/src/plugins/home/public/application/components/manage_data/index.tsx new file mode 100644 index 0000000000000..2845e3bd12023 --- /dev/null +++ b/src/plugins/home/public/application/components/manage_data/index.tsx @@ -0,0 +1,20 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export * from './manage_data'; diff --git a/src/plugins/home/public/application/components/manage_data/manage_data.tsx b/src/plugins/home/public/application/components/manage_data/manage_data.tsx new file mode 100644 index 0000000000000..552cae62cb8ad --- /dev/null +++ b/src/plugins/home/public/application/components/manage_data/manage_data.tsx @@ -0,0 +1,50 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React, { FC, Fragment } from 'react'; +import { EuiFlexGroup, EuiHorizontalRule, EuiSpacer, EuiTitle } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; + +interface Props { + cards: JSX.element[]; +} + +export const ManageData: FC = ({ cards }) => ( + + {cards.length > 1 ? ( + + + + + ) : null} + +
+ +

+ +

+ + + + + + {cards} + +
+ +); diff --git a/src/plugins/home/public/plugin.test.ts b/src/plugins/home/public/plugin.test.ts index 0b83c4caf1b30..f3ffdd383edf6 100644 --- a/src/plugins/home/public/plugin.test.ts +++ b/src/plugins/home/public/plugin.test.ts @@ -19,6 +19,7 @@ import { registryMock, environmentMock, tutorialMock } from './plugin.test.mocks'; import { HomePublicPlugin } from './plugin'; +import { FeatureCatalogueCategory } from '../../services'; import { coreMock } from '../../../core/public/mocks'; import { kibanaLegacyPluginMock } from '../../kibana_legacy/public/mocks'; @@ -33,6 +34,17 @@ describe('HomePublicPlugin', () => { }); describe('setup', () => { + test('registers advanced settings and tutorial directory to feature catalogue', async () => { + const setup = await new HomePublicPlugin(mockInitializerContext).setup( + coreMock.createSetup() as any, + { + kibanaLegacy: kibanaLegacyPluginMock.createSetupContract(), + } + ); + expect(setup).toHaveProperty('featureCatalogue'); + expect(setup.featureCatalogue.register).toHaveBeenCalledTimes(2); + }); + test('wires up and returns registry', async () => { const setup = await new HomePublicPlugin(mockInitializerContext).setup( coreMock.createSetup() as any, @@ -66,4 +78,18 @@ describe('HomePublicPlugin', () => { expect(setup.tutorials).toHaveProperty('setVariable'); }); }); + + describe('start', () => { + test('wires up and returns registry', async () => { + const start = await new HomePublicPlugin(mockInitializerContext).start( + coreMock.createStart() as any, + { + kibanaLegacy: kibanaLegacyPluginMock.createStartContract(), + } + ); + expect(start).toHaveProperty('featureCatalogue'); + expect(start.featureCatalogue).toHaveProperty('showOnHomePage'); + expect(start.featureCatalogue).toHaveProperty('hideFromHomePage'); + }); + }); }); diff --git a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.mock.ts b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.mock.ts index d7b87adfff78b..4f2d0a0295074 100644 --- a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.mock.ts +++ b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.mock.ts @@ -28,6 +28,13 @@ const createSetupMock = (): jest.Mocked => { }; return setup; }; +const createStartMock = (): jest.Mocked => { + const start = { + showOnHomePage: jest.fn(), + hideFromHomePage: jest.fn(), + }; + return start; +}; const createMock = (): jest.Mocked> => { const service = { @@ -36,10 +43,12 @@ const createMock = (): jest.Mocked> => get: jest.fn(() => []), }; service.setup.mockImplementation(createSetupMock); + service.start.mockImplementation(createStartMock); return service; }; export const featureCatalogueRegistryMock = { createSetup: createSetupMock, + createStart: createStartMock, create: createMock, }; From cf3f33db21e0c6f990f21c9ddfa787f66e51c82f Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Tue, 28 Jul 2020 17:50:44 -0700 Subject: [PATCH 10/29] Added FeatureCatalogueRegistryStart type --- .../services/feature_catalogue/feature_catalogue_registry.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts index d4e9b35d5fa43..599831fd1c2ea 100644 --- a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts +++ b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts @@ -95,6 +95,7 @@ export class FeatureCatalogueRegistry { } export type FeatureCatalogueRegistrySetup = ReturnType; +export type FeatureCatalogueRegistryStart = ReturnType; const compareByKey = (key: keyof T) => (left: T, right: T) => { if (left[key] < right[key]) { From 0079a2e6e83d981084293d55248d9c8b585ae4fe Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Tue, 28 Jul 2020 17:36:53 -0700 Subject: [PATCH 11/29] BROKEN --- .../advanced_settings/public/plugin.ts | 5 +- src/plugins/console/public/plugin.ts | 1 - src/plugins/dashboard/public/plugin.tsx | 10 ++- .../discover/public/register_feature.ts | 9 ++- .../components/add_data/add_data.tsx | 24 ++++--- .../change_home_route/change_home_route.tsx | 4 +- .../components/feature_directory.js | 4 +- .../public/application/components/home.js | 70 +++++++------------ .../application/components/home.test.js | 4 +- .../public/application/components/home_app.js | 4 +- .../solutions_panel/solutions_panel.tsx | 6 +- src/plugins/home/public/index.ts | 1 + src/plugins/home/public/plugin.ts | 20 ++---- .../feature_catalogue_registry.mock.ts | 1 + .../feature_catalogue_registry.test.ts | 1 - .../feature_catalogue_registry.ts | 35 +++++++--- .../services/feature_catalogue/index.ts | 1 + src/plugins/management/public/plugin.ts | 3 +- .../saved_objects_management/public/plugin.ts | 1 - src/plugins/visualize/public/plugin.ts | 4 +- .../apm/public/featureCatalogueEntry.ts | 1 - .../canvas/public/feature_catalogue_entry.ts | 1 - .../enterprise_search/public/plugin.ts | 16 ++++- .../index_lifecycle_management/kibana.json | 7 +- .../public/plugin.tsx | 36 ++++++---- .../public/types.ts | 2 +- .../plugins/ingest_manager/public/plugin.ts | 6 +- x-pack/plugins/ml/public/register_feature.ts | 14 ++-- x-pack/plugins/monitoring/public/plugin.ts | 4 +- x-pack/plugins/observability/public/plugin.ts | 6 +- x-pack/plugins/security/public/plugin.tsx | 4 +- .../plugins/snapshot_restore/public/plugin.ts | 6 +- 32 files changed, 168 insertions(+), 143 deletions(-) diff --git a/src/plugins/advanced_settings/public/plugin.ts b/src/plugins/advanced_settings/public/plugin.ts index f9066cdc9ec64..61b3f195d381a 100644 --- a/src/plugins/advanced_settings/public/plugin.ts +++ b/src/plugins/advanced_settings/public/plugin.ts @@ -52,10 +52,9 @@ export class AdvancedSettingsPlugin description: i18n.translate('xpack.advancedSettings.featureCatalogueTitle', { defaultMessage: 'Customize your Kibana experience', }), - icon: 'gear', // TODO: Do we want to use this icon here? + icon: 'gear', path: '/app/management/kibana/settings', - showOnHomePage: true, - category: FeatureCatalogueCategory.ADMIN, + category: DEFAULT_APP_CATEGORY.management, }); } diff --git a/src/plugins/console/public/plugin.ts b/src/plugins/console/public/plugin.ts index 12513435859cb..3ad69393d9cb3 100644 --- a/src/plugins/console/public/plugin.ts +++ b/src/plugins/console/public/plugin.ts @@ -39,7 +39,6 @@ export class ConsoleUIPlugin implements Plugin = ({ sampleData, cards }) => ( - {sampleData ? ( - - - - - - ) : null} + + + + + diff --git a/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx b/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx index cd35558e8e42f..6df269311427a 100644 --- a/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx +++ b/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx @@ -17,14 +17,14 @@ * under the License. */ -import React, { FunctionComponent } from 'react'; +import React, { FC } from 'react'; import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { HOME_APP_BASE_PATH } from '../../../../common/constants'; import { getServices } from '../../kibana_services'; import { createAppNavigationHandler } from '../app_navigation_handler'; -export const ChangeHomeRoute: FunctionComponent<{}> = () => ( +export const ChangeHomeRoute: FC = () => ( - this.props.directories.find((directory) => directory.showOnHomePage && directory.id === id); - - renderDirectory = (featureId) => { - const { addBasePath } = this.props; - - const directory = this.findDirectoryById(featureId); + findDirectoryById = (id) => this.props.directories.find((directory) => directory.id === id); - return directory ? ( + renderDirectory = (directory) => + directory ? ( ) : null; - }; + + renderSectionCards = (section) => + this.props.directories + .filter((directory) => directory.homePageSection === section) + .sort((directoryA, directoryB) => directoryA.order - directoryB.order) + .map(this.renderDirectory); renderNormal() { const { addBasePath } = this.props; @@ -145,28 +146,15 @@ export class Home extends Component { const devTools = this.findDirectoryById('console'); const stackManagement = this.findDirectoryById('stack-management'); const advancedSettings = this.findDirectoryById('advanced_settings'); - const sampleData = this.findDirectoryById('home_sample_data'); - - const addDataFeatureCards = [ - 'home_tutorial_directory', - 'ingestManager', - 'ml_file_data_visualizer', - ] - .map(this.renderDirectory) - .filter((card) => card); - - const manageDataFeatureCards = [ - 'security', - 'monitoring', - 'snapshot_restore', - 'index_lifecycle_management', - ] - .map(this.renderDirectory) - .filter((card) => card); + + const addDataFeatureCards = this.renderSectionCards(FeatureCatalogueHomePageSection.ADD_DATA); + const manageDataFeatureCards = this.renderSectionCards( + FeatureCatalogueHomePageSection.MANAGE_DATA + ); // Show card for console if none of the manage data plugins are available, most likely in OSS - if (manageDataFeatureCards.length < 1) { - manageDataFeatureCards.push(this.renderDirectory('console')); + if (manageDataFeatureCards.length < 1 && devTools) { + manageDataFeatureCards.push(this.renderDirectory(devTools)); } return ( @@ -231,21 +219,15 @@ export class Home extends Component { {addDataFeatureCards.length === 1 && manageDataFeatureCards.length === 1 ? ( - + - + ) : ( - + )} @@ -259,7 +241,7 @@ export class Home extends Component { justifyContent="spaceBetween" > - {advancedSettings && } + {advancedSettings ? : null} @@ -316,8 +298,10 @@ Home.propTypes = { description: PropTypes.string.isRequired, icon: PropTypes.string.isRequired, path: PropTypes.string.isRequired, - showOnHomePage: PropTypes.bool.isRequired, + homePageSection: PropTypes.string, category: PropTypes.string.isRequired, + solutionId: PropTypes.string, + order: PropTypes.number, }) ), find: PropTypes.func.isRequired, diff --git a/src/plugins/home/public/application/components/home.test.js b/src/plugins/home/public/application/components/home.test.js index 3bcfce513cb12..b4e659fd86872 100644 --- a/src/plugins/home/public/application/components/home.test.js +++ b/src/plugins/home/public/application/components/home.test.js @@ -35,6 +35,7 @@ jest.mock('../kibana_services', () => ({ }), })); +// TODO: Update tests describe('home', () => { let defaultProps; @@ -100,7 +101,6 @@ describe('home', () => { description: 'Display and share a collection of visualizations and saved searches.', icon: 'dashboardApp', path: 'dashboard_landing_page', - showOnHomePage: true, category: FeatureCatalogueCategory.DATA, }; @@ -118,7 +118,6 @@ describe('home', () => { description: 'Manage the index patterns that help retrieve your data from Elasticsearch.', icon: 'indexPatternApp', path: 'index_management_landing_page', - showOnHomePage: true, category: FeatureCatalogueCategory.ADMIN, }; @@ -136,7 +135,6 @@ describe('home', () => { description: 'Your center console for managing the Elastic Stack.', icon: 'managementApp', path: 'management_landing_page', - showOnHomePage: false, category: FeatureCatalogueCategory.ADMIN, }; diff --git a/src/plugins/home/public/application/components/home_app.js b/src/plugins/home/public/application/components/home_app.js index 53f094943480d..005fe051eb799 100644 --- a/src/plugins/home/public/application/components/home_app.js +++ b/src/plugins/home/public/application/components/home_app.js @@ -106,8 +106,10 @@ HomeApp.propTypes = { description: PropTypes.string.isRequired, icon: PropTypes.string.isRequired, path: PropTypes.string.isRequired, - showOnHomePage: PropTypes.bool.isRequired, + homePageSection: PropTypes.string, category: PropTypes.string.isRequired, + solutionId: PropTypes.string, + order: PropTypes.number, }) ), }; diff --git a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx index 375bbb6f4cf65..f1cf65fe06336 100644 --- a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx +++ b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx @@ -41,7 +41,7 @@ interface Props { const getActionText = ({ verb, text }: { verb: string; text: string }): JSX.Element => (

- {verb} {text} + {verb} {text}

); @@ -49,7 +49,7 @@ const getActionText = ({ verb, text }: { verb: string; text: string }): JSX.Elem // TODO: Should this live here? Should it be registered per app? const solutionCTAs: { [key: string]: any } = { enterpriseSearch: { - websiteSearch: { + enterpriseSearch: { verb: i18n.translate('home.solutionsPanel.enterpriseSearch.firstActionVerb', { defaultMessage: 'Build', description: @@ -225,7 +225,7 @@ const solutionCTAs: { [key: string]: any } = { export const SolutionsPanel: FunctionComponent = ({ addBasePath, findDirectoryById }) => { const observability = findDirectoryById('observability'); - const enterpriseSearch = findDirectoryById('appSearch'); + const enterpriseSearch = findDirectoryById('enterpriseSearch'); const securitySolution = findDirectoryById('securitySolution'); const addSpacersBetweenReducer = ( diff --git a/src/plugins/home/public/index.ts b/src/plugins/home/public/index.ts index 6079449554b08..863188eed529e 100644 --- a/src/plugins/home/public/index.ts +++ b/src/plugins/home/public/index.ts @@ -29,6 +29,7 @@ export { export { FeatureCatalogueEntry, FeatureCatalogueCategory, + FeatureCatalogueHomePageSection, Environment, TutorialVariables, TutorialDirectoryNoticeComponent, diff --git a/src/plugins/home/public/plugin.ts b/src/plugins/home/public/plugin.ts index 6e568d02f4d90..edfb3bd9203af 100644 --- a/src/plugins/home/public/plugin.ts +++ b/src/plugins/home/public/plugin.ts @@ -31,6 +31,7 @@ import { EnvironmentService, EnvironmentServiceSetup, FeatureCatalogueCategory, + FeatureCatalogueHomePageSection, FeatureCatalogueRegistry, FeatureCatalogueRegistrySetup, TutorialService, @@ -127,23 +128,10 @@ export class HomePublicPlugin defaultMessage: 'Add data from a variety of common sources.', }), icon: 'indexOpen', - showOnHomePage: true, + homePageSection: FeatureCatalogueHomePageSection.ADD_DATA, path: `${HOME_APP_BASE_PATH}#/tutorial_directory`, - category: FeatureCatalogueCategory.DATA, // TODO: is the correct category for this plugin? - }); - - featureCatalogue.register({ - id: 'home_sample_data', - title: i18n.translate('home.sampleData.featureCatalogueTitle', { - defaultMessage: 'Sample Data', - }), - description: i18n.translate('home.sampleData.featureCatalogueDescription', { - defaultMessage: 'Load a data set and a Kibana dashboard', - }), - icon: 'tableDensityExpanded', - showOnHomePage: true, - path: `${HOME_APP_BASE_PATH}#/tutorial_directory/sampleData`, - category: FeatureCatalogueCategory.DATA, // TODO: is the correct category for this plugin? + category: FeatureCatalogueCategory.DATA, + order: 100, }); return { diff --git a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.mock.ts b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.mock.ts index 4f2d0a0295074..3e6a2368d0e11 100644 --- a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.mock.ts +++ b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.mock.ts @@ -19,6 +19,7 @@ import { FeatureCatalogueRegistrySetup, + FeatureCatalogueRegistryStart, FeatureCatalogueRegistry, } from './feature_catalogue_registry'; diff --git a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.test.ts b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.test.ts index 34095848dbd2c..da3e513c69821 100644 --- a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.test.ts +++ b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.test.ts @@ -29,7 +29,6 @@ const DASHBOARD_FEATURE: FeatureCatalogueEntry = { description: 'Display and share a collection of visualizations and saved searches.', icon: 'dashboardApp', path: `/app/kibana#dashboard`, - showOnHomePage: true, category: FeatureCatalogueCategory.DATA, }; diff --git a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts index 599831fd1c2ea..86e61ce53ce4c 100644 --- a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts +++ b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts @@ -18,13 +18,23 @@ */ import { Capabilities } from 'src/core/public'; +import { AppCategory } from 'src/core/types'; + import { IconType } from '@elastic/eui'; +// /** @public */ +// export enum FeatureCatalogueCategory { +// ADMIN = 'admin', +// DATA = 'data', +// OTHER = 'other', +// SOLUTION = 'solution', +// } + /** @public */ -export enum FeatureCatalogueCategory { - ADMIN = 'admin', - DATA = 'data', - OTHER = 'other', +export enum FeatureCatalogueHomePageSection { + ADD_DATA = 'add_data', + MANAGE_DATA = 'manage_data', + SOLUTION = 'solution', } /** @public */ @@ -33,16 +43,18 @@ export interface FeatureCatalogueEntry { readonly id: string; /** Title of feature displayed to the user. */ readonly title: string; - /** {@link FeatureCatalogueCategory} to display this feature in. */ - readonly category: FeatureCatalogueCategory; + /** The solution to display this feature in. */ + readonly category: AppCategory; /** One-line description of feature displayed to the user. */ readonly description: string; /** EUI `IconType` for icon to be displayed to the user. EUI supports any known EUI icon, SVG URL, or ReactElement. */ readonly icon: IconType; /** URL path to link to this future. Should not include the basePath. */ readonly path: string; - /** Whether or not this link should be shown on the front page of Kibana. */ - showOnHomePage: boolean; + /** Indicate which home section this card should appear*/ + homePageSection?: FeatureCatalogueHomePageSection; + /** An ordinal used to sort features relative to one another for display on the home page */ + readonly order?: number; } export class FeatureCatalogueRegistry { @@ -65,18 +77,19 @@ export class FeatureCatalogueRegistry { public start({ capabilities }: { capabilities: Capabilities }) { this.capabilities = capabilities; + return { - showOnHomePage: (featureId: string) => { + showOnHomePage: (featureId: string, section: FeatureCatalogueHomePageSection) => { const feature = this.features.get(featureId); if (feature) { - feature.showOnHomePage = true; + feature.homePageSection = section; this.features.set(featureId, feature); } }, hideFromHomePage: (featureId: string) => { const feature = this.features.get(featureId); if (feature) { - feature.showOnHomePage = false; + feature.homePageSection = undefined; this.features.set(featureId, feature); } }, diff --git a/src/plugins/home/public/services/feature_catalogue/index.ts b/src/plugins/home/public/services/feature_catalogue/index.ts index 1e5021a3ad0be..d2d5be3e851c3 100644 --- a/src/plugins/home/public/services/feature_catalogue/index.ts +++ b/src/plugins/home/public/services/feature_catalogue/index.ts @@ -19,6 +19,7 @@ export { FeatureCatalogueCategory, + FeatureCatalogueHomePageSection, FeatureCatalogueEntry, FeatureCatalogueRegistry, FeatureCatalogueRegistrySetup, diff --git a/src/plugins/management/public/plugin.ts b/src/plugins/management/public/plugin.ts index 93a5e36679c0d..9f95b39ea7ecf 100644 --- a/src/plugins/management/public/plugin.ts +++ b/src/plugins/management/public/plugin.ts @@ -56,8 +56,7 @@ export class ManagementPlugin implements Plugin { defaultMessage: 'Machine Learning', }), description: i18n.translate('xpack.ml.machineLearningDescription', { - defaultMessage: - 'Automatically model the normal behavior of your time series data to detect anomalies.', + defaultMessage: 'Detect anomalous events.', }), icon: 'machineLearningApp', path: '/app/ml', - showOnHomePage: true, + homePageSection: FeatureCatalogueHomePageSection.SOLUTION, category: FeatureCatalogueCategory.DATA, + solutionId: 'kibana', }); - // TODO: is it okay to register this as a separate feature in the feature catalogue? - // register data visualizer so it appears on the Kibana home page home.featureCatalogue.register({ id: `${PLUGIN_ID}_file_data_visualizer`, title: i18n.translate('xpack.ml.fileDataVisualizerTitle', { @@ -47,7 +46,8 @@ export const registerFeature = (home: HomePublicPluginSetup) => { }), icon: 'importAction', path: '/app/ml#/filedatavisualizer', - showOnHomePage: true, + homePageSection: FeatureCatalogueHomePageSection.ADD_DATA, category: FeatureCatalogueCategory.DATA, + order: 300, }); }; diff --git a/x-pack/plugins/monitoring/public/plugin.ts b/x-pack/plugins/monitoring/public/plugin.ts index cfac5e195a127..9922bd6b035fe 100644 --- a/x-pack/plugins/monitoring/public/plugin.ts +++ b/x-pack/plugins/monitoring/public/plugin.ts @@ -15,6 +15,7 @@ import { } from 'kibana/public'; import { FeatureCatalogueCategory, + FeatureCatalogueHomePageSection, HomePublicPluginSetup, } from '../../../../src/plugins/home/public'; import { UI_SETTINGS } from '../../../../src/plugins/data/public'; @@ -57,11 +58,12 @@ export class MonitoringPlugin title, icon, path: '/app/monitoring', - showOnHomePage: true, + homePageSection: FeatureCatalogueHomePageSection.MANAGE_DATA, category: FeatureCatalogueCategory.ADMIN, description: i18n.translate('xpack.monitoring.monitoringDescription', { defaultMessage: 'Track the real-time health and performance of your Elastic Stack.', }), + order: 200, }); } diff --git a/x-pack/plugins/observability/public/plugin.ts b/x-pack/plugins/observability/public/plugin.ts index a0a7058b41e9b..621f4e1ba9755 100644 --- a/x-pack/plugins/observability/public/plugin.ts +++ b/x-pack/plugins/observability/public/plugin.ts @@ -14,8 +14,8 @@ import { CoreStart, } from '../../../../src/core/public'; import { + FeatureCatalogueHomePageSection, HomePublicPluginSetup, - FeatureCatalogueCategory, } from '../../../../src/plugins/home/public'; import { registerDataHandler } from './data_handler'; import { toggleOverviewLinkInNav } from './toggle_overview_link_in_nav'; @@ -62,8 +62,8 @@ export class Plugin implements PluginClass Date: Wed, 29 Jul 2020 08:31:36 -0700 Subject: [PATCH 12/29] Home page refactor --- .../advanced_settings/public/plugin.ts | 4 +- src/plugins/dashboard/public/plugin.tsx | 6 +- .../discover/public/register_feature.ts | 7 +- .../components/feature_directory.js | 2 +- .../public/application/components/home.js | 20 +- .../public/application/components/home_app.js | 2 +- .../solutions_panel/solutions_panel.tsx | 488 ++++-------------- .../solutions_panel/solutions_title.tsx | 14 +- src/plugins/home/public/plugin.ts | 14 + .../feature_catalogue_registry.test.ts | 3 + .../feature_catalogue_registry.ts | 24 +- src/plugins/management/public/plugin.ts | 2 +- src/plugins/visualize/public/plugin.ts | 3 - .../apm/public/featureCatalogueEntry.ts | 12 +- .../canvas/public/feature_catalogue_entry.ts | 10 +- .../enterprise_search/public/plugin.ts | 32 +- x-pack/plugins/graph/public/plugin.ts | 12 +- .../grokdebugger/public/register_feature.ts | 1 - .../plugins/infra/public/register_feature.ts | 9 +- x-pack/plugins/logstash/public/plugin.ts | 2 +- .../maps/public/feature_catalogue_entry.ts | 11 +- x-pack/plugins/ml/public/register_feature.ts | 5 +- x-pack/plugins/observability/public/plugin.ts | 7 +- x-pack/plugins/painless_lab/public/plugin.tsx | 1 - x-pack/plugins/reporting/public/plugin.tsx | 1 - x-pack/plugins/rollup/public/plugin.ts | 1 - .../plugins/searchprofiler/public/plugin.ts | 1 - .../security_solution/public/plugin.tsx | 70 ++- .../public/create_feature_catalogue_entry.ts | 1 - x-pack/plugins/spaces/public/plugin.test.ts | 1 - .../transform/public/register_feature.ts | 1 - .../plugins/uptime/common/constants/plugin.ts | 2 +- x-pack/plugins/uptime/public/apps/plugin.ts | 9 +- x-pack/plugins/watcher/public/plugin.ts | 2 - 34 files changed, 302 insertions(+), 478 deletions(-) diff --git a/src/plugins/advanced_settings/public/plugin.ts b/src/plugins/advanced_settings/public/plugin.ts index 61b3f195d381a..031320c461219 100644 --- a/src/plugins/advanced_settings/public/plugin.ts +++ b/src/plugins/advanced_settings/public/plugin.ts @@ -52,9 +52,9 @@ export class AdvancedSettingsPlugin description: i18n.translate('xpack.advancedSettings.featureCatalogueTitle', { defaultMessage: 'Customize your Kibana experience', }), - icon: 'gear', + icon: 'gear', // TODO: Do we want to use this icon here? path: '/app/management/kibana/settings', - category: DEFAULT_APP_CATEGORY.management, + category: FeatureCatalogueCategory.ADMIN, }); } diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx index 27d6998ccf973..a8a8f2cae2d32 100644 --- a/src/plugins/dashboard/public/plugin.tsx +++ b/src/plugins/dashboard/public/plugin.tsx @@ -350,13 +350,13 @@ export class DashboardPlugin defaultMessage: 'Dashboard', }), description: i18n.translate('dashboard.featureCatalogue.dashboardDescription', { - defaultMessage: 'Display and share a collection of visualizations and saved searches.', + defaultMessage: 'Visualize every aspect of your data.', }), icon: 'dashboardApp', path: `/app/dashboards#${DashboardConstants.LANDING_PAGE_PATH}`, - homePageSection: FeatureCatalogueHomePageSection.SOLUTION, + homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, category: FeatureCatalogueCategory.DATA, - solutionId: 'kibana', + solution: 'kibana', order: 100, }); } diff --git a/src/plugins/discover/public/register_feature.ts b/src/plugins/discover/public/register_feature.ts index 82de78806a5d4..8380cd96006ee 100644 --- a/src/plugins/discover/public/register_feature.ts +++ b/src/plugins/discover/public/register_feature.ts @@ -30,12 +30,13 @@ export function registerFeature(home: HomePublicPluginSetup) { defaultMessage: 'Discover', }), description: i18n.translate('discover.discoverDescription', { - defaultMessage: 'Interactively explore your data by querying and filtering raw documents.', + defaultMessage: 'Search and explore your data.', }), icon: 'discoverApp', path: '/app/discover#/', - homePageSection: FeatureCatalogueHomePageSection.SOLUTION, + homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, category: FeatureCatalogueCategory.DATA, - solutionId: 'kibana', + solution: 'kibana', + order: 200, }); } diff --git a/src/plugins/home/public/application/components/feature_directory.js b/src/plugins/home/public/application/components/feature_directory.js index 0670d851a5f3d..2c57c4f2cfb56 100644 --- a/src/plugins/home/public/application/components/feature_directory.js +++ b/src/plugins/home/public/application/components/feature_directory.js @@ -157,7 +157,7 @@ FeatureDirectory.propTypes = { path: PropTypes.string.isRequired, homePageSection: PropTypes.string, category: PropTypes.string.isRequired, - solutionId: PropTypes.string, + solution: PropTypes.object, order: PropTypes.number, }) ), diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js index f2665adc23a20..c85cf5674c3ec 100644 --- a/src/plugins/home/public/application/components/home.js +++ b/src/plugins/home/public/application/components/home.js @@ -120,7 +120,7 @@ export class Home extends Component { findDirectoryById = (id) => this.props.directories.find((directory) => directory.id === id); - renderDirectory = (directory) => + renderFeatureCard = (directory) => directory ? ( ) : null; - renderSectionCards = (section) => + renderFeatureCardsBySection = (section) => this.props.directories .filter((directory) => directory.homePageSection === section) .sort((directoryA, directoryB) => directoryA.order - directoryB.order) - .map(this.renderDirectory); + .map(this.renderFeatureCard); renderNormal() { - const { addBasePath } = this.props; + const { addBasePath, directories } = this.props; const devTools = this.findDirectoryById('console'); const stackManagement = this.findDirectoryById('stack-management'); const advancedSettings = this.findDirectoryById('advanced_settings'); - const addDataFeatureCards = this.renderSectionCards(FeatureCatalogueHomePageSection.ADD_DATA); - const manageDataFeatureCards = this.renderSectionCards( + const addDataFeatureCards = this.renderFeatureCardsBySection( + FeatureCatalogueHomePageSection.ADD_DATA + ); + const manageDataFeatureCards = this.renderFeatureCardsBySection( FeatureCatalogueHomePageSection.MANAGE_DATA ); // Show card for console if none of the manage data plugins are available, most likely in OSS if (manageDataFeatureCards.length < 1 && devTools) { - manageDataFeatureCards.push(this.renderDirectory(devTools)); + manageDataFeatureCards.push(this.renderFeatureCard(devTools)); } return ( @@ -213,7 +215,7 @@ export class Home extends Component {
- + {/* If there is only one card in each add and manage data section, this displays the two sections side by side */} {addDataFeatureCards.length === 1 && manageDataFeatureCards.length === 1 ? ( @@ -300,7 +302,7 @@ Home.propTypes = { path: PropTypes.string.isRequired, homePageSection: PropTypes.string, category: PropTypes.string.isRequired, - solutionId: PropTypes.string, + solution: PropTypes.object, order: PropTypes.number, }) ), diff --git a/src/plugins/home/public/application/components/home_app.js b/src/plugins/home/public/application/components/home_app.js index 005fe051eb799..9ac3dc79f88f4 100644 --- a/src/plugins/home/public/application/components/home_app.js +++ b/src/plugins/home/public/application/components/home_app.js @@ -108,7 +108,7 @@ HomeApp.propTypes = { path: PropTypes.string.isRequired, homePageSection: PropTypes.string, category: PropTypes.string.isRequired, - solutionId: PropTypes.string, + solution: PropTypes.object, order: PropTypes.number, }) ), diff --git a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx index f1cf65fe06336..d692798e1a5c7 100644 --- a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx +++ b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx @@ -17,12 +17,11 @@ * under the License. */ -import React, { Fragment, FunctionComponent } from 'react'; -import { i18n } from '@kbn/i18n'; +import React, { Fragment, FC } from 'react'; import { EuiFlexGroup, EuiFlexItem, - EuiImage, + // EuiImage, EuiPanel, EuiSpacer, EuiText, @@ -31,406 +30,125 @@ import { import { SolutionsTitle } from './solutions_title'; import { FeatureCatalogueEntry } from '../../../'; import { createAppNavigationHandler } from '../app_navigation_handler'; - -interface Props { - addBasePath: (path: string) => string; - findDirectoryById: (id: string) => FeatureCatalogueEntry; -} +import { FeatureCatalogueCategory, FeatureCatalogueHomePageSection } from '../../../services'; // TODO: Bolding the first word/verb won't look write in other languages -const getActionText = ({ verb, text }: { verb: string; text: string }): JSX.Element => ( - -

- {verb} {text} -

+const getDescriptionText = ({ description }: FeatureCatalogueEntry): JSX.Element => ( + +

{description}

 ); -// TODO: Should this live here? Should it be registered per app? -const solutionCTAs: { [key: string]: any } = { - enterpriseSearch: { - enterpriseSearch: { - verb: i18n.translate('home.solutionsPanel.enterpriseSearch.firstActionVerb', { - defaultMessage: 'Build', - description: - 'The first word of this sentence is bolded. Full sentence: "Build a powerful website search."', - }), - text: i18n.translate('home.solutionsPanel.enterpriseSearch.firstActionText', { - defaultMessage: 'a powerful website search.', - description: 'Full sentence: "Build a powerful website search."', - }), - }, - appSearch: { - verb: i18n.translate('home.solutionsPanel.enterpriseSearch.secondActionVerb', { - defaultMessage: 'Search', - description: - 'The first word of this sentence is bolded. Full sentence: "Search any data from any application."', - }), - text: i18n.translate('home.solutionsPanel.enterpriseSearch.secondActionText', { - defaultMessage: 'any data from any application.', - description: 'Full sentence: "Search any data from any application."', - }), - }, - workplaceSearch: { - verb: i18n.translate('home.solutionsPanel.enterpriseSearch.thirdActionVerb', { - defaultMessage: 'Unify', - description: - 'The first word of this sentence is bolded. Full sentence: "Unify searchable workplace content."', - }), - text: i18n.translate('home.solutionsPanel.enterpriseSearch.thirdActionText', { - defaultMessage: 'searchable workplace content.', - description: 'Full sentence: "Unify searchable workplace content."', - }), - }, - }, - observability: { - metrics: { - verb: i18n.translate('home.solutionsPanel.observability.firstActionVerb', { - defaultMessage: 'Monitor', - description: - 'The first word of this sentence is bolded. Full sentence: "Monitor all infrastructure metrics."', - }), - text: i18n.translate('home.solutionsPanel.observability.firstActionText', { - defaultMessage: 'all infrastructure metrics.', - description: 'Full sentence: "Monitor all infrastructure metrics."', - }), - }, - apm: { - verb: i18n.translate('home.solutionsPanel.observability.secondActionVerb', { - defaultMessage: 'Track', - description: - 'The first word of this sentence is bolded. Full sentence: "Track application performance."', - }), - text: i18n.translate('home.solutionsPanel.observability.secondActionText', { - defaultMessage: 'application performance.', - description: 'Full sentence: "Track application performance."', - }), - }, - uptime: { - verb: i18n.translate('home.solutionsPanel.observability.thirdActionVerb', { - defaultMessage: 'Measure', - description: - 'The first word of the following sentence is bolded. Full sentence: "Measure SLAs and react to issues."', - }), - text: i18n.translate('home.solutionsPanel.observability.thirdActionText', { - defaultMessage: 'SLAs and react to issues.', - description: 'Full sentence: "Measure SLAs and react to issues."', - }), - }, - }, - securitySolution: [ - { - verb: i18n.translate('home.solutionsPanel.securitySolution.firstActionVerb', { - defaultMessage: 'Detect', - description: - 'The first word of this sentence is bolded. Full sentence: "Detect critical security events."', - }), - text: i18n.translate('home.solutionsPanel.securitySolution.firstActionText', { - defaultMessage: 'critical security events.', - description: 'Full sentence: "Detect critical security events."', - }), - }, - { - verb: i18n.translate('home.solutionsPanel.securitySolution.secondActionVerb', { - defaultMessage: 'Investigate', - description: - 'The first word of this sentence is bolded. Full sentence: "Investigate incidents and collaborate."', - }), - text: i18n.translate('home.solutionsPanel.securitySolution.secondActionText', { - defaultMessage: 'incidents and collaborate.', - description: 'Full sentence: "Investigate incidents and collaborate."', - }), - }, - { - verb: i18n.translate('home.solutionsPanel.securitySolution.thirdActionVerb', { - defaultMessage: 'Prevent', - description: - 'The first word of the following sentence is bolded. Full sentence: "Prevent threats autonomously."', - }), - text: i18n.translate('home.solutionsPanel.securitySolution.thirdActionText', { - defaultMessage: 'threats autonomously.', - description: 'Full sentence: "Prevent threats autonomously."', - }), - }, - ], - kibana: { - dashboard: { - verb: i18n.translate('home.solutionsPanel.kibana.dashboardVerb', { - defaultMessage: 'Visualize', - description: - 'The first word of this sentence is bolded. Full sentence: "Visualize every aspect of your data."', - }), - text: i18n.translate('home.solutionsPanel.kibana.dashboardText', { - defaultMessage: 'every aspect of your data.', - description: 'Full sentence: "Visualize every aspect of your data."', - }), - }, - discover: { - verb: i18n.translate('home.solutionsPanel.kibana.discoverVerb', { - defaultMessage: 'Search', - description: - 'The first word of this sentence is bolded. Full sentence: "Search and explore your data."', - }), - text: i18n.translate('home.solutionsPanel.kibana.discoverText', { - defaultMessage: 'and explore your data.', - description: 'Full sentence: "Search and explore your data."', - }), - }, - canvas: { - verb: i18n.translate('home.solutionsPanel.kibana.fourthActionVerb', { - defaultMessage: 'Craft', - description: - 'The first word of this sentence is bolded. Full sentence: "Craft pixel-perfect reports."', - }), - text: i18n.translate('home.solutionsPanel.kibana.fourthActionText', { - defaultMessage: 'pixel-perfect reports.', - description: 'Full sentence: "Craft pixel-perfect reports."', - }), - }, - maps: { - verb: i18n.translate('home.solutionsPanel.kibana.thirdActionVerb', { - defaultMessage: 'Plot', - description: - 'The first word of the following sentence is bolded. Full sentence: "Plot your geographic information."', - }), - text: i18n.translate('home.solutionsPanel.kibana.thirdActionText', { - defaultMessage: 'your geographic information.', - description: 'Full sentence: "Plot your geographic information."', - }), - }, - ml: { - verb: i18n.translate('home.solutionsPanel.kibana.fifthActionVerb', { - defaultMessage: 'Detect', - description: - 'The first word of this sentence is bolded. Full sentence: "Detect anomalous events."', - }), - text: i18n.translate('home.solutionsPanel.kibana.fifthActionText', { - defaultMessage: 'anomalous events.', - description: 'Full sentence: "Detect anomalous events."', - }), - }, - graph: { - verb: i18n.translate('home.solutionsPanel.kibana.sixthActionVerb', { - defaultMessage: 'Reveal', - description: - 'The first word of the following sentence is bolded. Full sentence: "Reveal patterns and relationships."', - }), - text: i18n.translate('home.solutionsPanel.kibana.sixthActionText', { - defaultMessage: 'patterns and relationships.', - description: 'Full sentence: "Reveal patterns and relationships."', - }), - }, - }, +const addSpacersBetweenElementsReducer = ( + acc: JSX.Element[], + element: JSX.Element, + index: number, + elements: JSX.Element[] +) => { + acc.push(element); + if (index < elements.length - 1) { + acc.push(); + } + return acc; }; -export const SolutionsPanel: FunctionComponent = ({ addBasePath, findDirectoryById }) => { - const observability = findDirectoryById('observability'); - const enterpriseSearch = findDirectoryById('enterpriseSearch'); - const securitySolution = findDirectoryById('securitySolution'); +const getAppDescriptions = (apps: FeatureCatalogueEntry[]) => + apps + .sort(sortByOrder) + .map(getDescriptionText) + .reduce(addSpacersBetweenElementsReducer, []); - const addSpacersBetweenReducer = ( - acc: JSX.Element[], - element: JSX.Element, - index: number, - elements: JSX.Element[] - ) => { - acc.push(element); - if (index < elements.length - 1) { - acc.push(); - } - return acc; - }; +const sortByOrder = ( + { order: orderA = 0 }: FeatureCatalogueEntry, + { order: orderB = 0 }: FeatureCatalogueEntry +) => orderA - orderB; - const getActionsBySolution = (solution: string, appIds: string[]): JSX.Element[] => - appIds.reduce((acc: JSX.Element[], appId: string, index: number) => { - const directory = findDirectoryById(appId); - if (directory) { - const CTA = solutionCTAs[solution][appId] as { verb: string; text: string }; - if (CTA) { - // acc.push(directory.description); - acc.push(getActionText(CTA)); - } - } - return acc; - }, [] as JSX.Element[]); +interface Props { + addBasePath: (path: string) => string; + directories: FeatureCatalogueEntry[]; +} - const enterpriseSearchAppIds = ['webSearch', 'appSearch', 'workplaceSearch']; - const observabilityAppIds = ['metrics', 'apm', 'uptime']; - const kibanaAppIds = ['dashboard', 'discover', 'canvas', 'maps', 'ml', 'graph']; +export const SolutionsPanel: FC = ({ addBasePath, directories }) => { + const findDirectoriesBySolution = (solutionId: string): FeatureCatalogueEntry[] => + directories.filter( + (directory) => + directory.category !== FeatureCatalogueCategory.SOLUTION && + directory.homePageSection === FeatureCatalogueHomePageSection.SOLUTION_PANEL && + directory.solution === solutionId + ); - const enterpriseSearchActions = getActionsBySolution( - 'enterpriseSearch', - enterpriseSearchAppIds - ).reduce(addSpacersBetweenReducer, []); - const observabilityActions = getActionsBySolution('observability', observabilityAppIds).reduce( - addSpacersBetweenReducer, - [] - ); - const securitySolutionActions = solutionCTAs.securitySolution - .map(getActionText) - .reduce(addSpacersBetweenReducer, []); - const kibanaActions = getActionsBySolution('kibana', kibanaAppIds).reduce( - addSpacersBetweenReducer, - [] - ); + // Find non-Kibana solutions + const solutions = directories + .filter( + (directory) => + directory.category === FeatureCatalogueCategory.SOLUTION && + directory.homePageSection === FeatureCatalogueHomePageSection.SOLUTION_PANEL && + directory.id !== 'kibana' + ) + .sort(sortByOrder); + + const kibana = directories.find(({ id }) => id === 'kibana'); + + const renderSolutionCard = (solution: FeatureCatalogueEntry) => { + const solutionApps = findDirectoriesBySolution(solution.id); + + return solutionApps.length ? ( + + + + + {/* */} + + {/* */} + + + {getAppDescriptions(solutionApps)} + + + + + ) : null; + }; const halfWidthClass = 'homSolutionsPanel__column'; - return enterpriseSearchActions.length || - observabilityActions.length || - securitySolution || - kibanaActions.length ? ( + return solutions.length || kibana ? ( - {enterpriseSearchActions.length || observabilityActions.length || securitySolution ? ( - - {/* TODO: once app search is merged, register add to feature catalogue and remove hard coded text here */} - - {enterpriseSearchActions.length ? ( - - - - - - - - - - {enterpriseSearchActions} - - - - - ) : null} - {observabilityActions.length ? ( - - - - - - - - - {observabilityActions} - - - - - ) : null} - {securitySolution ? ( - - - - - - - - - {securitySolutionActions} - - - - - ) : null} - + {solutions.length ? ( + + {solutions.map(renderSolutionCard)} ) : null} - {kibanaActions.length ? ( - - - - - - - - - - {kibanaActions} - - - - + {kibana ? ( + {renderSolutionCard(kibana)} ) : null} diff --git a/src/plugins/home/public/application/components/solutions_panel/solutions_title.tsx b/src/plugins/home/public/application/components/solutions_panel/solutions_title.tsx index 3503edf885044..76ac9e82b9d99 100644 --- a/src/plugins/home/public/application/components/solutions_panel/solutions_title.tsx +++ b/src/plugins/home/public/application/components/solutions_panel/solutions_title.tsx @@ -30,7 +30,7 @@ import { interface Props { title: string; - subtitle: string; + subtitle?: string; iconType: IconType; } @@ -43,11 +43,13 @@ export const SolutionsTitle: FunctionComponent = ({ title, subtitle, icon

{title}

 - -

- {subtitle} -

- + {subtitle ? ( + +

+ {subtitle} +

+ + ) : null} ); diff --git a/src/plugins/home/public/plugin.ts b/src/plugins/home/public/plugin.ts index edfb3bd9203af..e9e109bcea0a6 100644 --- a/src/plugins/home/public/plugin.ts +++ b/src/plugins/home/public/plugin.ts @@ -133,6 +133,20 @@ export class HomePublicPlugin category: FeatureCatalogueCategory.DATA, order: 100, }); + featureCatalogue.register({ + id: 'kibana', + title: i18n.translate('home.kibana.featureCatalogueTitle', { + defaultMessage: 'Kibana', + }), + description: i18n.translate('home.kibana.featureCatalogueDescription', { + defaultMessage: 'Visualize & Analyze', + }), + icon: 'logoKibana', + homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, + path: '/app/dashboard', + category: FeatureCatalogueCategory.SOLUTION, + order: 100, + }); return { featureCatalogue, diff --git a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.test.ts b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.test.ts index da3e513c69821..81d5f98cf3cc7 100644 --- a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.test.ts +++ b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.test.ts @@ -20,6 +20,7 @@ import { FeatureCatalogueRegistry, FeatureCatalogueCategory, + FeatureCatalogueHomePageSection, FeatureCatalogueEntry, } from './feature_catalogue_registry'; @@ -29,7 +30,9 @@ const DASHBOARD_FEATURE: FeatureCatalogueEntry = { description: 'Display and share a collection of visualizations and saved searches.', icon: 'dashboardApp', path: `/app/kibana#dashboard`, + homePageSection: FeatureCatalogueHomePageSection.MANAGE_DATA, category: FeatureCatalogueCategory.DATA, + solutionId: 'kibana', }; describe('FeatureCatalogueRegistry', () => { diff --git a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts index 86e61ce53ce4c..9ada466d1c6f8 100644 --- a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts +++ b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts @@ -17,24 +17,22 @@ * under the License. */ -import { Capabilities } from 'src/core/public'; -import { AppCategory } from 'src/core/types'; - +import { Capabilities, AppCategory } from 'src/core/public'; import { IconType } from '@elastic/eui'; -// /** @public */ -// export enum FeatureCatalogueCategory { -// ADMIN = 'admin', -// DATA = 'data', -// OTHER = 'other', -// SOLUTION = 'solution', -// } +/** @public */ +export enum FeatureCatalogueCategory { + ADMIN = 'admin', + DATA = 'data', + OTHER = 'other', + SOLUTION = 'solution', +} /** @public */ export enum FeatureCatalogueHomePageSection { ADD_DATA = 'add_data', MANAGE_DATA = 'manage_data', - SOLUTION = 'solution', + SOLUTION_PANEL = 'solution_panel', } /** @public */ @@ -44,7 +42,7 @@ export interface FeatureCatalogueEntry { /** Title of feature displayed to the user. */ readonly title: string; /** The solution to display this feature in. */ - readonly category: AppCategory; + readonly category: FeatureCatalogueCategory; /** One-line description of feature displayed to the user. */ readonly description: string; /** EUI `IconType` for icon to be displayed to the user. EUI supports any known EUI icon, SVG URL, or ReactElement. */ @@ -55,6 +53,8 @@ export interface FeatureCatalogueEntry { homePageSection?: FeatureCatalogueHomePageSection; /** An ordinal used to sort features relative to one another for display on the home page */ readonly order?: number; + /** The solution id this app should be displayed under */ + readonly solution?: string; } export class FeatureCatalogueRegistry { diff --git a/src/plugins/management/public/plugin.ts b/src/plugins/management/public/plugin.ts index 9f95b39ea7ecf..e06168e032cf0 100644 --- a/src/plugins/management/public/plugin.ts +++ b/src/plugins/management/public/plugin.ts @@ -56,7 +56,7 @@ export class ManagementPlugin implements Plugin { }), icon: 'grokApp', path: '/app/dev_tools#/grokdebugger', - showOnHomePage: false, category: FeatureCatalogueCategory.ADMIN, }); }; diff --git a/x-pack/plugins/infra/public/register_feature.ts b/x-pack/plugins/infra/public/register_feature.ts index 37217eaeaab2a..0bb13c188f314 100644 --- a/x-pack/plugins/infra/public/register_feature.ts +++ b/x-pack/plugins/infra/public/register_feature.ts @@ -8,6 +8,7 @@ import { i18n } from '@kbn/i18n'; import { HomePublicPluginSetup, FeatureCatalogueCategory, + FeatureCatalogueHomePageSection, } from '../../../../src/plugins/home/public'; export const registerFeatures = (homePlugin: HomePublicPluginSetup) => { @@ -17,13 +18,14 @@ export const registerFeatures = (homePlugin: HomePublicPluginSetup) => { defaultMessage: 'Metrics', }), description: i18n.translate('xpack.infra.registerFeatures.infraOpsDescription', { - defaultMessage: - 'Explore infrastructure metrics and logs for common servers, containers, and services.', + defaultMessage: 'Monitor all infrastructure metrics.', }), icon: 'metricsApp', path: `/app/metrics`, - showOnHomePage: true, + homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, category: FeatureCatalogueCategory.DATA, + solution: 'observability', + order: 100, }); homePlugin.featureCatalogue.register({ @@ -37,7 +39,6 @@ export const registerFeatures = (homePlugin: HomePublicPluginSetup) => { }), icon: 'logsApp', path: `/app/logs`, - showOnHomePage: true, category: FeatureCatalogueCategory.DATA, }); }; diff --git a/x-pack/plugins/logstash/public/plugin.ts b/x-pack/plugins/logstash/public/plugin.ts index 59f92ee0a7ffc..c2e42cc172dd3 100644 --- a/x-pack/plugins/logstash/public/plugin.ts +++ b/x-pack/plugins/logstash/public/plugin.ts @@ -13,6 +13,7 @@ import { CoreSetup, CoreStart, Plugin } from 'src/core/public'; import { HomePublicPluginSetup, FeatureCatalogueCategory, + FeatureCatalogueHomePageSection, } from '../../../../src/plugins/home/public'; import { ManagementSetup } from '../../../../src/plugins/management/public'; import { LicensingPluginSetup } from '../../licensing/public'; @@ -70,7 +71,6 @@ export class LogstashPlugin implements Plugin { }), icon: 'pipelineApp', path: '/app/management/ingest/pipelines', - showOnHomePage: true, category: FeatureCatalogueCategory.ADMIN, }); }); diff --git a/x-pack/plugins/maps/public/feature_catalogue_entry.ts b/x-pack/plugins/maps/public/feature_catalogue_entry.ts index 6c2579bd3e4e2..41a86a36ed4ae 100644 --- a/x-pack/plugins/maps/public/feature_catalogue_entry.ts +++ b/x-pack/plugins/maps/public/feature_catalogue_entry.ts @@ -6,16 +6,21 @@ import { i18n } from '@kbn/i18n'; import { APP_ID, APP_ICON } from '../common/constants'; import { getAppTitle } from '../common/i18n_getters'; -import { FeatureCatalogueCategory } from '../../../../src/plugins/home/public'; +import { + FeatureCatalogueCategory, + FeatureCatalogueHomePageSection, +} from '../../../../src/plugins/home/public'; export const featureCatalogueEntry = { id: APP_ID, title: getAppTitle(), description: i18n.translate('xpack.maps.feature.appDescription', { - defaultMessage: 'Explore geospatial data from Elasticsearch and the Elastic Maps Service', + defaultMessage: 'Plot your geographic information.', }), icon: APP_ICON, path: '/app/maps', - showOnHomePage: true, + homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, category: FeatureCatalogueCategory.DATA, + solution: 'kibana', + order: 400, }; diff --git a/x-pack/plugins/ml/public/register_feature.ts b/x-pack/plugins/ml/public/register_feature.ts index b9fbf1f59fcf6..2aa8819bb3d24 100644 --- a/x-pack/plugins/ml/public/register_feature.ts +++ b/x-pack/plugins/ml/public/register_feature.ts @@ -31,9 +31,10 @@ export const registerFeature = (home: HomePublicPluginSetup) => { }), icon: 'machineLearningApp', path: '/app/ml', - homePageSection: FeatureCatalogueHomePageSection.SOLUTION, + homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, category: FeatureCatalogueCategory.DATA, - solutionId: 'kibana', + solution: 'kibana', + order: 500, }); home.featureCatalogue.register({ diff --git a/x-pack/plugins/observability/public/plugin.ts b/x-pack/plugins/observability/public/plugin.ts index 621f4e1ba9755..6cf9397f40477 100644 --- a/x-pack/plugins/observability/public/plugin.ts +++ b/x-pack/plugins/observability/public/plugin.ts @@ -14,6 +14,7 @@ import { CoreStart, } from '../../../../src/core/public'; import { + FeatureCatalogueCategory, FeatureCatalogueHomePageSection, HomePublicPluginSetup, } from '../../../../src/plugins/home/public'; @@ -62,8 +63,10 @@ export class Plugin implements PluginClass { }), icon: 'reportingApp', path: '/app/management/insightsAndAlerting/reporting', - showOnHomePage: false, category: FeatureCatalogueCategory.ADMIN, }); management.sections.section.insightsAndAlerting.registerApp({ diff --git a/x-pack/plugins/rollup/public/plugin.ts b/x-pack/plugins/rollup/public/plugin.ts index 49545f090d923..a7ba444df021f 100644 --- a/x-pack/plugins/rollup/public/plugin.ts +++ b/x-pack/plugins/rollup/public/plugin.ts @@ -70,7 +70,6 @@ export class RollupPlugin implements Plugin { }), icon: 'indexRollupApp', path: `/app/management/data/rollup_jobs/job_list`, - showOnHomePage: true, category: FeatureCatalogueCategory.ADMIN, }); } diff --git a/x-pack/plugins/searchprofiler/public/plugin.ts b/x-pack/plugins/searchprofiler/public/plugin.ts index 14c8efa8a56a8..1dafa026b7d86 100644 --- a/x-pack/plugins/searchprofiler/public/plugin.ts +++ b/x-pack/plugins/searchprofiler/public/plugin.ts @@ -34,7 +34,6 @@ export class SearchProfilerUIPlugin implements Plugin { const [ @@ -152,7 +204,7 @@ export class Plugin implements IPlugin { const [ @@ -179,7 +231,7 @@ export class Plugin implements IPlugin { const [ @@ -206,7 +258,7 @@ export class Plugin implements IPlugin { const [ @@ -233,7 +285,7 @@ export class Plugin implements IPlugin { const [ @@ -260,7 +312,7 @@ export class Plugin implements IPlugin { const [ @@ -287,7 +339,7 @@ export class Plugin implements IPlugin { const [ diff --git a/x-pack/plugins/spaces/public/create_feature_catalogue_entry.ts b/x-pack/plugins/spaces/public/create_feature_catalogue_entry.ts index 15d141ccc328e..70228032d8af8 100644 --- a/x-pack/plugins/spaces/public/create_feature_catalogue_entry.ts +++ b/x-pack/plugins/spaces/public/create_feature_catalogue_entry.ts @@ -20,7 +20,6 @@ export const createSpacesFeatureCatalogueEntry = (): FeatureCatalogueEntry => { description: getSpacesFeatureDescription(), icon: 'spacesApp', path: '/app/management/kibana/spaces', - showOnHomePage: true, category: FeatureCatalogueCategory.ADMIN, }; }; diff --git a/x-pack/plugins/spaces/public/plugin.test.ts b/x-pack/plugins/spaces/public/plugin.test.ts index d8eecb9c7e606..de28f56628f81 100644 --- a/x-pack/plugins/spaces/public/plugin.test.ts +++ b/x-pack/plugins/spaces/public/plugin.test.ts @@ -57,7 +57,6 @@ describe('Spaces plugin', () => { category: 'admin', icon: 'spacesApp', id: 'spaces', - showOnHomePage: true, }) ); }); diff --git a/x-pack/plugins/transform/public/register_feature.ts b/x-pack/plugins/transform/public/register_feature.ts index 796fa370dab25..ff7c15d555eeb 100644 --- a/x-pack/plugins/transform/public/register_feature.ts +++ b/x-pack/plugins/transform/public/register_feature.ts @@ -23,7 +23,6 @@ export const registerFeature = (home: HomePublicPluginSetup) => { }), icon: 'managementApp', // there is currently no Transforms icon, so using the general management app icon path: '/app/management/data/transform', - showOnHomePage: true, category: FeatureCatalogueCategory.ADMIN, }); }; diff --git a/x-pack/plugins/uptime/common/constants/plugin.ts b/x-pack/plugins/uptime/common/constants/plugin.ts index 6064524872a0a..9c9313317b734 100644 --- a/x-pack/plugins/uptime/common/constants/plugin.ts +++ b/x-pack/plugins/uptime/common/constants/plugin.ts @@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n'; export const PLUGIN = { APP_ROOT_ID: 'react-uptime-root', DESCRIPTION: i18n.translate('xpack.uptime.pluginDescription', { - defaultMessage: 'Uptime monitoring', + defaultMessage: 'Measure SLAs and react to issues.', description: 'The description text that will appear in the feature catalogue.', }), ID: 'uptime', diff --git a/x-pack/plugins/uptime/public/apps/plugin.ts b/x-pack/plugins/uptime/public/apps/plugin.ts index 9af4dea9dbb44..3402d746036a2 100644 --- a/x-pack/plugins/uptime/public/apps/plugin.ts +++ b/x-pack/plugins/uptime/public/apps/plugin.ts @@ -14,7 +14,10 @@ import { import { DEFAULT_APP_CATEGORIES } from '../../../../../src/core/public'; import { UMFrontendLibs } from '../lib/lib'; import { PLUGIN } from '../../common/constants'; -import { FeatureCatalogueCategory } from '../../../../../src/plugins/home/public'; +import { + FeatureCatalogueCategory, + FeatureCatalogueHomePageSection, +} from '../../../../../src/plugins/home/public'; import { HomePublicPluginSetup } from '../../../../../src/plugins/home/public'; import { EmbeddableStart } from '../../../../../src/plugins/embeddable/public'; import { @@ -62,8 +65,10 @@ export class UptimePlugin description: PLUGIN.DESCRIPTION, icon: 'uptimeApp', path: '/app/uptime#/', - showOnHomePage: true, + homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, category: FeatureCatalogueCategory.DATA, + solution: 'observability', + order: 300, }); } diff --git a/x-pack/plugins/watcher/public/plugin.ts b/x-pack/plugins/watcher/public/plugin.ts index 98b49af15019b..cd7bb1e8d3b3c 100644 --- a/x-pack/plugins/watcher/public/plugin.ts +++ b/x-pack/plugins/watcher/public/plugin.ts @@ -92,7 +92,6 @@ export class WatcherUIPlugin implements Plugin { }), icon: 'watchesApp', path: '/app/management/insightsAndAlerting/watcher/watches', - showOnHomePage: false, }; home.featureCatalogue.register(watcherHome); @@ -105,7 +104,6 @@ export class WatcherUIPlugin implements Plugin { // which is a less frustrating UX. if (valid) { watcherESApp.enable(); - watcherHome.showOnHomePage = true; } else { watcherESApp.disable(); } From 5347be3e45807ac64cb8c0d13299ab1cb1affd0e Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Wed, 29 Jul 2020 08:37:44 -0700 Subject: [PATCH 13/29] Fixed prop types --- .../home/public/application/components/feature_directory.js | 2 +- src/plugins/home/public/application/components/home.js | 2 +- src/plugins/home/public/application/components/home_app.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plugins/home/public/application/components/feature_directory.js b/src/plugins/home/public/application/components/feature_directory.js index 2c57c4f2cfb56..ecf8b4a8d4328 100644 --- a/src/plugins/home/public/application/components/feature_directory.js +++ b/src/plugins/home/public/application/components/feature_directory.js @@ -157,7 +157,7 @@ FeatureDirectory.propTypes = { path: PropTypes.string.isRequired, homePageSection: PropTypes.string, category: PropTypes.string.isRequired, - solution: PropTypes.object, + solution: PropTypes.string, order: PropTypes.number, }) ), diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js index c85cf5674c3ec..06851b7ac167a 100644 --- a/src/plugins/home/public/application/components/home.js +++ b/src/plugins/home/public/application/components/home.js @@ -302,7 +302,7 @@ Home.propTypes = { path: PropTypes.string.isRequired, homePageSection: PropTypes.string, category: PropTypes.string.isRequired, - solution: PropTypes.object, + solution: PropTypes.string, order: PropTypes.number, }) ), diff --git a/src/plugins/home/public/application/components/home_app.js b/src/plugins/home/public/application/components/home_app.js index 9ac3dc79f88f4..33ea99a7acf74 100644 --- a/src/plugins/home/public/application/components/home_app.js +++ b/src/plugins/home/public/application/components/home_app.js @@ -108,7 +108,7 @@ HomeApp.propTypes = { path: PropTypes.string.isRequired, homePageSection: PropTypes.string, category: PropTypes.string.isRequired, - solution: PropTypes.object, + solution: PropTypes.string, order: PropTypes.number, }) ), From 2d535205cdfb6dbb9d49c1022b5c3ec546c16a2e Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Wed, 29 Jul 2020 09:13:58 -0700 Subject: [PATCH 14/29] Fixed nav links --- src/plugins/home/public/plugin.ts | 3 ++- x-pack/plugins/security_solution/public/plugin.tsx | 14 +++++++------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/plugins/home/public/plugin.ts b/src/plugins/home/public/plugin.ts index e9e109bcea0a6..703e3d2685eb9 100644 --- a/src/plugins/home/public/plugin.ts +++ b/src/plugins/home/public/plugin.ts @@ -133,6 +133,7 @@ export class HomePublicPlugin category: FeatureCatalogueCategory.DATA, order: 100, }); + featureCatalogue.register({ id: 'kibana', title: i18n.translate('home.kibana.featureCatalogueTitle', { @@ -143,7 +144,7 @@ export class HomePublicPlugin }), icon: 'logoKibana', homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, - path: '/app/dashboard', + path: '/app/dashboards', category: FeatureCatalogueCategory.SOLUTION, order: 100, }); diff --git a/x-pack/plugins/security_solution/public/plugin.tsx b/x-pack/plugins/security_solution/public/plugin.tsx index cec4904417b11..501fbe4edb3c9 100644 --- a/x-pack/plugins/security_solution/public/plugin.tsx +++ b/x-pack/plugins/security_solution/public/plugin.tsx @@ -176,7 +176,7 @@ export class Plugin implements IPlugin { const [ @@ -204,7 +204,7 @@ export class Plugin implements IPlugin { const [ @@ -231,7 +231,7 @@ export class Plugin implements IPlugin { const [ @@ -258,7 +258,7 @@ export class Plugin implements IPlugin { const [ @@ -285,7 +285,7 @@ export class Plugin implements IPlugin { const [ @@ -312,7 +312,7 @@ export class Plugin implements IPlugin { const [ @@ -339,7 +339,7 @@ export class Plugin implements IPlugin { const [ From dbd0e303bca61ceeb18d0266835145d08a82d43d Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Wed, 29 Jul 2020 11:28:20 -0700 Subject: [PATCH 15/29] Removed images from solution card components --- .../components/_solutions_panel.scss | 4 ++- ...solutions_title.tsx => solution_title.tsx} | 4 +-- .../solutions_panel/solutions_panel.tsx | 25 +++---------------- .../feature_catalogue_registry.ts | 2 ++ 4 files changed, 11 insertions(+), 24 deletions(-) rename src/plugins/home/public/application/components/solutions_panel/{solutions_title.tsx => solution_title.tsx} (91%) diff --git a/src/plugins/home/public/application/components/_solutions_panel.scss b/src/plugins/home/public/application/components/_solutions_panel.scss index 736218ac9ecaa..8fa514c05e5d7 100644 --- a/src/plugins/home/public/application/components/_solutions_panel.scss +++ b/src/plugins/home/public/application/components/_solutions_panel.scss @@ -31,7 +31,7 @@ } } - .homSolutionsPanel__CTA { + .homSolutionsPanel__appDescriptions { height: 100%; display: flex; flex-direction: column; @@ -102,6 +102,8 @@ } .homSolutionsPanel__kibana { + max-width: 50%; + .homSolutionsPanel__kibanaHeader { background-color: #006bb4; diff --git a/src/plugins/home/public/application/components/solutions_panel/solutions_title.tsx b/src/plugins/home/public/application/components/solutions_panel/solution_title.tsx similarity index 91% rename from src/plugins/home/public/application/components/solutions_panel/solutions_title.tsx rename to src/plugins/home/public/application/components/solutions_panel/solution_title.tsx index 76ac9e82b9d99..548cd54a9e73e 100644 --- a/src/plugins/home/public/application/components/solutions_panel/solutions_title.tsx +++ b/src/plugins/home/public/application/components/solutions_panel/solution_title.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { FunctionComponent } from 'react'; +import React, { FC } from 'react'; import { EuiFlexGroup, EuiFlexItem, @@ -34,7 +34,7 @@ interface Props { iconType: IconType; } -export const SolutionsTitle: FunctionComponent = ({ title, subtitle, iconType }) => ( +export const SolutionTitle: FC = ({ title, subtitle, iconType }) => (

diff --git a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx index d692798e1a5c7..c316c9a15b73d 100644 --- a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx +++ b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx @@ -21,13 +21,12 @@ import React, { Fragment, FC } from 'react'; import { EuiFlexGroup, EuiFlexItem, - // EuiImage, EuiPanel, EuiSpacer, EuiText, EuiHorizontalRule, } from '@elastic/eui'; -import { SolutionsTitle } from './solutions_title'; +import { SolutionTitle } from './solution_title'; import { FeatureCatalogueEntry } from '../../../'; import { createAppNavigationHandler } from '../app_navigation_handler'; import { FeatureCatalogueCategory, FeatureCatalogueHomePageSection } from '../../../services'; @@ -108,27 +107,13 @@ export const SolutionsPanel: FC = ({ addBasePath, directories }) => { grow={1} className={`homSolutionsPanel__header homSolutionsPanel__${solution.id}Header`} > - {/* */} - - {/* */} - + {getAppDescriptions(solutionApps)} @@ -147,9 +132,7 @@ export const SolutionsPanel: FC = ({ addBasePath, directories }) => { {solutions.map(renderSolutionCard)} ) : null} - {kibana ? ( - {renderSolutionCard(kibana)} - ) : null} + {kibana ? renderSolutionCard(kibana) : null} diff --git a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts index 9ada466d1c6f8..4170baa1b0319 100644 --- a/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts +++ b/src/plugins/home/public/services/feature_catalogue/feature_catalogue_registry.ts @@ -55,6 +55,8 @@ export interface FeatureCatalogueEntry { readonly order?: number; /** The solution id this app should be displayed under */ readonly solution?: string; + /** Images to be displayed around the solution's title */ + readonly solutionImages?: JSX.Element[]; } export class FeatureCatalogueRegistry { From e1fc53af348bdb82ea34f3f322efd3a0879bae52 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Thu, 30 Jul 2020 11:52:08 -0500 Subject: [PATCH 16/29] card images as backgrounds, consolidate styles, BEM changes --- .../components/_solutions_panel.scss | 143 ++++++++---------- .../solutions_panel/solution_title.tsx | 18 ++- .../solutions_panel/solutions_panel.tsx | 17 +-- ...ound_enterprise_search_bottom_right_2x.png | Bin 236 -> 0 bytes ...ckground_enterprise_search_top_left_2x.png | Bin 951 -> 0 bytes .../background_kibana_bottom_right_2x.png | Bin 2353 -> 0 bytes .../assets/background_kibana_top_left_2x.png | Bin 2125 -> 0 bytes .../background_observability_top_right_2x.png | Bin 312 -> 0 bytes ...ckground_security_solution_top_left_2x.png | Bin 764 -> 0 bytes 9 files changed, 82 insertions(+), 96 deletions(-) delete mode 100644 src/plugins/home/public/assets/background_enterprise_search_bottom_right_2x.png delete mode 100644 src/plugins/home/public/assets/background_enterprise_search_top_left_2x.png delete mode 100644 src/plugins/home/public/assets/background_kibana_bottom_right_2x.png delete mode 100644 src/plugins/home/public/assets/background_kibana_top_left_2x.png delete mode 100644 src/plugins/home/public/assets/background_observability_top_right_2x.png delete mode 100644 src/plugins/home/public/assets/background_security_solution_top_left_2x.png diff --git a/src/plugins/home/public/application/components/_solutions_panel.scss b/src/plugins/home/public/application/components/_solutions_panel.scss index 8fa514c05e5d7..32a1941820cf8 100644 --- a/src/plugins/home/public/application/components/_solutions_panel.scss +++ b/src/plugins/home/public/application/components/_solutions_panel.scss @@ -1,43 +1,42 @@ -.homSolutionsPanel { +.homSolutionsSection { margin-top: -$euiSizeXL; min-height: $euiSize*16; display: flex; - .homSolutionsPanel__column { - max-width: 50%; - } - - @include euiBreakpoint('xs', 's') { - flex-direction: column; - - .homSolutionsPanel__column { - max-width: 100%; - } - } - - .homSolutionPanel__cardSecondary { - flex-basis: $euiSizeXL * 4; - } - - .homSolutionsPanel__solutionPanel { + .homSolutionsSection__panel { display: flex; align-items: stretch; - .homSolutionsPanel__solutionTitle { - padding: $euiSize; - - .euiToken { - padding: $euiSizeS; + .homSolutionsSection__panelHeader { + border-radius: $euiBorderRadius 0 0 $euiBorderRadius; + color: $euiColorEmptyShade; + + @include euiBreakpoint('xs', 's') { + border-radius: $euiBorderRadius $euiBorderRadius 0 0; } } - .homSolutionsPanel__appDescriptions { + .homSolutionsSection__panelHeaderContent { + padding: $euiSize; + color: $euiColorGhost; + } + + .homSolutionsSection__panelIcon { + margin: 0 auto $euiSizeS; + padding: $euiSizeS; + } + + .homSolutionsSection__panelSubtitle { + margin-top: $euiSizeXS; + } + + .homSolutionsSection__panelDescriptions { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: $euiSize; - + @include euiBreakpoint('xs', 's') { height: auto; text-align: center; @@ -45,79 +44,59 @@ } } - .homSolutionsPanel__header { - border-radius: $euiBorderRadius 0 0 $euiBorderRadius; - color: $euiColorEmptyShade; - - img { - position: absolute; - width: auto; - } - - @include euiBreakpoint('xs', 's') { - border-radius: $euiBorderRadius $euiBorderRadius 0 0; - } - } + .homSolutionsSection__container { + flex-basis: $euiSizeXL * 4; - .homSolutionsPanel__enterpriseSearch { - .homSolutionsPanel__enterpriseSearchHeader { - background-color: #017d73; + &.homSolutionsSection__single { + max-width: 50%; - .homSolutionsPanel__enterpriseSearchTopLeftImage img { - top: $euiSizeS; - left: 0; - height: $euiSizeXL; + .homSolutionsSection__panelHeader { + background-color: #006BB4; // Hard coded for brand consistency across themes + background-image: url('data:image/png;base64,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'), url('data:image/png;base64,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'); + background-repeat: no-repeat; + background-size: $euiSizeXL * 4, $euiSizeXL * 6; + background-position: top 0 left 0, bottom 0 right 0; } - .homSolutionsPanel__enterpriseSearchBottomRightImage img { - right: $euiSizeS; - bottom: $euiSizeS; - height: $euiSizeXL; + @include euiBreakpoint('xs', 's') { + max-width: 100%; } } } - .homSolutionsPanel__observability { - .homSolutionsPanel__observabilityHeader { - background-color: #c42373; + .homSolutionsSection__multiple { + max-width: 50%; - .homSolutionsPanel__observabilityTopRightImage img { - top: $euiSizeS; - right: $euiSizeS; - height: $euiSizeXL; - } + .homSolutionsSection__container:first-child .homSolutionsSection__panelHeader { + background-color: #017D73; // Hard coded for brand consistency across themes + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABKCAYAAADJwhY8AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANMSURBVHgBzZp7buIwEMYHKC1QuqsF7Up7Hs4Al+Ff4DCcAonrtPuAPjcL1B/YyA0p2JkZK580SuQm6Y+xx4+xiSqumrG+d7/z/rYx9t+WZdZ2lFhXxq4jngfkP2Ov9qquq8jnm9Zu6eBNgD6TImwsoC80ibY1NIe1sRcSVsPYHfFVN9Yy1jG2pUPbFZEUoJMP+kYHWJakAZ0AemuvrPZZJ10B8jsdHFFKWh70BSe07X1GkUoBCCHib+w1qsq1qzivLkU6JDUgTSaT7m63C4ZMCmjgaDwe4zYYMhmgB+cEyPal95IAFsA5fTGQZ4dbdcAzcO7/9wxk7bMH8AfMTvJDUsO+fG2tSfJwvp5qtdqKPgEMEYABekeBo0IEnNODgTzpI0MBfaFhnwUtAQdlBvA+X1gG0Kmw0y0J57QykE9+ASdIHo3hF29cARMO6uYDhhvFGPwfjG0E4BxPxy/gVPFR8/m8MRwOsTosPa3y9KEtigBCpmoAJwV5jGixjtp8EG3xD8noOASKjiT2V6+Jr5YLFo2hDuvkDfEErqa7EZXx4naxWKyIr9b+e6QkU0U/iBcw+2jWnM08E09NtMMqA0JNNUC0ReInlRraE9bodXBOzaoD1rQBuVku9SpmZ7eSL9wjVa864LbqgOpVzJ4bagNyv7/RBozZgymSOuAN8bRTA7RrFM4+DJRpepBbvZAqIDf3jQmrThXbxCS3i5FdduYksXOAjUp5QJt75npvK75whwwclopd4uvV3YgB2m7lG8nouK0rAojkEcnlZTZ+plUCsDEajfom9SYBB31InXA/is64h+8sl0vKsowGgwExBO/99QvKDkXISHQpFxCz2Wx/nU6nVFIniacyHkTOpGevJ2J48sR7UKgHnceCRoiSnvxVVOj2P6C6ZyjHVKljwb7a54KDKtKT2MgpPDECD/ZJSYGedEdaCqW+437BkzgcdG/zOIVKciTgDOTawL2dezfVmYUiyHV+V6lIyQAhDxJwjyHvoPv4SWmFgAiCg1JnFqLgIO6qK1SIVowS0afjUgCin/tNJZOZ2oCIUlRr6aOlWoDwFjZz2CczpQHhKXjsYv8WKilAeAwBgL0R0ZPCHECAvFirzCFb/5hyknPV7zL4DLH0CVGgAAAAAElFTkSuQmCC'), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAYAAACbQR1vAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACBSURBVHgB7dpBDcAwDMVQdyzGH9xojEQjtbIfBEu5fGUx62WPjyEPcgVArgDIFQC5AiBXAOQKgFwBkCsAcgVATh9gsW+4vFIngFwBkCsAcgVArgDIFQC5AiBXAORahJjVm9zpCoBcAZArAHIFQK4AyBUAuQIgVwDkCoBcAZDTB/gBLrgCk8OhuvYAAAAASUVORK5CYII='); + background-repeat: no-repeat; + background-size: $euiSize * 1.25, $euiSizeXL; + background-position: top $euiSizeS left 0, bottom $euiSizeS right $euiSizeS; } - } - .homSolutionsPanel__securitySolution { - .homSolutionsPanel__securitySolutionHeader { - background-color: #343741; + .homSolutionsSection__container:nth-child(2) .homSolutionsSection__panelHeader { + background-color: #C42373; // Hard coded for brand consistency across themes + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADNSURBVHgB7duxCcIAEEDR08IFrGyz/0pZwVYEIcYF/FWKwHtwXP/hyrvMQbZtu+3rPid3Hf4SKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgcJmDnt6WZfms6/qak/sFeswx3vs85+ScWBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECgKFLx4KCqcIFEJnAAAAAElFTkSuQmCC'); + background-repeat: no-repeat; + background-size: $euiSizeL * 1.5; + background-position: top $euiSizeS right $euiSizeS; + } - .homSolutionsPanel__securitySolutionTopLeftImage img { - top: $euiSizeS; - left: $euiSizeS; - height: $euiSizeXXL; - } + .homSolutionsSection__container:nth-child(3) .homSolutionsSection__panelHeader { + background-color: #343741; // Hard coded for brand consistency across themes + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAYAAACrpQYOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKRSURBVHgB7d3tSgMxEIXhMeqPQoWC9f4vte5Z3dLvTbKZzCQ5LyxqKwg+tNjdUxQR+RJmXpiOvRDDvPD/kRjGhYvPgbETZlK4+fogxDApPLiNGAaFJ7cD40NYtcKL+76FGNUKK/cRo1Ih4n5gvAtTbQ1i+R5iKBcDgYBADMViIRAxFEuBQMRQKhUCEUOhHAi0YLwJK1IuBCJGwbZAoE8hRpG2QqAFg22oBAQCxkFYdqUgEE6dEyOzkhCIGJmVhkDA4PXvxDQgEMcIiWlBIGIkpAmBiBGZNgQiRkQ1IBAxVqoFgThge1FNCMTN1JNqQyBiPMgCAnHAdpMVBOJm6iJLCA7YLrKEWH4+r3+LPYQIMeY8QKDhlyFeINDQGJ4g0LAY3iDQkBgeIdBwmymvEGgoDM8QaJgBm3cINMSArQUI1P2ArRUI1PVmqiUI1C1GaxCoywFbixCouzFCqxCIyxBPnU6nLjBafkQs7YExHdJyPUCg+WmqZYxeIBAwmv3TticItJseFYcWHxm9QaD5RV9rGD1CIGAcJ4xmztr2CoHms7atYPQMgc4Y3p+qeodAwPiZjnfPGCNAoPMgwSvGKBDINcZIEMgtxmgQyCXGiBDIHcaoEAgYx+n48IAxMgQ6v1nGGmN0COQCgxB/4feAF307KwxCXDe/9dgCgxD3mWAQ4nHAqHrplRDPq3odnBCvq4ZBiPWqYBAiLnUMQsSnikGItObtlAYGIdJTmesQIq/iGITIr+h2ihDbKradIsT2imynCFGmzdspQpRr03VwQpQtG4MQ5cvCIIROyRiE0CsJgxC6RW+nCKFf1FyHEHVaxSBEvV5upwhRv4dzHULYdIdBCLuutlOEsO18HZz/u8E+YMgvrbKfmp8y7IEAAAAASUVORK5CYII='); + background-repeat: no-repeat; + background-size: $euiSizeL * 2; + background-position: top $euiSizeS left $euiSizeS; } } - .homSolutionsPanel__kibana { - max-width: 50%; - - .homSolutionsPanel__kibanaHeader { - background-color: #006bb4; - - .homSolutionsPanel__kibanaTopLeftImage img { - top: 0; - left: 0; - height: $euiSizeXXL * 4; - } + @include euiBreakpoint('xs', 's') { + flex-direction: column; - .homSolutionsPanel__kibanaBottomRightImage img { - right: 0; - bottom: 0; - height: $euiSizeXXL * 4; - } + .homSolutionsSection__multiple { + max-width: 100%; } } } diff --git a/src/plugins/home/public/application/components/solutions_panel/solution_title.tsx b/src/plugins/home/public/application/components/solutions_panel/solution_title.tsx index 548cd54a9e73e..2e91f01a4bd47 100644 --- a/src/plugins/home/public/application/components/solutions_panel/solution_title.tsx +++ b/src/plugins/home/public/application/components/solutions_panel/solution_title.tsx @@ -35,17 +35,25 @@ interface Props { } export const SolutionTitle: FC = ({ title, subtitle, iconType }) => ( - + -

- -

+

{title}

 {subtitle ? ( -

+

{subtitle}

diff --git a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx index c316c9a15b73d..215095d3f9b8f 100644 --- a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx +++ b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx @@ -94,26 +94,25 @@ export const SolutionsPanel: FC = ({ addBasePath, directories }) => { return solutionApps.length ? ( - + - + {getAppDescriptions(solutionApps)} @@ -122,11 +121,11 @@ export const SolutionsPanel: FC = ({ addBasePath, directories }) => { ) : null; }; - const halfWidthClass = 'homSolutionsPanel__column'; + const halfWidthClass = 'homSolutionsSection__multiple'; return solutions.length || kibana ? ( - + {solutions.length ? ( {solutions.map(renderSolutionCard)} diff --git a/src/plugins/home/public/assets/background_enterprise_search_bottom_right_2x.png b/src/plugins/home/public/assets/background_enterprise_search_bottom_right_2x.png deleted file mode 100644 index 7f2037d3afb699a50ff074304090ffa8e94dfcc1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 236 zcmeAS@N?(olHy`uVBq!ia0vp^4nSy1^tdQ* z-6YTAy|X6O@O5f`zaoDTtHU~m6QT?|nH0hqo^Un9Fiy~B01EoaCv42$u_s6!E`p>i qs%6I2*>_$dR3piO1uwJzVAR{eH2LttUEhF?VeoYIb6Mw<&;$S-n?_~; diff --git a/src/plugins/home/public/assets/background_enterprise_search_top_left_2x.png b/src/plugins/home/public/assets/background_enterprise_search_top_left_2x.png deleted file mode 100644 index 3e6e016bd73a7cf1b49ad4faf7477c21757dd9cf..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 951 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 SpKGGoz{}mwt=2{Gw|@hbY)Z8N diff --git a/src/plugins/home/public/assets/background_observability_top_right_2x.png b/src/plugins/home/public/assets/background_observability_top_right_2x.png deleted file mode 100644 index 860491733ab65fae3321d6af347ed6b4a8227501..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 312 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY1|&n@ZgvM!oCO|{#S9E$svykh8Km+7D9BhG z1ThT)cdUbxqFZ|6Y*? z!&nrLvHl6|I#68@^Z((g-De!P(^b diff --git a/src/plugins/home/public/assets/background_security_solution_top_left_2x.png b/src/plugins/home/public/assets/background_security_solution_top_left_2x.png deleted file mode 100644 index 5cb0358d02f025d092006eb84990300669e06339..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 764 zcmV4j_O|qHHBsniEYAXmnwAkHK6cPCnW?q<%y%58^@c)q* z#)XT|fw2>2Qn>m0AjB{!Jh+V*28AcL1LH$jwZe=0zJ(ao3M=;!qf#N_eqg){Q*8}m z`5s~@7XyKSKn%rVArLVXOMyVdP%0Gy5ksLI2()0l2`f@A1R_Skwm_gyAx4q5LZAhM zZKwnU0>(jDcBLQ?PMs4Yvyu>q7@3uZK)~Sj@5D495XT6KX+a=jB%}#}h!L4K1R_R6 zH6Rc%R;mSoIAD8GO$fxz)RSsMAYweo0s?Wsc9RtZ;%4e1O9&3wF0zDJem<{%i#>!0 zG3Go#py8JxULerW7@i=|uo&JT(2y7&A<%G}DX$P{C=AaKXqW+;cL+4ZfUN}x)ct_1 z6$sSzW~wC!)GbD95U9%mTZ<5=yD>tm5QxhVPn}MuE-+etL@e!rF&)x!JwTxOX{u$6 zULX)Kn*GzZCkV8g9u>pz|QXE5;}g$Th}D5XddYXb{LH#)uHe9mc2-2pGrd`0#)+G6Xum zS;iV;bO_`EgAjk=_kb6DJ1Y!ATsOb<*aCwP_nBZ2;&H&Jdg+xA&#QVJoDi?8hCzt+ zs$dWzE_Dn-#HWfuh_vSIlm-SN(o>o15F)SQ7=*~L=yr+_+bXu5BEOMb#OwIEgORn<;%h#gigsAgwQJqgAlq!Z>I>MU({TO5OrF`AVj@hZl?%QzlU=j uLfCYNK?u99wo`<#?R*`a|GU9HV8}16vY(otGVFl>0000N;oC} From d8136f607001bf2b70e235c4b40055a82a27df7f Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Thu, 30 Jul 2020 12:13:11 -0500 Subject: [PATCH 17/29] style token icons for dark mode --- .../public/application/components/_solutions_panel.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/plugins/home/public/application/components/_solutions_panel.scss b/src/plugins/home/public/application/components/_solutions_panel.scss index 32a1941820cf8..33194773387da 100644 --- a/src/plugins/home/public/application/components/_solutions_panel.scss +++ b/src/plugins/home/public/application/components/_solutions_panel.scss @@ -24,6 +24,12 @@ .homSolutionsSection__panelIcon { margin: 0 auto $euiSizeS; padding: $euiSizeS; + background-color: $euiColorGhost; + box-shadow: none; + + .euiIcon__fillNegative { + fill: $euiColorInk; + } } .homSolutionsSection__panelSubtitle { From d904c20b3999cf33e2d146823408e2bc314ba921 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Thu, 30 Jul 2020 13:38:23 -0500 Subject: [PATCH 18/29] fix page height --- src/plugins/home/public/application/components/_home.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/plugins/home/public/application/components/_home.scss b/src/plugins/home/public/application/components/_home.scss index 945f1bde041b6..cccc0e7d027e6 100644 --- a/src/plugins/home/public/application/components/_home.scss +++ b/src/plugins/home/public/application/components/_home.scss @@ -3,7 +3,6 @@ $homePageWidth: 1200px; .homPageContainer { display: flex; - height: calc(100vh - #{$euiHeaderHeightCompensation}); flex-direction: column; background-color: $euiColorEmptyShade; } From 14e31b9f4d70a3f192d7c671a463b3000be3c9df Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Thu, 30 Jul 2020 13:16:06 -0700 Subject: [PATCH 19/29] Updated home page feature order values --- src/plugins/dashboard/public/plugin.tsx | 2 +- src/plugins/discover/public/register_feature.ts | 2 +- src/plugins/home/public/plugin.ts | 6 +++--- x-pack/plugins/apm/public/featureCatalogueEntry.ts | 2 +- x-pack/plugins/canvas/public/feature_catalogue_entry.ts | 2 +- x-pack/plugins/enterprise_search/public/plugin.ts | 6 +++--- x-pack/plugins/graph/public/plugin.ts | 2 +- x-pack/plugins/index_lifecycle_management/public/plugin.tsx | 2 +- x-pack/plugins/infra/public/register_feature.ts | 2 +- x-pack/plugins/ingest_manager/public/plugin.ts | 2 +- x-pack/plugins/maps/public/feature_catalogue_entry.ts | 2 +- x-pack/plugins/ml/public/register_feature.ts | 4 ++-- x-pack/plugins/monitoring/public/plugin.ts | 2 +- x-pack/plugins/observability/public/plugin.ts | 2 +- x-pack/plugins/security/public/plugin.tsx | 2 +- x-pack/plugins/security_solution/public/plugin.tsx | 6 +++--- x-pack/plugins/uptime/public/apps/plugin.ts | 2 +- 17 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx index a8a8f2cae2d32..9e75fc8e4de18 100644 --- a/src/plugins/dashboard/public/plugin.tsx +++ b/src/plugins/dashboard/public/plugin.tsx @@ -357,7 +357,7 @@ export class DashboardPlugin homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, category: FeatureCatalogueCategory.DATA, solution: 'kibana', - order: 100, + order: 410, }); } } diff --git a/src/plugins/discover/public/register_feature.ts b/src/plugins/discover/public/register_feature.ts index 8380cd96006ee..8dcbc5cfc7824 100644 --- a/src/plugins/discover/public/register_feature.ts +++ b/src/plugins/discover/public/register_feature.ts @@ -37,6 +37,6 @@ export function registerFeature(home: HomePublicPluginSetup) { homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, category: FeatureCatalogueCategory.DATA, solution: 'kibana', - order: 200, + order: 420, }); } diff --git a/src/plugins/home/public/plugin.ts b/src/plugins/home/public/plugin.ts index 703e3d2685eb9..5a584bf72a4e5 100644 --- a/src/plugins/home/public/plugin.ts +++ b/src/plugins/home/public/plugin.ts @@ -131,7 +131,7 @@ export class HomePublicPlugin homePageSection: FeatureCatalogueHomePageSection.ADD_DATA, path: `${HOME_APP_BASE_PATH}#/tutorial_directory`, category: FeatureCatalogueCategory.DATA, - order: 100, + order: 500, }); featureCatalogue.register({ @@ -140,13 +140,13 @@ export class HomePublicPlugin defaultMessage: 'Kibana', }), description: i18n.translate('home.kibana.featureCatalogueDescription', { - defaultMessage: 'Visualize & Analyze', + defaultMessage: 'Visualize & analyze', }), icon: 'logoKibana', homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, path: '/app/dashboards', category: FeatureCatalogueCategory.SOLUTION, - order: 100, + order: 400, }); return { diff --git a/x-pack/plugins/apm/public/featureCatalogueEntry.ts b/x-pack/plugins/apm/public/featureCatalogueEntry.ts index c87bc7a244430..8547e1804847d 100644 --- a/x-pack/plugins/apm/public/featureCatalogueEntry.ts +++ b/x-pack/plugins/apm/public/featureCatalogueEntry.ts @@ -21,5 +21,5 @@ export const featureCatalogueEntry = { homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, category: FeatureCatalogueCategory.DATA, solution: 'observability', - order: 200, + order: 220, }; diff --git a/x-pack/plugins/canvas/public/feature_catalogue_entry.ts b/x-pack/plugins/canvas/public/feature_catalogue_entry.ts index 4475aabfd6b20..4a9190967788d 100644 --- a/x-pack/plugins/canvas/public/feature_catalogue_entry.ts +++ b/x-pack/plugins/canvas/public/feature_catalogue_entry.ts @@ -21,5 +21,5 @@ export const featureCatalogueEntry = { homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, category: FeatureCatalogueCategory.DATA, solution: 'kibana', - order: 300, + order: 430, }; diff --git a/x-pack/plugins/enterprise_search/public/plugin.ts b/x-pack/plugins/enterprise_search/public/plugin.ts index 14a7c885da111..2944006442731 100644 --- a/x-pack/plugins/enterprise_search/public/plugin.ts +++ b/x-pack/plugins/enterprise_search/public/plugin.ts @@ -96,7 +96,7 @@ export class EnterpriseSearchPlugin implements Plugin { category: FeatureCatalogueCategory.DATA, homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, solution: 'enterpriseSearch', - order: 100, + order: 110, }); plugins.home.featureCatalogue.register({ @@ -108,7 +108,7 @@ export class EnterpriseSearchPlugin implements Plugin { category: FeatureCatalogueCategory.DATA, homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, solution: 'enterpriseSearch', - order: 200, + order: 120, }); plugins.home.featureCatalogue.register({ @@ -120,7 +120,7 @@ export class EnterpriseSearchPlugin implements Plugin { category: FeatureCatalogueCategory.DATA, homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, solution: 'enterpriseSearch', - order: 300, + order: 130, }); } diff --git a/x-pack/plugins/graph/public/plugin.ts b/x-pack/plugins/graph/public/plugin.ts index 238dc12db0304..4ba10602b7da9 100644 --- a/x-pack/plugins/graph/public/plugin.ts +++ b/x-pack/plugins/graph/public/plugin.ts @@ -67,7 +67,7 @@ export class GraphPlugin homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, category: FeatureCatalogueCategory.DATA, solution: 'kibana', - order: 600, + order: 460, }); } diff --git a/x-pack/plugins/index_lifecycle_management/public/plugin.tsx b/x-pack/plugins/index_lifecycle_management/public/plugin.tsx index 5b3e962d3610c..1003e34811463 100644 --- a/x-pack/plugins/index_lifecycle_management/public/plugin.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/plugin.tsx @@ -85,7 +85,7 @@ export class IndexLifecycleManagementPlugin { path: '/app/management/data/index_lifecycle_management', homePageSection: FeatureCatalogueHomePageSection.MANAGE_DATA, category: FeatureCatalogueCategory.ADMIN, - order: 400, + order: 640, }); } diff --git a/x-pack/plugins/infra/public/register_feature.ts b/x-pack/plugins/infra/public/register_feature.ts index 0bb13c188f314..331f2cc9b8f45 100644 --- a/x-pack/plugins/infra/public/register_feature.ts +++ b/x-pack/plugins/infra/public/register_feature.ts @@ -25,7 +25,7 @@ export const registerFeatures = (homePlugin: HomePublicPluginSetup) => { homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, category: FeatureCatalogueCategory.DATA, solution: 'observability', - order: 100, + order: 210, }); homePlugin.featureCatalogue.register({ diff --git a/x-pack/plugins/ingest_manager/public/plugin.ts b/x-pack/plugins/ingest_manager/public/plugin.ts index c0a2037603044..9a65e9133c6d5 100644 --- a/x-pack/plugins/ingest_manager/public/plugin.ts +++ b/x-pack/plugins/ingest_manager/public/plugin.ts @@ -113,7 +113,7 @@ export class IngestManagerPlugin homePageSection: FeatureCatalogueHomePageSection.ADD_DATA, path: BASE_PATH, category: FeatureCatalogueCategory.ADMIN, - order: 200, + order: 510, }); } diff --git a/x-pack/plugins/maps/public/feature_catalogue_entry.ts b/x-pack/plugins/maps/public/feature_catalogue_entry.ts index 41a86a36ed4ae..3dd6b8918face 100644 --- a/x-pack/plugins/maps/public/feature_catalogue_entry.ts +++ b/x-pack/plugins/maps/public/feature_catalogue_entry.ts @@ -22,5 +22,5 @@ export const featureCatalogueEntry = { homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, category: FeatureCatalogueCategory.DATA, solution: 'kibana', - order: 400, + order: 440, }; diff --git a/x-pack/plugins/ml/public/register_feature.ts b/x-pack/plugins/ml/public/register_feature.ts index 2aa8819bb3d24..7fe0a432a6a56 100644 --- a/x-pack/plugins/ml/public/register_feature.ts +++ b/x-pack/plugins/ml/public/register_feature.ts @@ -34,7 +34,7 @@ export const registerFeature = (home: HomePublicPluginSetup) => { homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, category: FeatureCatalogueCategory.DATA, solution: 'kibana', - order: 500, + order: 450, }); home.featureCatalogue.register({ @@ -49,6 +49,6 @@ export const registerFeature = (home: HomePublicPluginSetup) => { path: '/app/ml#/filedatavisualizer', homePageSection: FeatureCatalogueHomePageSection.ADD_DATA, category: FeatureCatalogueCategory.DATA, - order: 300, + order: 520, }); }; diff --git a/x-pack/plugins/monitoring/public/plugin.ts b/x-pack/plugins/monitoring/public/plugin.ts index 9922bd6b035fe..0da0fc1901548 100644 --- a/x-pack/plugins/monitoring/public/plugin.ts +++ b/x-pack/plugins/monitoring/public/plugin.ts @@ -63,7 +63,7 @@ export class MonitoringPlugin description: i18n.translate('xpack.monitoring.monitoringDescription', { defaultMessage: 'Track the real-time health and performance of your Elastic Stack.', }), - order: 200, + order: 610, }); } diff --git a/x-pack/plugins/observability/public/plugin.ts b/x-pack/plugins/observability/public/plugin.ts index 6cf9397f40477..ca79bfc6372c0 100644 --- a/x-pack/plugins/observability/public/plugin.ts +++ b/x-pack/plugins/observability/public/plugin.ts @@ -66,7 +66,7 @@ export class Plugin implements PluginClass Date: Thu, 30 Jul 2020 19:40:52 -0700 Subject: [PATCH 20/29] Added solutions registry to feature catalogue --- .../home/public/application/application.tsx | 3 +- .../public/application/components/_home.scss | 1 + .../components/_solutions_panel.scss | 82 ++++++++++--------- .../public/application/components/home.js | 18 +++- .../public/application/components/home_app.js | 13 ++- .../solutions_panel/solutions_panel.tsx | 29 +++---- src/plugins/home/public/index.ts | 1 + src/plugins/home/public/plugin.ts | 5 +- .../feature_catalogue_registry.ts | 43 +++++++++- .../services/feature_catalogue/index.ts | 1 + .../enterprise_search/public/plugin.ts | 5 +- .../enterprise_search/server/plugin.ts | 3 +- x-pack/plugins/observability/public/plugin.ts | 6 +- .../security_solution/public/plugin.tsx | 5 +- 14 files changed, 137 insertions(+), 78 deletions(-) diff --git a/src/plugins/home/public/application/application.tsx b/src/plugins/home/public/application/application.tsx index 627bd10d7c2c8..944d459539f7a 100644 --- a/src/plugins/home/public/application/application.tsx +++ b/src/plugins/home/public/application/application.tsx @@ -38,12 +38,13 @@ export const renderApp = async ( // all the directories could be get in "start" phase of plugin after all of the legacy plugins will be moved to a NP const directories = featureCatalogue.get(); + const solutions = featureCatalogue.getSolutions(); chrome.setBreadcrumbs([{ text: homeTitle }]); render( - + , element ); diff --git a/src/plugins/home/public/application/components/_home.scss b/src/plugins/home/public/application/components/_home.scss index cccc0e7d027e6..945f1bde041b6 100644 --- a/src/plugins/home/public/application/components/_home.scss +++ b/src/plugins/home/public/application/components/_home.scss @@ -3,6 +3,7 @@ $homePageWidth: 1200px; .homPageContainer { display: flex; + height: calc(100vh - #{$euiHeaderHeightCompensation}); flex-direction: column; background-color: $euiColorEmptyShade; } diff --git a/src/plugins/home/public/application/components/_solutions_panel.scss b/src/plugins/home/public/application/components/_solutions_panel.scss index 33194773387da..1aae9a28065e4 100644 --- a/src/plugins/home/public/application/components/_solutions_panel.scss +++ b/src/plugins/home/public/application/components/_solutions_panel.scss @@ -1,6 +1,6 @@ .homSolutionsSection { margin-top: -$euiSizeXL; - min-height: $euiSize*16; + min-height: $euiSize * 16; display: flex; .homSolutionsSection__panel { @@ -10,8 +10,8 @@ .homSolutionsSection__panelHeader { border-radius: $euiBorderRadius 0 0 $euiBorderRadius; color: $euiColorEmptyShade; - - @include euiBreakpoint('xs', 's') { + + @include euiBreakpoint("xs", "s") { border-radius: $euiBorderRadius $euiBorderRadius 0 0; } } @@ -20,7 +20,7 @@ padding: $euiSize; color: $euiColorGhost; } - + .homSolutionsSection__panelIcon { margin: 0 auto $euiSizeS; padding: $euiSizeS; @@ -31,19 +31,19 @@ fill: $euiColorInk; } } - + .homSolutionsSection__panelSubtitle { margin-top: $euiSizeXS; } - + .homSolutionsSection__panelDescriptions { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: $euiSize; - - @include euiBreakpoint('xs', 's') { + + @include euiBreakpoint("xs", "s") { height: auto; text-align: center; } @@ -56,15 +56,7 @@ &.homSolutionsSection__single { max-width: 50%; - .homSolutionsSection__panelHeader { - background-color: #006BB4; // Hard coded for brand consistency across themes - background-image: url('data:image/png;base64,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'), url('data:image/png;base64,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'); - background-repeat: no-repeat; - background-size: $euiSizeXL * 4, $euiSizeXL * 6; - background-position: top 0 left 0, bottom 0 right 0; - } - - @include euiBreakpoint('xs', 's') { + @include euiBreakpoint("xs", "s") { max-width: 100%; } } @@ -72,37 +64,53 @@ .homSolutionsSection__multiple { max-width: 50%; + } - .homSolutionsSection__container:first-child .homSolutionsSection__panelHeader { - background-color: #017D73; // Hard coded for brand consistency across themes - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABKCAYAAADJwhY8AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANMSURBVHgBzZp7buIwEMYHKC1QuqsF7Up7Hs4Al+Ff4DCcAonrtPuAPjcL1B/YyA0p2JkZK580SuQm6Y+xx4+xiSqumrG+d7/z/rYx9t+WZdZ2lFhXxq4jngfkP2Ov9qquq8jnm9Zu6eBNgD6TImwsoC80ibY1NIe1sRcSVsPYHfFVN9Yy1jG2pUPbFZEUoJMP+kYHWJakAZ0AemuvrPZZJ10B8jsdHFFKWh70BSe07X1GkUoBCCHib+w1qsq1qzivLkU6JDUgTSaT7m63C4ZMCmjgaDwe4zYYMhmgB+cEyPal95IAFsA5fTGQZ4dbdcAzcO7/9wxk7bMH8AfMTvJDUsO+fG2tSfJwvp5qtdqKPgEMEYABekeBo0IEnNODgTzpI0MBfaFhnwUtAQdlBvA+X1gG0Kmw0y0J57QykE9+ASdIHo3hF29cARMO6uYDhhvFGPwfjG0E4BxPxy/gVPFR8/m8MRwOsTosPa3y9KEtigBCpmoAJwV5jGixjtp8EG3xD8noOASKjiT2V6+Jr5YLFo2hDuvkDfEErqa7EZXx4naxWKyIr9b+e6QkU0U/iBcw+2jWnM08E09NtMMqA0JNNUC0ReInlRraE9bodXBOzaoD1rQBuVku9SpmZ7eSL9wjVa864LbqgOpVzJ4bagNyv7/RBozZgymSOuAN8bRTA7RrFM4+DJRpepBbvZAqIDf3jQmrThXbxCS3i5FdduYksXOAjUp5QJt75npvK75whwwclopd4uvV3YgB2m7lG8nouK0rAojkEcnlZTZ+plUCsDEajfom9SYBB31InXA/is64h+8sl0vKsowGgwExBO/99QvKDkXISHQpFxCz2Wx/nU6nVFIniacyHkTOpGevJ2J48sR7UKgHnceCRoiSnvxVVOj2P6C6ZyjHVKljwb7a54KDKtKT2MgpPDECD/ZJSYGedEdaCqW+437BkzgcdG/zOIVKciTgDOTawL2dezfVmYUiyHV+V6lIyQAhDxJwjyHvoPv4SWmFgAiCg1JnFqLgIO6qK1SIVowS0afjUgCin/tNJZOZ2oCIUlRr6aOlWoDwFjZz2CczpQHhKXjsYv8WKilAeAwBgL0R0ZPCHECAvFirzCFb/5hyknPV7zL4DLH0CVGgAAAAAElFTkSuQmCC'), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAYAAACbQR1vAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACBSURBVHgB7dpBDcAwDMVQdyzGH9xojEQjtbIfBEu5fGUx62WPjyEPcgVArgDIFQC5AiBXAOQKgFwBkCsAcgVATh9gsW+4vFIngFwBkCsAcgVArgDIFQC5AiBXAORahJjVm9zpCoBcAZArAHIFQK4AyBUAuQIgVwDkCoBcAZDTB/gBLrgCk8OhuvYAAAAASUVORK5CYII='); - background-repeat: no-repeat; - background-size: $euiSize * 1.25, $euiSizeXL; - background-position: top $euiSizeS left 0, bottom $euiSizeS right $euiSizeS; + @include euiBreakpoint("xs", "s") { + flex-direction: column; + + .homSolutionsSection__multiple { + max-width: 100%; } + } - .homSolutionsSection__container:nth-child(2) .homSolutionsSection__panelHeader { - background-color: #C42373; // Hard coded for brand consistency across themes - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADNSURBVHgB7duxCcIAEEDR08IFrGyz/0pZwVYEIcYF/FWKwHtwXP/hyrvMQbZtu+3rPid3Hf4SKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgcJmDnt6WZfms6/qak/sFeswx3vs85+ScWBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECgKFLx4KCqcIFEJnAAAAAElFTkSuQmCC'); + .homSolutionsSection__blueCard { + .homSolutionsSection__panelHeader { + background-color: #006bb4; // Hard coded for brand consistency across themes + background-image: url("data:image/png;base64,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"), + url("data:image/png;base64,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"); + background-repeat: no-repeat; + background-size: $euiSizeXL * 4, $euiSizeXL * 6; + background-position: top 0 left 0, bottom 0 right 0; + } + } + + .homSolutionsSection__magentaCard { + .homSolutionsSection__panelHeader { + background-color: #c42373; // Hard coded for brand consistency across themes + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADNSURBVHgB7duxCcIAEEDR08IFrGyz/0pZwVYEIcYF/FWKwHtwXP/hyrvMQbZtu+3rPid3Hf4SKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgcJmDnt6WZfms6/qak/sFeswx3vs85+ScWBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECgKFLx4KCqcIFEJnAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-size: $euiSizeL * 1.5; background-position: top $euiSizeS right $euiSizeS; } - - .homSolutionsSection__container:nth-child(3) .homSolutionsSection__panelHeader { + } + .homSolutionsSection__greenCard { + .homSolutionsSection__panelHeader { + background-color: #017d73; // Hard coded for brand consistency across themes + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABKCAYAAADJwhY8AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANMSURBVHgBzZp7buIwEMYHKC1QuqsF7Up7Hs4Al+Ff4DCcAonrtPuAPjcL1B/YyA0p2JkZK580SuQm6Y+xx4+xiSqumrG+d7/z/rYx9t+WZdZ2lFhXxq4jngfkP2Ov9qquq8jnm9Zu6eBNgD6TImwsoC80ibY1NIe1sRcSVsPYHfFVN9Yy1jG2pUPbFZEUoJMP+kYHWJakAZ0AemuvrPZZJ10B8jsdHFFKWh70BSe07X1GkUoBCCHib+w1qsq1qzivLkU6JDUgTSaT7m63C4ZMCmjgaDwe4zYYMhmgB+cEyPal95IAFsA5fTGQZ4dbdcAzcO7/9wxk7bMH8AfMTvJDUsO+fG2tSfJwvp5qtdqKPgEMEYABekeBo0IEnNODgTzpI0MBfaFhnwUtAQdlBvA+X1gG0Kmw0y0J57QykE9+ASdIHo3hF29cARMO6uYDhhvFGPwfjG0E4BxPxy/gVPFR8/m8MRwOsTosPa3y9KEtigBCpmoAJwV5jGixjtp8EG3xD8noOASKjiT2V6+Jr5YLFo2hDuvkDfEErqa7EZXx4naxWKyIr9b+e6QkU0U/iBcw+2jWnM08E09NtMMqA0JNNUC0ReInlRraE9bodXBOzaoD1rQBuVku9SpmZ7eSL9wjVa864LbqgOpVzJ4bagNyv7/RBozZgymSOuAN8bRTA7RrFM4+DJRpepBbvZAqIDf3jQmrThXbxCS3i5FdduYksXOAjUp5QJt75npvK75whwwclopd4uvV3YgB2m7lG8nouK0rAojkEcnlZTZ+plUCsDEajfom9SYBB31InXA/is64h+8sl0vKsowGgwExBO/99QvKDkXISHQpFxCz2Wx/nU6nVFIniacyHkTOpGevJ2J48sR7UKgHnceCRoiSnvxVVOj2P6C6ZyjHVKljwb7a54KDKtKT2MgpPDECD/ZJSYGedEdaCqW+437BkzgcdG/zOIVKciTgDOTawL2dezfVmYUiyHV+V6lIyQAhDxJwjyHvoPv4SWmFgAiCg1JnFqLgIO6qK1SIVowS0afjUgCin/tNJZOZ2oCIUlRr6aOlWoDwFjZz2CczpQHhKXjsYv8WKilAeAwBgL0R0ZPCHECAvFirzCFb/5hyknPV7zL4DLH0CVGgAAAAAElFTkSuQmCC"), + url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAYAAACbQR1vAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACBSURBVHgB7dpBDcAwDMVQdyzGH9xojEQjtbIfBEu5fGUx62WPjyEPcgVArgDIFQC5AiBXAOQKgFwBkCsAcgVATh9gsW+4vFIngFwBkCsAcgVArgDIFQC5AiBXAORahJjVm9zpCoBcAZArAHIFQK4AyBUAuQIgVwDkCoBcAZDTB/gBLrgCk8OhuvYAAAAASUVORK5CYII="); + background-repeat: no-repeat; + background-size: $euiSize * 1.25, $euiSizeXL; + background-position: top $euiSizeS left 0, bottom $euiSizeS right $euiSizeS; + } + } + .homSolutionsSection__blackCard { + .homSolutionsSection__panelHeader { background-color: #343741; // Hard coded for brand consistency across themes - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAYAAACrpQYOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKRSURBVHgB7d3tSgMxEIXhMeqPQoWC9f4vte5Z3dLvTbKZzCQ5LyxqKwg+tNjdUxQR+RJmXpiOvRDDvPD/kRjGhYvPgbETZlK4+fogxDApPLiNGAaFJ7cD40NYtcKL+76FGNUKK/cRo1Ih4n5gvAtTbQ1i+R5iKBcDgYBADMViIRAxFEuBQMRQKhUCEUOhHAi0YLwJK1IuBCJGwbZAoE8hRpG2QqAFg22oBAQCxkFYdqUgEE6dEyOzkhCIGJmVhkDA4PXvxDQgEMcIiWlBIGIkpAmBiBGZNgQiRkQ1IBAxVqoFgThge1FNCMTN1JNqQyBiPMgCAnHAdpMVBOJm6iJLCA7YLrKEWH4+r3+LPYQIMeY8QKDhlyFeINDQGJ4g0LAY3iDQkBgeIdBwmymvEGgoDM8QaJgBm3cINMSArQUI1P2ArRUI1PVmqiUI1C1GaxCoywFbixCouzFCqxCIyxBPnU6nLjBafkQs7YExHdJyPUCg+WmqZYxeIBAwmv3TticItJseFYcWHxm9QaD5RV9rGD1CIGAcJ4xmztr2CoHms7atYPQMgc4Y3p+qeodAwPiZjnfPGCNAoPMgwSvGKBDINcZIEMgtxmgQyCXGiBDIHcaoEAgYx+n48IAxMgQ6v1nGGmN0COQCgxB/4feAF307KwxCXDe/9dgCgxD3mWAQ4nHAqHrplRDPq3odnBCvq4ZBiPWqYBAiLnUMQsSnikGItObtlAYGIdJTmesQIq/iGITIr+h2ihDbKradIsT2imynCFGmzdspQpRr03VwQpQtG4MQ5cvCIIROyRiE0CsJgxC6RW+nCKFf1FyHEHVaxSBEvV5upwhRv4dzHULYdIdBCLuutlOEsO18HZz/u8E+YMgvrbKfmp8y7IEAAAAASUVORK5CYII='); + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAYAAACrpQYOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKRSURBVHgB7d3tSgMxEIXhMeqPQoWC9f4vte5Z3dLvTbKZzCQ5LyxqKwg+tNjdUxQR+RJmXpiOvRDDvPD/kRjGhYvPgbETZlK4+fogxDApPLiNGAaFJ7cD40NYtcKL+76FGNUKK/cRo1Ih4n5gvAtTbQ1i+R5iKBcDgYBADMViIRAxFEuBQMRQKhUCEUOhHAi0YLwJK1IuBCJGwbZAoE8hRpG2QqAFg22oBAQCxkFYdqUgEE6dEyOzkhCIGJmVhkDA4PXvxDQgEMcIiWlBIGIkpAmBiBGZNgQiRkQ1IBAxVqoFgThge1FNCMTN1JNqQyBiPMgCAnHAdpMVBOJm6iJLCA7YLrKEWH4+r3+LPYQIMeY8QKDhlyFeINDQGJ4g0LAY3iDQkBgeIdBwmymvEGgoDM8QaJgBm3cINMSArQUI1P2ArRUI1PVmqiUI1C1GaxCoywFbixCouzFCqxCIyxBPnU6nLjBafkQs7YExHdJyPUCg+WmqZYxeIBAwmv3TticItJseFYcWHxm9QaD5RV9rGD1CIGAcJ4xmztr2CoHms7atYPQMgc4Y3p+qeodAwPiZjnfPGCNAoPMgwSvGKBDINcZIEMgtxmgQyCXGiBDIHcaoEAgYx+n48IAxMgQ6v1nGGmN0COQCgxB/4feAF307KwxCXDe/9dgCgxD3mWAQ4nHAqHrplRDPq3odnBCvq4ZBiPWqYBAiLnUMQsSnikGItObtlAYGIdJTmesQIq/iGITIr+h2ihDbKradIsT2imynCFGmzdspQpRr03VwQpQtG4MQ5cvCIIROyRiE0CsJgxC6RW+nCKFf1FyHEHVaxSBEvV5upwhRv4dzHULYdIdBCLuutlOEsO18HZz/u8E+YMgvrbKfmp8y7IEAAAAASUVORK5CYII="); background-repeat: no-repeat; background-size: $euiSizeL * 2; background-position: top $euiSizeS left $euiSizeS; } } - - @include euiBreakpoint('xs', 's') { - flex-direction: column; - - .homSolutionsSection__multiple { - max-width: 100%; - } - } } diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js index 06851b7ac167a..ad20e21c20bc6 100644 --- a/src/plugins/home/public/application/components/home.js +++ b/src/plugins/home/public/application/components/home.js @@ -141,7 +141,7 @@ export class Home extends Component { .map(this.renderFeatureCard); renderNormal() { - const { addBasePath, directories } = this.props; + const { addBasePath, directories, solutions } = this.props; const devTools = this.findDirectoryById('console'); const stackManagement = this.findDirectoryById('stack-management'); @@ -215,7 +215,11 @@ export class Home extends Component {

- + {/* If there is only one card in each add and manage data section, this displays the two sections side by side */} {addDataFeatureCards.length === 1 && manageDataFeatureCards.length === 1 ? ( @@ -306,6 +310,16 @@ Home.propTypes = { order: PropTypes.number, }) ), + solutions: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + icon: PropTypes.string.isRequired, + path: PropTypes.string.isRequired, + order: PropTypes.number, + }) + ), find: PropTypes.func.isRequired, localStorage: PropTypes.object.isRequired, urlBasePath: PropTypes.string.isRequired, diff --git a/src/plugins/home/public/application/components/home_app.js b/src/plugins/home/public/application/components/home_app.js index 33ea99a7acf74..a5cc7dfa91f09 100644 --- a/src/plugins/home/public/application/components/home_app.js +++ b/src/plugins/home/public/application/components/home_app.js @@ -38,7 +38,7 @@ const RedirectToDefaultApp = () => { return null; }; -export function HomeApp({ directories }) { +export function HomeApp({ directories, solutions }) { const { savedObjectsClient, getBasePath, @@ -85,6 +85,7 @@ export function HomeApp({ directories }) { (

{description}

@@ -58,37 +57,29 @@ const getAppDescriptions = (apps: FeatureCatalogueEntry[]) => .reduce(addSpacersBetweenElementsReducer, []); const sortByOrder = ( - { order: orderA = 0 }: FeatureCatalogueEntry, - { order: orderB = 0 }: FeatureCatalogueEntry + { order: orderA = 0 }: FeatureCatalogueEntry | FeatureCatalogueSolution, + { order: orderB = 0 }: FeatureCatalogueEntry | FeatureCatalogueSolution ) => orderA - orderB; interface Props { - addBasePath: (path: string) => string; directories: FeatureCatalogueEntry[]; + solutions: FeatureCatalogueSolution[]; } -export const SolutionsPanel: FC = ({ addBasePath, directories }) => { +export const SolutionsPanel: FC = ({ directories, solutions }) => { const findDirectoriesBySolution = (solutionId: string): FeatureCatalogueEntry[] => directories.filter( (directory) => - directory.category !== FeatureCatalogueCategory.SOLUTION && directory.homePageSection === FeatureCatalogueHomePageSection.SOLUTION_PANEL && directory.solution === solutionId ); - // Find non-Kibana solutions - const solutions = directories - .filter( - (directory) => - directory.category === FeatureCatalogueCategory.SOLUTION && - directory.homePageSection === FeatureCatalogueHomePageSection.SOLUTION_PANEL && - directory.id !== 'kibana' - ) - .sort(sortByOrder); + const kibana = solutions.find(({ id }) => id === 'kibana'); - const kibana = directories.find(({ id }) => id === 'kibana'); + // Find non-Kibana solutions + solutions = solutions.sort(sortByOrder).filter(({ id }) => id !== 'kibana'); - const renderSolutionCard = (solution: FeatureCatalogueEntry) => { + const renderSolutionCard = (solution: FeatureCatalogueSolution) => { const solutionApps = findDirectoriesBySolution(solution.id); return solutionApps.length ? ( @@ -96,7 +87,7 @@ export const SolutionsPanel: FC = ({ addBasePath, directories }) => { key={solution.id} className={`homSolutionsSection__container ${ solution.id === 'kibana' ? 'homSolutionsSection__single' : '' - }`} + } ${solution.className}`} grow={1} > (); + private readonly solutions = new Map(); public setup() { return { @@ -74,6 +90,15 @@ export class FeatureCatalogueRegistry { this.features.set(feature.id, feature); }, + registerSolution: (solution: FeatureCatalogueSolution) => { + if (this.features.has(solution.id)) { + throw new Error( + `Feature with id [${solution.id}] has already been registered. Use a unique id.` + ); + } + + this.solutions.set(solution.id, solution); + }, }; } @@ -107,6 +132,16 @@ export class FeatureCatalogueRegistry { .filter((entry) => capabilities.catalogue[entry.id] !== false) .sort(compareByKey('title')); } + + public getSolutions(): readonly FeatureCatalogueSolution[] { + if (this.capabilities === null) { + throw new Error('Catalogue entries are only available after start phase'); + } + const capabilities = this.capabilities; + return [...this.solutions.values()] + .filter((solution) => capabilities.catalogue[solution.id] !== false) + .sort(compareByKey('title')); + } } export type FeatureCatalogueRegistrySetup = ReturnType; diff --git a/src/plugins/home/public/services/feature_catalogue/index.ts b/src/plugins/home/public/services/feature_catalogue/index.ts index d2d5be3e851c3..d275b024f5466 100644 --- a/src/plugins/home/public/services/feature_catalogue/index.ts +++ b/src/plugins/home/public/services/feature_catalogue/index.ts @@ -21,6 +21,7 @@ export { FeatureCatalogueCategory, FeatureCatalogueHomePageSection, FeatureCatalogueEntry, + FeatureCatalogueSolution, FeatureCatalogueRegistry, FeatureCatalogueRegistrySetup, } from './feature_catalogue_registry'; diff --git a/x-pack/plugins/enterprise_search/public/plugin.ts b/x-pack/plugins/enterprise_search/public/plugin.ts index 2944006442731..aa86ff5e21eab 100644 --- a/x-pack/plugins/enterprise_search/public/plugin.ts +++ b/x-pack/plugins/enterprise_search/public/plugin.ts @@ -76,15 +76,14 @@ export class EnterpriseSearchPlugin implements Plugin { }, }); - plugins.home.featureCatalogue.register({ + plugins.home.featureCatalogue.registerSolution({ id: 'enterpriseSearch', title: 'Enterprise Search', icon: 'logoEnterpriseSearch', description: 'Search everything', path: '/app/enterprise_search/app_search', // TODO: update this link to enterprise search landing page - category: FeatureCatalogueCategory.SOLUTION, - homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, order: 100, + className: 'homSolutionsSection__greenCard', }); plugins.home.featureCatalogue.register({ diff --git a/x-pack/plugins/enterprise_search/server/plugin.ts b/x-pack/plugins/enterprise_search/server/plugin.ts index a7bd68f92f78b..9c5821163f735 100644 --- a/x-pack/plugins/enterprise_search/server/plugin.ts +++ b/x-pack/plugins/enterprise_search/server/plugin.ts @@ -70,7 +70,7 @@ export class EnterpriseSearchPlugin implements Plugin { icon: 'logoEnterpriseSearch', navLinkId: 'appSearch', // TODO - remove this once functional tests no longer rely on navLinkId app: ['kibana', 'appSearch', 'workplaceSearch'], // TODO: 'enterpriseSearch' - catalogue: ['appSearch', 'workplaceSearch'], // TODO: 'enterpriseSearch' + catalogue: ['enterpriseSearch', 'appSearch', 'workplaceSearch'], // TODO: 'enterpriseSearch' privileges: null, }); @@ -88,6 +88,7 @@ export class EnterpriseSearchPlugin implements Plugin { workplaceSearch: hasWorkplaceSearchAccess, }, catalogue: { + enterpriseSearch: hasAppSearchAccess || hasWorkplaceSearchAccess, appSearch: hasAppSearchAccess, workplaceSearch: hasWorkplaceSearchAccess, }, diff --git a/x-pack/plugins/observability/public/plugin.ts b/x-pack/plugins/observability/public/plugin.ts index ca79bfc6372c0..524c167e081c8 100644 --- a/x-pack/plugins/observability/public/plugin.ts +++ b/x-pack/plugins/observability/public/plugin.ts @@ -53,7 +53,7 @@ export class Plugin implements PluginClass Date: Thu, 30 Jul 2020 20:45:03 -0700 Subject: [PATCH 21/29] Renamed solutions_panel to solutions_section --- .../public/application/components/_index.scss | 2 +- ...ons_panel.scss => _solutions_section.scss} | 0 .../public/application/components/home.js | 18 ++- .../solutions_panel/solutions_panel.tsx | 136 ------------------ .../index.ts | 2 +- .../solutions_section/solution_panel.tsx | 89 ++++++++++++ .../solution_title.tsx | 0 .../solutions_section/solutions_section.tsx | 91 ++++++++++++ .../plugins/snapshot_restore/public/plugin.ts | 2 +- 9 files changed, 191 insertions(+), 149 deletions(-) rename src/plugins/home/public/application/components/{_solutions_panel.scss => _solutions_section.scss} (100%) delete mode 100644 src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx rename src/plugins/home/public/application/components/{solutions_panel => solutions_section}/index.ts (95%) create mode 100644 src/plugins/home/public/application/components/solutions_section/solution_panel.tsx rename src/plugins/home/public/application/components/{solutions_panel => solutions_section}/solution_title.tsx (100%) create mode 100644 src/plugins/home/public/application/components/solutions_section/solutions_section.tsx diff --git a/src/plugins/home/public/application/components/_index.scss b/src/plugins/home/public/application/components/_index.scss index 7c013fb416db1..0936ad11e4ef0 100644 --- a/src/plugins/home/public/application/components/_index.scss +++ b/src/plugins/home/public/application/components/_index.scss @@ -9,7 +9,7 @@ @import 'home'; @import 'manage_data'; @import 'sample_data_set_cards'; -@import 'solutions_panel'; +@import 'solutions_section'; @import 'synopsis'; @import 'welcome'; diff --git a/src/plugins/home/public/application/components/_solutions_panel.scss b/src/plugins/home/public/application/components/_solutions_section.scss similarity index 100% rename from src/plugins/home/public/application/components/_solutions_panel.scss rename to src/plugins/home/public/application/components/_solutions_section.scss diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js index ad20e21c20bc6..69b24d22d2a1c 100644 --- a/src/plugins/home/public/application/components/home.js +++ b/src/plugins/home/public/application/components/home.js @@ -19,13 +19,7 @@ import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; -import { Synopsis } from './synopsis'; -import { ChangeHomeRoute } from './change_home_route'; -import { SolutionsPanel } from './solutions_panel'; -import { ManageData } from './manage_data'; -import { AddData } from './add_data'; import { FormattedMessage } from '@kbn/i18n/react'; - import { EuiButtonEmpty, EuiTitle, @@ -34,12 +28,16 @@ import { EuiHorizontalRule, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; - import { HOME_APP_BASE_PATH } from '../../../common/constants'; import { FeatureCatalogueHomePageSection } from '../../services'; import { getServices } from '../kibana_services'; -import { Welcome } from './welcome'; +import { AddData } from './add_data'; import { createAppNavigationHandler } from './app_navigation_handler'; +import { ChangeHomeRoute } from './change_home_route'; +import { ManageData } from './manage_data'; +import { SolutionsSection } from './solutions_section'; +import { Synopsis } from './synopsis'; +import { Welcome } from './welcome'; const KEY_ENABLE_WELCOME = 'home:welcome:show'; @@ -191,7 +189,7 @@ export class Home extends Component { iconType="gear" > {i18n.translate('home.pageHeader.stackManagementButtonLabel', { - defaultMessage: 'Manage stack', + defaultMessage: 'Manage', })} @@ -215,7 +213,7 @@ export class Home extends Component {
- ( - -

{description}

- -); - -const addSpacersBetweenElementsReducer = ( - acc: JSX.Element[], - element: JSX.Element, - index: number, - elements: JSX.Element[] -) => { - acc.push(element); - if (index < elements.length - 1) { - acc.push(); - } - return acc; -}; - -const getAppDescriptions = (apps: FeatureCatalogueEntry[]) => - apps - .sort(sortByOrder) - .map(getDescriptionText) - .reduce(addSpacersBetweenElementsReducer, []); - -const sortByOrder = ( - { order: orderA = 0 }: FeatureCatalogueEntry | FeatureCatalogueSolution, - { order: orderB = 0 }: FeatureCatalogueEntry | FeatureCatalogueSolution -) => orderA - orderB; - -interface Props { - directories: FeatureCatalogueEntry[]; - solutions: FeatureCatalogueSolution[]; -} - -export const SolutionsPanel: FC = ({ directories, solutions }) => { - const findDirectoriesBySolution = (solutionId: string): FeatureCatalogueEntry[] => - directories.filter( - (directory) => - directory.homePageSection === FeatureCatalogueHomePageSection.SOLUTION_PANEL && - directory.solution === solutionId - ); - - const kibana = solutions.find(({ id }) => id === 'kibana'); - - // Find non-Kibana solutions - solutions = solutions.sort(sortByOrder).filter(({ id }) => id !== 'kibana'); - - const renderSolutionCard = (solution: FeatureCatalogueSolution) => { - const solutionApps = findDirectoriesBySolution(solution.id); - - return solutionApps.length ? ( - - - - - - - - {getAppDescriptions(solutionApps)} - - - - - ) : null; - }; - - const halfWidthClass = 'homSolutionsSection__multiple'; - - return solutions.length || kibana ? ( - - - {solutions.length ? ( - - {solutions.map(renderSolutionCard)} - - ) : null} - {kibana ? renderSolutionCard(kibana) : null} - - - - - - ) : ( - - - - ); -}; diff --git a/src/plugins/home/public/application/components/solutions_panel/index.ts b/src/plugins/home/public/application/components/solutions_section/index.ts similarity index 95% rename from src/plugins/home/public/application/components/solutions_panel/index.ts rename to src/plugins/home/public/application/components/solutions_section/index.ts index 171e677403dd1..6ef3cfc8ec1a2 100644 --- a/src/plugins/home/public/application/components/solutions_panel/index.ts +++ b/src/plugins/home/public/application/components/solutions_section/index.ts @@ -17,4 +17,4 @@ * under the License. */ -export * from './solutions_panel'; +export * from './solutions_section'; diff --git a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx new file mode 100644 index 0000000000000..4b6cb95599fa7 --- /dev/null +++ b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx @@ -0,0 +1,89 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui'; +import { FeatureCatalogueEntry, FeatureCatalogueSolution } from '../../../'; +import { createAppNavigationHandler } from '../app_navigation_handler'; +import { SolutionTitle } from './solution_title'; + +const getDescriptionText = ({ description }: FeatureCatalogueEntry): JSX.Element => ( + +

{description}

+ +); + +const addSpacersBetweenElementsReducer = ( + acc: JSX.Element[], + element: JSX.Element, + index: number, + elements: JSX.Element[] +) => { + acc.push(element); + if (index < elements.length - 1) { + acc.push(); + } + return acc; +}; + +const getAppDescriptions = (apps: FeatureCatalogueEntry[]) => + apps + .sort(sortByOrder) + .map(getDescriptionText) + .reduce(addSpacersBetweenElementsReducer, []); + +const sortByOrder = ( + { order: orderA = 0 }: FeatureCatalogueEntry, + { order: orderB = 0 }: FeatureCatalogueEntry +) => orderA - orderB; + +interface Props { + solution: FeatureCatalogueSolution; + apps?: FeatureCatalogueEntry[]; +} + +export const SolutionPanel: FC = ({ solution, apps = [] }) => + solution && apps.length ? ( + + + + + + + + {getAppDescriptions(apps)} + + + + + ) : null; diff --git a/src/plugins/home/public/application/components/solutions_panel/solution_title.tsx b/src/plugins/home/public/application/components/solutions_section/solution_title.tsx similarity index 100% rename from src/plugins/home/public/application/components/solutions_panel/solution_title.tsx rename to src/plugins/home/public/application/components/solutions_section/solution_title.tsx diff --git a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx new file mode 100644 index 0000000000000..3b9d2b218eceb --- /dev/null +++ b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx @@ -0,0 +1,91 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { Fragment, FC } from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiHorizontalRule } from '@elastic/eui'; +import { SolutionPanel } from './solution_panel'; +import { FeatureCatalogueEntry, FeatureCatalogueSolution } from '../../../'; +import { FeatureCatalogueHomePageSection } from '../../../services'; + +const sortByOrder = ( + { order: orderA = 0 }: FeatureCatalogueSolution, + { order: orderB = 0 }: FeatureCatalogueSolution +) => orderA - orderB; + +interface Props { + directories: FeatureCatalogueEntry[]; + solutions: FeatureCatalogueSolution[]; +} + +export const SolutionsSection: FC = ({ directories, solutions }) => { + const findDirectoriesBySolution = ( + solution?: FeatureCatalogueSolution + ): FeatureCatalogueEntry[] => + directories.filter( + (directory) => + directory.homePageSection === FeatureCatalogueHomePageSection.SOLUTION_PANEL && + directory.solution === solution?.id + ); + + const kibana = solutions.find(({ id }) => id === 'kibana'); + const kibanaApps = findDirectoriesBySolution(kibana); + + // Find non-Kibana solutions + solutions = solutions.sort(sortByOrder).filter(({ id }) => id !== 'kibana'); + + // Maps features to each solution + const solutionAppMap = new Map(); + let appCount = 0; + + solutions.forEach((solution) => { + const apps = findDirectoriesBySolution(solution); + appCount += apps.length; + solutionAppMap.set(solution.id, apps); + }); + + const halfWidthClass = 'homSolutionsSection__multiple'; + + return appCount || kibanaApps.length ? ( + + + {appCount ? ( + + + {solutions.map((solution) => ( + + ))} + + + ) : null} + {kibana && kibanaApps.length ? : null} + + + + + + ) : ( + + + + ); +}; diff --git a/x-pack/plugins/snapshot_restore/public/plugin.ts b/x-pack/plugins/snapshot_restore/public/plugin.ts index 0a20fa1825554..2f127eab2608e 100644 --- a/x-pack/plugins/snapshot_restore/public/plugin.ts +++ b/x-pack/plugins/snapshot_restore/public/plugin.ts @@ -75,7 +75,7 @@ export class SnapshotRestoreUIPlugin { path: '/app/management/data/snapshot_restore', homePageSection: FeatureCatalogueHomePageSection.MANAGE_DATA, category: FeatureCatalogueCategory.ADMIN, - order: 300, + order: 630, }); } } From de161c5bfaec08db682650b2e0fe976bcf35c56d Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Thu, 30 Jul 2020 21:05:10 -0700 Subject: [PATCH 22/29] Updated copy --- src/plugins/dashboard/public/plugin.tsx | 2 +- src/plugins/home/public/plugin.ts | 4 +-- .../canvas/public/feature_catalogue_entry.ts | 2 +- .../enterprise_search/public/plugin.ts | 2 +- .../public/plugin.tsx | 2 +- .../plugins/infra/public/register_feature.ts | 2 +- .../plugins/ingest_manager/public/plugin.ts | 4 +-- .../maps/public/feature_catalogue_entry.ts | 2 +- x-pack/plugins/ml/public/register_feature.ts | 2 +- x-pack/plugins/monitoring/public/plugin.ts | 8 +++-- x-pack/plugins/security/public/plugin.tsx | 5 ++- .../security_solution/public/plugin.tsx | 32 +++++++++---------- .../plugins/snapshot_restore/public/plugin.ts | 2 +- 13 files changed, 35 insertions(+), 34 deletions(-) diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx index 9e75fc8e4de18..604717932faf7 100644 --- a/src/plugins/dashboard/public/plugin.tsx +++ b/src/plugins/dashboard/public/plugin.tsx @@ -350,7 +350,7 @@ export class DashboardPlugin defaultMessage: 'Dashboard', }), description: i18n.translate('dashboard.featureCatalogue.dashboardDescription', { - defaultMessage: 'Visualize every aspect of your data.', + defaultMessage: 'Analyze data in dashboards.', }), icon: 'dashboardApp', path: `/app/dashboards#${DashboardConstants.LANDING_PAGE_PATH}`, diff --git a/src/plugins/home/public/plugin.ts b/src/plugins/home/public/plugin.ts index 3c84777a9d611..267076db215d2 100644 --- a/src/plugins/home/public/plugin.ts +++ b/src/plugins/home/public/plugin.ts @@ -122,10 +122,10 @@ export class HomePublicPlugin featureCatalogue.register({ id: 'home_tutorial_directory', title: i18n.translate('home.tutorialDirectory.featureCatalogueTitle', { - defaultMessage: 'Add an integration', + defaultMessage: 'Ingest data', }), description: i18n.translate('home.tutorialDirectory.featureCatalogueDescription', { - defaultMessage: 'Add data from a variety of common sources.', + defaultMessage: 'Ingest data from popular apps and services.', }), icon: 'indexOpen', homePageSection: FeatureCatalogueHomePageSection.ADD_DATA, diff --git a/x-pack/plugins/canvas/public/feature_catalogue_entry.ts b/x-pack/plugins/canvas/public/feature_catalogue_entry.ts index 4a9190967788d..d39240097acf5 100644 --- a/x-pack/plugins/canvas/public/feature_catalogue_entry.ts +++ b/x-pack/plugins/canvas/public/feature_catalogue_entry.ts @@ -14,7 +14,7 @@ export const featureCatalogueEntry = { id: 'canvas', title: 'Canvas', description: i18n.translate('xpack.canvas.appDescription', { - defaultMessage: 'Craft pixel-perfect reports.', + defaultMessage: 'Design pixel-perfect reports.', }), icon: 'canvasApp', path: '/app/canvas', diff --git a/x-pack/plugins/enterprise_search/public/plugin.ts b/x-pack/plugins/enterprise_search/public/plugin.ts index aa86ff5e21eab..efd1bf11b2f79 100644 --- a/x-pack/plugins/enterprise_search/public/plugin.ts +++ b/x-pack/plugins/enterprise_search/public/plugin.ts @@ -114,7 +114,7 @@ export class EnterpriseSearchPlugin implements Plugin { id: 'workplaceSearch', title: 'Workplace Search', icon: WorkplaceSearchLogo, - description: "Unify your team's content.", + description: 'Unify your team content.', path: '/app/enterprise_search/workplace_search', category: FeatureCatalogueCategory.DATA, homePageSection: FeatureCatalogueHomePageSection.SOLUTION_PANEL, diff --git a/x-pack/plugins/index_lifecycle_management/public/plugin.tsx b/x-pack/plugins/index_lifecycle_management/public/plugin.tsx index 1003e34811463..1a5a51f7cefbd 100644 --- a/x-pack/plugins/index_lifecycle_management/public/plugin.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/plugin.tsx @@ -79,7 +79,7 @@ export class IndexLifecycleManagementPlugin { }), description: i18n.translate('xpack.indexLifecycleManagement.featureCatalogueTitle', { defaultMessage: - 'Attach a policy to automate when and how to transition an index through its lifecycle.', + 'Define lifecycle policies to automatically perform operations as an index ages.', }), icon: 'indexSettings', // TODO: This is the same icon used for rollups in the feature catalogue. Do we need to pick a different one here? path: '/app/management/data/index_lifecycle_management', diff --git a/x-pack/plugins/infra/public/register_feature.ts b/x-pack/plugins/infra/public/register_feature.ts index 331f2cc9b8f45..4e4485bcab921 100644 --- a/x-pack/plugins/infra/public/register_feature.ts +++ b/x-pack/plugins/infra/public/register_feature.ts @@ -18,7 +18,7 @@ export const registerFeatures = (homePlugin: HomePublicPluginSetup) => { defaultMessage: 'Metrics', }), description: i18n.translate('xpack.infra.registerFeatures.infraOpsDescription', { - defaultMessage: 'Monitor all infrastructure metrics.', + defaultMessage: 'Monitor infrastructure metrics.', }), icon: 'metricsApp', path: `/app/metrics`, diff --git a/x-pack/plugins/ingest_manager/public/plugin.ts b/x-pack/plugins/ingest_manager/public/plugin.ts index 9a65e9133c6d5..1dc0c32fdad51 100644 --- a/x-pack/plugins/ingest_manager/public/plugin.ts +++ b/x-pack/plugins/ingest_manager/public/plugin.ts @@ -104,10 +104,10 @@ export class IngestManagerPlugin deps.home.featureCatalogue.register({ id: 'ingestManager', title: i18n.translate('xpack.ingestManager.featureCatalogueTitle', { - defaultMessage: 'Manage ingest', + defaultMessage: 'Add Elastic Agent', }), description: i18n.translate('xpack.ingestManager.featureCatalogueDescription', { - defaultMessage: 'Management for Elastic Agents and integrations.', + defaultMessage: 'Add and manage your fleet of Elastic Agents and integrations.', }), icon: 'logstashInput', homePageSection: FeatureCatalogueHomePageSection.ADD_DATA, diff --git a/x-pack/plugins/maps/public/feature_catalogue_entry.ts b/x-pack/plugins/maps/public/feature_catalogue_entry.ts index 3dd6b8918face..166015f4eaea2 100644 --- a/x-pack/plugins/maps/public/feature_catalogue_entry.ts +++ b/x-pack/plugins/maps/public/feature_catalogue_entry.ts @@ -15,7 +15,7 @@ export const featureCatalogueEntry = { id: APP_ID, title: getAppTitle(), description: i18n.translate('xpack.maps.feature.appDescription', { - defaultMessage: 'Plot your geographic information.', + defaultMessage: 'Plot geographic data.', }), icon: APP_ICON, path: '/app/maps', diff --git a/x-pack/plugins/ml/public/register_feature.ts b/x-pack/plugins/ml/public/register_feature.ts index 7fe0a432a6a56..8ab120ab41700 100644 --- a/x-pack/plugins/ml/public/register_feature.ts +++ b/x-pack/plugins/ml/public/register_feature.ts @@ -27,7 +27,7 @@ export const registerFeature = (home: HomePublicPluginSetup) => { defaultMessage: 'Machine Learning', }), description: i18n.translate('xpack.ml.machineLearningDescription', { - defaultMessage: 'Detect anomalous events.', + defaultMessage: 'Model, predict, and detect.', }), icon: 'machineLearningApp', path: '/app/ml', diff --git a/x-pack/plugins/monitoring/public/plugin.ts b/x-pack/plugins/monitoring/public/plugin.ts index 0da0fc1901548..5abc637a08a16 100644 --- a/x-pack/plugins/monitoring/public/plugin.ts +++ b/x-pack/plugins/monitoring/public/plugin.ts @@ -55,13 +55,15 @@ export class MonitoringPlugin if (home) { home.featureCatalogue.register({ id, - title, + title: i18n.translate('xpack.monitoring.featureCatalogueTitle', { + defaultMessage: 'Monitor the stack', + }), icon, path: '/app/monitoring', homePageSection: FeatureCatalogueHomePageSection.MANAGE_DATA, category: FeatureCatalogueCategory.ADMIN, - description: i18n.translate('xpack.monitoring.monitoringDescription', { - defaultMessage: 'Track the real-time health and performance of your Elastic Stack.', + description: i18n.translate('xpack.monitoring.featureCatalogueDescription', { + defaultMessage: 'Track the real-time health and performance of your deployment.', }), order: 610, }); diff --git a/x-pack/plugins/security/public/plugin.tsx b/x-pack/plugins/security/public/plugin.tsx index 942fab8df78ba..7aa97107528d5 100644 --- a/x-pack/plugins/security/public/plugin.tsx +++ b/x-pack/plugins/security/public/plugin.tsx @@ -116,11 +116,10 @@ export class SecurityPlugin home.featureCatalogue.register({ id: 'security', title: i18n.translate('xpack.security.registerFeature.securitySettingsTitle', { - defaultMessage: 'Security Settings', + defaultMessage: 'Protect your data', }), description: i18n.translate('xpack.security.registerFeature.securitySettingsDescription', { - defaultMessage: - 'Protect your data and easily manage who has access to what with users and roles.', + defaultMessage: 'Control who has access and what tasks they can perform.', }), icon: 'securityApp', path: '/app/management/security/users', diff --git a/x-pack/plugins/security_solution/public/plugin.tsx b/x-pack/plugins/security_solution/public/plugin.tsx index 897ef8a01a988..e8499b4b5801f 100644 --- a/x-pack/plugins/security_solution/public/plugin.tsx +++ b/x-pack/plugins/security_solution/public/plugin.tsx @@ -88,15 +88,15 @@ export class Plugin implements IPlugin Date: Fri, 31 Jul 2020 10:18:03 -0400 Subject: [PATCH 23/29] changed .homSolutionsSection to .homSolutions --- .../components/_solutions_section.scss | 60 +++++++++---------- .../solutions_section/solution_panel.tsx | 10 ++-- .../solutions_section/solution_title.tsx | 10 +--- .../solutions_section/solutions_section.tsx | 4 +- src/plugins/home/public/plugin.ts | 2 +- .../enterprise_search/public/plugin.ts | 2 +- x-pack/plugins/observability/public/plugin.ts | 2 +- .../security_solution/public/plugin.tsx | 2 +- 8 files changed, 44 insertions(+), 48 deletions(-) diff --git a/src/plugins/home/public/application/components/_solutions_section.scss b/src/plugins/home/public/application/components/_solutions_section.scss index 1aae9a28065e4..03bd395f47d3b 100644 --- a/src/plugins/home/public/application/components/_solutions_section.scss +++ b/src/plugins/home/public/application/components/_solutions_section.scss @@ -1,27 +1,27 @@ -.homSolutionsSection { +.homSolutions { margin-top: -$euiSizeXL; min-height: $euiSize * 16; display: flex; - .homSolutionsSection__panel { + .homSolutions__panel { display: flex; align-items: stretch; - .homSolutionsSection__panelHeader { + .homSolutions__panelHeader { border-radius: $euiBorderRadius 0 0 $euiBorderRadius; color: $euiColorEmptyShade; - @include euiBreakpoint("xs", "s") { + @include euiBreakpoint('xs', 's') { border-radius: $euiBorderRadius $euiBorderRadius 0 0; } } - .homSolutionsSection__panelHeaderContent { + .homSolutions__panelHeaderContent { padding: $euiSize; color: $euiColorGhost; } - .homSolutionsSection__panelIcon { + .homSolutions__panelIcon { margin: 0 auto $euiSizeS; padding: $euiSizeS; background-color: $euiColorGhost; @@ -32,82 +32,82 @@ } } - .homSolutionsSection__panelSubtitle { + .homSolutions__panelSubtitle { margin-top: $euiSizeXS; } - .homSolutionsSection__panelDescriptions { + .homSolutions__panelDescriptions { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: $euiSize; - @include euiBreakpoint("xs", "s") { + @include euiBreakpoint('xs', 's') { height: auto; text-align: center; } } } - .homSolutionsSection__container { + .homSolutions__container { flex-basis: $euiSizeXL * 4; - &.homSolutionsSection__single { + &.homSolutions__single { max-width: 50%; - @include euiBreakpoint("xs", "s") { + @include euiBreakpoint('xs', 's') { max-width: 100%; } } } - .homSolutionsSection__multiple { + .homSolutions__multiple { max-width: 50%; } - @include euiBreakpoint("xs", "s") { + @include euiBreakpoint('xs', 's') { flex-direction: column; - .homSolutionsSection__multiple { + .homSolutions__multiple { max-width: 100%; } } - .homSolutionsSection__blueCard { - .homSolutionsSection__panelHeader { + .homSolutions__blueCard { + .homSolutions__panelHeader { background-color: #006bb4; // Hard coded for brand consistency across themes - background-image: url("data:image/png;base64,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"), - url("data:image/png;base64,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"); + background-image: url('data:image/png;base64,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'), + url('data:image/png;base64,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'); background-repeat: no-repeat; background-size: $euiSizeXL * 4, $euiSizeXL * 6; background-position: top 0 left 0, bottom 0 right 0; } } - - .homSolutionsSection__magentaCard { - .homSolutionsSection__panelHeader { + + .homSolutions__magentaCard { + .homSolutions__panelHeader { background-color: #c42373; // Hard coded for brand consistency across themes - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADNSURBVHgB7duxCcIAEEDR08IFrGyz/0pZwVYEIcYF/FWKwHtwXP/hyrvMQbZtu+3rPid3Hf4SKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgcJmDnt6WZfms6/qak/sFeswx3vs85+ScWBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECgKFLx4KCqcIFEJnAAAAAElFTkSuQmCC"); + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADNSURBVHgB7duxCcIAEEDR08IFrGyz/0pZwVYEIcYF/FWKwHtwXP/hyrvMQbZtu+3rPid3Hf4SKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgcJmDnt6WZfms6/qak/sFeswx3vs85+ScWBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECgKFLx4KCqcIFEJnAAAAAElFTkSuQmCC'); background-repeat: no-repeat; background-size: $euiSizeL * 1.5; background-position: top $euiSizeS right $euiSizeS; } } - .homSolutionsSection__greenCard { - .homSolutionsSection__panelHeader { + .homSolutions__greenCard { + .homSolutions__panelHeader { background-color: #017d73; // Hard coded for brand consistency across themes - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABKCAYAAADJwhY8AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANMSURBVHgBzZp7buIwEMYHKC1QuqsF7Up7Hs4Al+Ff4DCcAonrtPuAPjcL1B/YyA0p2JkZK580SuQm6Y+xx4+xiSqumrG+d7/z/rYx9t+WZdZ2lFhXxq4jngfkP2Ov9qquq8jnm9Zu6eBNgD6TImwsoC80ibY1NIe1sRcSVsPYHfFVN9Yy1jG2pUPbFZEUoJMP+kYHWJakAZ0AemuvrPZZJ10B8jsdHFFKWh70BSe07X1GkUoBCCHib+w1qsq1qzivLkU6JDUgTSaT7m63C4ZMCmjgaDwe4zYYMhmgB+cEyPal95IAFsA5fTGQZ4dbdcAzcO7/9wxk7bMH8AfMTvJDUsO+fG2tSfJwvp5qtdqKPgEMEYABekeBo0IEnNODgTzpI0MBfaFhnwUtAQdlBvA+X1gG0Kmw0y0J57QykE9+ASdIHo3hF29cARMO6uYDhhvFGPwfjG0E4BxPxy/gVPFR8/m8MRwOsTosPa3y9KEtigBCpmoAJwV5jGixjtp8EG3xD8noOASKjiT2V6+Jr5YLFo2hDuvkDfEErqa7EZXx4naxWKyIr9b+e6QkU0U/iBcw+2jWnM08E09NtMMqA0JNNUC0ReInlRraE9bodXBOzaoD1rQBuVku9SpmZ7eSL9wjVa864LbqgOpVzJ4bagNyv7/RBozZgymSOuAN8bRTA7RrFM4+DJRpepBbvZAqIDf3jQmrThXbxCS3i5FdduYksXOAjUp5QJt75npvK75whwwclopd4uvV3YgB2m7lG8nouK0rAojkEcnlZTZ+plUCsDEajfom9SYBB31InXA/is64h+8sl0vKsowGgwExBO/99QvKDkXISHQpFxCz2Wx/nU6nVFIniacyHkTOpGevJ2J48sR7UKgHnceCRoiSnvxVVOj2P6C6ZyjHVKljwb7a54KDKtKT2MgpPDECD/ZJSYGedEdaCqW+437BkzgcdG/zOIVKciTgDOTawL2dezfVmYUiyHV+V6lIyQAhDxJwjyHvoPv4SWmFgAiCg1JnFqLgIO6qK1SIVowS0afjUgCin/tNJZOZ2oCIUlRr6aOlWoDwFjZz2CczpQHhKXjsYv8WKilAeAwBgL0R0ZPCHECAvFirzCFb/5hyknPV7zL4DLH0CVGgAAAAAElFTkSuQmCC"), - url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAYAAACbQR1vAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACBSURBVHgB7dpBDcAwDMVQdyzGH9xojEQjtbIfBEu5fGUx62WPjyEPcgVArgDIFQC5AiBXAOQKgFwBkCsAcgVATh9gsW+4vFIngFwBkCsAcgVArgDIFQC5AiBXAORahJjVm9zpCoBcAZArAHIFQK4AyBUAuQIgVwDkCoBcAZDTB/gBLrgCk8OhuvYAAAAASUVORK5CYII="); + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABKCAYAAADJwhY8AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANMSURBVHgBzZp7buIwEMYHKC1QuqsF7Up7Hs4Al+Ff4DCcAonrtPuAPjcL1B/YyA0p2JkZK580SuQm6Y+xx4+xiSqumrG+d7/z/rYx9t+WZdZ2lFhXxq4jngfkP2Ov9qquq8jnm9Zu6eBNgD6TImwsoC80ibY1NIe1sRcSVsPYHfFVN9Yy1jG2pUPbFZEUoJMP+kYHWJakAZ0AemuvrPZZJ10B8jsdHFFKWh70BSe07X1GkUoBCCHib+w1qsq1qzivLkU6JDUgTSaT7m63C4ZMCmjgaDwe4zYYMhmgB+cEyPal95IAFsA5fTGQZ4dbdcAzcO7/9wxk7bMH8AfMTvJDUsO+fG2tSfJwvp5qtdqKPgEMEYABekeBo0IEnNODgTzpI0MBfaFhnwUtAQdlBvA+X1gG0Kmw0y0J57QykE9+ASdIHo3hF29cARMO6uYDhhvFGPwfjG0E4BxPxy/gVPFR8/m8MRwOsTosPa3y9KEtigBCpmoAJwV5jGixjtp8EG3xD8noOASKjiT2V6+Jr5YLFo2hDuvkDfEErqa7EZXx4naxWKyIr9b+e6QkU0U/iBcw+2jWnM08E09NtMMqA0JNNUC0ReInlRraE9bodXBOzaoD1rQBuVku9SpmZ7eSL9wjVa864LbqgOpVzJ4bagNyv7/RBozZgymSOuAN8bRTA7RrFM4+DJRpepBbvZAqIDf3jQmrThXbxCS3i5FdduYksXOAjUp5QJt75npvK75whwwclopd4uvV3YgB2m7lG8nouK0rAojkEcnlZTZ+plUCsDEajfom9SYBB31InXA/is64h+8sl0vKsowGgwExBO/99QvKDkXISHQpFxCz2Wx/nU6nVFIniacyHkTOpGevJ2J48sR7UKgHnceCRoiSnvxVVOj2P6C6ZyjHVKljwb7a54KDKtKT2MgpPDECD/ZJSYGedEdaCqW+437BkzgcdG/zOIVKciTgDOTawL2dezfVmYUiyHV+V6lIyQAhDxJwjyHvoPv4SWmFgAiCg1JnFqLgIO6qK1SIVowS0afjUgCin/tNJZOZ2oCIUlRr6aOlWoDwFjZz2CczpQHhKXjsYv8WKilAeAwBgL0R0ZPCHECAvFirzCFb/5hyknPV7zL4DLH0CVGgAAAAAElFTkSuQmCC'), + url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAYAAACbQR1vAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACBSURBVHgB7dpBDcAwDMVQdyzGH9xojEQjtbIfBEu5fGUx62WPjyEPcgVArgDIFQC5AiBXAOQKgFwBkCsAcgVATh9gsW+4vFIngFwBkCsAcgVArgDIFQC5AiBXAORahJjVm9zpCoBcAZArAHIFQK4AyBUAuQIgVwDkCoBcAZDTB/gBLrgCk8OhuvYAAAAASUVORK5CYII='); background-repeat: no-repeat; background-size: $euiSize * 1.25, $euiSizeXL; background-position: top $euiSizeS left 0, bottom $euiSizeS right $euiSizeS; } } - .homSolutionsSection__blackCard { - .homSolutionsSection__panelHeader { + .homSolutions__blackCard { + .homSolutions__panelHeader { background-color: #343741; // Hard coded for brand consistency across themes - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAYAAACrpQYOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKRSURBVHgB7d3tSgMxEIXhMeqPQoWC9f4vte5Z3dLvTbKZzCQ5LyxqKwg+tNjdUxQR+RJmXpiOvRDDvPD/kRjGhYvPgbETZlK4+fogxDApPLiNGAaFJ7cD40NYtcKL+76FGNUKK/cRo1Ih4n5gvAtTbQ1i+R5iKBcDgYBADMViIRAxFEuBQMRQKhUCEUOhHAi0YLwJK1IuBCJGwbZAoE8hRpG2QqAFg22oBAQCxkFYdqUgEE6dEyOzkhCIGJmVhkDA4PXvxDQgEMcIiWlBIGIkpAmBiBGZNgQiRkQ1IBAxVqoFgThge1FNCMTN1JNqQyBiPMgCAnHAdpMVBOJm6iJLCA7YLrKEWH4+r3+LPYQIMeY8QKDhlyFeINDQGJ4g0LAY3iDQkBgeIdBwmymvEGgoDM8QaJgBm3cINMSArQUI1P2ArRUI1PVmqiUI1C1GaxCoywFbixCouzFCqxCIyxBPnU6nLjBafkQs7YExHdJyPUCg+WmqZYxeIBAwmv3TticItJseFYcWHxm9QaD5RV9rGD1CIGAcJ4xmztr2CoHms7atYPQMgc4Y3p+qeodAwPiZjnfPGCNAoPMgwSvGKBDINcZIEMgtxmgQyCXGiBDIHcaoEAgYx+n48IAxMgQ6v1nGGmN0COQCgxB/4feAF307KwxCXDe/9dgCgxD3mWAQ4nHAqHrplRDPq3odnBCvq4ZBiPWqYBAiLnUMQsSnikGItObtlAYGIdJTmesQIq/iGITIr+h2ihDbKradIsT2imynCFGmzdspQpRr03VwQpQtG4MQ5cvCIIROyRiE0CsJgxC6RW+nCKFf1FyHEHVaxSBEvV5upwhRv4dzHULYdIdBCLuutlOEsO18HZz/u8E+YMgvrbKfmp8y7IEAAAAASUVORK5CYII="); + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAYAAACrpQYOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKRSURBVHgB7d3tSgMxEIXhMeqPQoWC9f4vte5Z3dLvTbKZzCQ5LyxqKwg+tNjdUxQR+RJmXpiOvRDDvPD/kRjGhYvPgbETZlK4+fogxDApPLiNGAaFJ7cD40NYtcKL+76FGNUKK/cRo1Ih4n5gvAtTbQ1i+R5iKBcDgYBADMViIRAxFEuBQMRQKhUCEUOhHAi0YLwJK1IuBCJGwbZAoE8hRpG2QqAFg22oBAQCxkFYdqUgEE6dEyOzkhCIGJmVhkDA4PXvxDQgEMcIiWlBIGIkpAmBiBGZNgQiRkQ1IBAxVqoFgThge1FNCMTN1JNqQyBiPMgCAnHAdpMVBOJm6iJLCA7YLrKEWH4+r3+LPYQIMeY8QKDhlyFeINDQGJ4g0LAY3iDQkBgeIdBwmymvEGgoDM8QaJgBm3cINMSArQUI1P2ArRUI1PVmqiUI1C1GaxCoywFbixCouzFCqxCIyxBPnU6nLjBafkQs7YExHdJyPUCg+WmqZYxeIBAwmv3TticItJseFYcWHxm9QaD5RV9rGD1CIGAcJ4xmztr2CoHms7atYPQMgc4Y3p+qeodAwPiZjnfPGCNAoPMgwSvGKBDINcZIEMgtxmgQyCXGiBDIHcaoEAgYx+n48IAxMgQ6v1nGGmN0COQCgxB/4feAF307KwxCXDe/9dgCgxD3mWAQ4nHAqHrplRDPq3odnBCvq4ZBiPWqYBAiLnUMQsSnikGItObtlAYGIdJTmesQIq/iGITIr+h2ihDbKradIsT2imynCFGmzdspQpRr03VwQpQtG4MQ5cvCIIROyRiE0CsJgxC6RW+nCKFf1FyHEHVaxSBEvV5upwhRv4dzHULYdIdBCLuutlOEsO18HZz/u8E+YMgvrbKfmp8y7IEAAAAASUVORK5CYII='); background-repeat: no-repeat; background-size: $euiSizeL * 2; background-position: top $euiSizeS left $euiSizeS; diff --git a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx index 4b6cb95599fa7..e3721c3badbcd 100644 --- a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx +++ b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx @@ -62,25 +62,25 @@ export const SolutionPanel: FC = ({ solution, apps = [] }) => solution && apps.length ? ( - + - + {getAppDescriptions(apps)} diff --git a/src/plugins/home/public/application/components/solutions_section/solution_title.tsx b/src/plugins/home/public/application/components/solutions_section/solution_title.tsx index 2e91f01a4bd47..c6fd5033c96e9 100644 --- a/src/plugins/home/public/application/components/solutions_section/solution_title.tsx +++ b/src/plugins/home/public/application/components/solutions_section/solution_title.tsx @@ -35,25 +35,21 @@ interface Props { } export const SolutionTitle: FC = ({ title, subtitle, iconType }) => ( - +

{title}

 {subtitle ? ( -

+

{subtitle}

diff --git a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx index 3b9d2b218eceb..0a18499689181 100644 --- a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx +++ b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx @@ -59,11 +59,11 @@ export const SolutionsSection: FC = ({ directories, solutions }) => { solutionAppMap.set(solution.id, apps); }); - const halfWidthClass = 'homSolutionsSection__multiple'; + const halfWidthClass = 'homSolutions__multiple'; return appCount || kibanaApps.length ? ( - + {appCount ? ( diff --git a/src/plugins/home/public/plugin.ts b/src/plugins/home/public/plugin.ts index 267076db215d2..a58c7e6c46213 100644 --- a/src/plugins/home/public/plugin.ts +++ b/src/plugins/home/public/plugin.ts @@ -145,7 +145,7 @@ export class HomePublicPlugin icon: 'logoKibana', path: '/app/dashboards', order: 400, - className: 'homSolutionsSection__blueCard', + className: 'homSolutions__blueCard', }); return { diff --git a/x-pack/plugins/enterprise_search/public/plugin.ts b/x-pack/plugins/enterprise_search/public/plugin.ts index efd1bf11b2f79..5b34971e388b5 100644 --- a/x-pack/plugins/enterprise_search/public/plugin.ts +++ b/x-pack/plugins/enterprise_search/public/plugin.ts @@ -83,7 +83,7 @@ export class EnterpriseSearchPlugin implements Plugin { description: 'Search everything', path: '/app/enterprise_search/app_search', // TODO: update this link to enterprise search landing page order: 100, - className: 'homSolutionsSection__greenCard', + className: 'homSolutions__greenCard', }); plugins.home.featureCatalogue.register({ diff --git a/x-pack/plugins/observability/public/plugin.ts b/x-pack/plugins/observability/public/plugin.ts index 524c167e081c8..01409e7b6779e 100644 --- a/x-pack/plugins/observability/public/plugin.ts +++ b/x-pack/plugins/observability/public/plugin.ts @@ -64,7 +64,7 @@ export class Plugin implements PluginClass Date: Fri, 31 Jul 2020 15:26:30 -0400 Subject: [PATCH 24/29] more class changes --- .../components/_solutions_section.scss | 42 +++++++++---------- .../solutions_section/solution_panel.tsx | 12 +++--- .../solutions_section/solution_title.tsx | 6 +-- .../solutions_section/solutions_section.tsx | 2 +- src/plugins/home/public/plugin.ts | 2 +- .../enterprise_search/public/plugin.ts | 2 +- x-pack/plugins/observability/public/plugin.ts | 2 +- .../security_solution/public/plugin.tsx | 2 +- 8 files changed, 33 insertions(+), 37 deletions(-) diff --git a/src/plugins/home/public/application/components/_solutions_section.scss b/src/plugins/home/public/application/components/_solutions_section.scss index 03bd395f47d3b..6e9d4e41570b2 100644 --- a/src/plugins/home/public/application/components/_solutions_section.scss +++ b/src/plugins/home/public/application/components/_solutions_section.scss @@ -3,25 +3,21 @@ min-height: $euiSize * 16; display: flex; - .homSolutions__panel { + .homSolutionPanel { display: flex; align-items: stretch; - .homSolutions__panelHeader { + .homSolutionPanel__header { border-radius: $euiBorderRadius 0 0 $euiBorderRadius; - color: $euiColorEmptyShade; + padding: $euiSize; + color: $euiColorGhost; @include euiBreakpoint('xs', 's') { border-radius: $euiBorderRadius $euiBorderRadius 0 0; } } - .homSolutions__panelHeaderContent { - padding: $euiSize; - color: $euiColorGhost; - } - - .homSolutions__panelIcon { + .homSolutionPanel__icon { margin: 0 auto $euiSizeS; padding: $euiSizeS; background-color: $euiColorGhost; @@ -32,11 +28,11 @@ } } - .homSolutions__panelSubtitle { + .homSolutionPanelSubtitle { margin-top: $euiSizeXS; } - .homSolutions__panelDescriptions { + .homSolutionPanel__content { height: 100%; display: flex; flex-direction: column; @@ -50,10 +46,10 @@ } } - .homSolutions__container { + .homSolutions__item { flex-basis: $euiSizeXL * 4; - &.homSolutions__single { + &.homSolutions__group--single { max-width: 50%; @include euiBreakpoint('xs', 's') { @@ -62,20 +58,20 @@ } } - .homSolutions__multiple { + .homSolutions__group--multiple { max-width: 50%; } @include euiBreakpoint('xs', 's') { flex-direction: column; - .homSolutions__multiple { + .homSolutions__group--multiple { max-width: 100%; } } - .homSolutions__blueCard { - .homSolutions__panelHeader { + .homSolutionPanel--kibana { + .homSolutionPanel__header { background-color: #006bb4; // Hard coded for brand consistency across themes background-image: url('data:image/png;base64,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'), url('data:image/png;base64,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'); @@ -85,8 +81,8 @@ } } - .homSolutions__magentaCard { - .homSolutions__panelHeader { + .homSolutionPanel--observability { + .homSolutionPanel__header { background-color: #c42373; // Hard coded for brand consistency across themes background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADNSURBVHgB7duxCcIAEEDR08IFrGyz/0pZwVYEIcYF/FWKwHtwXP/hyrvMQbZtu+3rPid3Hf4SKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgcJmDnt6WZfms6/qak/sFeswx3vs85+ScWBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECgKFLx4KCqcIFEJnAAAAAElFTkSuQmCC'); background-repeat: no-repeat; @@ -94,8 +90,8 @@ background-position: top $euiSizeS right $euiSizeS; } } - .homSolutions__greenCard { - .homSolutions__panelHeader { + .homSolutionPanel--enterpriseSearch { + .homSolutionPanel__header { background-color: #017d73; // Hard coded for brand consistency across themes background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABKCAYAAADJwhY8AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANMSURBVHgBzZp7buIwEMYHKC1QuqsF7Up7Hs4Al+Ff4DCcAonrtPuAPjcL1B/YyA0p2JkZK580SuQm6Y+xx4+xiSqumrG+d7/z/rYx9t+WZdZ2lFhXxq4jngfkP2Ov9qquq8jnm9Zu6eBNgD6TImwsoC80ibY1NIe1sRcSVsPYHfFVN9Yy1jG2pUPbFZEUoJMP+kYHWJakAZ0AemuvrPZZJ10B8jsdHFFKWh70BSe07X1GkUoBCCHib+w1qsq1qzivLkU6JDUgTSaT7m63C4ZMCmjgaDwe4zYYMhmgB+cEyPal95IAFsA5fTGQZ4dbdcAzcO7/9wxk7bMH8AfMTvJDUsO+fG2tSfJwvp5qtdqKPgEMEYABekeBo0IEnNODgTzpI0MBfaFhnwUtAQdlBvA+X1gG0Kmw0y0J57QykE9+ASdIHo3hF29cARMO6uYDhhvFGPwfjG0E4BxPxy/gVPFR8/m8MRwOsTosPa3y9KEtigBCpmoAJwV5jGixjtp8EG3xD8noOASKjiT2V6+Jr5YLFo2hDuvkDfEErqa7EZXx4naxWKyIr9b+e6QkU0U/iBcw+2jWnM08E09NtMMqA0JNNUC0ReInlRraE9bodXBOzaoD1rQBuVku9SpmZ7eSL9wjVa864LbqgOpVzJ4bagNyv7/RBozZgymSOuAN8bRTA7RrFM4+DJRpepBbvZAqIDf3jQmrThXbxCS3i5FdduYksXOAjUp5QJt75npvK75whwwclopd4uvV3YgB2m7lG8nouK0rAojkEcnlZTZ+plUCsDEajfom9SYBB31InXA/is64h+8sl0vKsowGgwExBO/99QvKDkXISHQpFxCz2Wx/nU6nVFIniacyHkTOpGevJ2J48sR7UKgHnceCRoiSnvxVVOj2P6C6ZyjHVKljwb7a54KDKtKT2MgpPDECD/ZJSYGedEdaCqW+437BkzgcdG/zOIVKciTgDOTawL2dezfVmYUiyHV+V6lIyQAhDxJwjyHvoPv4SWmFgAiCg1JnFqLgIO6qK1SIVowS0afjUgCin/tNJZOZ2oCIUlRr6aOlWoDwFjZz2CczpQHhKXjsYv8WKilAeAwBgL0R0ZPCHECAvFirzCFb/5hyknPV7zL4DLH0CVGgAAAAAElFTkSuQmCC'), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAYAAACbQR1vAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACBSURBVHgB7dpBDcAwDMVQdyzGH9xojEQjtbIfBEu5fGUx62WPjyEPcgVArgDIFQC5AiBXAOQKgFwBkCsAcgVATh9gsW+4vFIngFwBkCsAcgVArgDIFQC5AiBXAORahJjVm9zpCoBcAZArAHIFQK4AyBUAuQIgVwDkCoBcAZDTB/gBLrgCk8OhuvYAAAAASUVORK5CYII='); @@ -104,8 +100,8 @@ background-position: top $euiSizeS left 0, bottom $euiSizeS right $euiSizeS; } } - .homSolutions__blackCard { - .homSolutions__panelHeader { + .homSolutionPanel--security { + .homSolutionPanel__header { background-color: #343741; // Hard coded for brand consistency across themes background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAYAAACrpQYOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKRSURBVHgB7d3tSgMxEIXhMeqPQoWC9f4vte5Z3dLvTbKZzCQ5LyxqKwg+tNjdUxQR+RJmXpiOvRDDvPD/kRjGhYvPgbETZlK4+fogxDApPLiNGAaFJ7cD40NYtcKL+76FGNUKK/cRo1Ih4n5gvAtTbQ1i+R5iKBcDgYBADMViIRAxFEuBQMRQKhUCEUOhHAi0YLwJK1IuBCJGwbZAoE8hRpG2QqAFg22oBAQCxkFYdqUgEE6dEyOzkhCIGJmVhkDA4PXvxDQgEMcIiWlBIGIkpAmBiBGZNgQiRkQ1IBAxVqoFgThge1FNCMTN1JNqQyBiPMgCAnHAdpMVBOJm6iJLCA7YLrKEWH4+r3+LPYQIMeY8QKDhlyFeINDQGJ4g0LAY3iDQkBgeIdBwmymvEGgoDM8QaJgBm3cINMSArQUI1P2ArRUI1PVmqiUI1C1GaxCoywFbixCouzFCqxCIyxBPnU6nLjBafkQs7YExHdJyPUCg+WmqZYxeIBAwmv3TticItJseFYcWHxm9QaD5RV9rGD1CIGAcJ4xmztr2CoHms7atYPQMgc4Y3p+qeodAwPiZjnfPGCNAoPMgwSvGKBDINcZIEMgtxmgQyCXGiBDIHcaoEAgYx+n48IAxMgQ6v1nGGmN0COQCgxB/4feAF307KwxCXDe/9dgCgxD3mWAQ4nHAqHrplRDPq3odnBCvq4ZBiPWqYBAiLnUMQsSnikGItObtlAYGIdJTmesQIq/iGITIr+h2ihDbKradIsT2imynCFGmzdspQpRr03VwQpQtG4MQ5cvCIIROyRiE0CsJgxC6RW+nCKFf1FyHEHVaxSBEvV5upwhRv4dzHULYdIdBCLuutlOEsO18HZz/u8E+YMgvrbKfmp8y7IEAAAAASUVORK5CYII='); background-repeat: no-repeat; diff --git a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx index e3721c3badbcd..3af48876c8461 100644 --- a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx +++ b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx @@ -62,25 +62,25 @@ export const SolutionPanel: FC = ({ solution, apps = [] }) => solution && apps.length ? ( - + - + {getAppDescriptions(apps)} diff --git a/src/plugins/home/public/application/components/solutions_section/solution_title.tsx b/src/plugins/home/public/application/components/solutions_section/solution_title.tsx index c6fd5033c96e9..ab410ecfb6df1 100644 --- a/src/plugins/home/public/application/components/solutions_section/solution_title.tsx +++ b/src/plugins/home/public/application/components/solutions_section/solution_title.tsx @@ -35,21 +35,21 @@ interface Props { } export const SolutionTitle: FC = ({ title, subtitle, iconType }) => ( - +

{title}

 {subtitle ? ( -

+

{subtitle}

diff --git a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx index 0a18499689181..31944dda00378 100644 --- a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx +++ b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx @@ -59,7 +59,7 @@ export const SolutionsSection: FC = ({ directories, solutions }) => { solutionAppMap.set(solution.id, apps); }); - const halfWidthClass = 'homSolutions__multiple'; + const halfWidthClass = 'homSolutions__group homSolutions__group--multiple'; return appCount || kibanaApps.length ? ( diff --git a/src/plugins/home/public/plugin.ts b/src/plugins/home/public/plugin.ts index a58c7e6c46213..786fa48780173 100644 --- a/src/plugins/home/public/plugin.ts +++ b/src/plugins/home/public/plugin.ts @@ -145,7 +145,7 @@ export class HomePublicPlugin icon: 'logoKibana', path: '/app/dashboards', order: 400, - className: 'homSolutions__blueCard', + className: 'homSolutionPanel--kibana', }); return { diff --git a/x-pack/plugins/enterprise_search/public/plugin.ts b/x-pack/plugins/enterprise_search/public/plugin.ts index 5b34971e388b5..f158c2909c18f 100644 --- a/x-pack/plugins/enterprise_search/public/plugin.ts +++ b/x-pack/plugins/enterprise_search/public/plugin.ts @@ -83,7 +83,7 @@ export class EnterpriseSearchPlugin implements Plugin { description: 'Search everything', path: '/app/enterprise_search/app_search', // TODO: update this link to enterprise search landing page order: 100, - className: 'homSolutions__greenCard', + className: 'homSolutionPanel--enterpriseSearch', }); plugins.home.featureCatalogue.register({ diff --git a/x-pack/plugins/observability/public/plugin.ts b/x-pack/plugins/observability/public/plugin.ts index 01409e7b6779e..de6baf3529c49 100644 --- a/x-pack/plugins/observability/public/plugin.ts +++ b/x-pack/plugins/observability/public/plugin.ts @@ -64,7 +64,7 @@ export class Plugin implements PluginClass Date: Fri, 31 Jul 2020 15:39:01 -0400 Subject: [PATCH 25/29] use app id for modifier class creation --- .../home/public/application/components/_solutions_section.scss | 2 +- .../application/components/solutions_section/solution_panel.tsx | 2 +- x-pack/plugins/enterprise_search/public/plugin.ts | 1 - x-pack/plugins/observability/public/plugin.ts | 1 - x-pack/plugins/security_solution/public/plugin.tsx | 1 - 5 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/plugins/home/public/application/components/_solutions_section.scss b/src/plugins/home/public/application/components/_solutions_section.scss index 6e9d4e41570b2..023f546506de6 100644 --- a/src/plugins/home/public/application/components/_solutions_section.scss +++ b/src/plugins/home/public/application/components/_solutions_section.scss @@ -100,7 +100,7 @@ background-position: top $euiSizeS left 0, bottom $euiSizeS right $euiSizeS; } } - .homSolutionPanel--security { + .homSolutionPanel--securitySolution { .homSolutionPanel__header { background-color: #343741; // Hard coded for brand consistency across themes background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAYAAACrpQYOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKRSURBVHgB7d3tSgMxEIXhMeqPQoWC9f4vte5Z3dLvTbKZzCQ5LyxqKwg+tNjdUxQR+RJmXpiOvRDDvPD/kRjGhYvPgbETZlK4+fogxDApPLiNGAaFJ7cD40NYtcKL+76FGNUKK/cRo1Ih4n5gvAtTbQ1i+R5iKBcDgYBADMViIRAxFEuBQMRQKhUCEUOhHAi0YLwJK1IuBCJGwbZAoE8hRpG2QqAFg22oBAQCxkFYdqUgEE6dEyOzkhCIGJmVhkDA4PXvxDQgEMcIiWlBIGIkpAmBiBGZNgQiRkQ1IBAxVqoFgThge1FNCMTN1JNqQyBiPMgCAnHAdpMVBOJm6iJLCA7YLrKEWH4+r3+LPYQIMeY8QKDhlyFeINDQGJ4g0LAY3iDQkBgeIdBwmymvEGgoDM8QaJgBm3cINMSArQUI1P2ArRUI1PVmqiUI1C1GaxCoywFbixCouzFCqxCIyxBPnU6nLjBafkQs7YExHdJyPUCg+WmqZYxeIBAwmv3TticItJseFYcWHxm9QaD5RV9rGD1CIGAcJ4xmztr2CoHms7atYPQMgc4Y3p+qeodAwPiZjnfPGCNAoPMgwSvGKBDINcZIEMgtxmgQyCXGiBDIHcaoEAgYx+n48IAxMgQ6v1nGGmN0COQCgxB/4feAF307KwxCXDe/9dgCgxD3mWAQ4nHAqHrplRDPq3odnBCvq4ZBiPWqYBAiLnUMQsSnikGItObtlAYGIdJTmesQIq/iGITIr+h2ihDbKradIsT2imynCFGmzdspQpRr03VwQpQtG4MQ5cvCIIROyRiE0CsJgxC6RW+nCKFf1FyHEHVaxSBEvV5upwhRv4dzHULYdIdBCLuutlOEsO18HZz/u8E+YMgvrbKfmp8y7IEAAAAASUVORK5CYII='); diff --git a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx index 3af48876c8461..f2b696cb4956d 100644 --- a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx +++ b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx @@ -69,7 +69,7 @@ export const SolutionPanel: FC = ({ solution, apps = [] }) => > diff --git a/x-pack/plugins/enterprise_search/public/plugin.ts b/x-pack/plugins/enterprise_search/public/plugin.ts index f158c2909c18f..f2a00d2f2bfa1 100644 --- a/x-pack/plugins/enterprise_search/public/plugin.ts +++ b/x-pack/plugins/enterprise_search/public/plugin.ts @@ -83,7 +83,6 @@ export class EnterpriseSearchPlugin implements Plugin { description: 'Search everything', path: '/app/enterprise_search/app_search', // TODO: update this link to enterprise search landing page order: 100, - className: 'homSolutionPanel--enterpriseSearch', }); plugins.home.featureCatalogue.register({ diff --git a/x-pack/plugins/observability/public/plugin.ts b/x-pack/plugins/observability/public/plugin.ts index de6baf3529c49..ba57eecaf37f8 100644 --- a/x-pack/plugins/observability/public/plugin.ts +++ b/x-pack/plugins/observability/public/plugin.ts @@ -64,7 +64,6 @@ export class Plugin implements PluginClass Date: Fri, 31 Jul 2020 15:43:16 -0400 Subject: [PATCH 26/29] rm missed class --- src/plugins/home/public/plugin.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/plugins/home/public/plugin.ts b/src/plugins/home/public/plugin.ts index 786fa48780173..0a3cbbfea608b 100644 --- a/src/plugins/home/public/plugin.ts +++ b/src/plugins/home/public/plugin.ts @@ -145,7 +145,6 @@ export class HomePublicPlugin icon: 'logoKibana', path: '/app/dashboards', order: 400, - className: 'homSolutionPanel--kibana', }); return { From 2db61330a7fef0bce5a58e3d00db7e7176bbffa7 Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Fri, 31 Jul 2020 20:39:45 -0400 Subject: [PATCH 27/29] clean up scss --- .../components/_solutions_section.scss | 182 +++++++++--------- .../solutions_section/solution_panel.tsx | 1 + .../solutions_section/solution_title.tsx | 4 +- .../solutions_section/solutions_section.tsx | 5 +- 4 files changed, 94 insertions(+), 98 deletions(-) diff --git a/src/plugins/home/public/application/components/_solutions_section.scss b/src/plugins/home/public/application/components/_solutions_section.scss index 023f546506de6..99bc18414635a 100644 --- a/src/plugins/home/public/application/components/_solutions_section.scss +++ b/src/plugins/home/public/application/components/_solutions_section.scss @@ -1,112 +1,106 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + .homSolutions { margin-top: -$euiSizeXL; min-height: $euiSize * 16; - display: flex; - - .homSolutionPanel { - display: flex; - align-items: stretch; - - .homSolutionPanel__header { - border-radius: $euiBorderRadius 0 0 $euiBorderRadius; - padding: $euiSize; - color: $euiColorGhost; - - @include euiBreakpoint('xs', 's') { - border-radius: $euiBorderRadius $euiBorderRadius 0 0; - } - } - - .homSolutionPanel__icon { - margin: 0 auto $euiSizeS; - padding: $euiSizeS; - background-color: $euiColorGhost; - box-shadow: none; - - .euiIcon__fillNegative { - fill: $euiColorInk; - } - } - - .homSolutionPanelSubtitle { - margin-top: $euiSizeXS; - } - - .homSolutionPanel__content { - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - padding: $euiSize; - - @include euiBreakpoint('xs', 's') { - height: auto; - text-align: center; - } - } - } - .homSolutions__item { - flex-basis: $euiSizeXL * 4; + @include euiBreakpoint('xs', 's') { + flex-direction: column; + } +} - &.homSolutions__group--single { - max-width: 50%; +// Don't need .homSolutions__group--single or .homSolutions__group--multiple? +.homSolutions__group { + max-width: 50%; - @include euiBreakpoint('xs', 's') { - max-width: 100%; - } - } + @include euiBreakpoint('xs', 's') { + max-width: none; } +} - .homSolutions__group--multiple { - max-width: 50%; - } +// Don't need .homSolutions__item? - @include euiBreakpoint('xs', 's') { - flex-direction: column; +.homSolutionPanel { + align-items: stretch; // Necessary because element is a button + display: flex !important; + flex-direction: column; + overflow: hidden; +} - .homSolutions__group--multiple { - max-width: 100%; - } +.homSolutionPanel__header { + color: $euiColorEmptyShade; + padding: $euiSize; +} + +.homSolutionPanel__icon { + background-color: $euiColorEmptyShade !important; + box-shadow: none !important; + margin: 0 auto $euiSizeS; + padding: $euiSizeS; + + .euiIcon__fillNegative { + fill: $euiColorInk; } +} + +.homSolutionPanel__subtitle { + margin-top: $euiSizeXS; +} - .homSolutionPanel--kibana { - .homSolutionPanel__header { - background-color: #006bb4; // Hard coded for brand consistency across themes - background-image: url('data:image/png;base64,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'), - url('data:image/png;base64,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'); - background-repeat: no-repeat; - background-size: $euiSizeXL * 4, $euiSizeXL * 6; - background-position: top 0 left 0, bottom 0 right 0; - } +.homSolutionPanel__content { + flex-direction: column; + justify-content: center; + padding: $euiSize; + + @include euiBreakpoint('xs', 's') { + text-align: center; } +} - .homSolutionPanel--observability { - .homSolutionPanel__header { - background-color: #c42373; // Hard coded for brand consistency across themes - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADNSURBVHgB7duxCcIAEEDR08IFrGyz/0pZwVYEIcYF/FWKwHtwXP/hyrvMQbZtu+3rPid3Hf4SKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgcJmDnt6WZfms6/qak/sFeswx3vs85+ScWBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECgKFLx4KCqcIFEJnAAAAAElFTkSuQmCC'); - background-repeat: no-repeat; - background-size: $euiSizeL * 1.5; - background-position: top $euiSizeS right $euiSizeS; - } +.homSolutionPanel__header { + background-color: $euiColorPrimary; + background-image: url('data:image/png;base64,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'), + url('data:image/png;base64,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'); + background-repeat: no-repeat; + background-position: top 0 left 0, bottom 0 right 0; + background-size: $euiSizeXL * 4, $euiSizeXL * 6; + + .homSolutionPanel--enterpriseSearch & { + background-color: $euiColorSecondary; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABKCAYAAADJwhY8AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANMSURBVHgBzZp7buIwEMYHKC1QuqsF7Up7Hs4Al+Ff4DCcAonrtPuAPjcL1B/YyA0p2JkZK580SuQm6Y+xx4+xiSqumrG+d7/z/rYx9t+WZdZ2lFhXxq4jngfkP2Ov9qquq8jnm9Zu6eBNgD6TImwsoC80ibY1NIe1sRcSVsPYHfFVN9Yy1jG2pUPbFZEUoJMP+kYHWJakAZ0AemuvrPZZJ10B8jsdHFFKWh70BSe07X1GkUoBCCHib+w1qsq1qzivLkU6JDUgTSaT7m63C4ZMCmjgaDwe4zYYMhmgB+cEyPal95IAFsA5fTGQZ4dbdcAzcO7/9wxk7bMH8AfMTvJDUsO+fG2tSfJwvp5qtdqKPgEMEYABekeBo0IEnNODgTzpI0MBfaFhnwUtAQdlBvA+X1gG0Kmw0y0J57QykE9+ASdIHo3hF29cARMO6uYDhhvFGPwfjG0E4BxPxy/gVPFR8/m8MRwOsTosPa3y9KEtigBCpmoAJwV5jGixjtp8EG3xD8noOASKjiT2V6+Jr5YLFo2hDuvkDfEErqa7EZXx4naxWKyIr9b+e6QkU0U/iBcw+2jWnM08E09NtMMqA0JNNUC0ReInlRraE9bodXBOzaoD1rQBuVku9SpmZ7eSL9wjVa864LbqgOpVzJ4bagNyv7/RBozZgymSOuAN8bRTA7RrFM4+DJRpepBbvZAqIDf3jQmrThXbxCS3i5FdduYksXOAjUp5QJt75npvK75whwwclopd4uvV3YgB2m7lG8nouK0rAojkEcnlZTZ+plUCsDEajfom9SYBB31InXA/is64h+8sl0vKsowGgwExBO/99QvKDkXISHQpFxCz2Wx/nU6nVFIniacyHkTOpGevJ2J48sR7UKgHnceCRoiSnvxVVOj2P6C6ZyjHVKljwb7a54KDKtKT2MgpPDECD/ZJSYGedEdaCqW+437BkzgcdG/zOIVKciTgDOTawL2dezfVmYUiyHV+V6lIyQAhDxJwjyHvoPv4SWmFgAiCg1JnFqLgIO6qK1SIVowS0afjUgCin/tNJZOZ2oCIUlRr6aOlWoDwFjZz2CczpQHhKXjsYv8WKilAeAwBgL0R0ZPCHECAvFirzCFb/5hyknPV7zL4DLH0CVGgAAAAAElFTkSuQmCC'), + url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAYAAACbQR1vAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACBSURBVHgB7dpBDcAwDMVQdyzGH9xojEQjtbIfBEu5fGUx62WPjyEPcgVArgDIFQC5AiBXAOQKgFwBkCsAcgVATh9gsW+4vFIngFwBkCsAcgVArgDIFQC5AiBXAORahJjVm9zpCoBcAZArAHIFQK4AyBUAuQIgVwDkCoBcAZDTB/gBLrgCk8OhuvYAAAAASUVORK5CYII='); + background-position: top $euiSizeS left 0, bottom $euiSizeS right $euiSizeS; + background-size: $euiSize * 1.25, $euiSizeXL; } - .homSolutionPanel--enterpriseSearch { - .homSolutionPanel__header { - background-color: #017d73; // Hard coded for brand consistency across themes - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABKCAYAAADJwhY8AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANMSURBVHgBzZp7buIwEMYHKC1QuqsF7Up7Hs4Al+Ff4DCcAonrtPuAPjcL1B/YyA0p2JkZK580SuQm6Y+xx4+xiSqumrG+d7/z/rYx9t+WZdZ2lFhXxq4jngfkP2Ov9qquq8jnm9Zu6eBNgD6TImwsoC80ibY1NIe1sRcSVsPYHfFVN9Yy1jG2pUPbFZEUoJMP+kYHWJakAZ0AemuvrPZZJ10B8jsdHFFKWh70BSe07X1GkUoBCCHib+w1qsq1qzivLkU6JDUgTSaT7m63C4ZMCmjgaDwe4zYYMhmgB+cEyPal95IAFsA5fTGQZ4dbdcAzcO7/9wxk7bMH8AfMTvJDUsO+fG2tSfJwvp5qtdqKPgEMEYABekeBo0IEnNODgTzpI0MBfaFhnwUtAQdlBvA+X1gG0Kmw0y0J57QykE9+ASdIHo3hF29cARMO6uYDhhvFGPwfjG0E4BxPxy/gVPFR8/m8MRwOsTosPa3y9KEtigBCpmoAJwV5jGixjtp8EG3xD8noOASKjiT2V6+Jr5YLFo2hDuvkDfEErqa7EZXx4naxWKyIr9b+e6QkU0U/iBcw+2jWnM08E09NtMMqA0JNNUC0ReInlRraE9bodXBOzaoD1rQBuVku9SpmZ7eSL9wjVa864LbqgOpVzJ4bagNyv7/RBozZgymSOuAN8bRTA7RrFM4+DJRpepBbvZAqIDf3jQmrThXbxCS3i5FdduYksXOAjUp5QJt75npvK75whwwclopd4uvV3YgB2m7lG8nouK0rAojkEcnlZTZ+plUCsDEajfom9SYBB31InXA/is64h+8sl0vKsowGgwExBO/99QvKDkXISHQpFxCz2Wx/nU6nVFIniacyHkTOpGevJ2J48sR7UKgHnceCRoiSnvxVVOj2P6C6ZyjHVKljwb7a54KDKtKT2MgpPDECD/ZJSYGedEdaCqW+437BkzgcdG/zOIVKciTgDOTawL2dezfVmYUiyHV+V6lIyQAhDxJwjyHvoPv4SWmFgAiCg1JnFqLgIO6qK1SIVowS0afjUgCin/tNJZOZ2oCIUlRr6aOlWoDwFjZz2CczpQHhKXjsYv8WKilAeAwBgL0R0ZPCHECAvFirzCFb/5hyknPV7zL4DLH0CVGgAAAAAElFTkSuQmCC'), - url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAYAAACbQR1vAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACBSURBVHgB7dpBDcAwDMVQdyzGH9xojEQjtbIfBEu5fGUx62WPjyEPcgVArgDIFQC5AiBXAOQKgFwBkCsAcgVATh9gsW+4vFIngFwBkCsAcgVArgDIFQC5AiBXAORahJjVm9zpCoBcAZArAHIFQK4AyBUAuQIgVwDkCoBcAZDTB/gBLrgCk8OhuvYAAAAASUVORK5CYII='); - background-repeat: no-repeat; - background-size: $euiSize * 1.25, $euiSizeXL; - background-position: top $euiSizeS left 0, bottom $euiSizeS right $euiSizeS; - } + + .homSolutionPanel--observability & { + background-color: $euiColorAccent; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADNSURBVHgB7duxCcIAEEDR08IFrGyz/0pZwVYEIcYF/FWKwHtwXP/hyrvMQbZtu+3rPid3Hf4SKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgcJmDnt6WZfms6/qak/sFeswx3vs85+ScWBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECgKFLx4KCqcIFEJnAAAAAElFTkSuQmCC'); + background-position: top $euiSizeS right $euiSizeS; + background-size: $euiSizeL * 1.5; } - .homSolutionPanel--securitySolution { - .homSolutionPanel__header { - background-color: #343741; // Hard coded for brand consistency across themes - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAYAAACrpQYOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKRSURBVHgB7d3tSgMxEIXhMeqPQoWC9f4vte5Z3dLvTbKZzCQ5LyxqKwg+tNjdUxQR+RJmXpiOvRDDvPD/kRjGhYvPgbETZlK4+fogxDApPLiNGAaFJ7cD40NYtcKL+76FGNUKK/cRo1Ih4n5gvAtTbQ1i+R5iKBcDgYBADMViIRAxFEuBQMRQKhUCEUOhHAi0YLwJK1IuBCJGwbZAoE8hRpG2QqAFg22oBAQCxkFYdqUgEE6dEyOzkhCIGJmVhkDA4PXvxDQgEMcIiWlBIGIkpAmBiBGZNgQiRkQ1IBAxVqoFgThge1FNCMTN1JNqQyBiPMgCAnHAdpMVBOJm6iJLCA7YLrKEWH4+r3+LPYQIMeY8QKDhlyFeINDQGJ4g0LAY3iDQkBgeIdBwmymvEGgoDM8QaJgBm3cINMSArQUI1P2ArRUI1PVmqiUI1C1GaxCoywFbixCouzFCqxCIyxBPnU6nLjBafkQs7YExHdJyPUCg+WmqZYxeIBAwmv3TticItJseFYcWHxm9QaD5RV9rGD1CIGAcJ4xmztr2CoHms7atYPQMgc4Y3p+qeodAwPiZjnfPGCNAoPMgwSvGKBDINcZIEMgtxmgQyCXGiBDIHcaoEAgYx+n48IAxMgQ6v1nGGmN0COQCgxB/4feAF307KwxCXDe/9dgCgxD3mWAQ4nHAqHrplRDPq3odnBCvq4ZBiPWqYBAiLnUMQsSnikGItObtlAYGIdJTmesQIq/iGITIr+h2ihDbKradIsT2imynCFGmzdspQpRr03VwQpQtG4MQ5cvCIIROyRiE0CsJgxC6RW+nCKFf1FyHEHVaxSBEvV5upwhRv4dzHULYdIdBCLuutlOEsO18HZz/u8E+YMgvrbKfmp8y7IEAAAAASUVORK5CYII='); - background-repeat: no-repeat; - background-size: $euiSizeL * 2; - background-position: top $euiSizeS left $euiSizeS; - } + + .homSolutionPanel--securitySolution & { + background-color: $euiColorDarkestShade; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAYAAACrpQYOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKRSURBVHgB7d3tSgMxEIXhMeqPQoWC9f4vte5Z3dLvTbKZzCQ5LyxqKwg+tNjdUxQR+RJmXpiOvRDDvPD/kRjGhYvPgbETZlK4+fogxDApPLiNGAaFJ7cD40NYtcKL+76FGNUKK/cRo1Ih4n5gvAtTbQ1i+R5iKBcDgYBADMViIRAxFEuBQMRQKhUCEUOhHAi0YLwJK1IuBCJGwbZAoE8hRpG2QqAFg22oBAQCxkFYdqUgEE6dEyOzkhCIGJmVhkDA4PXvxDQgEMcIiWlBIGIkpAmBiBGZNgQiRkQ1IBAxVqoFgThge1FNCMTN1JNqQyBiPMgCAnHAdpMVBOJm6iJLCA7YLrKEWH4+r3+LPYQIMeY8QKDhlyFeINDQGJ4g0LAY3iDQkBgeIdBwmymvEGgoDM8QaJgBm3cINMSArQUI1P2ArRUI1PVmqiUI1C1GaxCoywFbixCouzFCqxCIyxBPnU6nLjBafkQs7YExHdJyPUCg+WmqZYxeIBAwmv3TticItJseFYcWHxm9QaD5RV9rGD1CIGAcJ4xmztr2CoHms7atYPQMgc4Y3p+qeodAwPiZjnfPGCNAoPMgwSvGKBDINcZIEMgtxmgQyCXGiBDIHcaoEAgYx+n48IAxMgQ6v1nGGmN0COQCgxB/4feAF307KwxCXDe/9dgCgxD3mWAQ4nHAqHrplRDPq3odnBCvq4ZBiPWqYBAiLnUMQsSnikGItObtlAYGIdJTmesQIq/iGITIr+h2ihDbKradIsT2imynCFGmzdspQpRr03VwQpQtG4MQ5cvCIIROyRiE0CsJgxC6RW+nCKFf1FyHEHVaxSBEvV5upwhRv4dzHULYdIdBCLuutlOEsO18HZz/u8E+YMgvrbKfmp8y7IEAAAAASUVORK5CYII='); + background-position: top $euiSizeS left $euiSizeS; + background-size: $euiSizeL * 2; } } diff --git a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx index f2b696cb4956d..29ac6ad3c409f 100644 --- a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx +++ b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx @@ -80,6 +80,7 @@ export const SolutionPanel: FC = ({ solution, apps = [] }) => subtitle={solution.description} /> + {getAppDescriptions(apps)} diff --git a/src/plugins/home/public/application/components/solutions_section/solution_title.tsx b/src/plugins/home/public/application/components/solutions_section/solution_title.tsx index ab410ecfb6df1..8fda5d88808dc 100644 --- a/src/plugins/home/public/application/components/solutions_section/solution_title.tsx +++ b/src/plugins/home/public/application/components/solutions_section/solution_title.tsx @@ -44,12 +44,14 @@ export const SolutionTitle: FC = ({ title, subtitle, iconType }) => ( size="l" className="homSolutionPanel__icon" /> +

{title}

 + {subtitle ? ( -

+

{subtitle}

diff --git a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx index 31944dda00378..9be437044acfb 100644 --- a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx +++ b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx @@ -59,13 +59,11 @@ export const SolutionsSection: FC = ({ directories, solutions }) => { solutionAppMap.set(solution.id, apps); }); - const halfWidthClass = 'homSolutions__group homSolutions__group--multiple'; - return appCount || kibanaApps.length ? ( {appCount ? ( - + {solutions.map((solution) => ( = ({ directories, solutions }) => { + ) : ( From 7a309cf1f3d0abab434ab4c9646a544484be09eb Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Fri, 31 Jul 2020 20:49:40 -0400 Subject: [PATCH 28/29] final clean up --- .../public/application/components/_solutions_section.scss | 7 ------- .../components/solutions_section/solution_panel.tsx | 4 +--- .../components/solutions_section/solutions_section.tsx | 2 +- 3 files changed, 2 insertions(+), 11 deletions(-) diff --git a/src/plugins/home/public/application/components/_solutions_section.scss b/src/plugins/home/public/application/components/_solutions_section.scss index 99bc18414635a..49fb1fd941c48 100644 --- a/src/plugins/home/public/application/components/_solutions_section.scss +++ b/src/plugins/home/public/application/components/_solutions_section.scss @@ -26,7 +26,6 @@ } } -// Don't need .homSolutions__group--single or .homSolutions__group--multiple? .homSolutions__group { max-width: 50%; @@ -35,8 +34,6 @@ } } -// Don't need .homSolutions__item? - .homSolutionPanel { align-items: stretch; // Necessary because element is a button display: flex !important; @@ -54,10 +51,6 @@ box-shadow: none !important; margin: 0 auto $euiSizeS; padding: $euiSizeS; - - .euiIcon__fillNegative { - fill: $euiColorInk; - } } .homSolutionPanel__subtitle { diff --git a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx index 29ac6ad3c409f..fd7468bfe0480 100644 --- a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx +++ b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx @@ -62,9 +62,7 @@ export const SolutionPanel: FC = ({ solution, apps = [] }) => solution && apps.length ? ( = ({ directories, solutions }) => { {appCount ? ( - + {solutions.map((solution) => ( Date: Wed, 5 Aug 2020 16:47:15 -0400 Subject: [PATCH 29/29] correct merge conflict issues --- .../components/_solutions_panel.scss | 177 ++++++++---------- .../components/_solutions_section.scss | 99 ---------- .../solutions_panel/solution_card.tsx | 13 +- .../solutions_panel/solution_title.tsx | 12 +- .../solutions_panel/solutions_panel.tsx | 7 +- .../components/solutions_section/index.ts | 20 -- .../solutions_section/solution_panel.tsx | 88 --------- .../solutions_section/solution_title.tsx | 61 ------ .../solutions_section/solutions_section.tsx | 90 --------- 9 files changed, 95 insertions(+), 472 deletions(-) delete mode 100644 src/plugins/home/public/application/components/_solutions_section.scss delete mode 100644 src/plugins/home/public/application/components/solutions_section/index.ts delete mode 100644 src/plugins/home/public/application/components/solutions_section/solution_panel.tsx delete mode 100644 src/plugins/home/public/application/components/solutions_section/solution_title.tsx delete mode 100644 src/plugins/home/public/application/components/solutions_section/solutions_section.tsx diff --git a/src/plugins/home/public/application/components/_solutions_panel.scss b/src/plugins/home/public/application/components/_solutions_panel.scss index 1aae9a28065e4..49fb1fd941c48 100644 --- a/src/plugins/home/public/application/components/_solutions_panel.scss +++ b/src/plugins/home/public/application/components/_solutions_panel.scss @@ -1,116 +1,99 @@ -.homSolutionsSection { +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +.homSolutions { margin-top: -$euiSizeXL; min-height: $euiSize * 16; - display: flex; - .homSolutionsSection__panel { - display: flex; - align-items: stretch; - - .homSolutionsSection__panelHeader { - border-radius: $euiBorderRadius 0 0 $euiBorderRadius; - color: $euiColorEmptyShade; - - @include euiBreakpoint("xs", "s") { - border-radius: $euiBorderRadius $euiBorderRadius 0 0; - } - } - - .homSolutionsSection__panelHeaderContent { - padding: $euiSize; - color: $euiColorGhost; - } + @include euiBreakpoint('xs', 's') { + flex-direction: column; + } +} - .homSolutionsSection__panelIcon { - margin: 0 auto $euiSizeS; - padding: $euiSizeS; - background-color: $euiColorGhost; - box-shadow: none; +.homSolutions__group { + max-width: 50%; - .euiIcon__fillNegative { - fill: $euiColorInk; - } - } + @include euiBreakpoint('xs', 's') { + max-width: none; + } +} - .homSolutionsSection__panelSubtitle { - margin-top: $euiSizeXS; - } +.homSolutionPanel { + align-items: stretch; // Necessary because element is a button + display: flex !important; + flex-direction: column; + overflow: hidden; +} - .homSolutionsSection__panelDescriptions { - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - padding: $euiSize; +.homSolutionPanel__header { + color: $euiColorEmptyShade; + padding: $euiSize; +} - @include euiBreakpoint("xs", "s") { - height: auto; - text-align: center; - } - } - } +.homSolutionPanel__icon { + background-color: $euiColorEmptyShade !important; + box-shadow: none !important; + margin: 0 auto $euiSizeS; + padding: $euiSizeS; +} - .homSolutionsSection__container { - flex-basis: $euiSizeXL * 4; +.homSolutionPanel__subtitle { + margin-top: $euiSizeXS; +} - &.homSolutionsSection__single { - max-width: 50%; +.homSolutionPanel__content { + flex-direction: column; + justify-content: center; + padding: $euiSize; - @include euiBreakpoint("xs", "s") { - max-width: 100%; - } - } + @include euiBreakpoint('xs', 's') { + text-align: center; } +} - .homSolutionsSection__multiple { - max-width: 50%; +.homSolutionPanel__header { + background-color: $euiColorPrimary; + background-image: url('data:image/png;base64,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'), + url('data:image/png;base64,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'); + background-repeat: no-repeat; + background-position: top 0 left 0, bottom 0 right 0; + background-size: $euiSizeXL * 4, $euiSizeXL * 6; + + .homSolutionPanel--enterpriseSearch & { + background-color: $euiColorSecondary; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABKCAYAAADJwhY8AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANMSURBVHgBzZp7buIwEMYHKC1QuqsF7Up7Hs4Al+Ff4DCcAonrtPuAPjcL1B/YyA0p2JkZK580SuQm6Y+xx4+xiSqumrG+d7/z/rYx9t+WZdZ2lFhXxq4jngfkP2Ov9qquq8jnm9Zu6eBNgD6TImwsoC80ibY1NIe1sRcSVsPYHfFVN9Yy1jG2pUPbFZEUoJMP+kYHWJakAZ0AemuvrPZZJ10B8jsdHFFKWh70BSe07X1GkUoBCCHib+w1qsq1qzivLkU6JDUgTSaT7m63C4ZMCmjgaDwe4zYYMhmgB+cEyPal95IAFsA5fTGQZ4dbdcAzcO7/9wxk7bMH8AfMTvJDUsO+fG2tSfJwvp5qtdqKPgEMEYABekeBo0IEnNODgTzpI0MBfaFhnwUtAQdlBvA+X1gG0Kmw0y0J57QykE9+ASdIHo3hF29cARMO6uYDhhvFGPwfjG0E4BxPxy/gVPFR8/m8MRwOsTosPa3y9KEtigBCpmoAJwV5jGixjtp8EG3xD8noOASKjiT2V6+Jr5YLFo2hDuvkDfEErqa7EZXx4naxWKyIr9b+e6QkU0U/iBcw+2jWnM08E09NtMMqA0JNNUC0ReInlRraE9bodXBOzaoD1rQBuVku9SpmZ7eSL9wjVa864LbqgOpVzJ4bagNyv7/RBozZgymSOuAN8bRTA7RrFM4+DJRpepBbvZAqIDf3jQmrThXbxCS3i5FdduYksXOAjUp5QJt75npvK75whwwclopd4uvV3YgB2m7lG8nouK0rAojkEcnlZTZ+plUCsDEajfom9SYBB31InXA/is64h+8sl0vKsowGgwExBO/99QvKDkXISHQpFxCz2Wx/nU6nVFIniacyHkTOpGevJ2J48sR7UKgHnceCRoiSnvxVVOj2P6C6ZyjHVKljwb7a54KDKtKT2MgpPDECD/ZJSYGedEdaCqW+437BkzgcdG/zOIVKciTgDOTawL2dezfVmYUiyHV+V6lIyQAhDxJwjyHvoPv4SWmFgAiCg1JnFqLgIO6qK1SIVowS0afjUgCin/tNJZOZ2oCIUlRr6aOlWoDwFjZz2CczpQHhKXjsYv8WKilAeAwBgL0R0ZPCHECAvFirzCFb/5hyknPV7zL4DLH0CVGgAAAAAElFTkSuQmCC'), + url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAYAAACbQR1vAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACBSURBVHgB7dpBDcAwDMVQdyzGH9xojEQjtbIfBEu5fGUx62WPjyEPcgVArgDIFQC5AiBXAOQKgFwBkCsAcgVATh9gsW+4vFIngFwBkCsAcgVArgDIFQC5AiBXAORahJjVm9zpCoBcAZArAHIFQK4AyBUAuQIgVwDkCoBcAZDTB/gBLrgCk8OhuvYAAAAASUVORK5CYII='); + background-position: top $euiSizeS left 0, bottom $euiSizeS right $euiSizeS; + background-size: $euiSize * 1.25, $euiSizeXL; } - @include euiBreakpoint("xs", "s") { - flex-direction: column; - - .homSolutionsSection__multiple { - max-width: 100%; - } + .homSolutionPanel--observability & { + background-color: $euiColorAccent; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADNSURBVHgB7duxCcIAEEDR08IFrGyz/0pZwVYEIcYF/FWKwHtwXP/hyrvMQbZtu+3rPid3Hf4SKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgcJmDnt6WZfms6/qak/sFeswx3vs85+ScWBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECgKFLx4KCqcIFEJnAAAAAElFTkSuQmCC'); + background-position: top $euiSizeS right $euiSizeS; + background-size: $euiSizeL * 1.5; } - .homSolutionsSection__blueCard { - .homSolutionsSection__panelHeader { - background-color: #006bb4; // Hard coded for brand consistency across themes - background-image: url("data:image/png;base64,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"), - url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAFKCAYAAAAwgcXoAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAjGSURBVHgB7d27ctRaFoDh1WBzsQ9wLkVsngHHfglSIOUdgJQiJSfmIUjhJUwGjiGaU7hmzoB7vLA1GPCt21vSlvR9Vao+5lAFbbf+EktbUgQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABUaxYAEzCfz/NldX9biTK+zGaz/0aLSv1FAYbg6v52I8r4e39rNdCXAoAqCTRApQQaoFICDVApgQaolEADVEqgASol0ACVEmiASgk0QKUEGqBSAg1QKYEGqJRAA1RKoAEqJdAAlRJogEp5ogowJV/3t/9EGV8DAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFjELABOMZ/Po6TZrL/sDO29rATA6Vb3t/UoY29/+1f04DDO1w63Ev59uLVGoIGz5GHi9Sjja/QU6EPZvFLv5Uu07FIAUCWBBqiUQANUSqABKiXQAJUSaIBKCTRApQQaoFICDVApgQaolEADVEqgASol0ACVEmiASgl0ANRJoAEqJdAAlfJEFeAs+RSUv6OMsg8FXNw/Ue69/BMAAAAAAAAAAAAAAAAAAAAAQCdmAcBpspNn3flzL1q4EZRAA2PRhLR5vXz4683ryk+/7+j/ixO+vqiM9t6Rr78e899ffvq9za9/FWigdhnNbNVqfA/wyuHr5fgxxqMi0EDfMq4Z3ya4K4fbaMN7XgINdKGJ8OUjW/M1JxBooKSj4c3X5mhYa5bgmwYsoxlHXA0hbo1vJnCW5gRds10Jo4lOCDTws4xvRjiPjvOoeDXohUDDtB09Or4W31dTUAE/CJiWJshNjK8E1RJoGDdBHjCBhvHJCBtZjIAfHAxf7scZ46uHr/brkfCDhGFqVllcCWOL0RJoGIajs+S16Hjfnc3K/XHzefG7cp7b0N6HQEO9qhhdbG5uxosXL6KET58+xb1796IPGef79+/Ho0ePooSXL1/Gq1evok0rAdSkiXIeJVdxgm9tbS22traihJ2dnejTxsZGsffy+vXraJtAQ/+qizJ1EGjoRzNTvhGizAkEGrqVKy56OdHH8Ag0tC9vPpRBXg9RZgECDe3IEGeU82jZOmWWItBQlhEGxQg0XFyG+Lc4CLN9imJ8mGB5ebScc+W8kMTRMsUJNCzGbJnOCDScj5UYdE6g4XR5lHwjHC3TA4GGXx299FqY6Y1Aw3fNagxjDKog0CDMVEqgmbIcX+QY43pAhQSaKXLij0EQaKZEmJfU52OqShvSexFopkCYL2B7ezsePnwYJezu7kZfMsz5FJQPHz5ECe/evYu2OSHCmAkzgybQjJEwMwoCzZgIM6Mi0IxB3ifjZhxc/QejIdAMWX5+84h5PWCEBJohcuUfk+DDzdBklPOo2WeX0fMhZyjyxN/vcTBvhkkQaGq3GgcnAK3MYHIEmlo5AcjkCTQ1MmeGsANQlxxj5DhjNQCBpgr5ObwV7ssMPxBo+macASewU9AX982AMwg0XbM6A85JoOmSi01gAQJNF9xtDpYg0LTNSUBYkp2GtuRRc44znASEJQk0bXDUDAXYgSjJUTMUJNCU4qgZCrMzcVGOmqElAs1F5LK5jLPPEbTAjsUyXA0IHRBoFuVqQOiIQLOIPGr+LZic2axcKubzefSl5PtIbb+XSwFny6Plv0KcJ2lrayv29vaKbO/fv4++ZJyfPHlS7L08fvw42rYScDonAqEnAs1JnAiEngk0x8mRxh/h2YDQK4HmZ2txcGtQIw3omUBzVIbZSAMqIdAkIw2okEDjwhOolEBPW44zbgZQJYGepjwBeGt/ux5AtQR6epqrAo00oHICPS05b/4zLKGDQRDo6TBvhoER6GmwvhkGSKDHzfpmGDCBHi8nA2HgBHqcnAyEERDo8XEyEEZCoMfFI6loRZ+PqSptSO/FP4HHI++n4cpAWrGxsRGl7OzsRF/W1tbi9u3bUcLHjx9jd3c32iTQw5c/wzwZaKUGjIxAD5uVGjBiAj1c4gwjJ9DDlOOMjLOfH4yYHXx4PDMQJsJOPiwZ51sBTIJAD4c1zjAxAj0M4gwTJND1E2eYKIGum/s4w4QJdL1cug0TJ9B1EmdAoCskzsA3Al0XcQb+T6DrIc7ADwS6DuIM/EKg+yfOwLEEul/iDJxIoPsjzsCpLgV9yCsExRk4lUB3L++t4fJt4ExGHN1y4yPg3AS6O+IMLESguyHOwMLMoNuXj6kSZ2BhAt2ua+EZgsCSBLo9q3Gw1hlgKStBGy7vb3+EGT8jsL6+Hpubm1HK27dvoy8bGxvfthJ2dna+bW0S6PIyzn8dvsLg3b17N968eRMlZNDu3LkTfZjNZvHgwYN49uxZlPD06dN4/vx5tMmIo6w8YhZnoAiBLuvPEGegEIEuJ++vcSUAChHoMtxfAyhOoC8uw+xCFKA4gb6YXOt8MwBaINDLa9Y6A7RCoJdjOR3QOoFeTl7CLc5AqwR6cbli41oAtEygF2PFBtAZgT4/KzaATgn0+VixAXROoM8n4+ykINApgT5bjjVWA6BjAn269XCPDaAnAn2yHGk4KQj8Yj6fRxc8UeV4zVNRYPJ2d3dje3s7Smj7EVFn+fz5c5H3koHO70vbPDPveHlS0MUoQK+MOH7lSkGgCgL9o3wiiisFgSoI9Hc5d/49ACoh0N+5Qx1QFYE+kHNnD3wFqiLQ5s5ApaYeaHNnoFpTD3SONsydgSpNOdB5j43rAVCpqQbafTaA6k010O6zAVRvioE2dwYGYWqBtqQOGIwpBdqSOmBQphRoow1gUKYS6OthSR0wMFMIdB413wiAgZlCoI02gEEae6CNNoDBGnOgjTaAQRtzoI02gEEba6CNNoDBG2OgZ2G0AYzA/wBP5hsF50HhogAAAABJRU5ErkJggg=="); - background-repeat: no-repeat; - background-size: $euiSizeXL * 4, $euiSizeXL * 6; - background-position: top 0 left 0, bottom 0 right 0; - } - } - - .homSolutionsSection__magentaCard { - .homSolutionsSection__panelHeader { - background-color: #c42373; // Hard coded for brand consistency across themes - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADNSURBVHgB7duxCcIAEEDR08IFrGyz/0pZwVYEIcYF/FWKwHtwXP/hyrvMQbZtu+3rPid3Hf4SKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgcJmDnt6WZfms6/qak/sFeswx3vs85+ScWBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECgKFLx4KCqcIFEJnAAAAAElFTkSuQmCC"); - background-repeat: no-repeat; - background-size: $euiSizeL * 1.5; - background-position: top $euiSizeS right $euiSizeS; - } - } - .homSolutionsSection__greenCard { - .homSolutionsSection__panelHeader { - background-color: #017d73; // Hard coded for brand consistency across themes - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABKCAYAAADJwhY8AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANMSURBVHgBzZp7buIwEMYHKC1QuqsF7Up7Hs4Al+Ff4DCcAonrtPuAPjcL1B/YyA0p2JkZK580SuQm6Y+xx4+xiSqumrG+d7/z/rYx9t+WZdZ2lFhXxq4jngfkP2Ov9qquq8jnm9Zu6eBNgD6TImwsoC80ibY1NIe1sRcSVsPYHfFVN9Yy1jG2pUPbFZEUoJMP+kYHWJakAZ0AemuvrPZZJ10B8jsdHFFKWh70BSe07X1GkUoBCCHib+w1qsq1qzivLkU6JDUgTSaT7m63C4ZMCmjgaDwe4zYYMhmgB+cEyPal95IAFsA5fTGQZ4dbdcAzcO7/9wxk7bMH8AfMTvJDUsO+fG2tSfJwvp5qtdqKPgEMEYABekeBo0IEnNODgTzpI0MBfaFhnwUtAQdlBvA+X1gG0Kmw0y0J57QykE9+ASdIHo3hF29cARMO6uYDhhvFGPwfjG0E4BxPxy/gVPFR8/m8MRwOsTosPa3y9KEtigBCpmoAJwV5jGixjtp8EG3xD8noOASKjiT2V6+Jr5YLFo2hDuvkDfEErqa7EZXx4naxWKyIr9b+e6QkU0U/iBcw+2jWnM08E09NtMMqA0JNNUC0ReInlRraE9bodXBOzaoD1rQBuVku9SpmZ7eSL9wjVa864LbqgOpVzJ4bagNyv7/RBozZgymSOuAN8bRTA7RrFM4+DJRpepBbvZAqIDf3jQmrThXbxCS3i5FdduYksXOAjUp5QJt75npvK75whwwclopd4uvV3YgB2m7lG8nouK0rAojkEcnlZTZ+plUCsDEajfom9SYBB31InXA/is64h+8sl0vKsowGgwExBO/99QvKDkXISHQpFxCz2Wx/nU6nVFIniacyHkTOpGevJ2J48sR7UKgHnceCRoiSnvxVVOj2P6C6ZyjHVKljwb7a54KDKtKT2MgpPDECD/ZJSYGedEdaCqW+437BkzgcdG/zOIVKciTgDOTawL2dezfVmYUiyHV+V6lIyQAhDxJwjyHvoPv4SWmFgAiCg1JnFqLgIO6qK1SIVowS0afjUgCin/tNJZOZ2oCIUlRr6aOlWoDwFjZz2CczpQHhKXjsYv8WKilAeAwBgL0R0ZPCHECAvFirzCFb/5hyknPV7zL4DLH0CVGgAAAAAElFTkSuQmCC"), - url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAYAAACbQR1vAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACBSURBVHgB7dpBDcAwDMVQdyzGH9xojEQjtbIfBEu5fGUx62WPjyEPcgVArgDIFQC5AiBXAOQKgFwBkCsAcgVATh9gsW+4vFIngFwBkCsAcgVArgDIFQC5AiBXAORahJjVm9zpCoBcAZArAHIFQK4AyBUAuQIgVwDkCoBcAZDTB/gBLrgCk8OhuvYAAAAASUVORK5CYII="); - background-repeat: no-repeat; - background-size: $euiSize * 1.25, $euiSizeXL; - background-position: top $euiSizeS left 0, bottom $euiSizeS right $euiSizeS; - } - } - .homSolutionsSection__blackCard { - .homSolutionsSection__panelHeader { - background-color: #343741; // Hard coded for brand consistency across themes - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAYAAACrpQYOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKRSURBVHgB7d3tSgMxEIXhMeqPQoWC9f4vte5Z3dLvTbKZzCQ5LyxqKwg+tNjdUxQR+RJmXpiOvRDDvPD/kRjGhYvPgbETZlK4+fogxDApPLiNGAaFJ7cD40NYtcKL+76FGNUKK/cRo1Ih4n5gvAtTbQ1i+R5iKBcDgYBADMViIRAxFEuBQMRQKhUCEUOhHAi0YLwJK1IuBCJGwbZAoE8hRpG2QqAFg22oBAQCxkFYdqUgEE6dEyOzkhCIGJmVhkDA4PXvxDQgEMcIiWlBIGIkpAmBiBGZNgQiRkQ1IBAxVqoFgThge1FNCMTN1JNqQyBiPMgCAnHAdpMVBOJm6iJLCA7YLrKEWH4+r3+LPYQIMeY8QKDhlyFeINDQGJ4g0LAY3iDQkBgeIdBwmymvEGgoDM8QaJgBm3cINMSArQUI1P2ArRUI1PVmqiUI1C1GaxCoywFbixCouzFCqxCIyxBPnU6nLjBafkQs7YExHdJyPUCg+WmqZYxeIBAwmv3TticItJseFYcWHxm9QaD5RV9rGD1CIGAcJ4xmztr2CoHms7atYPQMgc4Y3p+qeodAwPiZjnfPGCNAoPMgwSvGKBDINcZIEMgtxmgQyCXGiBDIHcaoEAgYx+n48IAxMgQ6v1nGGmN0COQCgxB/4feAF307KwxCXDe/9dgCgxD3mWAQ4nHAqHrplRDPq3odnBCvq4ZBiPWqYBAiLnUMQsSnikGItObtlAYGIdJTmesQIq/iGITIr+h2ihDbKradIsT2imynCFGmzdspQpRr03VwQpQtG4MQ5cvCIIROyRiE0CsJgxC6RW+nCKFf1FyHEHVaxSBEvV5upwhRv4dzHULYdIdBCLuutlOEsO18HZz/u8E+YMgvrbKfmp8y7IEAAAAASUVORK5CYII="); - background-repeat: no-repeat; - background-size: $euiSizeL * 2; - background-position: top $euiSizeS left $euiSizeS; - } + .homSolutionPanel--securitySolution & { + background-color: $euiColorDarkestShade; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAYAAACrpQYOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKRSURBVHgB7d3tSgMxEIXhMeqPQoWC9f4vte5Z3dLvTbKZzCQ5LyxqKwg+tNjdUxQR+RJmXpiOvRDDvPD/kRjGhYvPgbETZlK4+fogxDApPLiNGAaFJ7cD40NYtcKL+76FGNUKK/cRo1Ih4n5gvAtTbQ1i+R5iKBcDgYBADMViIRAxFEuBQMRQKhUCEUOhHAi0YLwJK1IuBCJGwbZAoE8hRpG2QqAFg22oBAQCxkFYdqUgEE6dEyOzkhCIGJmVhkDA4PXvxDQgEMcIiWlBIGIkpAmBiBGZNgQiRkQ1IBAxVqoFgThge1FNCMTN1JNqQyBiPMgCAnHAdpMVBOJm6iJLCA7YLrKEWH4+r3+LPYQIMeY8QKDhlyFeINDQGJ4g0LAY3iDQkBgeIdBwmymvEGgoDM8QaJgBm3cINMSArQUI1P2ArRUI1PVmqiUI1C1GaxCoywFbixCouzFCqxCIyxBPnU6nLjBafkQs7YExHdJyPUCg+WmqZYxeIBAwmv3TticItJseFYcWHxm9QaD5RV9rGD1CIGAcJ4xmztr2CoHms7atYPQMgc4Y3p+qeodAwPiZjnfPGCNAoPMgwSvGKBDINcZIEMgtxmgQyCXGiBDIHcaoEAgYx+n48IAxMgQ6v1nGGmN0COQCgxB/4feAF307KwxCXDe/9dgCgxD3mWAQ4nHAqHrplRDPq3odnBCvq4ZBiPWqYBAiLnUMQsSnikGItObtlAYGIdJTmesQIq/iGITIr+h2ihDbKradIsT2imynCFGmzdspQpRr03VwQpQtG4MQ5cvCIIROyRiE0CsJgxC6RW+nCKFf1FyHEHVaxSBEvV5upwhRv4dzHULYdIdBCLuutlOEsO18HZz/u8E+YMgvrbKfmp8y7IEAAAAASUVORK5CYII='); + background-position: top $euiSizeS left $euiSizeS; + background-size: $euiSizeL * 2; } } diff --git a/src/plugins/home/public/application/components/_solutions_section.scss b/src/plugins/home/public/application/components/_solutions_section.scss deleted file mode 100644 index 49fb1fd941c48..0000000000000 --- a/src/plugins/home/public/application/components/_solutions_section.scss +++ /dev/null @@ -1,99 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -.homSolutions { - margin-top: -$euiSizeXL; - min-height: $euiSize * 16; - - @include euiBreakpoint('xs', 's') { - flex-direction: column; - } -} - -.homSolutions__group { - max-width: 50%; - - @include euiBreakpoint('xs', 's') { - max-width: none; - } -} - -.homSolutionPanel { - align-items: stretch; // Necessary because element is a button - display: flex !important; - flex-direction: column; - overflow: hidden; -} - -.homSolutionPanel__header { - color: $euiColorEmptyShade; - padding: $euiSize; -} - -.homSolutionPanel__icon { - background-color: $euiColorEmptyShade !important; - box-shadow: none !important; - margin: 0 auto $euiSizeS; - padding: $euiSizeS; -} - -.homSolutionPanel__subtitle { - margin-top: $euiSizeXS; -} - -.homSolutionPanel__content { - flex-direction: column; - justify-content: center; - padding: $euiSize; - - @include euiBreakpoint('xs', 's') { - text-align: center; - } -} - -.homSolutionPanel__header { - background-color: $euiColorPrimary; - background-image: url('data:image/png;base64,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'), - url('data:image/png;base64,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'); - background-repeat: no-repeat; - background-position: top 0 left 0, bottom 0 right 0; - background-size: $euiSizeXL * 4, $euiSizeXL * 6; - - .homSolutionPanel--enterpriseSearch & { - background-color: $euiColorSecondary; - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABKCAYAAADJwhY8AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANMSURBVHgBzZp7buIwEMYHKC1QuqsF7Up7Hs4Al+Ff4DCcAonrtPuAPjcL1B/YyA0p2JkZK580SuQm6Y+xx4+xiSqumrG+d7/z/rYx9t+WZdZ2lFhXxq4jngfkP2Ov9qquq8jnm9Zu6eBNgD6TImwsoC80ibY1NIe1sRcSVsPYHfFVN9Yy1jG2pUPbFZEUoJMP+kYHWJakAZ0AemuvrPZZJ10B8jsdHFFKWh70BSe07X1GkUoBCCHib+w1qsq1qzivLkU6JDUgTSaT7m63C4ZMCmjgaDwe4zYYMhmgB+cEyPal95IAFsA5fTGQZ4dbdcAzcO7/9wxk7bMH8AfMTvJDUsO+fG2tSfJwvp5qtdqKPgEMEYABekeBo0IEnNODgTzpI0MBfaFhnwUtAQdlBvA+X1gG0Kmw0y0J57QykE9+ASdIHo3hF29cARMO6uYDhhvFGPwfjG0E4BxPxy/gVPFR8/m8MRwOsTosPa3y9KEtigBCpmoAJwV5jGixjtp8EG3xD8noOASKjiT2V6+Jr5YLFo2hDuvkDfEErqa7EZXx4naxWKyIr9b+e6QkU0U/iBcw+2jWnM08E09NtMMqA0JNNUC0ReInlRraE9bodXBOzaoD1rQBuVku9SpmZ7eSL9wjVa864LbqgOpVzJ4bagNyv7/RBozZgymSOuAN8bRTA7RrFM4+DJRpepBbvZAqIDf3jQmrThXbxCS3i5FdduYksXOAjUp5QJt75npvK75whwwclopd4uvV3YgB2m7lG8nouK0rAojkEcnlZTZ+plUCsDEajfom9SYBB31InXA/is64h+8sl0vKsowGgwExBO/99QvKDkXISHQpFxCz2Wx/nU6nVFIniacyHkTOpGevJ2J48sR7UKgHnceCRoiSnvxVVOj2P6C6ZyjHVKljwb7a54KDKtKT2MgpPDECD/ZJSYGedEdaCqW+437BkzgcdG/zOIVKciTgDOTawL2dezfVmYUiyHV+V6lIyQAhDxJwjyHvoPv4SWmFgAiCg1JnFqLgIO6qK1SIVowS0afjUgCin/tNJZOZ2oCIUlRr6aOlWoDwFjZz2CczpQHhKXjsYv8WKilAeAwBgL0R0ZPCHECAvFirzCFb/5hyknPV7zL4DLH0CVGgAAAAAElFTkSuQmCC'), - url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAYAAACbQR1vAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACBSURBVHgB7dpBDcAwDMVQdyzGH9xojEQjtbIfBEu5fGUx62WPjyEPcgVArgDIFQC5AiBXAOQKgFwBkCsAcgVATh9gsW+4vFIngFwBkCsAcgVArgDIFQC5AiBXAORahJjVm9zpCoBcAZArAHIFQK4AyBUAuQIgVwDkCoBcAZDTB/gBLrgCk8OhuvYAAAAASUVORK5CYII='); - background-position: top $euiSizeS left 0, bottom $euiSizeS right $euiSizeS; - background-size: $euiSize * 1.25, $euiSizeXL; - } - - .homSolutionPanel--observability & { - background-color: $euiColorAccent; - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADNSURBVHgB7duxCcIAEEDR08IFrGyz/0pZwVYEIcYF/FWKwHtwXP/hyrvMQbZtu+3rPid3Hf4SKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgIFAQKAgUBAoCBYGCQEGgcJmDnt6WZfms6/qak/sFeswx3vs85+ScWBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECgKFLx4KCqcIFEJnAAAAAElFTkSuQmCC'); - background-position: top $euiSizeS right $euiSizeS; - background-size: $euiSizeL * 1.5; - } - - .homSolutionPanel--securitySolution & { - background-color: $euiColorDarkestShade; - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAYAAACrpQYOAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKRSURBVHgB7d3tSgMxEIXhMeqPQoWC9f4vte5Z3dLvTbKZzCQ5LyxqKwg+tNjdUxQR+RJmXpiOvRDDvPD/kRjGhYvPgbETZlK4+fogxDApPLiNGAaFJ7cD40NYtcKL+76FGNUKK/cRo1Ih4n5gvAtTbQ1i+R5iKBcDgYBADMViIRAxFEuBQMRQKhUCEUOhHAi0YLwJK1IuBCJGwbZAoE8hRpG2QqAFg22oBAQCxkFYdqUgEE6dEyOzkhCIGJmVhkDA4PXvxDQgEMcIiWlBIGIkpAmBiBGZNgQiRkQ1IBAxVqoFgThge1FNCMTN1JNqQyBiPMgCAnHAdpMVBOJm6iJLCA7YLrKEWH4+r3+LPYQIMeY8QKDhlyFeINDQGJ4g0LAY3iDQkBgeIdBwmymvEGgoDM8QaJgBm3cINMSArQUI1P2ArRUI1PVmqiUI1C1GaxCoywFbixCouzFCqxCIyxBPnU6nLjBafkQs7YExHdJyPUCg+WmqZYxeIBAwmv3TticItJseFYcWHxm9QaD5RV9rGD1CIGAcJ4xmztr2CoHms7atYPQMgc4Y3p+qeodAwPiZjnfPGCNAoPMgwSvGKBDINcZIEMgtxmgQyCXGiBDIHcaoEAgYx+n48IAxMgQ6v1nGGmN0COQCgxB/4feAF307KwxCXDe/9dgCgxD3mWAQ4nHAqHrplRDPq3odnBCvq4ZBiPWqYBAiLnUMQsSnikGItObtlAYGIdJTmesQIq/iGITIr+h2ihDbKradIsT2imynCFGmzdspQpRr03VwQpQtG4MQ5cvCIIROyRiE0CsJgxC6RW+nCKFf1FyHEHVaxSBEvV5upwhRv4dzHULYdIdBCLuutlOEsO18HZz/u8E+YMgvrbKfmp8y7IEAAAAASUVORK5CYII='); - background-position: top $euiSizeS left $euiSizeS; - background-size: $euiSizeL * 2; - } -} diff --git a/src/plugins/home/public/application/components/solutions_panel/solution_card.tsx b/src/plugins/home/public/application/components/solutions_panel/solution_card.tsx index 9dd6c63ef1d23..ecd3247bd7755 100644 --- a/src/plugins/home/public/application/components/solutions_panel/solution_card.tsx +++ b/src/plugins/home/public/application/components/solutions_panel/solution_card.tsx @@ -62,25 +62,26 @@ export const SolutionCard: FC = ({ solution, apps = [] }) => solution && apps.length ? ( - + - + + {getAppDescriptions(apps)} diff --git a/src/plugins/home/public/application/components/solutions_panel/solution_title.tsx b/src/plugins/home/public/application/components/solutions_panel/solution_title.tsx index 2e91f01a4bd47..8fda5d88808dc 100644 --- a/src/plugins/home/public/application/components/solutions_panel/solution_title.tsx +++ b/src/plugins/home/public/application/components/solutions_panel/solution_title.tsx @@ -35,25 +35,23 @@ interface Props { } export const SolutionTitle: FC = ({ title, subtitle, iconType }) => ( - + +

{title}

 + {subtitle ? ( -

+

{subtitle}

diff --git a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx index 684a1ed58a76d..b7d879216eb4e 100644 --- a/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx +++ b/src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx @@ -59,13 +59,11 @@ export const SolutionsPanel: FC = ({ directories, solutions }) => { solutionAppMap.set(solution.id, apps); }); - const halfWidthClass = 'homSolutionsSection__multiple'; - return appCount || kibanaApps.length ? ( - + {appCount ? ( - + {solutions.map((solution) => ( = ({ directories, solutions }) => { + ) : ( diff --git a/src/plugins/home/public/application/components/solutions_section/index.ts b/src/plugins/home/public/application/components/solutions_section/index.ts deleted file mode 100644 index 6ef3cfc8ec1a2..0000000000000 --- a/src/plugins/home/public/application/components/solutions_section/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -export * from './solutions_section'; diff --git a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx deleted file mode 100644 index fd7468bfe0480..0000000000000 --- a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx +++ /dev/null @@ -1,88 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { FC } from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui'; -import { FeatureCatalogueEntry, FeatureCatalogueSolution } from '../../../'; -import { createAppNavigationHandler } from '../app_navigation_handler'; -import { SolutionTitle } from './solution_title'; - -const getDescriptionText = ({ description }: FeatureCatalogueEntry): JSX.Element => ( - -

{description}

- -); - -const addSpacersBetweenElementsReducer = ( - acc: JSX.Element[], - element: JSX.Element, - index: number, - elements: JSX.Element[] -) => { - acc.push(element); - if (index < elements.length - 1) { - acc.push(); - } - return acc; -}; - -const getAppDescriptions = (apps: FeatureCatalogueEntry[]) => - apps - .sort(sortByOrder) - .map(getDescriptionText) - .reduce(addSpacersBetweenElementsReducer, []); - -const sortByOrder = ( - { order: orderA = 0 }: FeatureCatalogueEntry, - { order: orderB = 0 }: FeatureCatalogueEntry -) => orderA - orderB; - -interface Props { - solution: FeatureCatalogueSolution; - apps?: FeatureCatalogueEntry[]; -} - -export const SolutionPanel: FC = ({ solution, apps = [] }) => - solution && apps.length ? ( - - - - - - - - - {getAppDescriptions(apps)} - - - - - ) : null; diff --git a/src/plugins/home/public/application/components/solutions_section/solution_title.tsx b/src/plugins/home/public/application/components/solutions_section/solution_title.tsx deleted file mode 100644 index 8fda5d88808dc..0000000000000 --- a/src/plugins/home/public/application/components/solutions_section/solution_title.tsx +++ /dev/null @@ -1,61 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { FC } from 'react'; -import { - EuiFlexGroup, - EuiFlexItem, - EuiToken, - EuiTitle, - EuiText, - EuiIcon, - IconType, -} from '@elastic/eui'; - -interface Props { - title: string; - subtitle?: string; - iconType: IconType; -} - -export const SolutionTitle: FC = ({ title, subtitle, iconType }) => ( - - - - - -

{title}

- - - {subtitle ? ( - -

- {subtitle} -

- - ) : null} - - -); diff --git a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx deleted file mode 100644 index dd9509a7c19d9..0000000000000 --- a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx +++ /dev/null @@ -1,90 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { Fragment, FC } from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiHorizontalRule } from '@elastic/eui'; -import { SolutionPanel } from './solution_panel'; -import { FeatureCatalogueEntry, FeatureCatalogueSolution } from '../../../'; -import { FeatureCatalogueHomePageSection } from '../../../services'; - -const sortByOrder = ( - { order: orderA = 0 }: FeatureCatalogueSolution, - { order: orderB = 0 }: FeatureCatalogueSolution -) => orderA - orderB; - -interface Props { - directories: FeatureCatalogueEntry[]; - solutions: FeatureCatalogueSolution[]; -} - -export const SolutionsSection: FC = ({ directories, solutions }) => { - const findDirectoriesBySolution = ( - solution?: FeatureCatalogueSolution - ): FeatureCatalogueEntry[] => - directories.filter( - (directory) => - directory.homePageSection === FeatureCatalogueHomePageSection.SOLUTION_PANEL && - directory.solution === solution?.id - ); - - const kibana = solutions.find(({ id }) => id === 'kibana'); - const kibanaApps = findDirectoriesBySolution(kibana); - - // Find non-Kibana solutions - solutions = solutions.sort(sortByOrder).filter(({ id }) => id !== 'kibana'); - - // Maps features to each solution - const solutionAppMap = new Map(); - let appCount = 0; - - solutions.forEach((solution) => { - const apps = findDirectoriesBySolution(solution); - appCount += apps.length; - solutionAppMap.set(solution.id, apps); - }); - - return appCount || kibanaApps.length ? ( - - - {appCount ? ( - - - {solutions.map((solution) => ( - - ))} - - - ) : null} - {kibana && kibanaApps.length ? : null} - - - - - - - ) : ( - - - - ); -};