Skip to content

Commit

Permalink
MIgrated index_header to react
Browse files Browse the repository at this point in the history
  • Loading branch information
VladLasitsa committed Apr 14, 2020
1 parent 1f732ad commit 81e90b0
Show file tree
Hide file tree
Showing 8 changed files with 171 additions and 113 deletions.
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
<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>
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ import { FieldEditor } from 'ui/field_editor';
import { I18nContext } from 'ui/i18n';
import { i18n } from '@kbn/i18n';

import { IndexHeader } from '../index_header';

const REACT_FIELD_EDITOR_ID = 'reactFieldEditor';
const renderFieldEditor = (
$scope,
Expand All @@ -49,6 +51,7 @@ const renderFieldEditor = (

render(
<I18nContext>
<IndexHeader indexPattern={indexPattern} />
<FieldEditor
indexPattern={indexPattern}
field={field}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,7 @@
aria-label="{{::'kbn.management.editIndexPattern.detailsAria' | i18n: { defaultMessage: 'Index pattern details' } }}"
>
<!-- Header -->
<kbn-management-index-patterns-header
index-pattern="indexPattern"
set-default="setDefaultPattern()"
refresh-fields="refreshFields()"
delete="removePattern()"
></kbn-management-index-patterns-header>
<div id="reactIndexHeader"></div>

<div class="euiSpacer euiSpacer--s"></div>
<p ng-if="::(indexPattern.timeFieldName || (indexPattern.tags && indexPattern.tags.length))">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
*/

import _ from 'lodash';
import './index_header';
import { IndexHeader } from './index_header';
import './create_edit_field';
import { docTitle } from 'ui/doc_title';
import { KbnUrlProvider } from 'ui/url';
Expand All @@ -44,6 +44,7 @@ import { createEditIndexPatternPageStateContainer } from './edit_index_pattern_s
const REACT_SOURCE_FILTERS_DOM_ELEMENT_ID = 'reactSourceFiltersTable';
const REACT_INDEXED_FIELDS_DOM_ELEMENT_ID = 'reactIndexedFieldsTable';
const REACT_SCRIPTED_FIELDS_DOM_ELEMENT_ID = 'reactScriptedFieldsTable';
const REACT_INDEX_HEADER_DOM_ELEMENT_ID = 'reactIndexHeader';

const TAB_INDEXED_FIELDS = 'indexedFields';
const TAB_SCRIPTED_FIELDS = 'scriptedFields';
Expand Down Expand Up @@ -158,6 +159,33 @@ function destroyIndexedFieldsTable() {
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) {
destroyIndexedFieldsTable();
destroySourceFiltersTable();
Expand Down Expand Up @@ -389,6 +417,9 @@ uiModules
destroyIndexedFieldsTable();
destroyScriptedFieldsTable();
destroySourceFiltersTable();
destroyIndexHeader();
destroyState();
});

renderIndexHeader($scope, config);
});
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,4 @@
* under the License.
*/

import './index_header';
export { IndexHeader } from './index_header';

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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>
);
}

0 comments on commit 81e90b0

Please sign in to comment.