From 13277fe84246d97f7501bb3e93073f758eb9c2ee Mon Sep 17 00:00:00 2001 From: Eric Wei Date: Thu, 26 Aug 2021 10:31:33 -0700 Subject: [PATCH 1/4] left align th text --- public/components/explorer/data_grid.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/public/components/explorer/data_grid.scss b/public/components/explorer/data_grid.scss index ee4eb174c..85c7858c6 100644 --- a/public/components/explorer/data_grid.scss +++ b/public/components/explorer/data_grid.scss @@ -18,11 +18,6 @@ flex: 1 1 100%; flex-direction: column; /* 1 */ - th { - text-align: left; - font-weight: bold; - } - .spinner { position: absolute; top: 40%; @@ -143,6 +138,11 @@ font-weight: $euiFontWeightBold; } } + + th { + text-align: left; + font-weight: bold; + } } table { From 2336fef96eb3dbd3837bc95addb184d96261c271 Mon Sep 17 00:00:00 2001 From: Eric Wei Date: Thu, 26 Aug 2021 11:05:53 -0700 Subject: [PATCH 2/4] fixed row detail expanding issue --- .../explorer/docTable/docViewRow.tsx | 39 +++++++++++-------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/public/components/explorer/docTable/docViewRow.tsx b/public/components/explorer/docTable/docViewRow.tsx index c8a50b017..0ccaad53b 100644 --- a/public/components/explorer/docTable/docViewRow.tsx +++ b/public/components/explorer/docTable/docViewRow.tsx @@ -10,7 +10,12 @@ */ import React, { useMemo, useState } from 'react'; -import _ from 'lodash'; +import { + toPairs, + uniqueId, + has, + forEach +} from 'lodash'; import { EuiIcon } from '@elastic/eui'; import { DocViewer } from './docViewer'; import { DocDetailTitle } from './detailTable/docDetailTitle'; @@ -31,7 +36,7 @@ export const DocViewRow = (props: any) => { } = conf; return ( { content } @@ -47,10 +52,10 @@ export const DocViewRow = (props: any) => {
- { _.toPairs(doc).map((entry) => { + { toPairs(doc).map((entry) => { return (
{ entry[0] }:
@@ -80,7 +85,7 @@ export const DocViewRow = (props: any) => { return (
- { (explorerData && !_.isEmpty(explorerData)) ? ( + { (explorerData && !isEmpty(explorerData)) ? (
{ diff --git a/public/components/explorer/hooks/use_fetch_events.ts b/public/components/explorer/hooks/use_fetch_events.ts index 89f8dab29..040ba80ab 100644 --- a/public/components/explorer/hooks/use_fetch_events.ts +++ b/public/components/explorer/hooks/use_fetch_events.ts @@ -24,6 +24,7 @@ import { fetchSuccess, reset as queryResultReset } from '../slices/query_result_ import { selectQueries } from '../slices/query_slice'; import { updateFields, + sortFields } from '../slices/field_slice'; export const useFetchEvents = ({ @@ -73,6 +74,10 @@ export const useFetchEvents = ({ [UNSELECTED_FIELDS]: res?.schema } })); + dispatch(sortFields({ + tabId: requestParams.tabId, + data: [UNSELECTED_FIELDS] + })); }); }); }; diff --git a/public/components/explorer/slices/field_slice.ts b/public/components/explorer/slices/field_slice.ts index df8f446fa..c107eff57 100644 --- a/public/components/explorer/slices/field_slice.ts +++ b/public/components/explorer/slices/field_slice.ts @@ -12,6 +12,7 @@ import { createSlice } from '@reduxjs/toolkit'; +import { forEach } from 'lodash'; import { initialTabId } from '../../../framework/redux/store/shared_state'; import { SELECTED_FIELDS, @@ -51,6 +52,11 @@ export const fieldSlice = createSlice({ }, remove: (state, { payload }) => { delete state[payload.tabId]; + }, + sortFields: (state, { payload }) => { + forEach(payload.data, (toSort) => { + state[payload.tabId][toSort].sort((prev, cur) => prev.name.localeCompare(cur.name)); + }); } }, extraReducers: (builder) => {} @@ -60,7 +66,8 @@ export const { init, reset, remove, - updateFields + updateFields, + sortFields } = fieldSlice.actions; export const selectFields = (state) => state.fields; From ad2e6ac9ad2ea30bb534eb7f05dc5d482df383e1 Mon Sep 17 00:00:00 2001 From: Eric Wei Date: Thu, 2 Sep 2021 08:56:49 -0700 Subject: [PATCH 4/4] added more types and few changes --- common/constants/explorer.ts | 1 + public/components/explorer/data_grid.tsx | 35 ++++++--- .../explorer/docTable/docViewRow.tsx | 25 +++++-- .../explorer/docTable/docViewer.tsx | 16 ++-- .../json_code_block/json_code_block.tsx | 4 +- public/components/explorer/explorer.tsx | 33 ++++----- .../explorer/hooks/use_fetch_events.ts | 33 ++++++--- .../hooks/use_fetch_visualizations.ts | 14 +++- public/components/explorer/sidebar/field.tsx | 73 +++++++++---------- .../components/explorer/sidebar/sidebar.tsx | 45 +++++++++--- .../components/explorer/slices/field_slice.ts | 5 +- .../explorer/visualizations/datapanel.tsx | 14 ++-- yarn.lock | 59 +-------------- 13 files changed, 184 insertions(+), 173 deletions(-) diff --git a/common/constants/explorer.ts b/common/constants/explorer.ts index e48b853e4..a3ec67375 100644 --- a/common/constants/explorer.ts +++ b/common/constants/explorer.ts @@ -12,6 +12,7 @@ export const RAW_QUERY = 'rawQuery'; export const SELECTED_FIELDS = 'selectedFields'; export const UNSELECTED_FIELDS = 'unselectedFields'; +export const AVAILABLE_FIELDS = 'availableFields'; export const TAB_ID_TXT_PFX = 'query-panel-'; export const TAB_TITLE = 'New query'; export const TAB_CHART_TITLE = 'Visualizations'; diff --git a/public/components/explorer/data_grid.tsx b/public/components/explorer/data_grid.tsx index 7fc2a7861..84c7eaa00 100644 --- a/public/components/explorer/data_grid.tsx +++ b/public/components/explorer/data_grid.tsx @@ -12,12 +12,13 @@ import './data_grid.scss'; import React, { useMemo } from 'react'; -import _ from 'lodash'; +import { uniqueId } from 'lodash'; import { DocViewRow } from './docTable/index'; +import { IExplorerFields } from '../../../common/types/explorer'; interface DataGridProps { - rows: Array, - explorerFields: Array + rows: Array; + explorerFields: IExplorerFields; } export function DataGrid(props: DataGridProps) { @@ -28,12 +29,12 @@ export function DataGrid(props: DataGridProps) { const getTrs = ( docs: Array = [], - explorerFields: Array + explorerFields: IExplorerFields ) => { return docs.map((doc) => { return ( @@ -41,24 +42,34 @@ export function DataGrid(props: DataGridProps) { }); }; - const getHeaders = (fields: Array) => { + const defaultCols = [ + '', + 'Time', + '_source' + ]; + + const getHeaders = (fields: IExplorerFields) => { let tableHeadContent = null; if (!fields.selectedFields || fields.selectedFields.length === 0) { tableHeadContent = ( <> - - Time - _source + { defaultCols.map((colName: string) => { + return ( + + { colName } + + ); + }) } ); } else { tableHeadContent = fields.selectedFields.map(selField => { return ( - { selField.name } + { selField.name } ); }); - tableHeadContent.unshift(Time); - tableHeadContent.unshift(); + tableHeadContent.unshift(Time); + tableHeadContent.unshift(); } return ( diff --git a/public/components/explorer/docTable/docViewRow.tsx b/public/components/explorer/docTable/docViewRow.tsx index 0ccaad53b..bd24e6719 100644 --- a/public/components/explorer/docTable/docViewRow.tsx +++ b/public/components/explorer/docTable/docViewRow.tsx @@ -19,8 +19,18 @@ import { import { EuiIcon } from '@elastic/eui'; import { DocViewer } from './docViewer'; import { DocDetailTitle } from './detailTable/docDetailTitle'; +import { IField } from '../../../../common/types/explorer'; -export const DocViewRow = (props: any) => { +export interface IDocType { + [key: string] : string; +} + +interface IDocViewRowProps { + doc: IDocType; + selectedCols: Array; +} + +export const DocViewRow = (props: IDocViewRowProps) => { const { doc, @@ -36,14 +46,14 @@ export const DocViewRow = (props: any) => { } = conf; return ( { content } ); }; - const getDlTmpl = (conf) => { + const getDlTmpl = (conf: { doc: IDocType }) => { const { doc } = conf; @@ -52,7 +62,7 @@ export const DocViewRow = (props: any) => {
- { toPairs(doc).map((entry) => { + { toPairs(doc).map((entry: Array) => { return ( { ); }; - const getDiscoverSourceLikeDOM = (doc) => { + const getDiscoverSourceLikeDOM = (doc: IDocType) => { return getDlTmpl({ doc, }); }; @@ -97,7 +107,10 @@ export const DocViewRow = (props: any) => { ); }; - const getTds = (doc, selectedCols) => { + const getTds = ( + doc: IDocType, + selectedCols: Array + ) => { const cols = []; const fieldClsName = 'osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord'; const timestampClsName = 'eui-textNoWrap'; diff --git a/public/components/explorer/docTable/docViewer.tsx b/public/components/explorer/docTable/docViewer.tsx index e81f5b08d..ceb78d0c9 100644 --- a/public/components/explorer/docTable/docViewer.tsx +++ b/public/components/explorer/docTable/docViewer.tsx @@ -17,20 +17,25 @@ import { } from '@elastic/eui'; import { DocViewTable } from './detailTable/docDetailTable'; import { JsonCodeBlock } from './json_code_block/json_code_block'; +import { IDocType } from './docViewRow'; const TABS = ['Table', 'JSON']; -export function DocViewer(props: any) { +interface IDocViewerProps { + hit: IDocType +} - const [curSelectedTab, setCurSelectedTab] = useState(null); +export function DocViewer(props: IDocViewerProps) { + + const [curSelectedTab, setCurSelectedTab] = useState(null); // can be passed in later - const getTabList = (props = null) => { + const getTabList = () => { return [ { id: _.uniqueId('doc_viewer_tab_'), name: 'Table', - component: (tabProps) => {} } onAddColumn={ () => {} } onRemoveColumn={ () => {} } @@ -41,7 +46,7 @@ export function DocViewer(props: any) { { id: _.uniqueId('doc_viewer_tab_'), name: 'JSON', - component: (tabProps) => , + component: (tabProps: any) => , otherProps: {} } ]; @@ -49,7 +54,6 @@ export function DocViewer(props: any) { const tabs = useMemo(() => { return getTabList().map((tab) => { - const tid = new Date().valueOf() const Component = tab.component; return { id: tab.id, diff --git a/public/components/explorer/docTable/json_code_block/json_code_block.tsx b/public/components/explorer/docTable/json_code_block/json_code_block.tsx index d55b44621..01ad75080 100644 --- a/public/components/explorer/docTable/json_code_block/json_code_block.tsx +++ b/public/components/explorer/docTable/json_code_block/json_code_block.tsx @@ -12,9 +12,9 @@ import React from 'react'; import { EuiCodeBlock } from '@elastic/eui'; import { i18n } from '@osd/i18n'; -// import { DocViewRenderProps } from '../../doc_views/doc_views_types'; +import { IDocType } from '../docViewRow'; -export function JsonCodeBlock({ hit }: any) { +export function JsonCodeBlock({ hit }: { hit: IDocType }) { const label = i18n.translate('discover.docViews.json.codeEditorAriaLabel', { defaultMessage: 'Read only JSON view of an elasticsearch document', }); diff --git a/public/components/explorer/explorer.tsx b/public/components/explorer/explorer.tsx index 2fd5bdfe9..515290458 100644 --- a/public/components/explorer/explorer.tsx +++ b/public/components/explorer/explorer.tsx @@ -9,13 +9,12 @@ * GitHub history for details. */ -import React, { useState, useMemo, useCallback, useEffect } from 'react'; +import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react'; import { batch, useDispatch, useSelector } from 'react-redux'; import { uniqueId, isEmpty, - cloneDeep, - sortBy + cloneDeep } from 'lodash'; import { FormattedMessage @@ -67,12 +66,13 @@ import { } from './slices/field_slice'; import { selectCountDistribution } from './slices/count_distribution_slice'; import { selectExplorerVisualization } from './slices/visualization_slice'; +import PPLService from '../../services/requests/ppl'; const TAB_EVENT_ID = uniqueId(TAB_EVENT_ID_TXT_PFX); const TAB_CHART_ID = uniqueId(TAB_CHART_ID_TXT_PFX); interface IExplorerProps { - pplService: any; + pplService: PPLService; tabId: string } @@ -82,10 +82,7 @@ export const Explorer = ({ }: IExplorerProps) => { const dispatch = useDispatch(); - - const requestParams = { - tabId, - }; + const requestParams = { tabId, }; const { isEventsLoading, getEvents, @@ -114,6 +111,9 @@ export const Explorer = ({ const [liveStreamChecked, setLiveStreamChecked] = useState(false); const [isSidebarClosed, setIsSidebarClosed] = useState(false); const [fixedScrollEl, setFixedScrollEl] = useState(); + const queryRef = useRef(); + queryRef.current = query; + const fixedScrollRef = useCallback( (node: HTMLElement) => { if (node !== null) { @@ -124,9 +124,10 @@ export const Explorer = ({ ); const fetchData = () => { - if (!query) return; - if (query.match(/\|\s*stats/i)) { - const index = getIndexPatternFromRawQuery(query); + const searchQuery = queryRef.current; + if (!searchQuery) return; + if (searchQuery.match(/\|\s*stats/i)) { + const index = getIndexPatternFromRawQuery(searchQuery); if (!index) return; getAvailableFields(`search source=${index}`); getVisualizations(); @@ -199,7 +200,6 @@ export const Explorer = ({ {!isSidebarClosed && (
handleAddField(field) } handleRemoveField={ (field: IField) => handleRemoveField(field) } @@ -311,10 +311,7 @@ export const Explorer = ({ />
- @@ -362,9 +359,7 @@ export const Explorer = ({ const getExplorerVis = () => { return ( ); @@ -452,7 +447,7 @@ export const Explorer = ({ { handleQueryChange(query, tabId) } } - handleQuerySearch={ () => { handleQuerySearch(tabId) } } + handleQuerySearch={ () => { handleQuerySearch() } } startTime={ startTime } endTime={ endTime } setStartTime={ setStartTime } diff --git a/public/components/explorer/hooks/use_fetch_events.ts b/public/components/explorer/hooks/use_fetch_events.ts index 040ba80ab..81e52a036 100644 --- a/public/components/explorer/hooks/use_fetch_events.ts +++ b/public/components/explorer/hooks/use_fetch_events.ts @@ -18,7 +18,8 @@ import { import { RAW_QUERY, SELECTED_FIELDS, - UNSELECTED_FIELDS + UNSELECTED_FIELDS, + AVAILABLE_FIELDS } from '../../../../common/constants/explorer'; import { fetchSuccess, reset as queryResultReset } from '../slices/query_result_slice'; import { selectQueries } from '../slices/query_slice'; @@ -26,11 +27,17 @@ import { updateFields, sortFields } from '../slices/field_slice'; +import PPLService from '../../../services/requests/ppl'; + +interface IFetchEventsParams { + pplService: PPLService; + requestParams: { tabId: string }; +} export const useFetchEvents = ({ pplService, - requestParams = {} -}: any) => { + requestParams +}: IFetchEventsParams) => { const dispatch = useDispatch(); const [isEventsLoading, setIsEventsLoading] = useState(false); @@ -39,9 +46,9 @@ export const useFetchEvents = ({ queriesRef.current = queries; const fetchEvents = async ( - { query }: any, + { query }: { query: string }, format: string, - handler: any + handler: (res: any) => void ) => { setIsEventsLoading(true); await pplService.fetch({ @@ -61,17 +68,19 @@ export const useFetchEvents = ({ const getEvents = () => { const cur = queriesRef.current; - fetchEvents({ query: cur[requestParams.tabId][RAW_QUERY] }, 'jdbc', (res) => { + fetchEvents({ query: cur[requestParams.tabId][RAW_QUERY] }, 'jdbc', (res: any) => { batch(() => { dispatch(fetchSuccess({ tabId: requestParams.tabId, - data: res + data: { + ...res + } })); dispatch(updateFields({ tabId: requestParams.tabId, data: { [SELECTED_FIELDS]: [], - [UNSELECTED_FIELDS]: res?.schema + [UNSELECTED_FIELDS]: res.schema ? [ ...res.schema ] : [] } })); dispatch(sortFields({ @@ -83,7 +92,7 @@ export const useFetchEvents = ({ }; const getAvailableFields = (query: string) => { - fetchEvents({ query, }, 'jdbc', (res) => { + fetchEvents({ query, }, 'jdbc', (res: any) => { batch(() => { dispatch(queryResultReset({ tabId: requestParams.tabId @@ -93,9 +102,13 @@ export const useFetchEvents = ({ data: { [SELECTED_FIELDS]: [], [UNSELECTED_FIELDS]: [], - 'availableFields': res?.schema + [AVAILABLE_FIELDS]: res?.schema ? [...res.schema] : [] } })); + dispatch(sortFields({ + tabId: requestParams.tabId, + data: [AVAILABLE_FIELDS] + })); }); }); }; diff --git a/public/components/explorer/hooks/use_fetch_visualizations.ts b/public/components/explorer/hooks/use_fetch_visualizations.ts index 4601b9dfb..d2e622af7 100644 --- a/public/components/explorer/hooks/use_fetch_visualizations.ts +++ b/public/components/explorer/hooks/use_fetch_visualizations.ts @@ -20,11 +20,17 @@ import { import { render as renderCountDis } from '../slices/count_distribution_slice'; import { selectQueries } from '../slices/query_slice'; import { render as renderExplorerVis } from '../slices/visualization_slice'; +import PPLService from '../../../services/requests/ppl'; + +interface IFetchVisualizationsParams { + pplService: PPLService; + requestParams: { tabId: string }; +} export const useFetchVisualizations = ({ pplService, - requestParams = {} -}: any) => { + requestParams +}: IFetchVisualizationsParams) => { const dispatch = useDispatch(); const [isVisLoading, setIsVisLoading] = useState(false); @@ -33,9 +39,9 @@ export const useFetchVisualizations = ({ queriesRef.current = queries; const fetchVisualizations = async ( - { query }: any, + { query }: { query: string }, format: string, - handler: any + handler: (res: any) => void ) => { setIsVisLoading(true); diff --git a/public/components/explorer/sidebar/field.tsx b/public/components/explorer/sidebar/field.tsx index fe195d129..6eefe466e 100644 --- a/public/components/explorer/sidebar/field.tsx +++ b/public/components/explorer/sidebar/field.tsx @@ -18,27 +18,34 @@ import { } from '@elastic/eui'; import { FieldButton } from '../../common/field_button'; import { FieldIcon } from '../../common/field_icon'; +import { IField } from '../../../../common/types/explorer'; -interface FieldProps { - field: string; +interface IFieldProps { + field: IField; selected: boolean; - onRemoveField?: () => void; - onAddField?: () => void; + onToggleField: (field: IField) => void; } -export const Field = (props: FieldProps) => { +export const Field = (props: IFieldProps) => { + + const { + field, + selected, + onToggleField + } = props; const [isFieldDetailsOpen, setIsFieldDetailsOpen] = useState(false); - const addLabelAria = i18n.translate('discover.fieldChooser.discoverField.addButtonAriaLabel', { + const addLabelAria = i18n.translate( + 'addButtonAriaLabel', { defaultMessage: 'Add {field} to table', - values: { field: props.field.name }, + values: { field: field.name }, }); const removeLabelAria = i18n.translate( - 'discover.fieldChooser.discoverField.removeButtonAriaLabel', + 'removeButtonAriaLabel', { defaultMessage: 'Remove {field} from table', - values: { field: props.field.name }, + values: { field: field.name }, } ); @@ -46,12 +53,8 @@ export const Field = (props: FieldProps) => { setIsFieldDetailsOpen(!isFieldDetailsOpen); } - const toggleField = (field: string) => { - if (props.selected) { - props.onRemoveField(field); - } else { - props.onAddField(field); - } + const toggleField = (field: IField) => { + onToggleField(field); }; const getFieldActionDOM = () => { @@ -60,29 +63,25 @@ export const Field = (props: FieldProps) => { delay="long" content={ i18n.translate( - props.selected ? - 'discover.fieldChooser.discoverField.removeFieldTooltip' : - 'discover.fieldChooser.discoverField.addFieldTooltip', - { - defaultMessage: props.selected ? 'Remove field from table' : 'Add field as column', - } + selected ? 'removeFieldTooltip' : 'addFieldTooltip', + { defaultMessage: selected ? 'Remove field from table' : 'Add field as column' } ) } > ) => { - if (ev.type === 'click') { - ev.currentTarget.focus(); + onClick={(e: React.MouseEvent) => { + if (e.type === 'click') { + e.currentTarget.focus(); } - ev.preventDefault(); - ev.stopPropagation(); - toggleField(props.field); + e.preventDefault(); + e.stopPropagation(); + toggleField(field); }} - data-test-subj={`fieldToggle-${props.field.name}`} - aria-label={ props.selected ? removeLabelAria : addLabelAria } + data-test-subj={`fieldToggle-${field.name}`} + aria-label={ selected ? removeLabelAria : addLabelAria } /> ); @@ -101,20 +100,20 @@ export const Field = (props: FieldProps) => { size="s" className="dscSidebarItem" isActive={ isFieldDetailsOpen } - dataTestSubj={`field-${props.field.name}-showDetails`} + dataTestSubj={`field-${field.name}-showDetails`} fieldIcon={} fieldName={ - { props.field.name } + { field.name } } fieldAction={ getFieldActionDOM() } - onClick={() => { togglePopover() }} + onClick={() => togglePopover()} /> } > diff --git a/public/components/explorer/sidebar/sidebar.tsx b/public/components/explorer/sidebar/sidebar.tsx index d86815121..65ae6c6ca 100644 --- a/public/components/explorer/sidebar/sidebar.tsx +++ b/public/components/explorer/sidebar/sidebar.tsx @@ -12,17 +12,25 @@ import './sidebar.scss'; import React, { useState } from 'react'; -import _ from 'lodash'; +import { isEmpty } from 'lodash'; import { EuiTitle, EuiSpacer, - EuiButtonIcon + EuiButtonIcon, + EuiFieldSearch } from '@elastic/eui'; import { i18n } from '@osd/i18n'; import { FormattedMessage, I18nProvider } from '@osd/i18n/react'; import { Field } from './field'; +import { IExplorerFields, IField } from '../../../../common/types/explorer'; -export const Sidebar = (props: any) => { +interface ISidebarProps { + explorerFields: IExplorerFields; + handleAddField: (field: IField) => void; + handleRemoveField: (field: IField) => void; +} + +export const Sidebar = (props: ISidebarProps) => { const { explorerFields, @@ -31,18 +39,28 @@ export const Sidebar = (props: any) => { } = props; const [showFields, setShowFields] = useState(false); + const [searchTerm, setSearchTerm] = useState(''); return (
- {/* index dropdown */} +
- {/* field search */} + { + setSearchTerm(e.target.value) + }} + placeholder="Search field names" + value={searchTerm} + />
+
- { explorerFields && !_.isEmpty(explorerFields) && ( + { explorerFields && !isEmpty(explorerFields) && ( <>

@@ -68,7 +86,7 @@ export const Sidebar = (props: any) => { )}) @@ -114,16 +132,19 @@ export const Sidebar = (props: any) => { data-test-subj={`fieldList-unpopular`} > { - explorerFields.unselectedFields && explorerFields.unselectedFields.map((col) => { + explorerFields.unselectedFields && + explorerFields.unselectedFields.filter( + (field) => searchTerm === '' || field.name.indexOf(searchTerm) !== -1) + .map((field) => { return (
    • diff --git a/public/components/explorer/slices/field_slice.ts b/public/components/explorer/slices/field_slice.ts index c107eff57..1320c4622 100644 --- a/public/components/explorer/slices/field_slice.ts +++ b/public/components/explorer/slices/field_slice.ts @@ -19,6 +19,7 @@ import { UNSELECTED_FIELDS, REDUX_EXPL_SLICE_FIELDS } from '../../../../common/constants/explorer'; +import { IField } from '../../../../common/types/explorer'; const initialFields = { [SELECTED_FIELDS]: [], @@ -54,8 +55,8 @@ export const fieldSlice = createSlice({ delete state[payload.tabId]; }, sortFields: (state, { payload }) => { - forEach(payload.data, (toSort) => { - state[payload.tabId][toSort].sort((prev, cur) => prev.name.localeCompare(cur.name)); + forEach(payload.data, (toSort: string) => { + state[payload.tabId][toSort].sort((prev: IField, cur: IField) => prev.name.localeCompare(cur.name)); }); } }, diff --git a/public/components/explorer/visualizations/datapanel.tsx b/public/components/explorer/visualizations/datapanel.tsx index 8c999ee9e..2022b91af 100644 --- a/public/components/explorer/visualizations/datapanel.tsx +++ b/public/components/explorer/visualizations/datapanel.tsx @@ -11,7 +11,7 @@ import './datapanel.scss'; import './field_item.scss'; -import React from 'react'; +import React, { useState } from 'react'; import _ from 'lodash'; import { EuiFlexGroup, @@ -26,6 +26,8 @@ export const DataPanel = (props: any) => { const fields = props.explorerFields?.availableFields; + const [searchTerm, setSearchTerm] = useState(''); + return ( { defaultMessage: 'Search field names', description: 'Search the list of fields in the index pattern for the provided text', })} - value={''} - onChange={(e) => {}} + value={searchTerm} + onChange={(e) => { + setSearchTerm(e.target.value); + }} aria-label={i18n.translate('xpack.lens.indexPatterns.filterByNameAriaLabel', { defaultMessage: 'Search fields', })} /> - + searchTerm === '' || field.name.indexOf(searchTerm) !== -1) } /> diff --git a/yarn.lock b/yarn.lock index 2dab0083d..0d0671811 100644 --- a/yarn.lock +++ b/yarn.lock @@ -135,13 +135,6 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== -"@types/react-grid-layout@^0.16.7": - version "0.16.7" - resolved "https://registry.yarnpkg.com/@types/react-grid-layout/-/react-grid-layout-0.16.7.tgz#53d5f5034deb0c60e25a0fa578141e9a0982011f" - integrity sha512-A3tW9xySd03KGONkp8gP4+QRLuT1Mcx++m0hO0nZIM4H/Qwz8GsiDv+9okbmHk5HcsHwY5Jdsn6Cv50hwoNG+A== - dependencies: - "@types/react" "*" - "@types/react-plotly.js@^2.5.0": version "2.5.0" resolved "https://registry.yarnpkg.com/@types/react-plotly.js/-/react-plotly.js-2.5.0.tgz#bf7793ed16db13a2bd775ff8fa8f9595e82e8597" @@ -449,11 +442,6 @@ ci-info@^2.0.0: resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46" integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ== -classnames@2.x, classnames@^2.2.5: - version "2.3.1" - resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e" - integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA== - cli-cursor@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987" @@ -498,11 +486,6 @@ cli-width@^3.0.0: resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6" integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw== -clsx@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" - integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== - code-point-at@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" @@ -1587,11 +1570,6 @@ listr@^0.14.3: p-map "^2.0.0" rxjs "^6.3.3" -lodash.isequal@^4.0.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" - integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA= - lodash.once@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac" @@ -1916,7 +1894,7 @@ prop-types-exact@^1.2.0: object.assign "^4.1.0" reflect.ownkeys "^0.2.0" -prop-types@15.x, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -1963,22 +1941,6 @@ ramda@~0.26.1: resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06" integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ== -react-draggable@3.x: - version "3.3.2" - resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-3.3.2.tgz#966ef1d90f2387af3c2d8bd3516f601ea42ca359" - integrity sha512-oaz8a6enjbPtx5qb0oDWxtDNuybOylvto1QLydsXgKmwT7e3GXC2eMVDwEMIUYJIFqVG72XpOv673UuuAq6LhA== - dependencies: - classnames "^2.2.5" - prop-types "^15.6.0" - -react-draggable@^4.0.3: - version "4.4.4" - resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.4.tgz#5b26d9996be63d32d285a426f41055de87e59b2f" - integrity sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA== - dependencies: - clsx "^1.1.1" - prop-types "^15.6.0" - react-graph-vis@^1.0.5: version "1.0.7" resolved "https://registry.yarnpkg.com/react-graph-vis/-/react-graph-vis-1.0.7.tgz#55b934100c5235e7cc0e8721646c21246e4b7d75" @@ -1990,17 +1952,6 @@ react-graph-vis@^1.0.5: vis-data "^7.1.2" vis-network "^9.0.0" -react-grid-layout@^0.16.2: - version "0.16.6" - resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-0.16.6.tgz#9b2407a2b946c2260ebaf66f13b556e1da4efeb2" - integrity sha512-h2EsYgsqcESLJeevQSJsEKp8hhh+phOlXDJoMhlV2e7T3VWQL+S6iCF3iD/LK19r4oyRyOMDEir0KV+eLXrAyw== - dependencies: - classnames "2.x" - lodash.isequal "^4.0.0" - prop-types "15.x" - react-draggable "3.x" - react-resizable "1.x" - react-is@^16.13.1, react-is@^16.8.1, react-is@^16.8.6: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -2013,14 +1964,6 @@ react-plotly.js@^2.5.1: dependencies: prop-types "^15.7.2" -react-resizable@1.x: - version "1.11.1" - resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-1.11.1.tgz#02ca6850afa7a22c1b3e623e64aef71ee252af69" - integrity sha512-S70gbLaAYqjuAd49utRHibtHLrHXInh7GuOR+6OO6RO6uleQfuBnWmZjRABfqNEx3C3Z6VPLg0/0uOYFrkfu9Q== - dependencies: - prop-types "15.x" - react-draggable "^4.0.3" - react-test-renderer@^16.0.0-0: version "16.14.0" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"