Embed dashboard by value example & some embeddable clean up

examples/dashboard_embeddable_examples/kibana.json

@@ -0,0 +1,9 @@
+{
+  "id": "dashboardEmbeddableExamples",
+  "version": "0.0.1",
+  "kibanaVersion": "kibana",
+  "server": false,
+  "ui": true,
+  "requiredPlugins": ["embeddable", "embeddableExamples", "dashboard"],
+  "optionalPlugins": []
+}

examples/dashboard_embeddable_examples/public/app.tsx

@@ -0,0 +1,117 @@
+/*
+ * 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 ReactDOM from 'react-dom';
+import { BrowserRouter as Router, Route, RouteComponentProps, withRouter } from 'react-router-dom';
+
+import {
+  EuiPage,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageSideBar,
+  EuiSideNav,
+} from '@elastic/eui';
+import 'brace/mode/json';
+import { EmbeddableStart } from '../../../src/plugins/embeddable/public';
+import { AppMountParameters } from '../../../src/core/public';
+import { DashboardEmbeddableByValue } from './by_value/embeddable';
+import { DashboardStart } from '../../../src/plugins/dashboard/public';
+
+interface PageDef {
+  title: string;
+  id: string;
+  component: React.ReactNode;
+}
+
+type NavProps = RouteComponentProps & {
+  pages: PageDef[];
+};
+
+const Nav = withRouter(({ history, pages }: NavProps) => {
+  const navItems = pages.map((page) => ({
+    id: page.id,
+    name: page.title,
+    onClick: () => history.push(`/${page.id}`),
+    'data-test-subj': page.id,
+  }));
+
+  return (
+    <EuiSideNav
+      items={[
+        {
+          name: 'Embeddable explorer',
+          id: 'home',
+          items: [...navItems],
+        },
+      ]}
+    />
+  );
+});
+
+interface Props {
+  basename: string;
+  DashboardEmbeddableByValueRenderer: DashboardStart['DashboardEmbeddableByValueRenderer'];
+  embeddableApi: EmbeddableStart;
+}
+
+const DashboardEmbeddableExplorerApp = ({
+  basename,
+  DashboardEmbeddableByValueRenderer,
+}: Props) => {
+  const pages: PageDef[] = [
+    {
+      title: 'By value dashboard embeddable',
+      id: 'dashboardEmbeddableByValue',
+      component: (
+        <DashboardEmbeddableByValue
+          DashboardEmbeddableByValueRenderer={DashboardEmbeddableByValueRenderer}
+        />
+      ),
+    },
+    {
+      title: 'By ref dashboard embeddable',
+      id: 'dashboardEmbeddableByRef',
+      component: <div>TODO: Not implemented, but coming soon...</div>,
+    },
+  ];
+
+  const routes = pages.map((page, i) => (
+    <Route key={i} path={`/${page.id}`} render={(props) => page.component} />
+  ));
+
+  return (
+    <Router basename={basename}>
+      <EuiPage>
+        <EuiPageSideBar>
+          <Nav pages={pages} />
+        </EuiPageSideBar>
+        <EuiPageContent>
+          <EuiPageContentBody>{routes}</EuiPageContentBody>
+        </EuiPageContent>
+      </EuiPage>
+    </Router>
+  );
+};
+
+export const renderApp = (props: Props, element: AppMountParameters['element']) => {
+  ReactDOM.render(<DashboardEmbeddableExplorerApp {...props} />, element);
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

examples/dashboard_embeddable_examples/public/by_value/embeddable.tsx

@@ -0,0 +1,67 @@
+/*
+ * 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 } from 'react';
+import { ViewMode } from '../../../../src/plugins/embeddable/public';
+import { DashboardContainerInput, DashboardStart } from '../../../../src/plugins/dashboard/public';
+import { HELLO_WORLD_EMBEDDABLE } from '../../../embeddable_examples/public/hello_world';
+import { InputEditor } from './input_editor';
+
+const initialInput: DashboardContainerInput = {
+  id: 'random-id',
+  // TODO: do we need all of this props? Looks like we can make those optional
+  viewMode: ViewMode.VIEW,
+  filters: [],
+  timeRange: { to: 'now', from: 'now-1d' },
+  useMargins: false,
+  title: 'test',
+  query: { query: '', language: 'lucene' },
+  isFullScreenMode: false,
+  refreshConfig: { pause: true, value: 15 },
+  panels: {
+    '1': {
+      gridData: {
+        w: 10,
+        h: 10,
+        x: 0,
+        y: 0,
+        i: '1',
+      },
+      type: HELLO_WORLD_EMBEDDABLE,
+      explicitInput: {
+        id: '1',
+      },
+    },
+  },
+};
+
+export const DashboardEmbeddableByValue = ({
+  DashboardEmbeddableByValueRenderer,
+}: {
+  DashboardEmbeddableByValueRenderer: DashboardStart['DashboardEmbeddableByValueRenderer'];
+}) => {
+  const [input, setInput] = useState(initialInput);
+
+  return (
+    <>
+      <InputEditor initialValue={initialInput} onSubmit={setInput} />
+      <DashboardEmbeddableByValueRenderer input={input} />
+    </>
+  );
+};

examples/dashboard_embeddable_examples/public/by_value/input_editor.tsx

@@ -0,0 +1,50 @@
+/*
+ * 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 { EuiButton, EuiCodeEditor } from '@elastic/eui';
+
+// @ts-ignore
+const TextMode = window.ace.acequire('ace/mode/json').Mode;
+export const InputEditor = <T,>(props: { initialValue: T; onSubmit: (value: T) => void }) => {
+  const [value, setValue] = React.useState(JSON.stringify(props.initialValue, null, 4));
+  const isValid = (() => {
+    try {
+      JSON.parse(value);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  })();
+  return (
+    <>
+      <EuiCodeEditor
+        mode={new TextMode()}
+        theme="github"
+        width="100%"
+        value={value}
+        onChange={setValue}
+        setOptions={{ fontSize: '14px' }}
+      />
+      <EuiButton onClick={() => props.onSubmit(JSON.parse(value))} disabled={!isValid}>
+        Update Input
+      </EuiButton>
+    </>
+  );
+};

examples/dashboard_embeddable_examples/public/index.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 { DashboardEmbeddableExamples } from './plugin';
+
+export const plugin = () => new DashboardEmbeddableExamples();

examples/dashboard_embeddable_examples/public/plugin.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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 { AppMountParameters, CoreSetup, Plugin } from 'kibana/public';
+import { DashboardStart } from '../../../src/plugins/dashboard/public';
+
+interface StartDeps {
+  dashboard: DashboardStart;
+}
+
+export class DashboardEmbeddableExamples implements Plugin<void, void, {}, StartDeps> {
+  public setup(core: CoreSetup<StartDeps>) {
+    core.application.register({
+      id: 'dashboardEmbeddableExamples',
+      title: 'Dashboard embeddable examples',
+      async mount(params: AppMountParameters) {
+        const [, depsStart] = await core.getStartServices();
+        const { renderApp } = await import('./app');
+        return renderApp(
+          {
+            basename: params.appBasePath,
+            DashboardEmbeddableByValueRenderer:
+              depsStart.dashboard.DashboardEmbeddableByValueRenderer,
+          },
+          params.element
+        );
+      },
+    });
+  }
+
+  public start() {}
+  public stop() {}
+}

examples/dashboard_embeddable_examples/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./target",
+    "skipLibCheck": true
+  },
+  "include": [
+    "index.ts",
+    "public/**/*.ts",
+    "public/**/*.tsx",
+    "server/**/*.ts",
+    "../../typings/**/*",
+  ],
+  "exclude": []
+}

examples/embeddable_examples/public/list_container/list_container.tsx

@@ -42,10 +42,10 @@ export class ListContainer extends Container<{}, ContainerInput> {
   }
 
   public render(node: HTMLElement) {
-    this.node = node;
     if (this.node) {
       ReactDOM.unmountComponentAtNode(this.node);
     }
+    this.node = node;
     ReactDOM.render(
       <ListContainerComponent embeddable={this} embeddableServices={this.embeddableServices} />,
       node

examples/embeddable_examples/public/multi_task_todo/multi_task_todo_embeddable_factory.ts

@@ -18,7 +18,11 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { IContainer, EmbeddableFactoryDefinition } from '../../../../src/plugins/embeddable/public';
+import {
+  IContainer,
+  EmbeddableFactoryDefinition,
+  BindEmbeddableFactoryDefinitionOutputType,
+} from '../../../../src/plugins/embeddable/public';
 import {
   MultiTaskTodoEmbeddable,
   MULTI_TASK_TODO_EMBEDDABLE,
@@ -27,6 +31,7 @@ import {
 } from './multi_task_todo_embeddable';
 
 export class MultiTaskTodoEmbeddableFactory
+  extends BindEmbeddableFactoryDefinitionOutputType<MultiTaskTodoOutput>
   implements EmbeddableFactoryDefinition<MultiTaskTodoInput, MultiTaskTodoOutput> {
   public readonly type = MULTI_TASK_TODO_EMBEDDABLE;