Tags 5

src/dev/storybook/aliases.ts

@@ -25,5 +25,6 @@ export const storybookAliases = {
   embeddable: 'src/plugins/embeddable/scripts/storybook.js',
   infra: 'x-pack/legacy/plugins/infra/scripts/storybook.js',
   security_solution: 'x-pack/plugins/security_solution/scripts/storybook.js',
+  tags: 'x-pack/plugins/tags/scripts/storybook.js',
   ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/scripts/storybook.js',
 };

src/plugins/bfetch/common/api.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 type ApiMethod<Payload = unknown, Result = unknown> = (payload: Payload) => Promise<Result>;
+
+export interface ApiMethodRequest<Payload = unknown> {
+  name: string;
+  payload: Payload;
+}

src/plugins/bfetch/common/index.ts

@@ -21,3 +21,4 @@ export * from './util';
 export * from './streaming';
 export * from './buffer';
 export * from './batch';
+export * from './api';

src/plugins/bfetch/public/mocks.ts

@@ -28,6 +28,7 @@ const createSetupContract = (): Setup => {
   const setupContract: Setup = {
     fetchStreaming: jest.fn(),
     batchedFunction: jest.fn(),
+    createApi: jest.fn(),
   };
   return setupContract;
 };
@@ -36,6 +37,7 @@ const createStartContract = (): Start => {
   const startContract: Start = {
     fetchStreaming: jest.fn(),
     batchedFunction: jest.fn(),
+    createApi: jest.fn(),
   };
 
   return startContract;

src/plugins/bfetch/public/plugin.ts

@@ -18,8 +18,9 @@
  */
 
 import { CoreStart, PluginInitializerContext, CoreSetup, Plugin } from 'src/core/public';
+import { Ensure } from '@kbn/utility-types';
 import { fetchStreaming as fetchStreamingStatic, FetchStreamingParams } from './streaming';
-import { removeLeadingSlash } from '../common';
+import { removeLeadingSlash, ApiMethod } from '../common';
 import {
   createStreamingBatchedFunction,
   BatchedFunc,
@@ -37,6 +38,12 @@ export interface BfetchPublicContract {
   batchedFunction: <Payload, Result extends object>(
     params: StreamingBatchedFunctionParams<Payload, Result>
   ) => BatchedFunc<Payload, Result>;
+  createApi: <Api extends object>(
+    url: string
+  ) => <K extends keyof Api>(
+    name: K,
+    payload: Parameters<Ensure<Api[K], ApiMethod>>[0]
+  ) => ReturnType<Ensure<Api[K], ApiMethod>>;
 }
 
 export type BfetchPublicSetup = BfetchPublicContract;
@@ -61,9 +68,15 @@ export class BfetchPublicPlugin
     const fetchStreaming = this.fetchStreaming(version, basePath);
     const batchedFunction = this.batchedFunction(fetchStreaming);
 
+    const createApi: BfetchPublicContract['createApi'] = ((url: string) => {
+      const fn = batchedFunction({ url });
+      return async (name, payload) => await fn({ name, payload } as unknown);
+    }) as BfetchPublicContract['createApi'];
+
     this.contract = {
       fetchStreaming,
       batchedFunction,
+      createApi,
     };
 
     return this.contract;

src/plugins/bfetch/server/mocks.ts

@@ -29,6 +29,7 @@ const createSetupContract = (): Setup => {
     addBatchProcessingRoute: jest.fn(),
     addStreamingResponseRoute: jest.fn(),
     createStreamingRequestHandler: jest.fn(),
+    createApiRoute: jest.fn(),
   };
   return setupContract;
 };

src/plugins/bfetch/server/plugin.ts

@@ -26,6 +26,7 @@ import {
   KibanaRequest,
   RouteMethod,
   RequestHandler,
+  RequestHandlerContext,
 } from 'src/core/server';
 import { schema } from '@kbn/config-schema';
 import { Subject } from 'rxjs';
@@ -39,6 +40,7 @@ import {
 } from '../common';
 import { StreamingRequestHandler } from './types';
 import { createNDJSONStream } from './streaming';
+import { ApiMethod, ApiMethodRequest } from '../common';
 
 // eslint-disable-next-line
 export interface BfetchServerSetupDependencies {}
@@ -54,12 +56,20 @@ export interface BatchProcessingRouteParams<BatchItemData, BatchItemResult> {
 export interface BfetchServerSetup {
   addBatchProcessingRoute: <BatchItemData extends object, BatchItemResult extends object>(
     path: string,
-    handler: (request: KibanaRequest) => BatchProcessingRouteParams<BatchItemData, BatchItemResult>
+    handler: (
+      request: KibanaRequest,
+      context: RequestHandlerContext
+    ) => BatchProcessingRouteParams<BatchItemData, BatchItemResult>
   ) => void;
+
   addStreamingResponseRoute: <Payload, Response>(
     path: string,
-    params: (request: KibanaRequest) => StreamingResponseHandler<Payload, Response>
+    params: (
+      request: KibanaRequest,
+      context: RequestHandlerContext
+    ) => StreamingResponseHandler<Payload, Response>
   ) => void;
+
   /**
    * Create a streaming request handler to be able to use an Observable to return chunked content to the client.
    * This is meant to be used with the `fetchStreaming` API of the `bfetch` client-side plugin.
@@ -83,14 +93,31 @@ export interface BfetchServerSetup {
    *     return results$;
    *   })
    * )}
-   *
    * ```
    *
    * @param streamHandler
    */
   createStreamingRequestHandler: <Response, P, Q, B, Method extends RouteMethod = any>(
     streamHandler: StreamingRequestHandler<Response, P, Q, B, Method>
   ) => RequestHandler<P, Q, B, Method>;
+
+  /**
+   * Creates a batch processing route that can route between a map of API methods.
+   *
+   * @example
+   * ```ts
+   * plugins.bfetch.createApiRoute('/calculator', {
+   *   add: async ({a, b}) => ({ result: a + b }),
+   *   subtract: async ({a, b}) => ({ result: a - b }),
+   *   multiply: async ({a, b}) => ({ result: a * b }),
+   *   divide: async ({a, b}) => ({ result: a / b }),
+   * });
+   * ```
+   *
+   * @param path
+   * @param api
+   */
+  createApiRoute: (path: string, api: Record<string, ApiMethod<object, object>>) => void;
 }
 
 // eslint-disable-next-line
@@ -119,10 +146,22 @@ export class BfetchServerPlugin
     const addBatchProcessingRoute = this.addBatchProcessingRoute(addStreamingResponseRoute);
     const createStreamingRequestHandler = this.createStreamingRequestHandler({ logger });
 
+    const createApiRoute: BfetchServerSetup['createApiRoute'] = (path, api) => {
+      addBatchProcessingRoute(path, (request) => ({
+        onBatchItem: async ({ name, payload }: ApiMethodRequest<object>) => {
+          if (typeof name !== 'string') throw new Error('Api method name should be a string.');
+          if (!api.hasOwnProperty(name))
+            throw new Error(`Api method [name = ${name}] does not exist.`);
+          return await api[name](payload);
+        },
+      }));
+    };
+
     return {
       addBatchProcessingRoute,
       addStreamingResponseRoute,
       createStreamingRequestHandler,
+      createApiRoute,
     };
   }
 
@@ -147,7 +186,7 @@ export class BfetchServerPlugin
         },
       },
       async (context, request, response) => {
-        const handlerInstance = handler(request);
+        const handlerInstance = handler(request, context);
         const data = request.body;
         return response.ok({
           headers: streamingHeaders,
@@ -181,13 +220,16 @@ export class BfetchServerPlugin
     E extends ErrorLike = ErrorLike
   >(
     path: string,
-    handler: (request: KibanaRequest) => BatchProcessingRouteParams<BatchItemData, BatchItemResult>
+    handler: (
+      request: KibanaRequest,
+      context: RequestHandlerContext
+    ) => BatchProcessingRouteParams<BatchItemData, BatchItemResult>
   ) => {
     addStreamingResponseRoute<
       BatchRequestData<BatchItemData>,
       BatchResponseItem<BatchItemResult, E>
-    >(path, (request) => {
-      const handlerInstance = handler(request);
+    >(path, (request, context) => {
+      const handlerInstance = handler(request, context);
       return {
         getResponseStream: ({ batch }) => {
           const subject = new Subject<BatchResponseItem<BatchItemResult, E>>();

src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx

@@ -62,6 +62,7 @@ beforeEach(async () => {
     overlays: coreStart.overlays,
     savedObjectMetaData: {} as any,
     uiActions: {} as any,
+    getRenderBeforeDashboard: () => () => null,
   };
   const input = getSampleDashboardInput({
     panels: {

src/plugins/dashboard/public/application/application.ts

@@ -47,6 +47,8 @@ import { SavedObjectLoader, SavedObjectsStart } from '../../../saved_objects/pub
 import 'angular-sanitize';
 // required for ngRoute
 import 'angular-route';
+import { DashboardContainer } from './embeddable';
+import { TagPickerType } from '../plugin';
 
 export interface RenderDeps {
   pluginInitializerContext: PluginInitializerContext;
@@ -74,6 +76,9 @@ export interface RenderDeps {
   scopedHistory: () => ScopedHistory;
   savedObjects: SavedObjectsStart;
   restorePreviousUrl: () => void;
+  renderBeforeDashboard: (dashboard: DashboardContainer) => React.ReactNode;
+  renderTags: (kid: string) => React.ReactNode;
+  getTagPicker: () => TagPickerType;
 }
 
 let angularModuleInstance: IModule | null = null;

src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx

@@ -89,6 +89,7 @@ export interface DashboardContainerOptions {
   SavedObjectFinder: React.ComponentType<any>;
   ExitFullScreenButton: React.ComponentType<any>;
   uiActions: UiActionsStart;
+  getRenderBeforeDashboard: () => (dashboard: DashboardContainer) => React.ReactNode;
 }
 
 export type DashboardReactContextValue = KibanaReactContextValue<DashboardContainerOptions>;
@@ -115,6 +116,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
       options.embeddable.getEmbeddableFactory,
       parent
     );
+
     this.embeddablePanel = options.embeddable.getEmbeddablePanel(stateTransfer);
   }
 
@@ -188,6 +190,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
     ReactDOM.render(
       <I18nProvider>
         <KibanaContextProvider services={this.options}>
+          {this.options.getRenderBeforeDashboard()(this)}
           <DashboardViewport
             renderEmpty={this.renderEmpty}
             container={this}

src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx

@@ -41,6 +41,7 @@ interface StartServices {
   SavedObjectFinder: React.ComponentType<any>;
   ExitFullScreenButton: React.ComponentType<any>;
   uiActions: UiActionsStart;
+  getRenderBeforeDashboard: () => (dashboard: DashboardContainer) => React.ReactNode;
 }
 
 export type DashboardContainerFactory = EmbeddableFactory<

src/plugins/dashboard/public/application/legacy_app.js

@@ -41,6 +41,8 @@ export function initDashboardApp(app, deps) {
   app.directive('dashboardListing', function (reactDirective) {
     return reactDirective(DashboardListing, [
       ['core', { watchDepth: 'reference' }],
+      ['renderTags', { watchDepth: 'reference' }],
+      ['tagPicker', { watchDepth: 'reference' }],
       ['createItem', { watchDepth: 'reference' }],
       ['getViewUrl', { watchDepth: 'reference' }],
       ['editItem', { watchDepth: 'reference' }],
@@ -138,6 +140,12 @@ export function initDashboardApp(app, deps) {
           addHelpMenuToAppChrome(deps.chrome, deps.core.docLinks);
           $scope.core = deps.core;
 
+          $scope.renderTags = (data) => {
+            const kid = `kid:::so:saved_objects/dashboard/${data.id}`;
+            return deps.renderTags(kid);
+          };
+          $scope.tagPicker = deps.getTagPicker();
+
           $scope.$on('$destroy', () => {
             stopSyncingQueryServiceStateWithUrl();
           });

src/plugins/dashboard/public/application/listing/dashboard_listing.js

@@ -42,6 +42,7 @@ export class DashboardListing extends React.Component {
     return (
       <I18nProvider>
         <TableListView
+          TagPicker={this.props.tagPicker}
           headingId="dashboardListingHeading"
           createItem={this.props.hideWriteControls ? null : this.props.createItem}
           findItems={this.props.findItems}
@@ -174,13 +175,22 @@ export class DashboardListing extends React.Component {
         dataType: 'string',
         sortable: true,
       },
+      {
+        name: 'Tags',
+        sortable: false,
+        render: (data) => {
+          return this.props.renderTags(data);
+        },
+      },
     ];
     return tableColumns;
   }
 }
 
 DashboardListing.propTypes = {
+  renderTags: PropTypes.func.isRequired,
   createItem: PropTypes.func.isRequired,
+  tagPicker: PropTypes.func.isRequired,
   findItems: PropTypes.func.isRequired,
   deleteItems: PropTypes.func.isRequired,
   editItem: PropTypes.func.isRequired,

src/plugins/dashboard/public/application/listing/dashboard_listing_ng_wrapper.html

@@ -1,6 +1,8 @@
 <dashboard-listing
   core="core"
   create-item="create"
+  render-tags="renderTags"
+  tag-picker="tagPicker"
   get-view-url="getViewUrl"
   edit-item="editItem"
   find-items="find"

src/plugins/dashboard/public/index.ts

@@ -31,7 +31,7 @@ export {
 } from './application';
 export { DashboardConstants, createDashboardEditUrl } from './dashboard_constants';
 
-export { DashboardStart, DashboardUrlGenerator } from './plugin';
+export { DashboardSetup, DashboardStart, DashboardUrlGenerator } from './plugin';
 export { DASHBOARD_APP_URL_GENERATOR, createDashboardUrlGenerator } from './url_generator';
 export { addEmbeddableToDashboardUrl } from './url_utils/url_helper';
 export { SavedObjectDashboard } from './saved_dashboards';