Skip to content

Commit

Permalink
[Graph] EUI-ification of search bar (elastic#45351)
Browse files Browse the repository at this point in the history
  • Loading branch information
flash1293 committed Sep 19, 2019
1 parent 7d02e25 commit 61fb49b
Show file tree
Hide file tree
Showing 16 changed files with 355 additions and 54 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,9 @@ describe('SavedObjectsFinder', () => {
.find(EuiListGroupItem)
.first()
.simulate('click');
expect(chooseStub.calledWith('1', 'search', `${doc.attributes.title} (Search)`)).toEqual(true);
expect(chooseStub.calledWith('1', 'search', `${doc.attributes.title} (Search)`, doc)).toEqual(
true
);
});

describe('sorting', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,8 @@ interface BaseSavedObjectFinder {
onChoose?: (
id: SimpleSavedObject<SavedObjectAttributes>['id'],
type: SimpleSavedObject<SavedObjectAttributes>['type'],
name: string
name: string,
savedObject: SimpleSavedObject<SavedObjectAttributes>
) => void;
noItemsMessage?: React.ReactNode;
savedObjectMetaData: Array<SavedObjectMetaData<SavedObjectAttributes>>;
Expand Down Expand Up @@ -470,7 +471,7 @@ class SavedObjectFinder extends React.Component<SavedObjectFinderProps, SavedObj
onClick={
onChoose
? () => {
onChoose(item.id, item.type, fullName);
onChoose(item.id, item.type, fullName, item.savedObject);
}
: undefined
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
}

.gphGraph__menus, .gphGraph__bar {
margin: $euiSizeM $euiSizeM 0 $euiSizeM;
margin: $euiSizeS;
}

.gphGraph__flexGroup {
Expand Down
37 changes: 11 additions & 26 deletions x-pack/legacy/plugins/graph/public/angular/templates/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,20 @@
<div class="gphGraph__menus" ng-show="menus.showInspect">
<graph-inspect ng-show="menus.showInspect"></graph-inspect>
</div>

<graph-search-bar
current-index-pattern="selectedIndex"
on-index-pattern-selected="uiSelectIndex"
on-query-submit="submit"
saved-objects="pluginDependencies.savedObjects"
ui-settings="pluginDependencies.uiSettings"
overlays="pluginDependencies.overlays"
is-loading="loading"
initial-query="initialQuery"
></graph-search-bar>

<div class="gphGraph__bar">
<div class="gphGraph__flexGroup">
<!-- Select index pattern. -->
<select class="form-control gphIndexSelect" name="mySelect" ng-change="uiSelectIndex()" ng-class="{'gphIndexSelect-unselected':selectedIndex === null}"
ng-options="option.attributes.title for option in indices" ng-model="grr.proposedIndex">
<option
value=""
i18n-id="xpack.graph.topNavMenu.selectIndexPatternOptionLabel"
i18n-default-message="Select index pattern…"
></option>
</select>

<!-- Added fields. -->
<span
class="gphNoUserSelect"
Expand Down Expand Up @@ -53,22 +54,6 @@
<span aria-hidden="true" class="kuiIcon fa-plus"></span>
</button>
</span>

<!-- Search. -->
<form ng-submit="submit()" name="graphBasicSearch" class="gphGraph__flexGroupFiller" style="width: 100%">
<div class="kuiLocalSearch">
<input name="searchTerm" type="text" class="kuiLocalSearchInput" ng-model="grr.searchTerm" ng-disabled="liveResponseFields.length === 0"
ng-focus="kbnTopNav.close()" placeholder="foo AND bar NOT baz" autocomplete="off">
<button
class="kuiLocalSearchButton"
type="submit"
ng-disabled="liveResponseFields.length === 0"
aria-label="{{ ::'xpack.graph.topNavMenu.searchButtonAriaLabel' | i18n: { defaultMessage: 'Search' } }}"
>
<span aria-hidden="true" class="kuiIcon fa-search"></span>
</button>
</div>
</form>
</div>
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
></div>

<div
class="list-group-item list-group-item--noBorder"
class="list-group-item"
ng-if="(workspace !== null)"
>
<small class="help-block">http://host:port/{{ selectedIndex.name }}/_graph/explore</small>
Expand Down
64 changes: 45 additions & 19 deletions x-pack/legacy/plugins/graph/public/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import listingTemplate from './angular/templates/listing_ng_wrapper.html';
import { getReadonlyBadge } from './badge';
import { FormattedMessage } from '@kbn/i18n/react';

import { SearchBar } from './components/search_bar';
import { VennDiagram } from './components/venn_diagram';
import { Listing } from './components/listing';
import { Settings } from './components/settings';
Expand All @@ -57,8 +58,9 @@ import {
outlinkEncoders,
} from './helpers/outlink_encoders';
import { getEditUrl, getNewPath, getEditPath, setBreadcrumbs, getHomePath } from './services/url';
import { appStateToSavedWorkspace, savedWorkspaceToAppState, lookupIndexPattern, mapFields } from './services/persistence';
import { openSourceModal } from './services/source_modal';
import { openSaveModal } from './services/save_modal';
import { appStateToSavedWorkspace, savedWorkspaceToAppState, lookupIndexPattern, mapFields } from './services/persistence';
import { urlTemplateRegex } from './helpers/url_template';
import {
asAngularSyncedObservable,
Expand Down Expand Up @@ -97,6 +99,18 @@ app.directive('graphListing', function (reactDirective) {
return reactDirective(Listing);
});

app.directive('graphSearchBar', function (reactDirective) {
return reactDirective(SearchBar, [
['currentIndexPattern', { watchDepth: 'reference' }],
['isLoading', { watchDepth: 'reference' }],
['onIndexPatternSelected', { watchDepth: 'reference' }],
['onQuerySubmit', { watchDepth: 'reference' }],
['savedObjects', { watchDepth: 'reference' }],
['uiSettings', { watchDepth: 'reference' }],
['overlays', { watchDepth: 'reference' }]
]);
});

if (uiRoutes.enable) {
uiRoutes.enable();
}
Expand Down Expand Up @@ -244,6 +258,10 @@ app.controller('graphuiPlugin', function (
$scope.allSavingDisabled = $scope.graphSavePolicy === 'none';
$scope.searchTerm = '';

$scope.pluginDependencies = npStart.core;

$scope.loading = false;

//So scope properties can be used consistently with ng-model
$scope.grr = $scope;

Expand Down Expand Up @@ -369,11 +387,9 @@ app.controller('graphuiPlugin', function (
}), confirmModalOptions);
}

$scope.uiSelectIndex = function () {
$scope.uiSelectIndex = function (proposedIndex) {
canWipeWorkspace(function () {
$scope.indexSelected($scope.proposedIndex);
}, function () {
$scope.proposedIndex = $scope.selectedIndex;
$scope.indexSelected(proposedIndex);
});
};

Expand Down Expand Up @@ -414,6 +430,7 @@ app.controller('graphuiPlugin', function (
index: indexName,
query: query
};
$scope.loading = true;
return $http.post('../api/graph/graphExplore', request)
.then(function (resp) {
if (resp.data.resp.timed_out) {
Expand All @@ -425,7 +442,10 @@ app.controller('graphuiPlugin', function (
}
responseHandler(resp.data.resp);
})
.catch(handleHttpError);
.catch(handleHttpError)
.finally(() => {
$scope.loading = false;
});
}


Expand All @@ -435,20 +455,24 @@ app.controller('graphuiPlugin', function (
index: indexName,
body: query
};
$scope.loading = true;
$http.post('../api/graph/searchProxy', request)
.then(function (resp) {
responseHandler(resp.data.resp);
})
.catch(handleHttpError);
.catch(handleHttpError)
.finally(() => {
$scope.loading = false;
});
};

$scope.submit = function () {
$scope.submit = function (searchTerm) {
$scope.hideAllConfigPanels();
initWorkspaceIfRequired();
const numHops = 2;
if ($scope.searchTerm.startsWith('{')) {
if (searchTerm.startsWith('{')) {
try {
const query = JSON.parse($scope.searchTerm);
const query = JSON.parse(searchTerm);
if (query.vertices) {
// Is a graph explore request
$scope.workspace.callElasticsearch(query);
Expand All @@ -462,7 +486,7 @@ app.controller('graphuiPlugin', function (
}
return;
}
$scope.workspace.simpleSearch($scope.searchTerm, $scope.liveResponseFields, numHops);
$scope.workspace.simpleSearch(searchTerm, $scope.liveResponseFields, numHops);
};

$scope.clearWorkspace = function () {
Expand Down Expand Up @@ -633,9 +657,6 @@ app.controller('graphuiPlugin', function (
}
}

$scope.indices = $route.current.locals.indexPatterns.filter(indexPattern => !indexPattern.attributes.type);


$scope.setDetail = function (data) {
$scope.detail = data;
};
Expand Down Expand Up @@ -706,7 +727,7 @@ app.controller('graphuiPlugin', function (
const managementUrl = npStart.core.chrome.navLinks.get('kibana:management').url;
const url = `${managementUrl}/kibana/index_patterns`;

if ($scope.indices.length === 0) {
if ($route.current.locals.indexPatterns.length === 0) {
toastNotifications.addWarning({
title: i18n.translate('xpack.graph.noDataSourceNotificationMessageTitle', {
defaultMessage: 'No data source',
Expand Down Expand Up @@ -748,7 +769,9 @@ app.controller('graphuiPlugin', function (
}),
run: function () {
canWipeWorkspace(function () {
kbnUrl.change('/workspace/', {});
$scope.$evalAsync(() => {
kbnUrl.change('/workspace/', {});
});
}); },
testId: 'graphNewButton',
});
Expand Down Expand Up @@ -868,7 +891,7 @@ app.controller('graphuiPlugin', function (
// Deal with situation of request to open saved workspace
if ($route.current.locals.savedWorkspace) {
$scope.savedWorkspace = $route.current.locals.savedWorkspace;
const selectedIndex = lookupIndexPattern($scope.savedWorkspace, $scope.indices);
const selectedIndex = lookupIndexPattern($scope.savedWorkspace, $route.current.locals.indexPatterns);
if(!selectedIndex) {
toastNotifications.addDanger(
i18n.translate('xpack.graph.loadWorkspace.missingIndexPatternErrorMessage', {
Expand Down Expand Up @@ -902,13 +925,16 @@ app.controller('graphuiPlugin', function (
}
// Allow URLs to include a user-defined text query
if ($route.current.params.query) {
$scope.searchTerm = $route.current.params.query;
$scope.submit();
$scope.initialQuery = $route.current.params.query;
$scope.submit($route.current.params.query);
}
});
} else {
$route.current.locals.SavedWorkspacesProvider.get().then(function (newWorkspace) {
$scope.savedWorkspace = newWorkspace;
openSourceModal(npStart.core, indexPattern => {
$scope.indexSelected(indexPattern);
});
});
}

Expand Down
1 change: 1 addition & 0 deletions x-pack/legacy/plugins/graph/public/components/_index.scss
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
@import './search_bar';
@import './venn_diagram/index';
@import './settings/index';
11 changes: 11 additions & 0 deletions x-pack/legacy/plugins/graph/public/components/_search_bar.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.gphSearchBar {
padding: 0 $euiSizeS;
}

.gphSearchBar__datasourceButton {
height: 100% !important;
}

.gphSearchBar__datasourceButtonTooltip {
padding: 0;
}
63 changes: 63 additions & 0 deletions x-pack/legacy/plugins/graph/public/components/search_bar.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { SearchBar } from './search_bar';
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import React, { ReactElement } from 'react';
import { CoreStart } from 'src/core/public';
import { IndexPatternSavedObject } from '../types';
import { act } from 'react-dom/test-utils';
import { EuiFieldText } from '@elastic/eui';
import { openSourceModal } from '../services/source_modal';

jest.mock('../services/source_modal', () => ({ openSourceModal: jest.fn() }));

describe('search_bar', () => {
it('should render search bar and submit queryies', () => {
const querySubmit = jest.fn();
const instance = shallowWithIntl(
<SearchBar
isLoading={false}
onIndexPatternSelected={() => {}}
onQuerySubmit={querySubmit}
savedObjects={{} as CoreStart['savedObjects']}
uiSettings={{} as CoreStart['uiSettings']}
overlays={{} as CoreStart['overlays']}
currentIndexPattern={{ attributes: { title: 'Testpattern' } } as IndexPatternSavedObject}
/>
);
act(() => {
instance.find(EuiFieldText).simulate('change', { target: { value: 'testQuery' } });
});

act(() => {
instance.find('form').simulate('submit', { preventDefault: () => {} });
});

expect(querySubmit).toHaveBeenCalledWith('testQuery');
});

it('should render index pattern picker', () => {
const indexPatternSelected = jest.fn();
const instance = shallowWithIntl(
<SearchBar
isLoading={false}
onIndexPatternSelected={indexPatternSelected}
onQuerySubmit={() => {}}
savedObjects={{} as CoreStart['savedObjects']}
uiSettings={{} as CoreStart['uiSettings']}
overlays={{} as CoreStart['overlays']}
currentIndexPattern={{ attributes: { title: 'Testpattern' } } as IndexPatternSavedObject}
/>
);

// pick the button component out of the tree because
// it's part of a popover and thus not covered by enzyme
(instance.find(EuiFieldText).prop('prepend') as ReactElement).props.children.props.onClick();

expect(openSourceModal).toHaveBeenCalled();
});
});
Loading

0 comments on commit 61fb49b

Please sign in to comment.