Create dashboard drilldown - select dashboard via filtering combo box and navigate to dashboarrd

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.datapublicpluginstart.actions.md

@@ -9,5 +9,7 @@
 ```typescript
 actions: {
         createFiltersFromEvent: typeof createFiltersFromEvent;
+        valueClickActionGetFilters: typeof valueClickActionGetFilters;
+        selectRangeActionGetFilters: typeof selectRangeActionGetFilters;
     };
 ```

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.datapublicpluginstart.md

@@ -14,7 +14,7 @@ export interface DataPublicPluginStart
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [actions](./kibana-plugin-plugins-data-public.datapublicpluginstart.actions.md) | <code>{</code><br/><code>        createFiltersFromEvent: typeof createFiltersFromEvent;</code><br/><code>    }</code> |  |
+|  [actions](./kibana-plugin-plugins-data-public.datapublicpluginstart.actions.md) | <code>{</code><br/><code>        createFiltersFromEvent: typeof createFiltersFromEvent;</code><br/><code>        valueClickActionGetFilters: typeof valueClickActionGetFilters;</code><br/><code>        selectRangeActionGetFilters: typeof selectRangeActionGetFilters;</code><br/><code>    }</code> |  |
 |  [autocomplete](./kibana-plugin-plugins-data-public.datapublicpluginstart.autocomplete.md) | <code>AutocompleteStart</code> |  |
 |  [fieldFormats](./kibana-plugin-plugins-data-public.datapublicpluginstart.fieldformats.md) | <code>FieldFormatsStart</code> |  |
 |  [indexPatterns](./kibana-plugin-plugins-data-public.datapublicpluginstart.indexpatterns.md) | <code>IndexPatternsContract</code> |  |

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.esfilters.md

@@ -49,6 +49,7 @@ esFilters: {
     generateFilters: typeof generateFilters;
     onlyDisabledFiltersChanged: (newFilters?: import("../common").Filter[] | undefined, oldFilters?: import("../common").Filter[] | undefined) => boolean;
     changeTimeFilter: typeof changeTimeFilter;
+    convertRangeFilterToTimeRangeString: typeof convertRangeFilterToTimeRangeString;
     mapAndFlattenFilters: (filters: import("../common").Filter[]) => import("../common").Filter[];
     extractTimeFilter: typeof extractTimeFilter;
 }

src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx

@@ -36,6 +36,7 @@ import {
   IndexPattern,
   IndexPatternsContract,
   Query,
+  QueryState,
   SavedQuery,
   syncQueryStateWithUrl,
 } from '../../../../../../plugins/data/public';
@@ -132,13 +133,6 @@ export class DashboardAppController {
     const queryFilter = filterManager;
     const timefilter = queryService.timefilter.timefilter;
 
-    // starts syncing `_g` portion of url with query services
-    // note: dashboard_state_manager.ts syncs `_a` portion of url
-    const {
-      stop: stopSyncingQueryServiceStateWithUrl,
-      hasInheritedQueryFromUrl: hasInheritedGlobalStateFromUrl,
-    } = syncQueryStateWithUrl(queryService, kbnUrlStateStorage);
-
     let lastReloadRequestTime = 0;
     const dash = ($scope.dash = $route.current.locals.dash);
     if (dash.id) {
@@ -170,9 +164,20 @@ export class DashboardAppController {
 
     // The hash check is so we only update the time filter on dashboard open, not during
     // normal cross app navigation.
-    if (dashboardStateManager.getIsTimeSavedWithDashboard() && !hasInheritedGlobalStateFromUrl) {
+    const initialGlobalStateInUrl = kbnUrlStateStorage.get<QueryState>('_g');
+    const hasInheritedTimeRange = Boolean(initialGlobalStateInUrl?.time);
+    if (dashboardStateManager.getIsTimeSavedWithDashboard() && !hasInheritedTimeRange) {
       dashboardStateManager.syncTimefilterWithDashboard(timefilter);
     }
+    // starts syncing `_g` portion of url with query services
+    // note: dashboard_state_manager.ts syncs `_a` portion of url
+    // it is important to start this syncing after `dashboardStateManager.syncTimefilterWithDashboard(timefilter);` above is run,
+    // otherwise it will case redundant browser history record
+    const { stop: stopSyncingQueryServiceStateWithUrl } = syncQueryStateWithUrl(
+      queryService,
+      kbnUrlStateStorage
+    );
+
     $scope.showSaveQuery = dashboardCapabilities.saveQuery as boolean;
 
     const getShouldShowEditHelp = () =>

src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_state_manager.ts

@@ -50,6 +50,7 @@ import {
   ReduxLikeStateContainer,
   syncState,
 } from '../../../../../../plugins/kibana_utils/public';
+import { getDashboardIdFromUrl } from './url_helper';
 
 /**
  * Dashboard state manager handles connecting angular and redux state between the angular and react portions of the
@@ -174,6 +175,12 @@ export class DashboardStateManager {
           // sync state required state container to be able to handle null
           // overriding set() so it could handle null coming from url
           if (state) {
+            // Skip this update if current dashboardId in the url is different from what we have in current instance of state manager
+            // Because dashboard is driven by angular, the destroy cycle happens async,
+            // And we should not to interfere into state change longer as this instance will be destroyed soon
+            const currentDashboardIdInUrl = getDashboardIdFromUrl(history.location.pathname);
+            if (currentDashboardIdInUrl !== this.savedDashboard.id) return;
+
             this.stateContainer.set({
               ...this.stateDefaults,
               ...state,
@@ -229,8 +236,8 @@ export class DashboardStateManager {
 
       if (
         !_.isEqual(
-          convertedPanelStateMap[panelState.explicitInput.id],
-          savedDashboardPanelMap[panelState.explicitInput.id]
+          _.omit(convertedPanelStateMap[panelState.explicitInput.id], 'version'),
+          _.omit(savedDashboardPanelMap[panelState.explicitInput.id], 'version')
         )
       ) {
         // A panel was changed

src/legacy/core_plugins/kibana/public/dashboard/np_ready/url_helper.test.ts

@@ -45,6 +45,7 @@ jest.mock('../legacy_imports', () => {
 
 import {
   addEmbeddableToDashboardUrl,
+  getDashboardIdFromUrl,
   getLensUrlFromDashboardAbsoluteUrl,
   getUrlVars,
 } from './url_helper';
@@ -115,4 +116,30 @@ describe('Dashboard URL Helper', () => {
       'http://localhost:5601/app/kibana#/lens/edit/1244'
     );
   });
+
+  it('getDashboardIdFromDashboardUrl', () => {
+    let url =
+      "http://localhost:5601/wev/app/kibana#/dashboard?_g=(refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))&_a=(description:'',filters:!()";
+    expect(getDashboardIdFromUrl(url)).toEqual(undefined);
+
+    url =
+      "http://localhost:5601/wev/app/kibana#/dashboard/625357282?_a=(description:'',filters:!()&_g=(refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))";
+    expect(getDashboardIdFromUrl(url)).toEqual('625357282');
+
+    url = 'http://myserver.mydomain.com:5601/wev/app/kibana#/dashboard/777182';
+    expect(getDashboardIdFromUrl(url)).toEqual('777182');
+
+    url =
+      "http://localhost:5601/app/kibana#/dashboard?_g=(refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))&_a=(description:'',filters:!()";
+    expect(getDashboardIdFromUrl(url)).toEqual(undefined);
+
+    url = '/dashboard/test/?_g=(refreshInterval:';
+    expect(getDashboardIdFromUrl(url)).toEqual('test');
+
+    url = 'dashboard/test/?_g=(refreshInterval:';
+    expect(getDashboardIdFromUrl(url)).toEqual('test');
+
+    url = '/other-app/test/';
+    expect(getDashboardIdFromUrl(url)).toEqual(undefined);
+  });
 });

src/legacy/core_plugins/kibana/public/dashboard/np_ready/url_helper.ts

@@ -98,3 +98,24 @@ export function getLensUrlFromDashboardAbsoluteUrl(
 function getUrlWithoutQueryParams(url: string): string {
   return url.split('?')[0];
 }
+
+/**
+ * Returns dashboard id from URL
+ * literally looks from id after `dashboard/` string and before `/`, `?` and end of string
+ * @param url to extract dashboardId from
+ * input: http://localhost:5601/lib/app/kibana#/dashboard?param1=x&param2=y&param3=z
+ * output: undefined
+ * input: http://localhost:5601/lib/app/kibana#/dashboard/39292992?param1=x&param2=y&param3=z
+ * output: 39292992
+ */
+export function getDashboardIdFromUrl(url: string): string | undefined {
+  const [, match1, match2, match3] = url.match(
+    /dashboard\/(.*)\/|dashboard\/(.*)\?|dashboard\/(.*)$/
+  ) ?? [
+    undefined, // full match
+    undefined, // group1 - dashboardId is before `/`
+    undefined, // group2 - dashboardId is before `?`
+    undefined, // group3 - dashboardID is in the end
+  ];
+  return match1 ?? match2 ?? match3 ?? undefined;
+}

src/legacy/ui/public/chrome/api/sub_url_hooks.js

@@ -17,8 +17,6 @@
  * under the License.
  */
 
-import url from 'url';
-
 import { unhashUrl } from '../../../../../plugins/kibana_utils/public';
 import { toastNotifications } from '../../notify/toasts';
 import { npSetup } from '../../new_platform';
@@ -47,14 +45,14 @@ export function registerSubUrlHooks(angularModule, internals) {
     }
 
     $rootScope.$on('$locationChangeStart', (e, newUrl) => {
+      const getHash = url => url.split('#')[1] || '';
+
       // This handler fixes issue #31238 where browser back navigation
       // fails due to angular 1.6 parsing url encoded params wrong.
-      const parsedAbsUrl = url.parse($location.absUrl());
-      const absUrlHash = parsedAbsUrl.hash ? parsedAbsUrl.hash.slice(1) : '';
+      const absUrlHash = getHash($location.absUrl());
       const decodedAbsUrlHash = decodeURIComponent(absUrlHash);
 
-      const parsedNewUrl = url.parse(newUrl);
-      const newHash = parsedNewUrl.hash ? parsedNewUrl.hash.slice(1) : '';
+      const newHash = getHash(newUrl);
       const decodedHash = decodeURIComponent(newHash);
 
       if (absUrlHash !== newHash && decodedHash === decodedAbsUrlHash) {

src/plugins/dashboard/public/url_generator.test.ts

@@ -70,7 +70,7 @@ describe('dashboard url generator', () => {
       query: { query: 'bye', language: 'kuery' },
     });
     expect(url).toMatchInlineSnapshot(
-      `"xyz/app/kibana#/dashboard/123?_a=(filters:!((meta:(alias:!n,disabled:!f,negate:!f),query:(query:hi))),query:(language:kuery,query:bye))&_g=(time:(from:now-15m,mode:relative,to:now))"`
+      `"xyz/app/kibana#/dashboard/123?_a=(filters:!((meta:(alias:!n,disabled:!f,negate:!f),query:(query:hi))),query:(language:kuery,query:bye))&_g=(filters:!(),time:(from:now-15m,mode:relative,to:now))"`
     );
   });
 

src/plugins/dashboard/public/url_generator.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { TimeRange, Filter, Query } from '../../data/public';
+import { TimeRange, Filter, Query, esFilters } from '../../data/public';
 import { setStateToKbnUrl } from '../../kibana_utils/public';
 import { UrlGeneratorsDefinition, UrlGeneratorState } from '../../share/public';
 
@@ -38,8 +38,7 @@ export type DashboardAppLinkGeneratorState = UrlGeneratorState<{
   timeRange?: TimeRange;
   /**
    * Optionally apply filers. NOTE: if given and used in conjunction with `dashboardId`, and the
-   * saved dashboard has filters saved with it, this will _replace_ those filters.  This will set
-   * app filters, not global filters.
+   * saved dashboard has filters saved with it, this will _replace_ those filters.
    */
   filters?: Filter[];
   /**
@@ -64,21 +63,31 @@ export const createDirectAccessDashboardLinkGenerator = (
     const appBasePath = startServices.appBasePath;
     const hash = state.dashboardId ? `dashboard/${state.dashboardId}` : `dashboard`;
 
+    const cleanEmptyStateKeys = (stateObj: Record<string, any>) => {
+      Object.keys(stateObj).forEach(key => {
+        if (stateObj[key] === undefined) {
+          delete stateObj[key];
+        }
+      });
+      return stateObj;
+    };
+
     const appStateUrl = setStateToKbnUrl(
       STATE_STORAGE_KEY,
-      {
+      cleanEmptyStateKeys({
         query: state.query,
-        filters: state.filters,
-      },
+        filters: state.filters?.filter(f => !esFilters.isFilterPinned(f)),
+      }),
       { useHash },
       `${appBasePath}#/${hash}`
     );
 
     return setStateToKbnUrl(
       GLOBAL_STATE_STORAGE_KEY,
-      {
+      cleanEmptyStateKeys({
         time: state.timeRange,
-      },
+        filters: state.filters?.filter(f => esFilters.isFilterPinned(f)),
+      }),
       { useHash },
       appStateUrl
     );

src/plugins/data/common/query/filter_manager/compare_filters.test.ts

@@ -92,6 +92,28 @@ describe('filter manager utilities', () => {
       expect(compareFilters(f1, f2)).toBeTruthy();
     });
 
+    test('should compare duplicates, assuming $state: { store: FilterStateStore.APP_STATE } is default', () => {
+      const f1 = {
+        $state: { store: FilterStateStore.APP_STATE },
+        ...buildQueryFilter({ _type: { match: { query: 'apache', type: 'phrase' } } }, 'index', ''),
+      };
+      const f2 = {
+        ...buildQueryFilter({ _type: { match: { query: 'apache', type: 'phrase' } } }, 'index', ''),
+      };
+      const f3 = {
+        $state: { store: FilterStateStore.GLOBAL_STATE },
+        ...buildQueryFilter({ _type: { match: { query: 'apache', type: 'phrase' } } }, 'index', ''),
+      };
+
+      // don't take state into account at all:
+      expect(compareFilters(f1, f2)).toBeTruthy();
+      expect(compareFilters(f2, f3)).toBeTruthy();
+
+      // compare with state:
+      expect(compareFilters(f1, f2, { state: true })).toBeTruthy();
+      expect(compareFilters(f2, f3, { state: true })).toBeFalsy();
+    });
+
     test('should compare filters array to non array', () => {
       const f1 = buildQueryFilter(
         { _type: { match: { query: 'apache', type: 'phrase' } } },

src/plugins/data/common/query/filter_manager/compare_filters.ts

@@ -18,7 +18,7 @@
  */
 
 import { defaults, isEqual, omit, map } from 'lodash';
-import { FilterMeta, Filter } from '../../es_query';
+import { FilterMeta, Filter, FilterStateStore } from '../../es_query';
 
 export interface FilterCompareOptions {
   disabled?: boolean;
@@ -42,11 +42,13 @@ const mapFilter = (
   comparators: FilterCompareOptions,
   excludedAttributes: string[]
 ) => {
-  const cleaned: FilterMeta = omit(filter, excludedAttributes);
+  const cleaned: Filter & FilterMeta = omit(filter, excludedAttributes);
 
   if (comparators.negate) cleaned.negate = filter.meta && Boolean(filter.meta.negate);
   if (comparators.disabled) cleaned.disabled = filter.meta && Boolean(filter.meta.disabled);
   if (comparators.disabled) cleaned.alias = filter.meta?.alias;
+  if (comparators.state)
+    cleaned.$state = { store: filter.$state?.store ?? FilterStateStore.APP_STATE };
 
   return cleaned;
 };

src/plugins/data/public/actions/apply_filter_action.ts

@@ -42,6 +42,7 @@ export function createFilterAction(
   return createAction<typeof ACTION_GLOBAL_APPLY_FILTER>({
     type: ACTION_GLOBAL_APPLY_FILTER,
     id: ACTION_GLOBAL_APPLY_FILTER,
+    getIconType: () => 'filter',
     getDisplayName: () => {
       return i18n.translate('data.filter.applyFilterActionTitle', {
         defaultMessage: 'Apply filter to current view',

src/plugins/data/public/actions/index.ts

@@ -19,5 +19,5 @@
 
 export { ACTION_GLOBAL_APPLY_FILTER, createFilterAction } from './apply_filter_action';
 export { createFiltersFromEvent } from './filters/create_filters_from_event';
-export { selectRangeAction } from './select_range_action';
-export { valueClickAction } from './value_click_action';
+export { selectRangeAction, selectRangeActionGetFilters } from './select_range_action';
+export { valueClickAction, valueClickActionGetFilters } from './value_click_action';