mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
First pass at applying EUI styles to the index pattern creation page (#15722)
* First pass at applying EUI styles to the index pattern creation page * PR feedback * PR feedback * PR feedback
This commit is contained in:
Chris Roberson
GitHub
parent
000a431038
commit
6fb7d52386
8 changed files with 532 additions and 460 deletions
|
|
@ -6,86 +6,93 @@
|
|||
class="kuiViewContent"
|
||||
>
|
||||
<!-- Intro -->
|
||||
<div class="kuiVerticalRhythm">
|
||||
<div class="kuiBar">
|
||||
<h1 class="kuiTitle">
|
||||
Create index pattern
|
||||
</h1>
|
||||
<h1 class="euiTitle euiTitle--medium">
|
||||
Create index pattern
|
||||
</h1>
|
||||
|
||||
<div class="kuiBarSection">
|
||||
<!-- Include system indices -->
|
||||
<label
|
||||
ng-if="controller.isSystemIndicesCheckBoxVisible()"
|
||||
class="kuiCheckBoxLabel"
|
||||
for="indexPatternCreationIncludeSystemIndices"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="indexPatternCreationIncludeSystemIndices"
|
||||
class="kuiCheckBox"
|
||||
ng-model="controller.doesIncludeSystemIndices"
|
||||
ng-change="controller.onIncludeSystemIndicesChange()"
|
||||
>
|
||||
<div class="euiSpacer euiSpacer--small"></div>
|
||||
|
||||
<span class="kuiCheckBoxLabel__text">
|
||||
Include system indices
|
||||
</span>
|
||||
</label>
|
||||
<div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--alignItemsEnd euiFlexGroup--responsive">
|
||||
<div class="euiFlexItem euiFlexItem--flexGrowZero">
|
||||
<div class="euiText">
|
||||
<p class="euiTextColor euiTextColor--subdued">
|
||||
Kibana uses index patterns to retrieve data from Elasticsearch indices for things like visualizations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="kuiText kuiSubduedText">
|
||||
Kibana uses index patterns to retrieve data from Elasticsearch indices for things like visualizations.
|
||||
</p>
|
||||
<div class="euiFlexItem euiFlexItem--flexGrowZero">
|
||||
<div
|
||||
class="euiCheckbox"
|
||||
ng-if="controller.isSystemIndicesCheckBoxVisible()"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="euiCheckbox__input"
|
||||
id="indexPatternCreationIncludeSystemIndices"
|
||||
ng-model="controller.doesIncludeSystemIndices"
|
||||
ng-change="controller.onIncludeSystemIndicesChange()"
|
||||
>
|
||||
<div class="euiCheckbox__square">
|
||||
<div class="euiCheckbox__check"></div>
|
||||
</div>
|
||||
<label
|
||||
class="euiCheckbox__label"
|
||||
for="indexPatternCreationIncludeSystemIndices"
|
||||
>
|
||||
Include system indices
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User has no data -->
|
||||
<div
|
||||
class="kuiPanel kuiVerticalRhythm"
|
||||
ng-if="!controller.hasIndices()"
|
||||
>
|
||||
<div class="kuiPanelBody">
|
||||
<!-- Fetching state -->
|
||||
<div
|
||||
ng-if="controller.isFetchingExistingIndices"
|
||||
class="kuiPanel kuiPanel--prompt kuiPanel--noBorder kuiVerticalRhythm"
|
||||
>
|
||||
<div class="kuiPanelBody">
|
||||
<h2 class="kuiSubTitle kuiSubduedText kuiVerticalRhythm">
|
||||
Checking for Elasticsearch data
|
||||
</h2>
|
||||
<div class="euiSpacer euiSpacer--m"></div>
|
||||
|
||||
<div class="kuiVerticalRhythm">
|
||||
<p class="kuiText kuiSubduedText kuiVerticalRhythmSmall">
|
||||
<span class="kuiStatusText">
|
||||
<span
|
||||
<div class="euiPanel euiPanel--paddingLarge">
|
||||
<!-- User has no data -->
|
||||
<div ng-if="!controller.hasIndices()">
|
||||
<div class="euiPageContentBody">
|
||||
<div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--responsive">
|
||||
<!-- Fetching state -->
|
||||
<div
|
||||
ng-if="controller.isFetchingExistingIndices"
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero createIndexPatternPrompt"
|
||||
>
|
||||
<h2 class="euiTitle euiTitle--small euiTextColor euiTextColor--subdued">
|
||||
Checking for Elasticsearch data
|
||||
</h2>
|
||||
<div class="euiSpacer euiSpacer--s"></div>
|
||||
<div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter">
|
||||
<div class="euiFlexItem euiFlexItem--flexGrowZero">
|
||||
<div
|
||||
class="euiLoadingSpinner euiLoadingSpinner--medium"
|
||||
aria-hidden="true"
|
||||
class="kuiStatusText__icon kuiIcon fa-spinner fa-spin"
|
||||
></span>
|
||||
<span>
|
||||
></div>
|
||||
</div>
|
||||
<div class="euiFlexItem euiFlexItem--flexGrowZero">
|
||||
<p class="euiTextColor euiTextColor--subdued">
|
||||
Reticulating splines...
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div ng-if="!controller.isFetchingExistingIndices">
|
||||
<div class="kuiPanel kuiPanel--prompt kuiPanel--noBorder kuiVerticalRhythm">
|
||||
<div class="kuiPanelBody">
|
||||
<h1 class="kuiSubTitle kuiSubduedText kuiVerticalRhythm">
|
||||
Couldn't find any Elasticsearch data
|
||||
</h1>
|
||||
|
||||
<div class="kuiVerticalRhythm">
|
||||
<p class="kuiText kuiSubduedText kuiVerticalRhythmSmall">
|
||||
<!-- Empty state -->
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero createIndexPatternPrompt"
|
||||
ng-if="!controller.isFetchingExistingIndices"
|
||||
>
|
||||
<div>
|
||||
<h2 class="euiTitle euiTitle--small euiTextColor euiTextColor--subdued">
|
||||
Couldn't find any Elasticsearch data
|
||||
</h2>
|
||||
<div class="euiSpacer euiSpacer--s"></div>
|
||||
<p class="euiTextColor euiTextColor--subdued">
|
||||
<span>
|
||||
You'll need to index some data into Elasticsearch before you can create an index pattern.
|
||||
</span>
|
||||
<a
|
||||
class="kuiLink"
|
||||
class="euiLink"
|
||||
aria-label="Learn how to index data into Elasticsearch"
|
||||
documentation-href="indexPatterns.loadingData"
|
||||
target="_blank"
|
||||
|
|
@ -94,61 +101,56 @@
|
|||
Learn how.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="kuiButton kuiButton--secondary kuiButton--iconText kuiVerticalRhythm"
|
||||
ng-click="controller.fetchExistingIndices()"
|
||||
>
|
||||
<span class="kuiButton__inner">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="kuiButton__icon kuiIcon fa-refresh"
|
||||
></span>
|
||||
<span>
|
||||
Check for new data
|
||||
<div class="euiSpacer euiSpacer--s"></div>
|
||||
<button
|
||||
class="euiButtonEmpty euiButtonEmpty--primary"
|
||||
ng-click="controller.fetchExistingIndices()"
|
||||
>
|
||||
<span class="euiButton__content">
|
||||
<span>
|
||||
Check for new data
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User has data -->
|
||||
<div
|
||||
class="kuiVerticalRhythm"
|
||||
ng-if="controller.hasIndices()"
|
||||
ng-switch="controller.wizardStep"
|
||||
>
|
||||
<!-- Specify index pattern -->
|
||||
<step-index-pattern
|
||||
ng-switch-when="indexPattern"
|
||||
fetch-existing-indices="controller.fetchExistingIndices()"
|
||||
is-fetching-existing-indices="controller.isFetchingExistingIndices"
|
||||
fetch-matching-indices="controller.fetchMatchingIndices()"
|
||||
is-fetching-matching-indices="controller.isFetchingMatchingIndices"
|
||||
has-indices="controller.hasIndices()"
|
||||
index-pattern-name="controller.formValues.name"
|
||||
all-indices="controller.allIndices"
|
||||
partial-matching-indices="controller.partialMatchingIndices"
|
||||
matching-indices="controller.matchingIndices"
|
||||
go-to-next-step="controller.goToTimeFieldStep()"
|
||||
></step-index-pattern>
|
||||
<!-- User has data -->
|
||||
<div
|
||||
ng-if="controller.hasIndices()"
|
||||
ng-switch="controller.wizardStep"
|
||||
>
|
||||
<!-- Specify index pattern -->
|
||||
<step-index-pattern
|
||||
ng-switch-when="indexPattern"
|
||||
fetch-existing-indices="controller.fetchExistingIndices()"
|
||||
is-fetching-existing-indices="controller.isFetchingExistingIndices"
|
||||
fetch-matching-indices="controller.fetchMatchingIndices()"
|
||||
is-fetching-matching-indices="controller.isFetchingMatchingIndices"
|
||||
has-indices="controller.hasIndices()"
|
||||
index-pattern-name="controller.formValues.name"
|
||||
all-indices="controller.allIndices"
|
||||
partial-matching-indices="controller.partialMatchingIndices"
|
||||
matching-indices="controller.matchingIndices"
|
||||
go-to-next-step="controller.goToTimeFieldStep()"
|
||||
></step-index-pattern>
|
||||
|
||||
<!-- Specify optional time field -->
|
||||
<step-time-field
|
||||
ng-switch-when="timeField"
|
||||
index-pattern-id="controller.formValues.id"
|
||||
index-pattern-name="controller.formValues.name"
|
||||
time-field-options="controller.timeFieldOptions"
|
||||
selected-time-field-option="controller.formValues.timeFieldOption"
|
||||
fetch-time-field-options="controller.fetchTimeFieldOptions()"
|
||||
is-fetching-time-field-options="controller.isFetchingTimeFieldOptions"
|
||||
go-to-previous-step="controller.goToIndexPatternStep()"
|
||||
create-index-pattern="controller.createIndexPattern()"
|
||||
></step-time-field>
|
||||
<!-- Specify optional time field -->
|
||||
<step-time-field
|
||||
ng-switch-when="timeField"
|
||||
index-pattern-id="controller.formValues.id"
|
||||
index-pattern-name="controller.formValues.name"
|
||||
time-field-options="controller.timeFieldOptions"
|
||||
selected-time-field-option="controller.formValues.timeFieldOption"
|
||||
fetch-time-field-options="controller.fetchTimeFieldOptions()"
|
||||
is-fetching-time-field-options="controller.isFetchingTimeFieldOptions"
|
||||
go-to-previous-step="controller.goToIndexPatternStep()"
|
||||
create-index-pattern="controller.createIndexPattern()"
|
||||
></step-time-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</kbn-management-indices>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { sendCreateIndexPatternRequest } from './send_create_index_pattern_reque
|
|||
import './step_index_pattern';
|
||||
import './step_time_field';
|
||||
import './matching_indices_list';
|
||||
import './create_index_pattern_wizard.less';
|
||||
|
||||
uiRoutes
|
||||
.when('/management/kibana/index', {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
.createIndexPatternPrompt {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
|
@ -1,68 +1,112 @@
|
|||
<div>
|
||||
<div
|
||||
ng-if="matchingIndicesList.isLoading"
|
||||
class="kuiPanel kuiPanel--prompt kuiVerticalRhythm matchingIndicesListLoadingPrompt"
|
||||
class="euiPanel euiPanel--paddingMedium"
|
||||
>
|
||||
<div class="kuiPanelBody">
|
||||
<p class="kuiSubTitle kuiSubduedText kuiVerticalRhythm">
|
||||
Looking for matching indices
|
||||
</p>
|
||||
|
||||
<div class="kuiVerticalRhythm">
|
||||
<p class="kuiText kuiSubduedText kuiVerticalRhythmSmall">
|
||||
Just a sec...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="euiTitle euiTextColor euiTextColor--subdued" style="text-align:center">
|
||||
Looking for matching indices
|
||||
</h2>
|
||||
<div class="euiSpacer euiSpacer--s"></div>
|
||||
<p class="euiTextColor euiTextColor--subdued" style="text-align:center">
|
||||
Just a sec...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="euiSpacer euiSpacer--s"></div>
|
||||
|
||||
<div
|
||||
ng-if="!matchingIndicesList.isLoading"
|
||||
class="kuiControlledTable"
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--responsive"
|
||||
>
|
||||
<!-- ToolBar -->
|
||||
<div class="kuiToolBar">
|
||||
<div class="kuiToolBarSection">
|
||||
<p class="kuiText">
|
||||
<ng-transclude></ng-transclude>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="kuiToolBarSection">
|
||||
<!-- Pagination -->
|
||||
<tool-bar-pager-text
|
||||
start-item="matchingIndicesList.pager.startItem"
|
||||
end-item="matchingIndicesList.pager.endItem"
|
||||
total-items="matchingIndicesList.pager.totalItems"
|
||||
ng-if="matchingIndicesList.hasMultiplePages()"
|
||||
></tool-bar-pager-text>
|
||||
|
||||
<tool-bar-pager-buttons
|
||||
has-previous-page="matchingIndicesList.pager.hasPreviousPage"
|
||||
has-next-page="matchingIndicesList.pager.hasNextPage"
|
||||
on-page-next="matchingIndicesList.onPageNext"
|
||||
on-page-previous="matchingIndicesList.onPagePrevious"
|
||||
ng-if="matchingIndicesList.hasMultiplePages()"
|
||||
></tool-bar-pager-buttons>
|
||||
|
||||
<div class="euiFlexItem euiFlexItem--flexGrowZero">
|
||||
<p>
|
||||
<ng-transclude></ng-transclude>
|
||||
<span
|
||||
ng-if="matchingIndicesList.hasMultiplePages()"
|
||||
class="kuiSubduedText"
|
||||
class="euiTextColor euiTextColor--subdued euiText euiText--small"
|
||||
>
|
||||
(representative sample only)
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
ng-if="matchingIndicesList.hasMultiplePages()"
|
||||
>
|
||||
<div class="euiPagination">
|
||||
<button
|
||||
class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
|
||||
type="button"
|
||||
ng-if="matchingIndicesList.pager.hasPreviousPage"
|
||||
ng-click="matchingIndicesList.onPagePrevious()"
|
||||
>
|
||||
<span class="euiButtonEmpty__content">
|
||||
<svg class="euiIcon euiButtonEmpty__icon euiIcon--medium" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
|
||||
<defs>
|
||||
<path id="arrow_left-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"></path>
|
||||
</defs>
|
||||
<use fill-rule="nonzero" transform="rotate(90 8 8)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow_left-a">
|
||||
</use>
|
||||
</svg>
|
||||
<span>Previous</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
|
||||
ng-class="{
|
||||
'euiPaginationButton-isActive': true || page == matchingIndicesList.pager.currentPage
|
||||
}"
|
||||
type="button"
|
||||
ng-repeatt="page in matchingIndicesList.getPaginationList()"
|
||||
ng-clickk="matchingIndicesList.goToPage(page)"
|
||||
>
|
||||
<span class="euiButtonEmpty__content">
|
||||
<span>{{matchingIndicesList.pager.currentPage}}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--iconRight euiPaginationButton"
|
||||
type="button"
|
||||
ng-if="matchingIndicesList.pager.hasNextPage"
|
||||
ng-click="matchingIndicesList.onPageNext()"
|
||||
>
|
||||
<span class="euiButtonEmpty__content">
|
||||
<svg class="euiIcon euiButtonEmpty__icon euiIcon--medium" aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<defs>
|
||||
<path id="arrow_right-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
|
||||
/>
|
||||
</defs>
|
||||
<use fill-rule="nonzero" transform="matrix(0 1 1 0 0 0)" href="#arrow_right-a"
|
||||
/>
|
||||
</svg>
|
||||
<span>Next</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Indices list -->
|
||||
<ul class="kuiMenu kuiMenu--contained">
|
||||
<li
|
||||
class="kuiMenuItem"
|
||||
<div class="euiSpacer euiSpacer--m"></div>
|
||||
|
||||
<table
|
||||
ng-if="!matchingIndicesList.isLoading"
|
||||
class="euiTable"
|
||||
>
|
||||
<tbody>
|
||||
<!-- Indices list -->
|
||||
<tr
|
||||
class="euiTableRow"
|
||||
ng-repeat="index in matchingIndicesList.pageOfIndices"
|
||||
>
|
||||
<p class="kuiText" ng-bind-html="index.name | highlight:matchingIndicesList.formattedPattern">
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<td class="euiTableRowCell">
|
||||
<span
|
||||
class="euiTableCellContent"
|
||||
ng-bind-html="index.name | highlight:matchingIndicesList.formattedPattern"
|
||||
></span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,169 +1,165 @@
|
|||
<div class="kuiPanel">
|
||||
<div class="kuiPanelHeader">
|
||||
<div class="kuiPanelHeaderSection">
|
||||
<h2 class="kuiPanelHeader__title">
|
||||
Step 1 of 2: Define index pattern
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="euiTitle euiTitle--small">
|
||||
Step 1 of 2: Define index pattern
|
||||
</h2>
|
||||
|
||||
<div class="kuiPanelBody">
|
||||
<div>
|
||||
<form
|
||||
name="stepIndexPattern.indexPatternNameForm"
|
||||
role="form"
|
||||
ng-submit="stepIndexPattern.goToNextStep()"
|
||||
class="kuiVerticalRhythm"
|
||||
>
|
||||
<div class="createIndexPatternInputContainer kuiVerticalRhythm">
|
||||
<!-- Index pattern input -->
|
||||
<div>
|
||||
<label
|
||||
for="indexPatternNameField"
|
||||
class="kuiLabel kuiVerticalRhythmSmall"
|
||||
<div class="euiSpacer euiSpacer--m"></div>
|
||||
|
||||
<form
|
||||
name="stepIndexPattern.indexPatternNameForm"
|
||||
role="form"
|
||||
ng-submit="stepIndexPattern.goToNextStep()"
|
||||
>
|
||||
<div class="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--alignItemsEnd euiFlexGroup--responsive">
|
||||
<div class="euiFlexItem euiFlexItem--flexGrowZero">
|
||||
<div class="euiFormRow">
|
||||
<label
|
||||
for="indexPatternNameField"
|
||||
class="euiFormLabel"
|
||||
>
|
||||
Index pattern
|
||||
</label>
|
||||
<div class="euiFormControlLayout">
|
||||
<!-- Index pattern input -->
|
||||
<input
|
||||
id="indexPatternNameField"
|
||||
class="euiFieldText euiFieldText--fullWidth createIndexPatternInputField"
|
||||
data-test-subj="createIndexPatternNameInput"
|
||||
ng-model="stepIndexPattern.indexPatternName"
|
||||
placeholder="index-name-*"
|
||||
validate-index-pattern
|
||||
validate-index-pattern-allow-wildcard
|
||||
append-wildcard
|
||||
name="name"
|
||||
required
|
||||
type="text"
|
||||
aria-describedby="indexPatternNameFieldHelp1 indexPatternNameFieldHelp2"
|
||||
>
|
||||
Index pattern
|
||||
</label>
|
||||
|
||||
<div class="kuiVerticalRhythmSmall kuiVerticalRhythm">
|
||||
<input
|
||||
id="indexPatternNameField"
|
||||
class="kuiTextInput kuiTextInput--large createIndexPatternInputField"
|
||||
data-test-subj="createIndexPatternNameInput"
|
||||
ng-model="stepIndexPattern.indexPatternName"
|
||||
placeholder="index-name-*"
|
||||
validate-index-pattern
|
||||
validate-index-pattern-allow-wildcard
|
||||
append-wildcard
|
||||
name="name"
|
||||
required
|
||||
type="text"
|
||||
aria-describedby="indexPatternNameFieldHelp1 indexPatternNameFieldHelp2"
|
||||
>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="euiFormHelpText euiFormRow__text">
|
||||
<p
|
||||
id="indexPatternNameFieldHelp1"
|
||||
class="kuiText kuiSubduedText kuiVerticalRhythm"
|
||||
class="euiTextColor euiTextColor--subdued"
|
||||
>
|
||||
You can use a <strong>*</strong> as a wildcard in your index pattern.
|
||||
</p>
|
||||
|
||||
<div class="euiSpacer euiSpacer--xs"></div>
|
||||
<p
|
||||
id="indexPatternNameFieldHelp2"
|
||||
class="kuiText kuiSubduedText"
|
||||
class="euiTextColor euiTextColor--subdued"
|
||||
>
|
||||
You can't use empty spaces or the characters <strong>\ / ? " < > |</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Action -->
|
||||
<button
|
||||
data-test-subj="createIndexPatternGoToStep2Button"
|
||||
class="kuiButton kuiButton--primary kuiButton--iconText kuiVerticalRhythmSmall"
|
||||
ng-click="stepIndexPattern.goToNextStep()"
|
||||
ng-disabled="!stepIndexPattern.canGoToNextStep()"
|
||||
>
|
||||
<span class="kuiButton__inner">
|
||||
<span>
|
||||
Next step
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="kuiButton__icon kuiIcon fa-chevron-right"
|
||||
></span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- List of matching indices -->
|
||||
<div
|
||||
class="kuiVerticalRhythm"
|
||||
ng-switch="stepIndexPattern.matchingIndicesListType"
|
||||
>
|
||||
<div ng-switch-when="invalidIndexPattern">
|
||||
<matching-indices-list
|
||||
is-loading="stepIndexPattern.isFetchingMatchingIndices"
|
||||
indices="stepIndexPattern.allIndices"
|
||||
pattern="stepIndexPattern.indexPatternName"
|
||||
>
|
||||
<span class="kuiStatusText kuiStatusText--error">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="kuiStatusText__icon kuiIcon fa-hand-stop-o"
|
||||
></span>
|
||||
|
||||
<span>
|
||||
You've entered an invalid index pattern. Please adjust it to match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
|
||||
</span>
|
||||
</span>
|
||||
</matching-indices-list>
|
||||
</div><div ng-switch-when="noInput">
|
||||
<matching-indices-list
|
||||
is-loading="stepIndexPattern.isFetchingMatchingIndices"
|
||||
indices="stepIndexPattern.allIndices"
|
||||
pattern="stepIndexPattern.indexPatternName"
|
||||
>
|
||||
<span class="kuiStatusText kuiStatusText--info">
|
||||
<span ng-if="!stepIndexPattern.allIndices.length">
|
||||
You only have a single index. You can create an index pattern to match it.
|
||||
</span>
|
||||
|
||||
<span ng-if="stepIndexPattern.allIndices.length">
|
||||
Your index pattern can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
|
||||
</span>
|
||||
</span>
|
||||
</matching-indices-list>
|
||||
</div>
|
||||
|
||||
<div ng-switch-when="noMatches">
|
||||
<matching-indices-list
|
||||
is-loading="stepIndexPattern.isFetchingMatchingIndices"
|
||||
indices="stepIndexPattern.allIndices"
|
||||
pattern="stepIndexPattern.indexPatternName"
|
||||
>
|
||||
<span class="kuiStatusText kuiStatusText--info">
|
||||
<span>
|
||||
The index pattern you've entered doesn't match any indices. You can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
|
||||
</span>
|
||||
</span>
|
||||
</matching-indices-list>
|
||||
</div>
|
||||
|
||||
<div ng-switch-when="partialMatches">
|
||||
<matching-indices-list
|
||||
is-loading="stepIndexPattern.isFetchingMatchingIndices"
|
||||
indices="stepIndexPattern.partialMatchingIndices"
|
||||
pattern="stepIndexPattern.indexPatternName"
|
||||
>
|
||||
<span class="kuiStatusText kuiStatusText--info">
|
||||
<span>
|
||||
Your index pattern doesn't match any indices, but you have <strong>{{stepIndexPattern.partialMatchingIndices.length}} {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'indices' : 'index'}}</strong> which {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'look' : 'looks'}} similar.
|
||||
</span>
|
||||
</span>
|
||||
</matching-indices-list>
|
||||
</div>
|
||||
|
||||
<div ng-switch-when="exactMatches">
|
||||
<matching-indices-list
|
||||
is-loading="stepIndexPattern.isFetchingMatchingIndices"
|
||||
indices="stepIndexPattern.matchingIndices"
|
||||
pattern="stepIndexPattern.indexPatternName"
|
||||
>
|
||||
<span class="kuiStatusText kuiStatusText--success">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="kuiStatusText__icon kuiIcon fa-check"
|
||||
></span>
|
||||
|
||||
<span>
|
||||
<strong>Success!</strong> Your index pattern matches <strong>{{stepIndexPattern.matchingIndices.length}} {{stepIndexPattern.matchingIndices.length > 1 ? 'indices' : 'index'}}</strong>.
|
||||
</span>
|
||||
</span>
|
||||
</matching-indices-list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="euiFlexItem euiFlexItem--flexGrowZero">
|
||||
<!-- Action -->
|
||||
<button
|
||||
data-test-subj="createIndexPatternGoToStep2Button"
|
||||
class="euiButton euiButton--primary"
|
||||
ng-click="stepIndexPattern.goToNextStep()"
|
||||
ng-disabled="!stepIndexPattern.canGoToNextStep()"
|
||||
>
|
||||
<span class="euiButton__content">
|
||||
Next step
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="euiSpacer euiSpacer--m"></div>
|
||||
|
||||
<!-- List of matching indices -->
|
||||
<div ng-switch="stepIndexPattern.matchingIndicesListType">
|
||||
<div ng-switch-when="invalidIndexPattern">
|
||||
<matching-indices-list
|
||||
is-loading="stepIndexPattern.isFetchingMatchingIndices"
|
||||
indices="stepIndexPattern.allIndices"
|
||||
pattern="stepIndexPattern.indexPatternName"
|
||||
>
|
||||
<span class="euiTextColor euiTextColor--danger">
|
||||
<span aria-hidden="true">
|
||||
<svg class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<g fill="#13252D" fill-rule="evenodd">
|
||||
<circle cx="5" cy="5" r="1" />
|
||||
<circle cx="10" cy="5" r="1" />
|
||||
<path fill-rule="nonzero" d="M7.5 14a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zm0 1a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z"
|
||||
/>
|
||||
<path fill-rule="nonzero" d="M12.332 9.626C10.747 8.217 9.133 7.5 7.5 7.5s-3.247.717-4.832 2.126a.5.5 0 1 0 .664.748C4.747 9.116 6.133 8.5 7.5 8.5s2.753.616 4.168 1.874a.5.5 0 0 0 .664-.748z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
You've entered an invalid index pattern. Please adjust it to match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
|
||||
</span>
|
||||
</span>
|
||||
</matching-indices-list>
|
||||
</div>
|
||||
<div ng-switch-when="noInput">
|
||||
<matching-indices-list
|
||||
is-loading="stepIndexPattern.isFetchingMatchingIndices"
|
||||
indices="stepIndexPattern.allIndices"
|
||||
pattern="stepIndexPattern.indexPatternName"
|
||||
>
|
||||
<span ng-if="!stepIndexPattern.allIndices.length">
|
||||
You only have a single index. You can create an index pattern to match it.
|
||||
</span>
|
||||
|
||||
<span ng-if="stepIndexPattern.allIndices.length">
|
||||
Your index pattern can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
|
||||
</span>
|
||||
</matching-indices-list>
|
||||
</div>
|
||||
<div ng-switch-when="noMatches">
|
||||
<matching-indices-list
|
||||
is-loading="stepIndexPattern.isFetchingMatchingIndices"
|
||||
indices="stepIndexPattern.allIndices"
|
||||
pattern="stepIndexPattern.indexPatternName"
|
||||
>
|
||||
<span>
|
||||
The index pattern you've entered doesn't match any indices. You can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
|
||||
</span>
|
||||
</matching-indices-list>
|
||||
</div>
|
||||
<div ng-switch-when="partialMatches">
|
||||
<matching-indices-list
|
||||
is-loading="stepIndexPattern.isFetchingMatchingIndices"
|
||||
indices="stepIndexPattern.partialMatchingIndices"
|
||||
pattern="stepIndexPattern.indexPatternName"
|
||||
>
|
||||
<span>
|
||||
Your index pattern doesn't match any indices, but you have <strong>{{stepIndexPattern.partialMatchingIndices.length}} {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'indices' : 'index'}}</strong> which {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'look' : 'looks'}} similar.
|
||||
</span>
|
||||
</matching-indices-list>
|
||||
</div>
|
||||
<div ng-switch-when="exactMatches">
|
||||
<matching-indices-list
|
||||
is-loading="stepIndexPattern.isFetchingMatchingIndices"
|
||||
indices="stepIndexPattern.matchingIndices"
|
||||
pattern="stepIndexPattern.indexPatternName"
|
||||
>
|
||||
<span class="euiTextColor euiTextColor--secondary">
|
||||
<span aria-hidden="true">
|
||||
<svg class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
|
||||
xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
|
||||
<defs>
|
||||
<path id="check-a" d="M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12"
|
||||
/>
|
||||
</defs>
|
||||
<use href="#check-a" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<strong>Success!</strong> Your index pattern matches <strong>{{stepIndexPattern.matchingIndices.length}} {{stepIndexPattern.matchingIndices.length > 1 ? 'indices' : 'index'}}</strong>.
|
||||
</span>
|
||||
</span>
|
||||
</matching-indices-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
.createIndexPatternInputContainer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.createIndexPatternInputField.ng-untouched {
|
||||
border-color: #dedede !important;
|
||||
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #fbfbfb;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,173 +2,197 @@
|
|||
name="stepTimeField.form"
|
||||
role="form"
|
||||
ng-submit="stepTimeField.createIndexPattern()"
|
||||
class="kuiPanel"
|
||||
>
|
||||
<div class="kuiPanelHeader">
|
||||
<div class="kuiPanelHeaderSection">
|
||||
<h2 class="kuiPanelHeader__title">
|
||||
Step 2 of 2: Configure settings
|
||||
</h2>
|
||||
<h2 class="euiTitle euiTitle--small">
|
||||
Step 2 of 2: Configure settings
|
||||
</h2>
|
||||
|
||||
<div class="euiSpacer euiSpacer--m"></div>
|
||||
|
||||
<p class="euiTextColor euiTextColor--subdued">
|
||||
You've defined <strong>{{stepTimeField.indexPatternName}}</strong> as your index pattern. Now you can specify some settings before we create it.
|
||||
</p>
|
||||
|
||||
<div class="euiSpacer euiSpacer--m"></div>
|
||||
|
||||
<div class="euiFormRow">
|
||||
<div class="euiFormLabel">
|
||||
<div class="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween">
|
||||
<div class="euiFlexItem euiFlexItem--flexGrowZero">
|
||||
<label
|
||||
id="timeFilterFieldSelectLabel"
|
||||
for="timeFilterFieldSelect"
|
||||
>
|
||||
Time Filter field name
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="euiFlexItem euiFlexItem--flexGrowZero">
|
||||
<a
|
||||
ng-if="!stepTimeField.isFetchingTimeFieldOptions"
|
||||
class="euiLink euiText euiText--extraSmall timeFieldRefreshButton"
|
||||
ng-click="stepTimeField.fetchTimeFieldOptions()"
|
||||
kbn-accessible-click
|
||||
aria-describedby="timeFilterFieldSelectLabel"
|
||||
>
|
||||
Refresh
|
||||
</a>
|
||||
|
||||
<div
|
||||
ng-if="stepTimeField.isFetchingTimeFieldOptions"
|
||||
class="euiLoadingSpinner euiLoadingSpinner--small"
|
||||
aria-label="Please wait while we fetch your time field options"
|
||||
aria-describedby="timeFilterFieldSelectLabel"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kuiPanelBody">
|
||||
<p class="kuiText kuiSubduedText kuiVerticalRhythm">
|
||||
You've defined <strong>{{stepTimeField.indexPatternName}}</strong> as your index pattern. Now you can specify some settings before we create it.
|
||||
</p>
|
||||
<div class="euiFormControlLayout">
|
||||
<select
|
||||
ng-show="stepTimeField.canShowMainSelect()"
|
||||
id="timeFilterFieldSelect"
|
||||
aria-describedby="timeFilterFieldSelectHelpText1 timeFilterFieldSelectHelpText2"
|
||||
class="euiSelect euiSelect--large"
|
||||
data-test-subj="createIndexPatternTimeFieldSelect"
|
||||
ng-disabled="stepTimeField.isTimeFieldSelectDisabled()"
|
||||
ng-required="stepTimeField.hasTimeFieldOptions()"
|
||||
ng-options="option as option.display disable when option.isDisabled for option in stepTimeField.timeFieldOptions"
|
||||
ng-model="stepTimeField.selectedTimeFieldOption"
|
||||
></select>
|
||||
|
||||
<!-- Time field select -->
|
||||
<div class="kuiVerticalRhythm">
|
||||
<div class="kuiVerticalRhythmSmall timeFieldNameLabel">
|
||||
<label
|
||||
id="timeFilterFieldSelectLabel"
|
||||
class="kuiLabel"
|
||||
for="timeFilterFieldSelect"
|
||||
>
|
||||
Time Filter field name
|
||||
</label>
|
||||
|
||||
<a
|
||||
ng-if="!stepTimeField.isFetchingTimeFieldOptions"
|
||||
class="kuiLink kuiSubText"
|
||||
ng-click="stepTimeField.fetchTimeFieldOptions()"
|
||||
kbn-accessible-click
|
||||
aria-describedby="timeFilterFieldSelectLabel"
|
||||
>
|
||||
Refresh
|
||||
</a>
|
||||
|
||||
<p
|
||||
ng-if="stepTimeField.isFetchingTimeFieldOptions"
|
||||
class="kuiText kuiSubduedText"
|
||||
aria-label="Please wait while we fetch your time field options"
|
||||
aria-describedby="timeFilterFieldSelectLabel"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="kuiIcon fa-spinner fa-spin"
|
||||
></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="kuiVerticalRhythmSmall kuiVerticalRhythm">
|
||||
<select
|
||||
ng-show="stepTimeField.canShowMainSelect()"
|
||||
id="timeFilterFieldSelect"
|
||||
aria-describedby="timeFilterFieldSelectHelpText"
|
||||
class="kuiSelect kuiSelect--large"
|
||||
data-test-subj="createIndexPatternTimeFieldSelect"
|
||||
ng-disabled="stepTimeField.isTimeFieldSelectDisabled()"
|
||||
ng-required="stepTimeField.hasTimeFieldOptions()"
|
||||
ng-options="option as option.display disable when option.isDisabled for option in stepTimeField.timeFieldOptions"
|
||||
ng-model="stepTimeField.selectedTimeFieldOption"
|
||||
></select>
|
||||
<select
|
||||
ng-show="stepTimeField.canShowLoadingSelect()"
|
||||
id="timeFilterFieldSelect"
|
||||
aria-describedby="timeFilterFieldSelectHelpText"
|
||||
class="kuiSelect kuiSelect--large"
|
||||
data-test-subj="createIndexPatternTimeFieldSelect"
|
||||
disabled="disabled"
|
||||
>
|
||||
<option>Loading...</option>
|
||||
</select>
|
||||
<p
|
||||
ng-if="stepTimeField.canShowNoTimeBasedFieldsMessage()"
|
||||
class="kuiText kuiSubduedText"
|
||||
>
|
||||
The indices which match this index pattern don't contain any time fields.
|
||||
</p>
|
||||
</div>
|
||||
<select
|
||||
ng-show="stepTimeField.canShowLoadingSelect()"
|
||||
id="timeFilterFieldSelect"
|
||||
aria-describedby="timeFilterFieldSelectHelpText1 timeFilterFieldSelectHelpText2"
|
||||
class="euiSelect euiSelect--large"
|
||||
data-test-subj="createIndexPatternTimeFieldSelect"
|
||||
disabled="disabled"
|
||||
>
|
||||
<option>Loading...</option>
|
||||
</select>
|
||||
|
||||
<p
|
||||
ng-if="stepTimeField.canShowHelpText()"
|
||||
id="timeFilterFieldSelectHelpText"
|
||||
class="kuiText kuiSubduedText kuiVerticalRhythm"
|
||||
ng-if="stepTimeField.canShowNoTimeBasedFieldsMessage()"
|
||||
class="euiTextColor euiTextColor--subdued euiText euiText--small"
|
||||
>
|
||||
The Time Filter will use this field to filter your data by time.
|
||||
You can choose not to have a time field, but you will not be able to narrow down your data by a time range.
|
||||
The indices which match this index pattern don't contain any time fields.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="kuiVerticalRhythm">
|
||||
<button
|
||||
class="kuiToggleButton"
|
||||
data-id="toggleButton"
|
||||
ng-click="stepTimeField.toggleAdvancedOptions()"
|
||||
>
|
||||
<span
|
||||
class="kuiToggleButton__icon kuiIcon"
|
||||
ng-class="{
|
||||
'fa-caret-right': !stepTimeField.showAdvancedOptions,
|
||||
'fa-caret-down': stepTimeField.showAdvancedOptions
|
||||
}"
|
||||
data-id="toggleButtonIcon"
|
||||
>
|
||||
</span>
|
||||
<span ng-if="stepTimeField.showAdvancedOptions">Hide advanced options</span>
|
||||
<span ng-if="!stepTimeField.showAdvancedOptions">Show advanced options</span>
|
||||
</button>
|
||||
<div
|
||||
ng-if="stepTimeField.canShowHelpText()"
|
||||
class="euiFormHelpText euiFormRow__text"
|
||||
id="timeFilterFieldSelectHelpText1"
|
||||
>
|
||||
The Time Filter will use this field to filter your data by time.
|
||||
</div>
|
||||
|
||||
<!-- Index pattern id input -->
|
||||
<div
|
||||
class="kuiVerticalRhythm"
|
||||
ng-if="stepTimeField.showAdvancedOptions"
|
||||
ng-if="stepTimeField.canShowHelpText()"
|
||||
class="euiFormHelpText euiFormRow__text"
|
||||
id="timeFilterFieldSelectHelpText2"
|
||||
>
|
||||
You can choose not to have a time field, but you will not be able to narrow down your data by a time range.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="euiButtonEmpty"
|
||||
type="button"
|
||||
data-id="toggleButton"
|
||||
ng-click="stepTimeField.toggleAdvancedOptions()"
|
||||
>
|
||||
<svg ng-if="!stepTimeField.showAdvancedOptions" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
|
||||
xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
|
||||
<defs>
|
||||
<path id="arrow_right-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
|
||||
/>
|
||||
</defs>
|
||||
<use fill-rule="nonzero" transform="matrix(0 1 1 0 0 0)" href="#arrow_right-a"
|
||||
/>
|
||||
</svg>
|
||||
<svg ng-if="stepTimeField.showAdvancedOptions" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
|
||||
xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
|
||||
<defs>
|
||||
<path id="arrow_down-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
|
||||
/>
|
||||
</defs>
|
||||
<use fill-rule="nonzero" href="#arrow_down-a" />
|
||||
</svg>
|
||||
<span ng-if="stepTimeField.showAdvancedOptions">Hide advanced options</span>
|
||||
<span ng-if="!stepTimeField.showAdvancedOptions">Show advanced options</span>
|
||||
</button>
|
||||
|
||||
<!-- Index pattern id input -->
|
||||
<div class="euiSpacer euiSpacer--xs"></div>
|
||||
<div
|
||||
ng-if="stepTimeField.showAdvancedOptions"
|
||||
class="euiFormRow"
|
||||
>
|
||||
<div class="euiFormLabel">
|
||||
<label
|
||||
class="kuiLabel kuiVerticalRhythmSmall"
|
||||
class="euiLabel"
|
||||
for="indexPatternCreationId"
|
||||
>
|
||||
Custom index pattern ID
|
||||
</label>
|
||||
|
||||
<div class="kuiVerticalRhythm kuiVerticalRhythmSmall">
|
||||
<input
|
||||
class="kuiTextInput kuiTextInput--large"
|
||||
id="indexPatternCreationId"
|
||||
data-test-subj="createIndexPatternIdInput"
|
||||
ng-model="stepTimeField.indexPatternId"
|
||||
ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"
|
||||
validate-index-pattern
|
||||
validate-index-pattern-allow-wildcard
|
||||
name="id"
|
||||
type="text"
|
||||
>
|
||||
</div>
|
||||
|
||||
<p
|
||||
class="kuiText kuiSubduedText kuiVerticalRhythm"
|
||||
</div>
|
||||
<div class="euiFormControlLayout">
|
||||
<input
|
||||
class="euiFieldText euiFieldText--large"
|
||||
id="indexPatternCreationId"
|
||||
data-test-subj="createIndexPatternIdInput"
|
||||
ng-model="stepTimeField.indexPatternId"
|
||||
ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"
|
||||
validate-index-pattern
|
||||
validate-index-pattern-allow-wildcard
|
||||
name="id"
|
||||
type="text"
|
||||
>
|
||||
</div>
|
||||
<div class="euiFormHelpText euiFormRow__text">
|
||||
<span class="euiTextColor euiTextColor--subdued">
|
||||
Kibana will provide a unique identifier for each index pattern.
|
||||
If you do not want to use this unique ID, enter a custom one.
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="kuiBar kuiVerticalRhythm">
|
||||
<div class="kuiBarSection">
|
||||
<div class="kuiButtonGroup">
|
||||
<button
|
||||
class="kuiButton kuiButton--secondary kuiButton--iconText"
|
||||
ng-click="stepTimeField.goToPreviousStep()"
|
||||
>
|
||||
<span class="kuiButton__inner">
|
||||
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-chevron-left"></span>
|
||||
<span>Back</span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="euiSpacer euiSpacer--m"></div>
|
||||
|
||||
<button
|
||||
data-test-subj="createIndexPatternCreateButton"
|
||||
ng-disabled="!stepTimeField.canCreateIndexPattern()"
|
||||
class="kuiButton kuiButton--primary"
|
||||
type="submit"
|
||||
>
|
||||
Create index pattern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd">
|
||||
<div class="euiFlexItem euiFlexItem--flexGrowZero">
|
||||
<button
|
||||
class="euiButtonEmpty euiButtonEmpty--primary"
|
||||
ng-click="stepTimeField.goToPreviousStep()"
|
||||
>
|
||||
<span class="euiButtonEmpty__content">
|
||||
<svg aria-hidden="true" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
|
||||
xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
|
||||
<defs>
|
||||
<path id="arrow_left-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
|
||||
/>
|
||||
</defs>
|
||||
<use fill-rule="nonzero" transform="rotate(90 8 8)" href="#arrow_left-a"
|
||||
/>
|
||||
</svg>
|
||||
<span>Back</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="euiFlexItem euiFlexItem--flexGrowZero">
|
||||
<button
|
||||
data-test-subj="createIndexPatternCreateButton"
|
||||
ng-disabled="!stepTimeField.canCreateIndexPattern()"
|
||||
class="euiButton euiButton--primary euiButton--fill"
|
||||
type="submit"
|
||||
>
|
||||
<span class="euiButton__content">
|
||||
Create index pattern
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -7,3 +7,10 @@
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Bring the line-height down or else this link expands its container when it becomes visible.
|
||||
*/
|
||||
.timeFieldRefreshButton {
|
||||
line-height: 1 !important; /* 1 */
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue