Skip to content

Commit

Permalink
[Dashboard] Deangularize navbar, attempt nr. 2 (elastic#61611)
Browse files Browse the repository at this point in the history 
* Attempt at deangularization, nr.2

* Remove padding in fullscreen

* Fixing failing functional test

* Fixing remaining functional test

* Fixing typescript errors

* Fixing filter bar not being visible in fullscreen

* Fixing filter bar not being visible in fullscreen

* Rebasing against master

* Fixing a small leftover

* Fix order of functions

* Fixing linting error

* Changing noPadding to a custom class

* Use filterManagers to handle filters

* Rename class

* Attempt at deangularization, nr.2

* Remove padding in fullscreen

* Fixing failing functional test

* Fixing remaining functional test

* Fixing typescript errors

* Fixing filter bar not being visible in fullscreen

* Fixing filter bar not being visible in fullscreen

* Rebasing against master

* Fixing a small leftover

* Fix order of functions

* Fixing linting error

* [APM] Agent config select box doesn't work on IE (elastic#63236)

* adding value property to select options

* fixing test

* Use globe icon for "ext" span type on service map (elastic#63205)

Both "external" and "ext" can be returned and should have the same icon.

* Move shared vislib components into Charts plugin (elastic#62957)

* Closes elastic#56310

Move shared vislib components into Charts plugin

* Fixed imports in tests

* Changed i18n IDs to match charts namespace

* Renamed ColorSchemaVislibParams to ColorSchemaParams, added enums and got rid of useValidation function

* Renamed ColorSchemaVislibParams to ColorSchemaParams and got rid of useValidation function

* Fixed merge conflict

* Replaced enums with objects again

* Make uptime alert flyout test a little more resilient (elastic#62702)

* [SIEM] [Cases] Unit tests for case UI components (elastic#63005)

* Endpoint: Remove unused `lib` module (elastic#63248)

* [Lens] Fix error in query from generated suggestion (elastic#63018)

* [Lens] Fix error in query from generated suggestion

* Update from review comments

* Fix test

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

* Resolver/node svg 2 html (elastic#62958)

* Remove some SVG in Resolver nodes and replace with HTML

* [Reporting] convert all server unit tests to TypeScript (elastic#62873)

* [Reporting] convert all server unit tests to TypeScript

* fix ts

* revert unrelated change

* [SIEM] Link ML Rule card CTA to license_management (elastic#63210)

* Link ML Rule card CTA to license_management

Taking the user directly to the license management page within kibana
(where they could immediately start a trial subscription) is much more
actionable than taking them to the subscriptions marketing page.

* Revert translation key change

Neither of these is totally accurate, and there've already been
translations written for the old one.

* Correctly type ILM's optional dependencies as optional (elastic#63255)

And guard against their absence.

* [Telemetry] use prod keys (elastic#63263)

* update chromedriver dependency to 81.0.0 (elastic#63266)

* task/mac-eventing-form (elastic#62999)

adds mac events form for endpoint policy details
Co-authored-by: oatkiller <robert.austin@elastic.co>

* bc6 rule import april 9 (elastic#63152)

* bc6 rule import april 9

Increased the lookback of the ML rules

* re-import

with LF chars

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

* Added UI for pre-configured connectors. (elastic#63074)

* Added UI for pre-configured connectors.

* fixed due to comments

* Fixed jest tests

* Fixed due to comments and added some functional tests

* test fix

* Fixed failed checks

* Fixed functional tests failing

* TaskManager tasks scheduled without attempting to run (elastic#62078)

* TaskManager tasks scheduled without attempting to run

* Removing unused import

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

* Changed alerting wrong param name for help xpack.encrypted_saved_objects.encryptionKey to xpack.encryptedSavedObjects.encryptionKey (elastic#63307)

* fix ScopedHistory.createHref to prepend location with scoped history basePath (elastic#62407)

* fix createHref to prepend with scoped history basePath + add option to exclude it.

* fix prependBasePath behavior

* fix test plugins urls

* add pathname to endpoint url builder methods

* Revert "add pathname to endpoint url builder methods"

This reverts commit 7604932

* adapt createHref instead of prependBasePath

* use object options for createHref

* update generated doc

* fixing custom link popover size and hiding scroll (elastic#63240)

* Changing noPadding to a custom class

* Use filterManagers to handle filters

* Rename class

* Applying some changes

* Reverting search_bar code changes

* Removing some stuff that was causing functional tests to fail

* Removing refresh dashboard container which was causing errors during navigation

* Do not destroy dashboardContainer

* Adding updateSavedQueryId method

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Cauê Marcondes <55978943+cauemarcondes@users.noreply.github.com>
Co-authored-by: Nathan L Smith <nathan.smith@elastic.co>
Co-authored-by: DianaDerevyankina <54894989+DianaDerevyankina@users.noreply.github.com>
Co-authored-by: Brian Seeders <brian.seeders@elastic.co>
Co-authored-by: Steph Milovic <stephanie.milovic@elastic.co>
Co-authored-by: Robert Austin <robert.austin@elastic.co>
Co-authored-by: Wylie Conlon <william.conlon@elastic.co>
Co-authored-by: Brent Kimmel <bkimmel@users.noreply.github.com>
Co-authored-by: Tim Sullivan <tsullivan@users.noreply.github.com>
Co-authored-by: Ryland Herrick <ryalnd@gmail.com>
Co-authored-by: CJ Cenizal <cj@cenizal.com>
Co-authored-by: Ahmad Bamieh <ahmadbamieh@gmail.com>
Co-authored-by: Dmitry Lemeshko <dzmitry.lemechko@elastic.co>
Co-authored-by: Candace Park <56409205+parkiino@users.noreply.github.com>
Co-authored-by: The SpaceCake Project <randomuserid@users.noreply.github.com>
Co-authored-by: Yuliia Naumenko <jo.naumenko@gmail.com>
Co-authored-by: Brandon Kobel <brandon.kobel@elastic.co>
Co-authored-by: Pierre Gayvallet <pierre.gayvallet@elastic.co>
  • Loading branch information
@elasticmachine @cauemarcondes
@smith @DianaDerevyankina @brianseeders @stephmilovic @bkimmel @tsullivan @rylnd @cjcenizal @Bamieh @dmlemeshko @parkiino @randomuserid @YulNaumenko @kobelb @pgayvallet
20 people committed Apr 22, 2020
1 parent 222fdc5 commit ffc8741
Show file tree
Hide file tree
Showing 12 changed files with 240 additions and 127 deletions.
16 changes: 1 addition & 15 deletions src/plugins/dashboard/public/application/application.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,7 @@ import { EmbeddableStart } from '../../../embeddable/public';
import { NavigationPublicPluginStart as NavigationStart } from '../../../navigation/public';
import { DataPublicPluginStart } from '../../../data/public';
import { SharePluginStart } from '../../../share/public';
import {
KibanaLegacyStart,
configureAppAngularModule,
createTopNavDirective,
createTopNavHelper,
} from '../../../kibana_legacy/public';
import { KibanaLegacyStart, configureAppAngularModule } from '../../../kibana_legacy/public';
import { SavedObjectLoader } from '../../../saved_objects/public';

export interface RenderDeps {
Expand Down Expand Up @@ -114,13 +109,11 @@ function mountDashboardApp(appBasePath: string, element: HTMLElement) {

function createLocalAngularModule(core: AppMountContext['core'], navigation: NavigationStart) {
createLocalI18nModule();
createLocalTopNavModule(navigation);
createLocalIconModule();

const dashboardAngularModule = angular.module(moduleName, [
...thirdPartyAngularDependencies,
'app/dashboard/I18n',
'app/dashboard/TopNav',
'app/dashboard/icon',
]);
return dashboardAngularModule;
Expand All @@ -132,13 +125,6 @@ function createLocalIconModule() {
.directive('icon', reactDirective => reactDirective(EuiIcon));
}

function createLocalTopNavModule(navigation: NavigationStart) {
angular
.module('app/dashboard/TopNav', ['react'])
.directive('kbnTopNav', createTopNavDirective)
.directive('kbnTopNavHelper', createTopNavHelper(navigation.ui));
}

function createLocalI18nModule() {
angular
.module('app/dashboard/I18n', [])
Expand Down
47 changes: 1 addition & 46 deletions src/plugins/dashboard/public/application/dashboard_app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,52 +2,7 @@
class="app-container dshAppContainer"
ng-class="{'dshAppContainer--withMargins': model.useMargins}"
>
<!-- Local nav. -->
<kbn-top-nav
ng-show="isVisible"
app-name="'dashboard'"
config="topNavMenu"

show-search-bar="isVisible"
show-filter-bar="showFilterBar()"
show-save-query="showSaveQuery"

query="model.query"
saved-query="savedQuery"
screen-title="screenTitle"
on-query-submit="updateQueryAndFetch"
index-patterns="indexPatterns"
filters="model.filters"
on-filters-updated="onFiltersUpdated"
date-range-from="model.timeRange.from"
date-range-to="model.timeRange.to"
is-refresh-paused="model.refreshInterval.pause"
refresh-interval="model.refreshInterval.value"
on-saved="onQuerySaved"
on-saved-query-updated="onSavedQueryUpdated"
on-clear-saved-query="onClearSavedQuery"
on-refresh-change="onRefreshChange">
</kbn-top-nav>

<!--
The top nav is hidden in embed mode but the filter bar must still be present so
we show the filter bar on its own here if the chrome is not visible.
-->
<kbn-top-nav
ng-if="showFilterBar() && !isVisible"

app-name="'dashboard'"
show-search-bar="true"
show-filter-bar="true"
show-save-query="false"
show-date-picker="false"

filters="model.filters"
index-patterns="indexPatterns"
on-filters-updated="onFiltersUpdated"
>
</kbn-top-nav>

<div id="dashboardChrome"></div>
<h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
<div id="dashboardViewport"></div>

Expand Down
15 changes: 0 additions & 15 deletions src/plugins/dashboard/public/application/dashboard_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ import { SavedObjectDashboard } from '../saved_dashboards';
export interface DashboardAppScope extends ng.IScope {
dash: SavedObjectDashboard;
appState: DashboardAppState;
screenTitle: string;
model: {
query: Query;
filters: Filter[];
Expand All @@ -54,21 +53,7 @@ export interface DashboardAppScope extends ng.IScope {
getShouldShowEditHelp: () => boolean;
getShouldShowViewHelp: () => boolean;
updateQueryAndFetch: ({ query, dateRange }: { query: Query; dateRange?: TimeRange }) => void;
onRefreshChange: ({
isPaused,
refreshInterval,
}: {
isPaused: boolean;
refreshInterval: any;
}) => void;
onFiltersUpdated: (filters: Filter[]) => void;
onCancelApplyFilters: () => void;
onApplyFilters: (filters: Filter[]) => void;
onQuerySaved: (savedQuery: SavedQuery) => void;
onSavedQueryUpdated: (savedQuery: SavedQuery) => void;
onClearSavedQuery: () => void;
topNavMenu: any;
showFilterBar: () => boolean;
showAddPanel: any;
showSaveQuery: boolean;
kbnTopNav: any;
Expand Down
113 changes: 63 additions & 50 deletions src/plugins/dashboard/public/application/dashboard_app_controller.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,15 @@ import _, { uniq } from 'lodash';
import { i18n } from '@kbn/i18n';
import { EUI_MODAL_CANCEL_BUTTON } from '@elastic/eui';
import React from 'react';
import ReactDOM from 'react-dom';
import angular from 'angular';

import { Subscription } from 'rxjs';
import { map } from 'rxjs/operators';
import { History } from 'history';
import { SavedObjectSaveOpts } from 'src/plugins/saved_objects/public';
import { NavigationPublicPluginStart as NavigationStart } from 'src/plugins/navigation/public';
import { TimeRange } from 'src/plugins/data/public';
import { DashboardEmptyScreen, DashboardEmptyScreenProps } from './dashboard_empty_screen';

import {
Expand Down Expand Up @@ -87,6 +90,7 @@ export interface DashboardAppControllerDependencies extends RenderDeps {
dashboardConfig: KibanaLegacyStart['dashboardConfig'];
history: History;
kbnUrlStateStorage: IKbnUrlStateStorage;
navigation: NavigationStart;
}

export class DashboardAppController {
Expand Down Expand Up @@ -123,10 +127,13 @@ export class DashboardAppController {
history,
kbnUrlStateStorage,
usageCollection,
navigation,
}: DashboardAppControllerDependencies) {
const filterManager = queryService.filterManager;
const queryFilter = filterManager;
const timefilter = queryService.timefilter.timefilter;
let showSearchBar = true;
let showQueryBar = true;

let lastReloadRequestTime = 0;
const dash = ($scope.dash = $route.current.locals.dash);
Expand Down Expand Up @@ -243,6 +250,9 @@ export class DashboardAppController {
}
};

const showFilterBar = () =>
$scope.model.filters.length > 0 || !dashboardStateManager.getFullScreenMode();

const getEmptyScreenProps = (
shouldShowEditHelp: boolean,
isEmptyInReadOnlyMode: boolean
Expand Down Expand Up @@ -310,7 +320,6 @@ export class DashboardAppController {
refreshInterval: timefilter.getRefreshInterval(),
};
$scope.panels = dashboardStateManager.getPanels();
$scope.screenTitle = dashboardStateManager.getTitle();
};

updateState();
Expand Down Expand Up @@ -515,49 +524,8 @@ export class DashboardAppController {
}
};

$scope.onRefreshChange = function({ isPaused, refreshInterval }) {
timefilter.setRefreshInterval({
pause: isPaused,
value: refreshInterval ? refreshInterval : $scope.model.refreshInterval.value,
});
};

$scope.onFiltersUpdated = filters => {
// The filters will automatically be set when the queryFilter emits an update event (see below)
queryFilter.setFilters(filters);
};

$scope.onQuerySaved = savedQuery => {
$scope.savedQuery = savedQuery;
};

$scope.onSavedQueryUpdated = savedQuery => {
$scope.savedQuery = { ...savedQuery };
};

$scope.onClearSavedQuery = () => {
delete $scope.savedQuery;
dashboardStateManager.setSavedQueryId(undefined);
dashboardStateManager.applyFilters(
{
query: '',
language:
localStorage.get('kibana.userQueryLanguage') || uiSettings.get('search:queryLanguage'),
},
queryFilter.getGlobalFilters()
);
// Making this method sync broke the updates.
// Temporary fix, until we fix the complex state in this file.
setTimeout(() => {
queryFilter.setFilters(queryFilter.getGlobalFilters());
}, 0);
};

const updateStateFromSavedQuery = (savedQuery: SavedQuery) => {
const savedQueryFilters = savedQuery.attributes.filters || [];
const globalFilters = queryFilter.getGlobalFilters();
const allFilters = [...globalFilters, ...savedQueryFilters];

const allFilters = filterManager.getFilters();
dashboardStateManager.applyFilters(savedQuery.attributes.query, allFilters);
if (savedQuery.attributes.timefilter) {
timefilter.setTime({
Expand Down Expand Up @@ -616,6 +584,42 @@ export class DashboardAppController {
}
);

const onSavedQueryIdChange = (savedQueryId?: string) => {
dashboardStateManager.setSavedQueryId(savedQueryId);
};

const getNavBarProps = () => {
const isFullScreenMode = dashboardStateManager.getFullScreenMode();
const screenTitle = dashboardStateManager.getTitle();
return {
appName: 'dashboard',
config: $scope.isVisible ? $scope.topNavMenu : undefined,
className: isFullScreenMode ? 'kbnTopNavMenu-isFullScreen' : undefined,
screenTitle,
showSearchBar,
showQueryBar,
showFilterBar: showFilterBar(),
indexPatterns: $scope.indexPatterns,
showSaveQuery: $scope.showSaveQuery,
query: $scope.model.query,
savedQuery: $scope.savedQuery,
onSavedQueryIdChange,
savedQueryId: dashboardStateManager.getSavedQueryId(),
useDefaultBehaviors: true,
onQuerySubmit: (payload: { dateRange: TimeRange; query?: Query }): void => {
if (!payload.query) {
$scope.updateQueryAndFetch({ query: $scope.model.query, dateRange: payload.dateRange });
} else {
$scope.updateQueryAndFetch({ query: payload.query, dateRange: payload.dateRange });
}
},
};
};
const dashboardNavBar = document.getElementById('dashboardChrome');
const updateNavBar = () => {
ReactDOM.render(<navigation.ui.TopNavMenu {...getNavBarProps()} />, dashboardNavBar);
};

$scope.timefilterSubscriptions$ = new Subscription();

$scope.timefilterSubscriptions$.add(
Expand Down Expand Up @@ -707,6 +711,8 @@ export class DashboardAppController {
revertChangesAndExitEditMode();
}
});

updateNavBar();
};

/**
Expand Down Expand Up @@ -761,9 +767,6 @@ export class DashboardAppController {
});
}

$scope.showFilterBar = () =>
$scope.model.filters.length > 0 || !dashboardStateManager.getFullScreenMode();

$scope.showAddPanel = () => {
dashboardStateManager.setFullScreenMode(false);
/*
Expand All @@ -785,7 +788,11 @@ export class DashboardAppController {
const navActions: {
[key: string]: NavAction;
} = {};
navActions[TopNavIds.FULL_SCREEN] = () => dashboardStateManager.setFullScreenMode(true);
navActions[TopNavIds.FULL_SCREEN] = () => {
dashboardStateManager.setFullScreenMode(true);
showQueryBar = false;
updateNavBar();
};
navActions[TopNavIds.EXIT_EDIT_MODE] = () => onChangeViewMode(ViewMode.VIEW);
navActions[TopNavIds.ENTER_EDIT_MODE] = () => onChangeViewMode(ViewMode.EDIT);
navActions[TopNavIds.SAVE] = () => {
Expand Down Expand Up @@ -858,6 +865,7 @@ export class DashboardAppController {
if ((response as { error: Error }).error) {
dashboardStateManager.setTitle(currentTitle);
}
updateNavBar();
return response;
});
};
Expand Down Expand Up @@ -939,6 +947,9 @@ export class DashboardAppController {
const visibleSubscription = chrome.getIsVisible$().subscribe(isVisible => {
$scope.$evalAsync(() => {
$scope.isVisible = isVisible;
showSearchBar = isVisible || showFilterBar();
showQueryBar = !dashboardStateManager.getFullScreenMode() && isVisible;
updateNavBar();
});
});

Expand All @@ -949,6 +960,11 @@ export class DashboardAppController {
navActions,
dashboardConfig.getHideWriteControls()
);
updateNavBar();
});

$scope.$watch('indexPatterns', () => {
updateNavBar();
});

$scope.$on('$destroy', () => {
Expand All @@ -965,9 +981,6 @@ export class DashboardAppController {
if (outputSubscription) {
outputSubscription.unsubscribe();
}
if (dashboardContainer) {
dashboardContainer.destroy();
}
});
}
}
4 changes: 4 additions & 0 deletions src/plugins/navigation/public/top_nav_menu/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,8 @@
padding: 0 $euiSizeS;
}
}

.kbnTopNavMenu-isFullScreen {
padding: 0;
}
}
13 changes: 13 additions & 0 deletions src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,4 +75,17 @@ describe('TopNavMenu', () => {
expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0);
expect(component.find(SEARCH_BAR_SELECTOR).length).toBe(1);
});

it('Should render with a class name', () => {
const component = shallowWithIntl(
<TopNavMenu
appName={'test'}
showSearchBar={true}
data={dataShim as any}
className={'myCoolClass'}
/>
);
expect(component.find('.kbnTopNavMenu').length).toBe(1);
expect(component.find('.myCoolClass').length).toBeTruthy();
});
});
Loading

0 comments on commit ffc8741

Please sign in to comment.