Index pattern management - EUI refactor #26857
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| /* | ||
| * 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 } from 'react'; | ||
| import { | ||
| EuiEmptyPrompt, | ||
| EuiText, | ||
| EuiHorizontalRule, | ||
| EuiDescriptionList, | ||
| EuiDescriptionListTitle, | ||
| EuiDescriptionListDescription, | ||
| EuiPageContent, | ||
| } from '@elastic/eui'; | ||
| import { FormattedMessage } from '@kbn/i18n/react'; | ||
| import { CreateButton } from '../create_button'; | ||
|
|
||
| export const CreateIndexPatternPrompt = ({ | ||
| indexPatternCreationOptions | ||
| }) => ( | ||
| <EuiPageContent horizontalPosition="center"> | ||
| <EuiEmptyPrompt | ||
| iconType="indexPatternApp" | ||
| title={ | ||
| <EuiText grow={false}> | ||
| <h2> | ||
| <FormattedMessage id="kbn.management.indexPatternPrompt.title" defaultMessage="Create your first index pattern" /> | ||
| </h2> | ||
| </EuiText>} | ||
| body={ | ||
| <Fragment> | ||
| <p> | ||
| <FormattedMessage | ||
| id="kbn.management.indexPatternPrompt.subtitle" | ||
| defaultMessage="Index patterns allow you to bucket disparate data sources together so their shared fields may be queried in | ||
| Kibana." | ||
| /> | ||
| </p> | ||
| <EuiHorizontalRule margin="l" /> | ||
| <EuiText textAlign="left"> | ||
| <p> | ||
| <FormattedMessage | ||
| id="kbn.management.indexPatternPrompt.examplesTitle" | ||
| defaultMessage="Examples of index patterns" | ||
| /> | ||
| </p> | ||
| </EuiText> | ||
| <EuiDescriptionList className="indexPatternListPrompt__descList"> | ||
| <EuiDescriptionListTitle> | ||
| <FormattedMessage | ||
| id="kbn.management.indexPatternPrompt.exampleOneTitle" | ||
| defaultMessage="Single data source" | ||
| /> | ||
| </EuiDescriptionListTitle> | ||
| <EuiDescriptionListDescription> | ||
| <FormattedMessage | ||
| id="kbn.management.indexPatternPrompt.exampleOne" | ||
| defaultMessage="Index a single data source named log-west-001 so you can build charts or query its contents fast." | ||
| /> | ||
| </EuiDescriptionListDescription> | ||
| <EuiDescriptionListTitle> | ||
| <FormattedMessage | ||
| id="kbn.management.indexPatternPrompt.exampleTwoTitle" | ||
| defaultMessage="Multiple data sources" | ||
| /> | ||
| </EuiDescriptionListTitle> | ||
| <EuiDescriptionListDescription> | ||
| <FormattedMessage | ||
| id="kbn.management.indexPatternPrompt.exampleTwo" | ||
| defaultMessage="Group all incoming data sources starting with log-west* so you can query against all your west coast server | ||
| logs." | ||
| /> | ||
| </EuiDescriptionListDescription> | ||
| <EuiDescriptionListTitle> | ||
| <FormattedMessage | ||
| id="kbn.management.indexPatternPrompt.exampleThreeTitle" | ||
| defaultMessage="Custom groupings" | ||
| /> | ||
| </EuiDescriptionListTitle> | ||
| <EuiDescriptionListDescription> | ||
| <FormattedMessage | ||
| id="kbn.management.indexPatternPrompt.exampleThree" | ||
| defaultMessage="Specifically group your archived, monthly, roll-up metrics of those logs into a separate index pattern so | ||
| you can aggregate histotical trends to compare." | ||
|
|
||
| /> | ||
| </EuiDescriptionListDescription> | ||
| </EuiDescriptionList> | ||
| </Fragment> | ||
| } | ||
| actions={[ | ||
| <CreateButton options={indexPatternCreationOptions}> | ||
| <FormattedMessage | ||
| id="kbn.management.indexPatternPrompt.createBtn" | ||
| defaultMessage="Create index pattern" | ||
| /> | ||
| </CreateButton> | ||
| ]} | ||
| /> | ||
| </EuiPageContent> | ||
| ); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| <kbn-management-app section="kibana/index_patterns"> | ||
| <div class="euiPanel euiPanel--paddingLarge"> | ||
|
There was a problem hiding this comment. Removing index pattern list sidebar |
||
| <div id="createIndexPatternReact"></div> | ||
| </div> | ||
| </kbn-management-app> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,11 @@ | ||
| <kbn-management-app section="kibana/index_patterns"> | ||
| <div class="euiPanel euiPanel--paddingLarge"> | ||
| <div class="kuiViewContent"> | ||
| <kbn-management-index-patterns-header | ||
| index-pattern="fieldSettings.indexPattern" | ||
| ></kbn-management-index-patterns-header> | ||
| </div> | ||
|
|
||
| <div id="reactFieldEditor"></div> | ||
| </div> | ||
| </kbn-management-app> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,5 @@ | ||
| <div> | ||
| <div> | ||
| <div id="indexPatternListReact" role="region" aria-label="{{'kbn.management.editIndexPatternLiveRegionAriaLabel' | i18n: { defaultMessage: 'Index patterns' } }}"></div> | ||
| </div> | ||
| </div> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -25,22 +25,25 @@ import './edit_index_pattern'; | |
| import uiRoutes from 'ui/routes'; | ||
| import { uiModules } from 'ui/modules'; | ||
| import indexTemplate from './index.html'; | ||
| import indexPatternListTemplate from './list.html'; | ||
| import { IndexPatternTable } from './index_pattern_table'; | ||
| import { CreateIndexPatternPrompt } from './create_index_pattern_prompt'; | ||
| import { SavedObjectsClientProvider } from 'ui/saved_objects'; | ||
| import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/registry/feature_catalogue'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import { I18nContext } from 'ui/i18n'; | ||
| import { EuiBadge } from '@elastic/eui'; | ||
| import { getListBreadcrumbs } from './breadcrumbs'; | ||
|
|
||
| import React from 'react'; | ||
| import { render, unmountComponentAtNode } from 'react-dom'; | ||
|
|
||
| const INDEX_PATTERN_LIST_DOM_ELEMENT_ID = 'indexPatternListReact'; | ||
|
|
||
| export function updateIndexPatternList( | ||
| indexPatterns, | ||
| kbnUrl, | ||
| indexPatternCreationOptions, | ||
| ) { | ||
| const node = document.getElementById(INDEX_PATTERN_LIST_DOM_ELEMENT_ID); | ||
| if (!node) { | ||
|
|
@@ -49,11 +52,15 @@ export function updateIndexPatternList( | |
|
|
||
| render( | ||
| <I18nContext> | ||
| {indexPatterns.length === 0 ? | ||
| (<CreateIndexPatternPrompt | ||
| indexPatternCreationOptions={indexPatternCreationOptions} | ||
| />) : | ||
| (<IndexPatternTable | ||
| indexPatterns={indexPatterns} | ||
| navTo={kbnUrl.redirect} | ||
| indexPatternCreationOptions={indexPatternCreationOptions} | ||
| />)} | ||
| </I18nContext>, | ||
| node, | ||
| ); | ||
|
|
@@ -82,6 +89,12 @@ uiRoutes | |
| resolve: indexPatternsResolutions | ||
| }); | ||
|
|
||
| uiRoutes | ||
| .when('/management/kibana/index_patterns', { | ||
| template: indexPatternListTemplate, | ||
| k7Breadcrumbs: getListBreadcrumbs | ||
| }); | ||
|
|
||
| // wrapper directive, which sets some global stuff up like the left nav | ||
| uiModules.get('apps/management') | ||
| .directive('kbnManagementIndexPatterns', function ($route, config, kbnUrl, Private) { | ||
|
|
@@ -103,7 +116,10 @@ uiModules.get('apps/management') | |
|
|
||
| return { | ||
| id: id, | ||
| title: | ||
| <span> | ||
| {pattern.get('title')}{$scope.defaultIndex === id && (<EuiBadge style={{ marginLeft: '8px' }}>Default</EuiBadge>)} | ||
|
There was a problem hiding this comment. Would you mind creating a class in SCSS instead of an inline style? This way you can consume the EUI size variable, and avoid violating the CSP. @ryankeairns Can you provide guidance on how to do this? There was a problem hiding this comment. I had issues running this PR locally (I think due to ES version switching), so I can't see exactly the outcome here, but to answer the question you would do something like:
...then add the There was a problem hiding this comment.
++ |
||
| </span>, | ||
| url: kbnUrl.eval('#/management/kibana/index_patterns/{{id}}', { id: id }), | ||
| active: $scope.editingId === id, | ||
| default: $scope.defaultIndex === id, | ||
|
|
@@ -125,7 +141,7 @@ uiModules.get('apps/management') | |
| return 0; | ||
| }) || []; | ||
|
|
||
| updateIndexPatternList($scope.indexPatternList, kbnUrl, indexPatternCreationOptions); | ||
| }; | ||
|
|
||
| $scope.$on('$destroy', destroyIndexPatternList); | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this content is a great idea, but I think this is a suboptimal location for it in the UX. The content contains some great tips for creating index patterns but I'm probably going to forget most of it once I click "Create index pattern". Additionally, I feel like the description at the top offers me enough of a compelling reason click this button -- the tips themselves don't offer any new reasons for why I would want (or not want) to click.
Can we move this content into the form itself, or into a "Help" flyout that's available within the creation form flow?
CC @ryankeairns
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree that this is helpful information and that it would be more effective in context of the index pattern creation flow. Placing it directly in the form would eat up quite a bit of real estate and interrupt more experienced users, so I'd recommend the flyout option.
See the 'Small flyout' example in the EUI docs here: https://elastic.github.io/eui/#/layout/flyout
As for the trigger, an icon button (with the questionInCircle icon) in the top right of the 'Create index pattern' view would be consistent with the buttons on the index pattern detail view seen here:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ryankeairns Do you think the content is small enough that a popover would be give enough room to show the info?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's fairly long and made the empty prompt even larger than I would have preferred. I think the skinny flyout feels like a good sized container for what is essentially 3 titles and paragraphs, in this case.