in src/plugins/index_pattern_management/public/components/edit_index_pattern/tabs/tabs.tsx [89:303]
export function Tabs({ indexPattern, saveIndexPattern, fields, history, location }: TabsProps) {
const { uiSettings, indexPatternManagementStart, docLinks } = useOpenSearchDashboards<
IndexPatternManagmentContext
>().services;
const [fieldFilter, setFieldFilter] = useState<string>('');
const [indexedFieldTypeFilter, setIndexedFieldTypeFilter] = useState<string>('');
const [scriptedFieldLanguageFilter, setScriptedFieldLanguageFilter] = useState<string>('');
const [indexedFieldTypes, setIndexedFieldType] = useState<EuiSelectOption[]>([]);
const [scriptedFieldLanguages, setScriptedFieldLanguages] = useState<EuiSelectOption[]>([]);
const [syncingStateFunc, setSyncingStateFunc] = useState<any>({
getCurrentTab: () => TAB_INDEXED_FIELDS,
});
const refreshFilters = useCallback(() => {
const tempIndexedFieldTypes: string[] = [];
const tempScriptedFieldLanguages: string[] = [];
indexPattern.fields.getAll().forEach((field) => {
if (field.scripted) {
if (field.lang) {
tempScriptedFieldLanguages.push(field.lang);
}
} else {
tempIndexedFieldTypes.push(field.type);
}
});
setIndexedFieldType(convertToEuiSelectOption(tempIndexedFieldTypes, 'indexedFiledTypes'));
setScriptedFieldLanguages(
convertToEuiSelectOption(tempScriptedFieldLanguages, 'scriptedFieldLanguages')
);
}, [indexPattern]);
useEffect(() => {
refreshFilters();
}, [indexPattern, indexPattern.fields, refreshFilters]);
const fieldWildcardMatcherDecorated = useCallback(
(filters: string[]) => fieldWildcardMatcher(filters, uiSettings.get(UI_SETTINGS.META_FIELDS)),
[uiSettings]
);
const getFilterSection = useCallback(
(type: string) => {
return (
<EuiFlexGroup>
<EuiFlexItem grow={true}>
<EuiFieldSearch
fullWidth
placeholder={filterPlaceholder}
value={fieldFilter}
onChange={(e) => setFieldFilter(e.target.value)}
data-test-subj="indexPatternFieldFilter"
aria-label={searchAriaLabel}
/>
</EuiFlexItem>
{type === TAB_INDEXED_FIELDS && indexedFieldTypes.length > 0 && (
<EuiFlexItem grow={false}>
<EuiSelect
options={indexedFieldTypes}
value={indexedFieldTypeFilter}
onChange={(e) => setIndexedFieldTypeFilter(e.target.value)}
data-test-subj="indexedFieldTypeFilterDropdown"
aria-label={filterAriaLabel}
/>
</EuiFlexItem>
)}
{type === TAB_SCRIPTED_FIELDS && scriptedFieldLanguages.length > 0 && (
<EuiFlexItem grow={false}>
<EuiSelect
options={scriptedFieldLanguages}
value={scriptedFieldLanguageFilter}
onChange={(e) => setScriptedFieldLanguageFilter(e.target.value)}
data-test-subj="scriptedFieldLanguageFilterDropdown"
/>
</EuiFlexItem>
)}
</EuiFlexGroup>
);
},
[
fieldFilter,
indexedFieldTypeFilter,
indexedFieldTypes,
scriptedFieldLanguageFilter,
scriptedFieldLanguages,
]
);
const getContent = useCallback(
(type: string) => {
switch (type) {
case TAB_INDEXED_FIELDS:
return (
<Fragment>
<EuiSpacer size="m" />
{getFilterSection(type)}
<EuiSpacer size="m" />
<IndexedFieldsTable
fields={fields}
indexPattern={indexPattern}
fieldFilter={fieldFilter}
fieldWildcardMatcher={fieldWildcardMatcherDecorated}
indexedFieldTypeFilter={indexedFieldTypeFilter}
helpers={{
redirectToRoute: (field: IndexPatternField) => {
history.push(getPath(field, indexPattern));
},
getFieldInfo: indexPatternManagementStart.list.getFieldInfo,
}}
/>
</Fragment>
);
case TAB_SCRIPTED_FIELDS:
return (
<Fragment>
<EuiSpacer size="m" />
{getFilterSection(type)}
<EuiSpacer size="m" />
<ScriptedFieldsTable
indexPattern={indexPattern}
saveIndexPattern={saveIndexPattern}
fieldFilter={fieldFilter}
scriptedFieldLanguageFilter={scriptedFieldLanguageFilter}
helpers={{
redirectToRoute: (field: IndexPatternField) => {
history.push(getPath(field, indexPattern));
},
}}
onRemoveField={refreshFilters}
painlessDocLink={docLinks.links.noDocumentation.scriptedFields.painless}
/>
</Fragment>
);
case TAB_SOURCE_FILTERS:
return (
<Fragment>
<EuiSpacer size="m" />
{getFilterSection(type)}
<EuiSpacer size="m" />
<SourceFiltersTable
saveIndexPattern={saveIndexPattern}
indexPattern={indexPattern}
filterFilter={fieldFilter}
fieldWildcardMatcher={fieldWildcardMatcherDecorated}
onAddOrRemoveFilter={refreshFilters}
/>
</Fragment>
);
}
},
[
docLinks.links.noDocumentation.scriptedFields.painless,
fieldFilter,
fieldWildcardMatcherDecorated,
fields,
getFilterSection,
history,
indexPattern,
indexPatternManagementStart.list.getFieldInfo,
indexedFieldTypeFilter,
refreshFilters,
scriptedFieldLanguageFilter,
saveIndexPattern,
]
);
const euiTabs: EuiTabbedContentTab[] = useMemo(
() =>
getTabs(indexPattern, fieldFilter, indexPatternManagementStart.list).map(
(tab: Pick<EuiTabbedContentTab, 'name' | 'id'>) => {
return {
...tab,
content: getContent(tab.id),
};
}
),
[fieldFilter, getContent, indexPattern, indexPatternManagementStart.list]
);
const [selectedTabId, setSelectedTabId] = useState(euiTabs[0].id);
useEffect(() => {
const {
startSyncingState,
stopSyncingState,
setCurrentTab,
getCurrentTab,
} = createEditIndexPatternPageStateContainer({
useHashedUrl: uiSettings.get('state:storeInSessionStorage'),
defaultTab: TAB_INDEXED_FIELDS,
});
startSyncingState();
setSyncingStateFunc({
setCurrentTab,
getCurrentTab,
});
setSelectedTabId(getCurrentTab());
return () => {
stopSyncingState();
};
}, [uiSettings]);
return (
<EuiTabbedContent
tabs={euiTabs}
selectedTab={euiTabs.find((tab) => tab.id === selectedTabId)}
onTabClick={(tab) => {
setSelectedTabId(tab.id);
syncingStateFunc.setCurrentTab(tab.id);
}}
/>
);
}