Convert triggers and actions UI to Kibana Platform (#56388)

* Convert triggers and actions UI to Kibana Platform

* Copy ui/time_buckets over

* Fix i18n

* Fix scss

* Fix UI from not loading anymore

x-pack/.i18nrc.json

@@ -4,7 +4,7 @@
     "xpack.actions": "plugins/actions",
     "xpack.advancedUiActions": "plugins/advanced_ui_actions",
     "xpack.alerting": "legacy/plugins/alerting",
-    "xpack.triggersActionsUI": "legacy/plugins/triggers_actions_ui",
+    "xpack.triggersActionsUI": "plugins/triggers_actions_ui",
     "xpack.apm": ["legacy/plugins/apm", "plugins/apm"],
     "xpack.beatsManagement": "legacy/plugins/beats_management",
     "xpack.canvas": "legacy/plugins/canvas",

x-pack/legacy/plugins/triggers_actions_ui/index.ts

@@ -29,7 +29,6 @@ export function triggersActionsUI(kibana: any) {
         .default();
     },
     uiExports: {
-      managementSections: ['plugins/triggers_actions_ui/legacy'],
       styleSheetPaths: resolve(__dirname, 'public/index.scss'),
       injectDefaultVars(server: Legacy.Server) {
         const serverConfig = server.config();

x-pack/legacy/plugins/triggers_actions_ui/public/index.scss

@@ -2,7 +2,7 @@
 @import 'src/legacy/ui/public/styles/_styling_constants';
 
 // Styling within the app
-@import '../np_ready/public/application/sections/actions_connectors_list/components/index';
+@import '../../../../plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/index';
 
-@import '../np_ready/public/application/sections/action_connector_form/index';
+@import '../../../../plugins/triggers_actions_ui/public/application/sections/action_connector_form/index';
 

x-pack/legacy/plugins/triggers_actions_ui/np_ready/kibana.json → x-pack/plugins/triggers_actions_ui/kibana.json

@@ -2,5 +2,6 @@
     "id": "triggers_actions_ui",
     "version": "kibana",
     "server": false,
-    "ui": true
+    "ui": true,
+    "requiredPlugins": ["management", "charts", "data"]
   }

x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/app.tsx → x-pack/plugins/triggers_actions_ui/public/application/app.tsx

@@ -12,23 +12,28 @@ import {
   HttpSetup,
   IUiSettingsClient,
   ApplicationStart,
+  ChromeBreadcrumb,
 } from 'kibana/public';
 import { BASE_PATH, Section, routeToAlertDetails } from './constants';
 import { TriggersActionsUIHome } from './home';
 import { AppContextProvider, useAppDependencies } from './app_context';
 import { hasShowAlertsCapability } from './lib/capabilities';
-import { LegacyDependencies, ActionTypeModel, AlertTypeModel } from '../types';
+import { ActionTypeModel, AlertTypeModel } from '../types';
 import { TypeRegistry } from './type_registry';
 import { AlertDetailsRouteWithApi as AlertDetailsRoute } from './sections/alert_details/components/alert_details_route';
+import { ChartsPluginStart } from '../../../../../src/plugins/charts/public';
+import { DataPublicPluginStart } from '../../../../../src/plugins/data/public';
 
 export interface AppDeps {
+  dataPlugin: DataPublicPluginStart;
+  charts: ChartsPluginStart;
   chrome: ChromeStart;
   docLinks: DocLinksStart;
   toastNotifications: ToastsSetup;
   injectedMetadata: any;
   http: HttpSetup;
   uiSettings: IUiSettingsClient;
-  legacy: LegacyDependencies;
+  setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
   capabilities: ApplicationStart['capabilities'];
   actionTypeRegistry: TypeRegistry<ActionTypeModel>;
   alertTypeRegistry: TypeRegistry<AlertTypeModel>;

x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/boot.tsx → x-pack/plugins/triggers_actions_ui/public/application/boot.tsx

@@ -10,23 +10,21 @@ import { SavedObjectsClientContract } from 'src/core/public';
 
 import { App, AppDeps } from './app';
 import { setSavedObjectsClient } from '../application/components/builtin_alert_types/threshold/lib/api';
-import { LegacyDependencies } from '../types';
 
 interface BootDeps extends AppDeps {
   element: HTMLElement;
   savedObjects: SavedObjectsClientContract;
   I18nContext: any;
-  legacy: LegacyDependencies;
 }
 
 export const boot = (bootDeps: BootDeps) => {
-  const { I18nContext, element, legacy, savedObjects, ...appDeps } = bootDeps;
+  const { I18nContext, element, savedObjects, ...appDeps } = bootDeps;
 
   setSavedObjectsClient(savedObjects);
 
   render(
     <I18nContext>
-      <App {...appDeps} legacy={legacy} />
+      <App {...appDeps} />
     </I18nContext>,
     element
   );

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/lib/time_buckets/calc_auto_interval.test.ts

@@ -0,0 +1,123 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import moment from 'moment';
+
+import { calcAutoIntervalLessThan, calcAutoIntervalNear } from './calc_auto_interval';
+
+describe('calcAutoIntervalNear', () => {
+  test('1h/0 buckets = 0ms buckets', () => {
+    const interval = calcAutoIntervalNear(0, Number(moment.duration(1, 'h')));
+    expect(interval.asMilliseconds()).toBe(0);
+  });
+
+  test('undefined/100 buckets = 0ms buckets', () => {
+    const interval = calcAutoIntervalNear(0, undefined as any);
+    expect(interval.asMilliseconds()).toBe(0);
+  });
+
+  test('1ms/100 buckets = 1ms buckets', () => {
+    const interval = calcAutoIntervalNear(100, Number(moment.duration(1, 'ms')));
+    expect(interval.asMilliseconds()).toBe(1);
+  });
+
+  test('200ms/100 buckets = 2ms buckets', () => {
+    const interval = calcAutoIntervalNear(100, Number(moment.duration(200, 'ms')));
+    expect(interval.asMilliseconds()).toBe(2);
+  });
+
+  test('1s/1000 buckets = 1ms buckets', () => {
+    const interval = calcAutoIntervalNear(1000, Number(moment.duration(1, 's')));
+    expect(interval.asMilliseconds()).toBe(1);
+  });
+
+  test('1000h/1000 buckets = 1h buckets', () => {
+    const interval = calcAutoIntervalNear(1000, Number(moment.duration(1000, 'hours')));
+    expect(interval.asHours()).toBe(1);
+  });
+
+  test('1h/100 buckets = 30s buckets', () => {
+    const interval = calcAutoIntervalNear(100, Number(moment.duration(1, 'hours')));
+    expect(interval.asSeconds()).toBe(30);
+  });
+
+  test('1d/25 buckets = 1h buckets', () => {
+    const interval = calcAutoIntervalNear(25, Number(moment.duration(1, 'day')));
+    expect(interval.asHours()).toBe(1);
+  });
+
+  test('1y/1000 buckets = 12h buckets', () => {
+    const interval = calcAutoIntervalNear(1000, Number(moment.duration(1, 'year')));
+    expect(interval.asHours()).toBe(12);
+  });
+
+  test('1y/10000 buckets = 1h buckets', () => {
+    const interval = calcAutoIntervalNear(10000, Number(moment.duration(1, 'year')));
+    expect(interval.asHours()).toBe(1);
+  });
+
+  test('1y/100000 buckets = 5m buckets', () => {
+    const interval = calcAutoIntervalNear(100000, Number(moment.duration(1, 'year')));
+    expect(interval.asMinutes()).toBe(5);
+  });
+});
+
+describe('calcAutoIntervalLessThan', () => {
+  test('1h/0 buckets = 0ms buckets', () => {
+    const interval = calcAutoIntervalLessThan(0, Number(moment.duration(1, 'h')));
+    expect(interval.asMilliseconds()).toBe(0);
+  });
+
+  test('undefined/100 buckets = 0ms buckets', () => {
+    const interval = calcAutoIntervalLessThan(0, undefined as any);
+    expect(interval.asMilliseconds()).toBe(0);
+  });
+
+  test('1ms/100 buckets = 1ms buckets', () => {
+    const interval = calcAutoIntervalLessThan(100, Number(moment.duration(1, 'ms')));
+    expect(interval.asMilliseconds()).toBe(1);
+  });
+
+  test('200ms/100 buckets = 2ms buckets', () => {
+    const interval = calcAutoIntervalLessThan(100, Number(moment.duration(200, 'ms')));
+    expect(interval.asMilliseconds()).toBe(2);
+  });
+
+  test('1s/1000 buckets = 1ms buckets', () => {
+    const interval = calcAutoIntervalLessThan(1000, Number(moment.duration(1, 's')));
+    expect(interval.asMilliseconds()).toBe(1);
+  });
+
+  test('1000h/1000 buckets = 1h buckets', () => {
+    const interval = calcAutoIntervalLessThan(1000, Number(moment.duration(1000, 'hours')));
+    expect(interval.asHours()).toBe(1);
+  });
+
+  test('1h/100 buckets = 30s buckets', () => {
+    const interval = calcAutoIntervalLessThan(100, Number(moment.duration(1, 'hours')));
+    expect(interval.asSeconds()).toBe(30);
+  });
+
+  test('1d/25 buckets = 30m buckets', () => {
+    const interval = calcAutoIntervalLessThan(25, Number(moment.duration(1, 'day')));
+    expect(interval.asMinutes()).toBe(30);
+  });
+
+  test('1y/1000 buckets = 3h buckets', () => {
+    const interval = calcAutoIntervalLessThan(1000, Number(moment.duration(1, 'year')));
+    expect(interval.asHours()).toBe(3);
+  });
+
+  test('1y/10000 buckets = 30m buckets', () => {
+    const interval = calcAutoIntervalLessThan(10000, Number(moment.duration(1, 'year')));
+    expect(interval.asMinutes()).toBe(30);
+  });
+
+  test('1y/100000 buckets = 5m buckets', () => {
+    const interval = calcAutoIntervalLessThan(100000, Number(moment.duration(1, 'year')));
+    expect(interval.asMinutes()).toBe(5);
+  });
+});