[Canvas] Move Templates to be stored as Saved Objects #69438

crob611 · 2020-06-17T19:09:17Z

Summary

This PR pulls the templates out of the client side and stores them as Saved Objects instead. This also sets us up to allow templates to be installed from elsewhere (package manager, direct import, etc). The saved objects are namespace agnostic, so they should show up for every space.

When Kibana starts, it will check to see if you have any Templates, and if not, it will create the 5 existing templates that we have. The templates are importable/exportable through Saved Object Management.

Dev Docs

Previously, Workpad Templates could be added through the Canvas API client side. Workpad Templates are now stored as Saved Objects, so there is no api needed for adding them. Any additional templates can simply be added through SavedObject management.

elasticmachine · 2020-06-17T19:09:20Z

Pinging @elastic/kibana-canvas (Team:Canvas)

poffdeluxe

this looks good to me.

Do we need to think about a loading in the UI when a workpad is created from a template? Pitch pres takes about 1s on my MBP

poffdeluxe · 2020-06-23T14:23:55Z

x-pack/plugins/canvas/public/components/workpad_templates/index.tsx

+
+import React, { useContext, useState, useEffect } from 'react';
+import { RouterContext } from '../router';
+// @ts-ignore Untyped Local


can we use the new @ts-expect-error ?

poffdeluxe · 2020-06-23T14:46:54Z

x-pack/plugins/canvas/server/templates/index.ts

+      attributes: template,
+    }));
+
+    client.bulkCreate(templateObjects);


is there a case where someone would want to permanently remove templates? I guess they can't delete templates now anyway..

poffdeluxe · 2020-06-23T14:53:03Z

x-pack/plugins/canvas/server/templates/theme_dark.ts

+      },
+    },
+  },
+};


do these large template files affect any of the bundling/build stuff?

These previously existed, and here they are just moved to /server and also converted from plain json to ts so that they are properly typed, which will help if workpad the workpad type changes in the future. So these are not ending up in the bundle.

clintandrewhall

Nice work...!

clintandrewhall · 2020-06-25T17:48:58Z

x-pack/plugins/canvas/public/components/paginate/index.tsx

+
+export type PaginateChildProps = Omit<PaginateProps, 'children'>;
+
+export const Paginate: React.FunctionComponent<InPaginateProps> = ({


nit: you can import FC in the import statement above and shorten this line considerably.

clintandrewhall · 2020-06-25T17:49:53Z

x-pack/plugins/canvas/public/components/paginate/paginate.tsx

-  });
+export const Paginate: React.FunctionComponent<PaginateProps> = (props) => {
+  return (
+    <React.Fragment>


nit: you can use <> and </>

clintandrewhall · 2020-06-25T17:50:43Z

x-pack/plugins/canvas/public/components/paginate/paginate.tsx

 import PropTypes from 'prop-types';
+import { PaginateProps } from './';


nit: I would put this props interface in this file and export the other direction... I've never liked how Redux expects the opposite. YMMV.

clintandrewhall · 2020-06-25T17:51:27Z

x-pack/plugins/canvas/public/components/paginate/paginate.tsx

-    nextPage: props.nextPage,
-    prevPage: props.prevPage,
-  });
+export const Paginate: React.FunctionComponent<PaginateProps> = (props) => {


nit: destructure this object so you can avoid the props. in the object below.

clintandrewhall · 2020-06-25T17:54:47Z

x-pack/plugins/canvas/public/components/paginate/paginate.tsx

+  return (
+    <React.Fragment>
+      {props.children({
+        rows: props.rows,


nit: doesn't this collection match props...? You might consider:

export const Paginate: FC<PaginateProps> = (props) => ( <>{children(props)}</> );

...or...

export const Paginate: FC<PaginateProps> = ({ perPage, pageNumber, totalPages, nexPageEnabled, prevPageEnabled, setPage, nextPage, prevPage, ...rest, }) => ( <> {props.children({ perPage, pageNumber, totalPages, nexPageEnabled, prevPageEnabled, setPage, nextPage, prevPage, })} </> );

clintandrewhall · 2020-06-25T17:58:58Z

x-pack/plugins/canvas/public/components/paginate/index.tsx

+  perPage?: number;
+  startPage?: number;
+  rows: any[];
+  children: (props: PaginateChildProps) => React.ReactNode;


I'd consider changing this to childFn... I was confused about this being a function producing children as opposed to a collection of children.

kibanamachine · 2020-06-30T17:34:57Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 3a7a35f

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
canvas	790	-6	796

History

💛 Build #57285 was flaky bfd1c7e
💔 Build #55220 failed d4bd9a6
💔 Build #54811 failed 32311c7

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* Moves Canvas templates to live server side * Adds Clone from template test * Fix url * Clean up * PR Feedback * i18n

kibanamachine · 2020-07-02T18:28:44Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 69438 or prevent reminders by adding the backport:skip label.

kibanamachine · 2020-07-03T18:38:46Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 69438 or prevent reminders by adding the backport:skip label.

* Moves Canvas templates to live server side * Adds Clone from template test * Fix url * Clean up * PR Feedback * i18n # Conflicts: # x-pack/plugins/canvas/public/components/workpad_templates/workpad_templates.tsx

Corey Robertson added 3 commits June 17, 2020 10:43

Moves Canvas templates to live server side

ffd2cbb

Adds Clone from template test

32311c7

Fix url

c0fd8d8

crob611 added review Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas release_note:plugin_api_changes Contains a Plugin API changes section for the breaking plugin API changes section. loe:x-large Extra Large Level of Effort v8.0.0 v7.9.0 labels Jun 17, 2020

crob611 requested a review from a team as a code owner June 17, 2020 19:09

Clean up

d4bd9a6

poffdeluxe approved these changes Jun 23, 2020

View reviewed changes

clintandrewhall reviewed Jun 25, 2020

View reviewed changes

Corey Robertson added 3 commits June 29, 2020 11:20

Merge branch 'master' into canvas-templates

9299aab

PR Feedback

bfd1c7e

i18n

3a7a35f

crob611 merged commit a9f72bc into elastic:master Jun 30, 2020

Bamieh pushed a commit to Bamieh/kibana that referenced this pull request Jul 1, 2020

[Canvas] Move Templates to be stored as Saved Objects (elastic#69438)

5fbbe31

* Moves Canvas templates to live server side * Adds Clone from template test * Fix url * Clean up * PR Feedback * i18n

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Jul 2, 2020

crob611 mentioned this pull request Jul 6, 2020

[7.x] [Canvas] Move Templates to be stored as Saved Objects (#69438) #70802

Merged

kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Jul 6, 2020

poffdeluxe mentioned this pull request Jul 16, 2020

[Canvas] Move Templates to Live Server Side #62696

Closed

rudolf mentioned this pull request Oct 23, 2020

Out of the box, Kibana is unable to export and import all saved objects because of Canvas template #81560

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Canvas] Move Templates to be stored as Saved Objects #69438

[Canvas] Move Templates to be stored as Saved Objects #69438

crob611 commented Jun 17, 2020

elasticmachine commented Jun 17, 2020

poffdeluxe left a comment

poffdeluxe Jun 23, 2020

clintandrewhall Jun 25, 2020

poffdeluxe Jun 23, 2020

poffdeluxe Jun 23, 2020

crob611 Jun 29, 2020

clintandrewhall left a comment

clintandrewhall Jun 25, 2020

clintandrewhall Jun 25, 2020

clintandrewhall Jun 25, 2020

clintandrewhall Jun 25, 2020

clintandrewhall Jun 25, 2020

clintandrewhall Jun 25, 2020

kibanamachine commented Jun 30, 2020

kibanamachine commented Jul 2, 2020

kibanamachine commented Jul 3, 2020


		export type PaginateChildProps = Omit<PaginateProps, 'children'>;

		export const Paginate: React.FunctionComponent<InPaginateProps> = ({

		import PropTypes from 'prop-types';
		import { PaginateProps } from './';

[Canvas] Move Templates to be stored as Saved Objects #69438

[Canvas] Move Templates to be stored as Saved Objects #69438

Conversation

crob611 commented Jun 17, 2020

Summary

Dev Docs

elasticmachine commented Jun 17, 2020

poffdeluxe left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clintandrewhall left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kibanamachine commented Jun 30, 2020

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

History

kibanamachine commented Jul 2, 2020

kibanamachine commented Jul 3, 2020