MIgrated index_header to react (#63490)
This commit is contained in:
parent
ce9c6e258a
commit
ee1cebdbe1
|
@ -1,11 +1,5 @@
|
||||||
<kbn-management-app section="kibana/index_patterns">
|
<kbn-management-app section="kibana/index_patterns">
|
||||||
<div class="euiPanel euiPanel--paddingLarge">
|
<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 id="reactFieldEditor"></div>
|
||||||
</div>
|
</div>
|
||||||
</kbn-management-app>
|
</kbn-management-app>
|
||||||
|
|
|
@ -34,6 +34,8 @@ import { FieldEditor } from 'ui/field_editor';
|
||||||
import { I18nContext } from 'ui/i18n';
|
import { I18nContext } from 'ui/i18n';
|
||||||
import { i18n } from '@kbn/i18n';
|
import { i18n } from '@kbn/i18n';
|
||||||
|
|
||||||
|
import { IndexHeader } from '../index_header';
|
||||||
|
|
||||||
const REACT_FIELD_EDITOR_ID = 'reactFieldEditor';
|
const REACT_FIELD_EDITOR_ID = 'reactFieldEditor';
|
||||||
const renderFieldEditor = (
|
const renderFieldEditor = (
|
||||||
$scope,
|
$scope,
|
||||||
|
@ -49,6 +51,7 @@ const renderFieldEditor = (
|
||||||
|
|
||||||
render(
|
render(
|
||||||
<I18nContext>
|
<I18nContext>
|
||||||
|
<IndexHeader indexPattern={indexPattern} />
|
||||||
<FieldEditor
|
<FieldEditor
|
||||||
indexPattern={indexPattern}
|
indexPattern={indexPattern}
|
||||||
field={field}
|
field={field}
|
||||||
|
|
|
@ -7,12 +7,7 @@
|
||||||
aria-label="{{::'kbn.management.editIndexPattern.detailsAria' | i18n: { defaultMessage: 'Index pattern details' } }}"
|
aria-label="{{::'kbn.management.editIndexPattern.detailsAria' | i18n: { defaultMessage: 'Index pattern details' } }}"
|
||||||
>
|
>
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<kbn-management-index-patterns-header
|
<div id="reactIndexHeader"></div>
|
||||||
index-pattern="indexPattern"
|
|
||||||
set-default="setDefaultPattern()"
|
|
||||||
refresh-fields="refreshFields()"
|
|
||||||
delete="removePattern()"
|
|
||||||
></kbn-management-index-patterns-header>
|
|
||||||
|
|
||||||
<div class="euiSpacer euiSpacer--s"></div>
|
<div class="euiSpacer euiSpacer--s"></div>
|
||||||
<p ng-if="::(indexPattern.timeFieldName || (indexPattern.tags && indexPattern.tags.length))">
|
<p ng-if="::(indexPattern.timeFieldName || (indexPattern.tags && indexPattern.tags.length))">
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import './index_header';
|
import { IndexHeader } from './index_header';
|
||||||
import './create_edit_field';
|
import './create_edit_field';
|
||||||
import { docTitle } from 'ui/doc_title';
|
import { docTitle } from 'ui/doc_title';
|
||||||
import { KbnUrlProvider } from 'ui/url';
|
import { KbnUrlProvider } from 'ui/url';
|
||||||
|
@ -44,6 +44,7 @@ import { createEditIndexPatternPageStateContainer } from './edit_index_pattern_s
|
||||||
const REACT_SOURCE_FILTERS_DOM_ELEMENT_ID = 'reactSourceFiltersTable';
|
const REACT_SOURCE_FILTERS_DOM_ELEMENT_ID = 'reactSourceFiltersTable';
|
||||||
const REACT_INDEXED_FIELDS_DOM_ELEMENT_ID = 'reactIndexedFieldsTable';
|
const REACT_INDEXED_FIELDS_DOM_ELEMENT_ID = 'reactIndexedFieldsTable';
|
||||||
const REACT_SCRIPTED_FIELDS_DOM_ELEMENT_ID = 'reactScriptedFieldsTable';
|
const REACT_SCRIPTED_FIELDS_DOM_ELEMENT_ID = 'reactScriptedFieldsTable';
|
||||||
|
const REACT_INDEX_HEADER_DOM_ELEMENT_ID = 'reactIndexHeader';
|
||||||
|
|
||||||
const TAB_INDEXED_FIELDS = 'indexedFields';
|
const TAB_INDEXED_FIELDS = 'indexedFields';
|
||||||
const TAB_SCRIPTED_FIELDS = 'scriptedFields';
|
const TAB_SCRIPTED_FIELDS = 'scriptedFields';
|
||||||
|
@ -160,6 +161,33 @@ function destroyIndexedFieldsTable() {
|
||||||
node && unmountComponentAtNode(node);
|
node && unmountComponentAtNode(node);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function destroyIndexHeader() {
|
||||||
|
const node = document.getElementById(REACT_INDEX_HEADER_DOM_ELEMENT_ID);
|
||||||
|
node && unmountComponentAtNode(node);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderIndexHeader($scope, config) {
|
||||||
|
$scope.$$postDigest(() => {
|
||||||
|
const node = document.getElementById(REACT_INDEX_HEADER_DOM_ELEMENT_ID);
|
||||||
|
if (!node) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
render(
|
||||||
|
<I18nContext>
|
||||||
|
<IndexHeader
|
||||||
|
indexPattern={$scope.indexPattern}
|
||||||
|
setDefault={$scope.setDefaultPattern}
|
||||||
|
refreshFields={$scope.refreshFields}
|
||||||
|
deleteIndexPattern={$scope.removePattern}
|
||||||
|
defaultIndex={config.get('defaultIndex')}
|
||||||
|
/>
|
||||||
|
</I18nContext>,
|
||||||
|
node
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function handleTabChange($scope, newTab) {
|
function handleTabChange($scope, newTab) {
|
||||||
destroyIndexedFieldsTable();
|
destroyIndexedFieldsTable();
|
||||||
destroySourceFiltersTable();
|
destroySourceFiltersTable();
|
||||||
|
@ -391,6 +419,9 @@ uiModules
|
||||||
destroyIndexedFieldsTable();
|
destroyIndexedFieldsTable();
|
||||||
destroyScriptedFieldsTable();
|
destroyScriptedFieldsTable();
|
||||||
destroySourceFiltersTable();
|
destroySourceFiltersTable();
|
||||||
|
destroyIndexHeader();
|
||||||
destroyState();
|
destroyState();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
renderIndexHeader($scope, config);
|
||||||
});
|
});
|
||||||
|
|
|
@ -17,4 +17,4 @@
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import './index_header';
|
export { IndexHeader } from './index_header';
|
|
@ -1,59 +0,0 @@
|
||||||
<div class="kuiBar kuiVerticalRhythm">
|
|
||||||
<div class="kuiBarSection">
|
|
||||||
<!-- Index pattern name -->
|
|
||||||
<h1
|
|
||||||
class="euiTitle euiTitle--medium"
|
|
||||||
data-test-subj="indexPatternTitle"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
ng-if="defaultIndex === indexPattern.id"
|
|
||||||
class="kuiIcon fa-star"
|
|
||||||
></span>
|
|
||||||
{{indexPattern.title}}
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="kuiBarSection">
|
|
||||||
<button
|
|
||||||
ng-if="setDefault"
|
|
||||||
ng-click="setDefault()"
|
|
||||||
aria-label="{{::'kbn.management.editIndexPattern.setDefaultAria' | i18n: { defaultMessage: 'Set as default index' } }}"
|
|
||||||
tooltip="{{::'kbn.management.editIndexPattern.setDefaultTooltip' | i18n: { defaultMessage: 'Set as default index' } }}"
|
|
||||||
class="kuiButton kuiButton--basic"
|
|
||||||
data-test-subj="setDefaultIndexPatternButton"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="kuiIcon fa-star"
|
|
||||||
></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
ng-if="refreshFields"
|
|
||||||
ng-click="refreshFields()"
|
|
||||||
aria-label="{{::'kbn.management.editIndexPattern.refreshAria' | i18n: { defaultMessage: 'Reload field list' } }}"
|
|
||||||
tooltip="{{::'kbn.management.editIndexPattern.refreshTooltip' | i18n: { defaultMessage: 'Refresh field list' } }}"
|
|
||||||
class="kuiButton kuiButton--basic"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="kuiIcon fa-refresh"
|
|
||||||
></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
ng-if="delete"
|
|
||||||
ng-click="delete()"
|
|
||||||
aria-label="{{::'kbn.management.editIndexPattern.removeAria' | i18n: { defaultMessage: 'Remove index pattern' } }}"
|
|
||||||
tooltip="{{::'kbn.management.editIndexPattern.removeTooltip' | i18n: { defaultMessage: 'Remove index pattern' } }}"
|
|
||||||
class="kuiButton kuiButton--danger"
|
|
||||||
data-test-subj="deleteIndexPatternButton"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="kuiIcon fa-trash"
|
|
||||||
></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
|
@ -1,40 +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 { uiModules } from 'ui/modules';
|
|
||||||
import template from './index_header.html';
|
|
||||||
uiModules.get('apps/management').directive('kbnManagementIndexPatternsHeader', function(config) {
|
|
||||||
return {
|
|
||||||
restrict: 'E',
|
|
||||||
template,
|
|
||||||
replace: true,
|
|
||||||
scope: {
|
|
||||||
indexPattern: '=',
|
|
||||||
setDefault: '&',
|
|
||||||
refreshFields: '&',
|
|
||||||
delete: '&',
|
|
||||||
},
|
|
||||||
link: function($scope, $el, attrs) {
|
|
||||||
$scope.delete = attrs.delete ? $scope.delete : null;
|
|
||||||
$scope.setDefault = attrs.setDefault ? $scope.setDefault : null;
|
|
||||||
$scope.refreshFields = attrs.refreshFields ? $scope.refreshFields : null;
|
|
||||||
config.bindToScope($scope, 'defaultIndex');
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
|
@ -0,0 +1,134 @@
|
||||||
|
/*
|
||||||
|
* 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 { i18n } from '@kbn/i18n';
|
||||||
|
import {
|
||||||
|
EuiFlexGroup,
|
||||||
|
EuiToolTip,
|
||||||
|
EuiFlexItem,
|
||||||
|
EuiIcon,
|
||||||
|
EuiTitle,
|
||||||
|
EuiButtonIcon,
|
||||||
|
} from '@elastic/eui';
|
||||||
|
import { IIndexPattern } from '../../../../../../../../../plugins/data/public';
|
||||||
|
|
||||||
|
interface IndexHeaderProps {
|
||||||
|
defaultIndex: string;
|
||||||
|
indexPattern: IIndexPattern;
|
||||||
|
setDefault?: () => void;
|
||||||
|
refreshFields?: () => void;
|
||||||
|
deleteIndexPattern?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const setDefaultAriaLabel = i18n.translate('kbn.management.editIndexPattern.setDefaultAria', {
|
||||||
|
defaultMessage: 'Set as default index.',
|
||||||
|
});
|
||||||
|
|
||||||
|
const setDefaultTooltip = i18n.translate('kbn.management.editIndexPattern.setDefaultTooltip', {
|
||||||
|
defaultMessage: 'Set as default index.',
|
||||||
|
});
|
||||||
|
|
||||||
|
const refreshAriaLabel = i18n.translate('kbn.management.editIndexPattern.refreshAria', {
|
||||||
|
defaultMessage: 'Reload field list.',
|
||||||
|
});
|
||||||
|
|
||||||
|
const refreshTooltip = i18n.translate('kbn.management.editIndexPattern.refreshTooltip', {
|
||||||
|
defaultMessage: 'Refresh field list.',
|
||||||
|
});
|
||||||
|
|
||||||
|
const removeAriaLabel = i18n.translate('kbn.management.editIndexPattern.removeAria', {
|
||||||
|
defaultMessage: 'Remove index pattern.',
|
||||||
|
});
|
||||||
|
|
||||||
|
const removeTooltip = i18n.translate('kbn.management.editIndexPattern.removeTooltip', {
|
||||||
|
defaultMessage: 'Remove index pattern.',
|
||||||
|
});
|
||||||
|
|
||||||
|
export function IndexHeader({
|
||||||
|
defaultIndex,
|
||||||
|
indexPattern,
|
||||||
|
setDefault,
|
||||||
|
refreshFields,
|
||||||
|
deleteIndexPattern,
|
||||||
|
}: IndexHeaderProps) {
|
||||||
|
return (
|
||||||
|
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
|
||||||
|
<EuiFlexItem>
|
||||||
|
<EuiFlexGroup alignItems="center">
|
||||||
|
{defaultIndex === indexPattern.id && (
|
||||||
|
<EuiFlexItem grow={false} style={{ marginRight: 0 }}>
|
||||||
|
<EuiIcon size="xl" type="starFilled" />
|
||||||
|
</EuiFlexItem>
|
||||||
|
)}
|
||||||
|
<EuiFlexItem style={{ marginLeft: 0 }}>
|
||||||
|
<EuiTitle>
|
||||||
|
<h1 data-test-subj="indexPatternTitle">{indexPattern.title}</h1>
|
||||||
|
</EuiTitle>
|
||||||
|
</EuiFlexItem>
|
||||||
|
</EuiFlexGroup>
|
||||||
|
</EuiFlexItem>
|
||||||
|
<EuiFlexItem grow={false}>
|
||||||
|
<EuiFlexGroup>
|
||||||
|
{setDefault && (
|
||||||
|
<EuiFlexItem>
|
||||||
|
<EuiToolTip content={setDefaultTooltip}>
|
||||||
|
<EuiButtonIcon
|
||||||
|
color="text"
|
||||||
|
onClick={setDefault}
|
||||||
|
iconType="starFilledSpace"
|
||||||
|
aria-label={setDefaultAriaLabel}
|
||||||
|
data-test-subj="setDefaultIndexPatternButton"
|
||||||
|
/>
|
||||||
|
</EuiToolTip>
|
||||||
|
</EuiFlexItem>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{refreshFields && (
|
||||||
|
<EuiFlexItem>
|
||||||
|
<EuiToolTip content={refreshTooltip}>
|
||||||
|
<EuiButtonIcon
|
||||||
|
color="text"
|
||||||
|
onClick={refreshFields}
|
||||||
|
iconType="refresh"
|
||||||
|
aria-label={refreshAriaLabel}
|
||||||
|
data-test-subj="refreshFieldsIndexPatternButton"
|
||||||
|
/>
|
||||||
|
</EuiToolTip>
|
||||||
|
</EuiFlexItem>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{deleteIndexPattern && (
|
||||||
|
<EuiFlexItem>
|
||||||
|
<EuiToolTip content={removeTooltip}>
|
||||||
|
<EuiButtonIcon
|
||||||
|
color="danger"
|
||||||
|
onClick={deleteIndexPattern}
|
||||||
|
iconType="trash"
|
||||||
|
aria-label={removeAriaLabel}
|
||||||
|
data-test-subj="deleteIndexPatternButton"
|
||||||
|
/>
|
||||||
|
</EuiToolTip>
|
||||||
|
</EuiFlexItem>
|
||||||
|
)}
|
||||||
|
</EuiFlexGroup>
|
||||||
|
</EuiFlexItem>
|
||||||
|
</EuiFlexGroup>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in a new issue