Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[State Management] Remove AppState from edit_index_pattern page #54104

Merged
merged 5 commits into from
Jan 20, 2020
Merged

[State Management] Remove AppState from edit_index_pattern page #54104

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
37e01a0
Remove AppState from edit_index_pattern page
Dosant Jan 13, 2020
3ddbe58
Merge branch 'master' of github.com:elastic/kibana into dev/state-man…
Dosant Jan 15, 2020
79fb005
Merge branch 'master' of github.com:elastic/kibana into dev/state-man…
Dosant Jan 17, 2020
546dd82
Improvements according to review comments
Dosant Jan 17, 2020
0bd0940
Merge branch 'master' into dev/state-managment/state-sync-edit-index-…
elasticmachine Jan 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions ...bana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@
<button
class="kuiTab"
ng-repeat="editSection in editSections"
ng-class="{ 'kuiTab-isSelected': state.tab === editSection.index }"
ng-click="changeTab(editSection)"
ng-class="{ 'kuiTab-isSelected': getCurrentTab() === editSection.index }"
ng-click="setCurrentTab(editSection.index)"
data-test-subj="tab-{{ editSection.index }}"
>
{{ editSection.title }}
Expand Down Expand Up @@ -120,7 +120,7 @@

<div
class="kuiFieldGroupSection"
ng-if="state.tab == 'indexedFields' && indexedFieldTypes.length > 0"
ng-if="getCurrentTab() == 'indexedFields' && indexedFieldTypes.length > 0"
>
<select
data-test-subj="indexedFieldTypeFilterDropdown"
Expand All @@ -137,7 +137,7 @@

<div
class="kuiFieldGroupSection"
ng-if="state.tab == 'scriptedFields' && scriptedFieldLanguages.length > 0"
ng-if="getCurrentTab() == 'scriptedFields' && scriptedFieldLanguages.length > 0"
>
<select
data-test-subj="scriptedFieldLanguageFilterDropdown"
Expand Down
280 changes: 150 additions & 130 deletions ...kibana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,134 +37,146 @@ import { ScriptedFieldsTable } from './scripted_fields_table';
import { i18n } from '@kbn/i18n';
import { I18nContext } from 'ui/i18n';
import { npStart } from 'ui/new_platform';
import { subscribeWithScope } from 'ui/utils/subscribe_with_scope';

import { getEditBreadcrumbs } from '../breadcrumbs';
import { createEditIndexPatternPageStateContainer } from './edit_index_pattern_state_container';

const REACT_SOURCE_FILTERS_DOM_ELEMENT_ID = 'reactSourceFiltersTable';
const REACT_INDEXED_FIELDS_DOM_ELEMENT_ID = 'reactIndexedFieldsTable';
const REACT_SCRIPTED_FIELDS_DOM_ELEMENT_ID = 'reactScriptedFieldsTable';

function updateSourceFiltersTable($scope, $state) {
if ($state.tab === 'sourceFilters') {
$scope.$$postDigest(() => {
const node = document.getElementById(REACT_SOURCE_FILTERS_DOM_ELEMENT_ID);
if (!node) {
return;
}

render(
<I18nContext>
<SourceFiltersTable
indexPattern={$scope.indexPattern}
filterFilter={$scope.fieldFilter}
fieldWildcardMatcher={$scope.fieldWildcardMatcher}
onAddOrRemoveFilter={() => {
$scope.editSections = $scope.editSectionsProvider(
$scope.indexPattern,
$scope.fieldFilter,
$scope.indexPatternListProvider
);
$scope.refreshFilters();
$scope.$apply();
}}
/>
</I18nContext>,
node
);
});
} else {
destroySourceFiltersTable();
}
const TAB_INDEXED_FIELDS = 'indexedFields';
const TAB_SCRIPTED_FIELDS = 'scriptedFields';
const TAB_SOURCE_FILTERS = 'sourceFilters';

function updateSourceFiltersTable($scope) {
$scope.$$postDigest(() => {
const node = document.getElementById(REACT_SOURCE_FILTERS_DOM_ELEMENT_ID);
if (!node) {
return;
}

render(
<I18nContext>
<SourceFiltersTable
indexPattern={$scope.indexPattern}
filterFilter={$scope.fieldFilter}
fieldWildcardMatcher={$scope.fieldWildcardMatcher}
onAddOrRemoveFilter={() => {
$scope.editSections = $scope.editSectionsProvider(
$scope.indexPattern,
$scope.fieldFilter,
$scope.indexPatternListProvider
);
$scope.refreshFilters();
$scope.$apply();
}}
/>
</I18nContext>,
node
);
});
}

function destroySourceFiltersTable() {
const node = document.getElementById(REACT_SOURCE_FILTERS_DOM_ELEMENT_ID);
node && unmountComponentAtNode(node);
}

function updateScriptedFieldsTable($scope, $state) {
if ($state.tab === 'scriptedFields') {
$scope.$$postDigest(() => {
const node = document.getElementById(REACT_SCRIPTED_FIELDS_DOM_ELEMENT_ID);
if (!node) {
return;
}

render(
<I18nContext>
<ScriptedFieldsTable
indexPattern={$scope.indexPattern}
fieldFilter={$scope.fieldFilter}
scriptedFieldLanguageFilter={$scope.scriptedFieldLanguageFilter}
helpers={{
redirectToRoute: (obj, route) => {
$scope.kbnUrl.redirectToRoute(obj, route);
$scope.$apply();
},
getRouteHref: (obj, route) => $scope.kbnUrl.getRouteHref(obj, route),
}}
onRemoveField={() => {
$scope.editSections = $scope.editSectionsProvider(
$scope.indexPattern,
$scope.fieldFilter,
$scope.indexPatternListProvider
);
$scope.refreshFilters();
function updateScriptedFieldsTable($scope) {
$scope.$$postDigest(() => {
const node = document.getElementById(REACT_SCRIPTED_FIELDS_DOM_ELEMENT_ID);
if (!node) {
return;
}

render(
<I18nContext>
<ScriptedFieldsTable
indexPattern={$scope.indexPattern}
fieldFilter={$scope.fieldFilter}
scriptedFieldLanguageFilter={$scope.scriptedFieldLanguageFilter}
helpers={{
redirectToRoute: (obj, route) => {
$scope.kbnUrl.changeToRoute(obj, route);
$scope.$apply();
}}
/>
</I18nContext>,
node
);
});
} else {
destroyScriptedFieldsTable();
}
},
getRouteHref: (obj, route) => $scope.kbnUrl.getRouteHref(obj, route),
}}
onRemoveField={() => {
$scope.editSections = $scope.editSectionsProvider(
$scope.indexPattern,
$scope.fieldFilter,
$scope.indexPatternListProvider
);
$scope.refreshFilters();
$scope.$apply();
}}
/>
</I18nContext>,
node
);
});
}

function destroyScriptedFieldsTable() {
const node = document.getElementById(REACT_SCRIPTED_FIELDS_DOM_ELEMENT_ID);
node && unmountComponentAtNode(node);
}

function updateIndexedFieldsTable($scope, $state) {
if ($state.tab === 'indexedFields') {
$scope.$$postDigest(() => {
const node = document.getElementById(REACT_INDEXED_FIELDS_DOM_ELEMENT_ID);
if (!node) {
return;
}

render(
<I18nContext>
<IndexedFieldsTable
fields={$scope.fields}
indexPattern={$scope.indexPattern}
fieldFilter={$scope.fieldFilter}
fieldWildcardMatcher={$scope.fieldWildcardMatcher}
indexedFieldTypeFilter={$scope.indexedFieldTypeFilter}
helpers={{
redirectToRoute: (obj, route) => {
$scope.kbnUrl.redirectToRoute(obj, route);
$scope.$apply();
},
getFieldInfo: $scope.getFieldInfo,
}}
/>
</I18nContext>,
node
);
});
} else {
destroyIndexedFieldsTable();
}
function updateIndexedFieldsTable($scope) {
$scope.$$postDigest(() => {
const node = document.getElementById(REACT_INDEXED_FIELDS_DOM_ELEMENT_ID);
if (!node) {
return;
}

render(
<I18nContext>
<IndexedFieldsTable
fields={$scope.fields}
indexPattern={$scope.indexPattern}
fieldFilter={$scope.fieldFilter}
fieldWildcardMatcher={$scope.fieldWildcardMatcher}
indexedFieldTypeFilter={$scope.indexedFieldTypeFilter}
helpers={{
redirectToRoute: (obj, route) => {
$scope.kbnUrl.changeToRoute(obj, route);
$scope.$apply();
},
getFieldInfo: $scope.getFieldInfo,
}}
/>
</I18nContext>,
node
);
});
}

function destroyIndexedFieldsTable() {
const node = document.getElementById(REACT_INDEXED_FIELDS_DOM_ELEMENT_ID);
node && unmountComponentAtNode(node);
}

function handleTabChange($scope, newTab) {
destroyIndexedFieldsTable();
destroySourceFiltersTable();
destroyScriptedFieldsTable();
updateTables($scope, newTab);
}

function updateTables($scope, currentTab) {
switch (currentTab) {
case TAB_SCRIPTED_FIELDS:
return updateScriptedFieldsTable($scope);
case TAB_INDEXED_FIELDS:
return updateIndexedFieldsTable($scope);
case TAB_SOURCE_FILTERS:
return updateSourceFiltersTable($scope);
}
}

uiRoutes.when('/management/kibana/index_patterns/:indexPatternId', {
template,
k7Breadcrumbs: getEditBreadcrumbs,
Expand All @@ -187,10 +199,36 @@ uiModules
Promise,
config,
Private,
AppState,
confirmModal
) {
const $state = ($scope.state = new AppState());
const {
startSyncingState,
stopSyncingState,
setCurrentTab,
getCurrentTab,
state$,
} = createEditIndexPatternPageStateContainer({
useHashedUrl: config.get('state:storeInSessionStorage'),
defaultTab: TAB_INDEXED_FIELDS,
});

$scope.getCurrentTab = getCurrentTab;
$scope.setCurrentTab = setCurrentTab;

const stateChangedSub = subscribeWithScope($scope, state$, {
next: ({ tab }) => {
handleTabChange($scope, tab);
},
});

handleTabChange($scope, getCurrentTab()); // setup initial tab depending on initial tab state

startSyncingState(); // starts syncing state between state container and url

const destroyState = () => {
stateChangedSub.unsubscribe();
stopSyncingState();
};

$scope.fieldWildcardMatcher = (...args) =>
fieldWildcardMatcher(...args, config.get('metaFields'));
Expand Down Expand Up @@ -219,8 +257,6 @@ uiModules
);
$scope.refreshFilters();
$scope.fields = $scope.indexPattern.getNonScriptedFields();
updateIndexedFieldsTable($scope, $state);
updateScriptedFieldsTable($scope, $state);
});

$scope.refreshFilters = function() {
Expand All @@ -242,18 +278,6 @@ uiModules
$scope[filter] = val || ''; // null causes filter to check for null explicitly
};

$scope.changeTab = function(obj) {
$state.tab = obj.index;
updateIndexedFieldsTable($scope, $state);
updateScriptedFieldsTable($scope, $state);
updateSourceFiltersTable($scope, $state);
$state.save();
};

$scope.$watch('state.tab', function(tab) {
if (!tab) $scope.changeTab($scope.editSections[0]);
});

$scope.$watchCollection('indexPattern.fields', function() {
$scope.conflictFields = $scope.indexPattern.fields.filter(field => field.type === 'conflict');
});
Expand Down Expand Up @@ -329,37 +353,33 @@ uiModules
$scope.fieldFilter,
managementSetup.indexPattern.list
);

if ($scope.fieldFilter === undefined) {
return;
}

switch ($state.tab) {
case 'indexedFields':
updateIndexedFieldsTable($scope, $state);
case 'scriptedFields':
updateScriptedFieldsTable($scope, $state);
case 'sourceFilters':
updateSourceFiltersTable($scope, $state);
}
updateTables($scope, getCurrentTab());
});

$scope.$watch('indexedFieldTypeFilter', () => {
if ($scope.indexedFieldTypeFilter !== undefined && $state.tab === 'indexedFields') {
updateIndexedFieldsTable($scope, $state);
if ($scope.indexedFieldTypeFilter !== undefined && getCurrentTab() === TAB_INDEXED_FIELDS) {
updateIndexedFieldsTable($scope);
}
});

$scope.$watch('scriptedFieldLanguageFilter', () => {
if ($scope.scriptedFieldLanguageFilter !== undefined && $state.tab === 'scriptedFields') {
updateScriptedFieldsTable($scope, $state);
if (
$scope.scriptedFieldLanguageFilter !== undefined &&
getCurrentTab() === TAB_SCRIPTED_FIELDS
) {
updateScriptedFieldsTable($scope);
}
});

$scope.$on('$destroy', () => {
destroyIndexedFieldsTable();
destroyScriptedFieldsTable();
destroySourceFiltersTable();
destroyState();
});

updateScriptedFieldsTable($scope, $state);
updateSourceFiltersTable($scope, $state);
});
Loading