Skip to content

Commit 81e90b0

Browse files
VladLasitsaVladLasitsa
committed
MIgrated index_header to react
1 parent 1f732ad commit 81e90b0

File tree

8 files changed

+171
-113
lines changed

8 files changed

+171
-113
lines changed

‎src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/create_edit_field/create_edit_field.html‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
<kbn-management-app section="kibana/index_patterns">
22
<div class="euiPanel euiPanel--paddingLarge">
3-
<div class="kuiViewContent">
4-
<kbn-management-index-patterns-header
5-
index-pattern="fieldSettings.indexPattern"
6-
></kbn-management-index-patterns-header>
7-
</div>
8-
93
<div id="reactFieldEditor"></div>
104
</div>
115
</kbn-management-app>

‎src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/create_edit_field/create_edit_field.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ import { FieldEditor } from 'ui/field_editor';
3434
import { I18nContext } from 'ui/i18n';
3535
import { i18n } from '@kbn/i18n';
3636

37+
import { IndexHeader } from '../index_header';
38+
3739
const REACT_FIELD_EDITOR_ID = 'reactFieldEditor';
3840
const renderFieldEditor = (
3941
$scope,
@@ -49,6 +51,7 @@ const renderFieldEditor = (
4951

5052
render(
5153
<I18nContext>
54+
<IndexHeader indexPattern={indexPattern} />
5255
<FieldEditor
5356
indexPattern={indexPattern}
5457
field={field}

‎src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.html‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,7 @@
77
aria-label="{{::'kbn.management.editIndexPattern.detailsAria' | i18n: { defaultMessage: 'Index pattern details' } }}"
88
>
99
<!-- Header -->
10-
<kbn-management-index-patterns-header
11-
index-pattern="indexPattern"
12-
set-default="setDefaultPattern()"
13-
refresh-fields="refreshFields()"
14-
delete="removePattern()"
15-
></kbn-management-index-patterns-header>
10+
<div id="reactIndexHeader"></div>
1611

1712
<div class="euiSpacer euiSpacer--s"></div>
1813
<p ng-if="::(indexPattern.timeFieldName || (indexPattern.tags && indexPattern.tags.length))">

‎src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.js‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
*/
1919

2020
import _ from 'lodash';
21-
import './index_header';
21+
import { IndexHeader } from './index_header';
2222
import './create_edit_field';
2323
import { docTitle } from 'ui/doc_title';
2424
import { KbnUrlProvider } from 'ui/url';
@@ -44,6 +44,7 @@ import { createEditIndexPatternPageStateContainer } from './edit_index_pattern_s
4444
const REACT_SOURCE_FILTERS_DOM_ELEMENT_ID = 'reactSourceFiltersTable';
4545
const REACT_INDEXED_FIELDS_DOM_ELEMENT_ID = 'reactIndexedFieldsTable';
4646
const REACT_SCRIPTED_FIELDS_DOM_ELEMENT_ID = 'reactScriptedFieldsTable';
47+
const REACT_INDEX_HEADER_DOM_ELEMENT_ID = 'reactIndexHeader';
4748

4849
const TAB_INDEXED_FIELDS = 'indexedFields';
4950
const TAB_SCRIPTED_FIELDS = 'scriptedFields';
@@ -158,6 +159,33 @@ function destroyIndexedFieldsTable() {
158159
node && unmountComponentAtNode(node);
159160
}
160161

162+
function destroyIndexHeader() {
163+
const node = document.getElementById(REACT_INDEX_HEADER_DOM_ELEMENT_ID);
164+
node && unmountComponentAtNode(node);
165+
}
166+
167+
function renderIndexHeader($scope, config) {
168+
$scope.$$postDigest(() => {
169+
const node = document.getElementById(REACT_INDEX_HEADER_DOM_ELEMENT_ID);
170+
if (!node) {
171+
return;
172+
}
173+
174+
render(
175+
<I18nContext>
176+
<IndexHeader
177+
indexPattern={$scope.indexPattern}
178+
setDefault={$scope.setDefaultPattern}
179+
refreshFields={$scope.refreshFields}
180+
deleteIndexPattern={$scope.removePattern}
181+
defaultIndex={config.get('defaultIndex')}
182+
/>
183+
</I18nContext>,
184+
node
185+
);
186+
});
187+
}
188+
161189
function handleTabChange($scope, newTab) {
162190
destroyIndexedFieldsTable();
163191
destroySourceFiltersTable();
@@ -389,6 +417,9 @@ uiModules
389417
destroyIndexedFieldsTable();
390418
destroyScriptedFieldsTable();
391419
destroySourceFiltersTable();
420+
destroyIndexHeader();
392421
destroyState();
393422
});
423+
424+
renderIndexHeader($scope, config);
394425
});

‎src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/index_header/index.js‎ renamed to ‎src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/index_header/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,4 @@
1717
* under the License.
1818
*/
1919

20-
import './index_header';
20+
export { IndexHeader } from './index_header';

‎src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/index_header/index_header.html‎

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/index_header/index_header.js‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/index_header/index_header.tsx‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
import React from 'react';
21+
import { i18n } from '@kbn/i18n';
22+
import {
23+
EuiFlexGroup,
24+
EuiToolTip,
25+
EuiFlexItem,
26+
EuiIcon,
27+
EuiTitle,
28+
EuiButtonIcon,
29+
} from '@elastic/eui';
30+
import { IIndexPattern } from '../../../../../../../../../plugins/data/public';
31+
32+
interface IndexHeaderProps {
33+
defaultIndex: string;
34+
indexPattern: IIndexPattern;
35+
setDefault?: () => void;
36+
refreshFields?: () => void;
37+
deleteIndexPattern?: () => void;
38+
}
39+
40+
const setDefaultAriaLabel = i18n.translate('kbn.management.editIndexPattern.setDefaultAria', {
41+
defaultMessage: 'Set as default index.',
42+
});
43+
44+
const setDefaultTooltip = i18n.translate('kbn.management.editIndexPattern.setDefaultTooltip', {
45+
defaultMessage: 'Set as default index.',
46+
});
47+
48+
const refreshAriaLabel = i18n.translate('kbn.management.editIndexPattern.refreshAria', {
49+
defaultMessage: 'Reload field list.',
50+
});
51+
52+
const refreshTooltip = i18n.translate('kbn.management.editIndexPattern.refreshTooltip', {
53+
defaultMessage: 'Refresh field list.',
54+
});
55+
56+
const removeAriaLabel = i18n.translate('kbn.management.editIndexPattern.removeAria', {
57+
defaultMessage: 'Remove index pattern.',
58+
});
59+
60+
const removeTooltip = i18n.translate('kbn.management.editIndexPattern.removeTooltip', {
61+
defaultMessage: 'Remove index pattern.',
62+
});
63+
64+
export function IndexHeader({
65+
defaultIndex,
66+
indexPattern,
67+
setDefault,
68+
refreshFields,
69+
deleteIndexPattern,
70+
}: IndexHeaderProps) {
71+
return (
72+
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
73+
<EuiFlexItem>
74+
<EuiFlexGroup alignItems="center">
75+
{defaultIndex === indexPattern.id && (
76+
<EuiFlexItem grow={false} style={{ marginRight: 0 }}>
77+
<EuiIcon size="xl" type="starFilled" />
78+
</EuiFlexItem>
79+
)}
80+
<EuiFlexItem style={{ marginLeft: 0 }}>
81+
<EuiTitle>
82+
<h1 data-test-subj="indexPatternTitle">{indexPattern.title}</h1>
83+
</EuiTitle>
84+
</EuiFlexItem>
85+
</EuiFlexGroup>
86+
</EuiFlexItem>
87+
<EuiFlexItem grow={false}>
88+
<EuiFlexGroup>
89+
{setDefault && (
90+
<EuiFlexItem>
91+
<EuiToolTip content={setDefaultTooltip}>
92+
<EuiButtonIcon
93+
color="text"
94+
onClick={setDefault}
95+
iconType="starFilledSpace"
96+
aria-label={setDefaultAriaLabel}
97+
data-test-subj="setDefaultIndexPatternButton"
98+
/>
99+
</EuiToolTip>
100+
</EuiFlexItem>
101+
)}
102+
103+
{refreshFields && (
104+
<EuiFlexItem>
105+
<EuiToolTip content={refreshTooltip}>
106+
<EuiButtonIcon
107+
color="text"
108+
onClick={refreshFields}
109+
iconType="refresh"
110+
aria-label={refreshAriaLabel}
111+
data-test-subj="refreshFieldsIndexPatternButton"
112+
/>
113+
</EuiToolTip>
114+
</EuiFlexItem>
115+
)}
116+
117+
{deleteIndexPattern && (
118+
<EuiFlexItem>
119+
<EuiToolTip content={removeTooltip}>
120+
<EuiButtonIcon
121+
color="danger"
122+
onClick={deleteIndexPattern}
123+
iconType="trash"
124+
aria-label={removeAriaLabel}
125+
data-test-subj="deleteIndexPatternButton"
126+
/>
127+
</EuiToolTip>
128+
</EuiFlexItem>
129+
)}
130+
</EuiFlexGroup>
131+
</EuiFlexItem>
132+
</EuiFlexGroup>
133+
);
134+
}

0 commit comments

Comments
 (0)