Drilldown demo

.i18nrc.json

@@ -8,6 +8,7 @@
     "data": "src/plugins/data",
     "embeddableApi": "src/plugins/embeddable",
     "embeddableExamples": "examples/embeddable_examples",
+    "uiActionsExamples": "examples/ui_action_examples",
     "share": "src/plugins/share",
     "home": "src/plugins/home",
     "charts": "src/plugins/charts",

examples/ui_action_examples/kibana.json

@@ -5,6 +5,6 @@
   "configPath": ["ui_actions_examples"],
   "server": false,
   "ui": true,
-  "requiredPlugins": ["uiActions"],
+  "requiredPlugins": ["uiActions", "drilldowns", "data"],
   "optionalPlugins": []
 }

examples/ui_action_examples/public/components/README.md

@@ -0,0 +1,5 @@
+# Presentation React components
+
+Here we keep reusable *presentation* (aka *dumb*) React components—these
+components should not be connected to state and ideally should not know anything
+about Kibana.

examples/ui_action_examples/public/components/discover_drilldown_config/discover_drilldown_config.tsx

@@ -0,0 +1,105 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { EuiFormRow, EuiSelect, EuiSwitch, EuiSpacer } from '@elastic/eui';
+import { txtChooseDestinationIndexPattern } from './i18n';
+
+export interface IndexPatternItem {
+  id: string;
+  title: string;
+}
+
+export interface DiscoverDrilldownConfigProps {
+  activeIndexPatternId?: string;
+  indexPatterns: IndexPatternItem[];
+  onIndexPatternSelect: (indexPatternId: string) => void;
+  customIndexPattern?: boolean;
+  onCustomIndexPatternToggle?: () => void;
+  carryFiltersAndQuery?: boolean;
+  onCarryFiltersAndQueryToggle?: () => void;
+  carryTimeRange?: boolean;
+  onCarryTimeRangeToggle?: () => void;
+}
+
+export const DiscoverDrilldownConfig: React.FC<DiscoverDrilldownConfigProps> = ({
+  activeIndexPatternId,
+  indexPatterns,
+  onIndexPatternSelect,
+  customIndexPattern,
+  onCustomIndexPatternToggle,
+  carryFiltersAndQuery,
+  onCarryFiltersAndQueryToggle,
+  carryTimeRange,
+  onCarryTimeRangeToggle,
+}) => {
+  return (
+    <>
+      {!!onCustomIndexPatternToggle && (
+        <>
+          <EuiFormRow hasChildLabel={false}>
+            <EuiSwitch
+              name="customIndexPattern"
+              label="Use custom index pattern"
+              checked={!!customIndexPattern}
+              onChange={onCustomIndexPatternToggle}
+            />
+          </EuiFormRow>
+          {!!customIndexPattern && (
+            <EuiFormRow fullWidth label={txtChooseDestinationIndexPattern}>
+              <EuiSelect
+                name="selectDashboard"
+                hasNoInitialSelection={true}
+                fullWidth
+                options={[
+                  { id: '', text: 'Pick one...' },
+                  ...indexPatterns.map(({ id, title }) => ({ value: id, text: title })),
+                ]}
+                value={activeIndexPatternId || ''}
+                onChange={e => onIndexPatternSelect(e.target.value)}
+              />
+            </EuiFormRow>
+          )}
+          <EuiSpacer size="xl" />
+        </>
+      )}
+
+      {!!onCarryFiltersAndQueryToggle && (
+        <EuiFormRow hasChildLabel={false}>
+          <EuiSwitch
+            name="carryFiltersAndQuery"
+            label="Carry over filters and query"
+            checked={!!carryFiltersAndQuery}
+            onChange={onCarryFiltersAndQueryToggle}
+          />
+        </EuiFormRow>
+      )}
+      {!!onCarryTimeRangeToggle && (
+        <EuiFormRow hasChildLabel={false}>
+          <EuiSwitch
+            name="carryTimeRange"
+            label="Carry over time range"
+            checked={!!carryTimeRange}
+            onChange={onCarryTimeRangeToggle}
+          />
+        </EuiFormRow>
+      )}
+    </>
+  );
+};

examples/ui_action_examples/public/components/discover_drilldown_config/i18n.ts

@@ -0,0 +1,27 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const txtChooseDestinationIndexPattern = i18n.translate(
+  'uiActionsExamples.components.DashboardDrilldownConfig.chooseIndexPattern',
+  {
+    defaultMessage: 'Choose destination index pattern',
+  }
+);

examples/ui_action_examples/public/components/discover_drilldown_config/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './discover_drilldown_config';

examples/ui_action_examples/public/components/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './discover_drilldown_config';

examples/ui_action_examples/public/dashboard_to_discover_drilldown/collect_config.tsx

@@ -0,0 +1,84 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState, useEffect } from 'react';
+import useMountedState from 'react-use/lib/useMountedState';
+import { CollectConfigProps } from './types';
+import { DiscoverDrilldownConfig, IndexPatternItem } from '../components/discover_drilldown_config';
+import { Params } from './drilldown';
+
+export interface CollectConfigContainerProps extends CollectConfigProps {
+  params: Params;
+}
+
+export const CollectConfigContainer: React.FC<CollectConfigContainerProps> = ({
+  config,
+  onConfig,
+  params: { start },
+}) => {
+  const isMounted = useMountedState();
+  const [indexPatterns, setIndexPatterns] = useState<IndexPatternItem[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      const indexPatternSavedObjects = await start().plugins.data.indexPatterns.getCache();
+      if (!isMounted()) return;
+      setIndexPatterns(
+        indexPatternSavedObjects
+          ? indexPatternSavedObjects.map(indexPattern => ({
+              id: indexPattern.id,
+              title: indexPattern.attributes.title,
+            }))
+          : []
+      );
+    })();
+  }, [isMounted, start]);
+
+  return (
+    <DiscoverDrilldownConfig
+      activeIndexPatternId={config.indexPatternId}
+      indexPatterns={indexPatterns}
+      onIndexPatternSelect={indexPatternId => {
+        onConfig({ ...config, indexPatternId });
+      }}
+      customIndexPattern={config.customIndexPattern}
+      onCustomIndexPatternToggle={() =>
+        onConfig({
+          ...config,
+          customIndexPattern: !config.customIndexPattern,
+          indexPatternId: undefined,
+        })
+      }
+      carryFiltersAndQuery={config.carryFiltersAndQuery}
+      onCarryFiltersAndQueryToggle={() =>
+        onConfig({
+          ...config,
+          carryFiltersAndQuery: !config.carryFiltersAndQuery,
+        })
+      }
+      carryTimeRange={config.carryTimeRange}
+      onCarryTimeRangeToggle={() =>
+        onConfig({
+          ...config,
+          carryTimeRange: !config.carryTimeRange,
+        })
+      }
+    />
+  );
+};

examples/ui_action_examples/public/dashboard_to_discover_drilldown/constants.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const DASHBOARD_TO_DISCOVER_DRILLDOWN = 'DASHBOARD_TO_DISCOVER_DRILLDOWN';

examples/ui_action_examples/public/dashboard_to_discover_drilldown/drilldown.tsx

@@ -0,0 +1,88 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { UiActionExamplesStartDependencies as Start } from '../plugin';
+import { reactToUiComponent } from '../../../../src/plugins/kibana_react/public';
+import { StartServicesGetter } from '../../../../src/plugins/kibana_utils/public';
+import { PlaceContext, ActionContext, Config, CollectConfigProps } from './types';
+import { CollectConfigContainer } from './collect_config';
+import { DASHBOARD_TO_DISCOVER_DRILLDOWN } from './constants';
+import { DrilldownDefinition as Drilldown } from '../../../../x-pack/plugins/drilldowns/public';
+import { txtGoToDiscover } from './i18n';
+
+const isOutputWithIndexPatterns = (
+  output: unknown
+): output is { indexPatterns: Array<{ id: string }> } => {
+  if (!output || typeof output !== 'object') return false;
+  return Array.isArray((output as any).indexPatterns);
+};
+
+export interface Params {
+  start: StartServicesGetter<Pick<Start, 'data'>>;
+}
+
+export class DashboardToDiscoverDrilldown
+  implements Drilldown<Config, PlaceContext, ActionContext> {
+  constructor(protected readonly params: Params) {}
+
+  public readonly id = DASHBOARD_TO_DISCOVER_DRILLDOWN;
+
+  public readonly order = 50;
+
+  public readonly getDisplayName = () => txtGoToDiscover;
+
+  public readonly euiIcon = 'discoverApp';
+
+  private readonly ReactCollectConfig: React.FC<CollectConfigProps> = props => (
+    <CollectConfigContainer {...props} params={this.params} />
+  );
+
+  public readonly CollectConfig = reactToUiComponent(this.ReactCollectConfig);
+
+  public readonly createConfig = () => ({
+    customIndexPattern: false,
+    carryFiltersAndQuery: true,
+    carryTimeRange: true,
+  });
+
+  public readonly isConfigValid = (config: Config): config is Config => {
+    if (config.customIndexPattern && !config.indexPatternId) return false;
+    return true;
+  };
+
+  public readonly execute = async (config: Config, context: ActionContext) => {
+    let indexPatternId =
+      !!config.customIndexPattern && !!config.indexPatternId ? config.indexPatternId : '';
+
+    if (!indexPatternId && !!context.embeddable) {
+      const output = context.embeddable!.getOutput();
+      if (isOutputWithIndexPatterns(output) && output.indexPatterns.length > 0) {
+        indexPatternId = output.indexPatterns[0].id;
+      }
+    }
+
+    const index = indexPatternId ? `,index:'${indexPatternId}'` : '';
+    const path = `#/discover?_g=(filters:!(),refreshInterval:(pause:!f,value:900000),time:(from:now-7d,to:now))&_a=(columns:!(_source),filters:!()${index},interval:auto,query:(language:kuery,query:''),sort:!())`;
+
+    await this.params.start().core.application.navigateToApp('kibana', {
+      path,
+    });
+  };
+}