[D&D] Adds Bar line and Area charts to Wizard (opensearch-project#2266)…

… (opensearch-project#2291)

Description
* Adds Bar line and Area charts to Wizard
* Adds resizable right nav to Wizard
* E2E tests for bar chart and chart switching

Issues Resolved:
opensearch-project#1616
opensearch-project#1617
opensearch-project#1618

Co-authored-by: Josh Romero <rmerqg@amazon.com>
Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

config/opensearch_dashboards.yml

@@ -223,3 +223,12 @@
 # Set the value of this setting to true to start exploring wizard
 # functionality in Visualization.
 # wizard.enabled: false
+# csp.strict: false
+# csp.script_src: https://www.google-analytics.com https://ssl.google-analytics.com
+# csp.img_src: https://www.google-analytics.com
+# csp.connect_src: https://www.google-analytics.com
+
+csp.rules:
+  - "script-src 'unsafe-eval' 'unsafe-inline' 'self' https://www.google-analytics.com https://ssl.google-analytics.com"
+  - "img-src 'unsafe-eval' 'unsafe-inline' 'self' data: https://www.google-analytics.com"
+  - "connect-src 'unsafe-eval' 'unsafe-inline' 'self' https://www.google-analytics.com"

package.json

@@ -188,6 +188,7 @@
     "re2": "^1.15.4",
     "react": "^16.14.0",
     "react-dom": "^16.12.0",
+    "react-ga": "^3.3.1",
     "react-input-range": "^1.3.0",
     "react-router": "^5.2.1",
     "react-use": "^13.27.0",
@@ -454,4 +455,4 @@
     "node": "14.20.0",
     "yarn": "^1.21.1"
   }
-}
+}

src/plugins/google_analytic/.env

@@ -0,0 +1 @@
+INLINE_RUNTIME_CHUNK=false

src/plugins/google_analytic/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  extends: ['@elastic/eslint-config-kibana', 'plugin:@elastic/eui/recommended'],
+  rules: {
+    '@osd/eslint/require-license-header': 'off',
+  },
+};

src/plugins/google_analytic/.i18nrc.json

@@ -0,0 +1,7 @@
+{
+  "prefix": "googleAnalytic",
+  "paths": {
+    "googleAnalytic": "."
+  },
+  "translations": ["translations/ja-JP.json"]
+}

src/plugins/google_analytic/README.md

@@ -0,0 +1,11 @@
+# googleAnalytic
+
+A OpenSearch Dashboards plugin
+
+---
+
+## Development
+
+See the [OpenSearch Dashboards contributing
+guide](https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/CONTRIBUTING.md) for instructions
+setting up your development environment.

src/plugins/google_analytic/common/index.ts

@@ -0,0 +1,2 @@
+export const PLUGIN_ID = 'googleAnalytic';
+export const PLUGIN_NAME = 'googleAnalytic';

src/plugins/google_analytic/opensearch_dashboards.json

@@ -0,0 +1,9 @@
+{
+  "id": "googleAnalytic",
+  "version": "1.0.0",
+  "opensearchDashboardsVersion": "opensearchDashboards",
+  "server": false,
+  "ui": true,
+  "requiredPlugins": ["navigation"],
+  "optionalPlugins": []
+}

src/plugins/google_analytic/public/application.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactGA from 'react-ga';
+import { AppMountParameters, CoreStart } from '../../../core/public';
+import { AppPluginStartDependencies } from './types';
+import { GoogleAnalyticApp } from './components/app';
+
+const TRACKING_ID = 'UA-20742809-1'; // YOUR_OWN_TRACKING_ID
+// eslint-disable-next-line no-console
+console.log('huanji debug');
+ReactGA.initialize(TRACKING_ID);
+
+export const renderApp = (
+  { notifications, http }: CoreStart,
+  { navigation }: AppPluginStartDependencies,
+  { appBasePath, element }: AppMountParameters
+) => {
+  ReactDOM.render(
+    <GoogleAnalyticApp
+      basename={appBasePath}
+      notifications={notifications}
+      http={http}
+      navigation={navigation}
+    />,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

src/plugins/google_analytic/public/components/app.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { i18n } from '@osd/i18n';
+import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import {
+  EuiButton,
+  EuiHorizontalRule,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageContentHeader,
+  EuiPageHeader,
+  EuiTitle,
+  EuiText,
+} from '@elastic/eui';
+
+import { CoreStart } from '../../../../core/public';
+import { NavigationPublicPluginStart } from '../../../navigation/public';
+
+import { PLUGIN_ID, PLUGIN_NAME } from '../../common';
+
+interface GoogleAnalyticAppDeps {
+  basename: string;
+  notifications: CoreStart['notifications'];
+  http: CoreStart['http'];
+  navigation: NavigationPublicPluginStart;
+}
+
+export const GoogleAnalyticApp = ({
+  basename,
+  notifications,
+  http,
+  navigation,
+}: GoogleAnalyticAppDeps) => {
+  // Use React hooks to manage state.
+  const [timestamp, setTimestamp] = useState<string | undefined>();
+
+  const onClickHandler = () => {
+    setTimestamp(new Date().toISOString());
+    notifications.toasts.addSuccess(PLUGIN_NAME);
+  };
+
+  // Render the application DOM.
+  // Note that `navigation.ui.TopNavMenu` is a stateful component exported on the `navigation` plugin's start contract.
+  return (
+    <Router basename={basename}>
+      <I18nProvider>
+        <>
+          <navigation.ui.TopNavMenu
+            appName={PLUGIN_ID}
+            showSearchBar={true}
+            useDefaultBehaviors={true}
+          />
+          <EuiPage restrictWidth="1000px">
+            <EuiPageBody component="main">
+              <EuiPageHeader>
+                <EuiTitle size="l">
+                  <h1>
+                    <FormattedMessage
+                      id="googleAnalytic.helloWorldText"
+                      defaultMessage="{name}"
+                      values={{ name: PLUGIN_NAME }}
+                    />
+                  </h1>
+                </EuiTitle>
+              </EuiPageHeader>
+              <EuiPageContent>
+                <EuiPageContentHeader>
+                  <EuiTitle>
+                    <h2>
+                      <FormattedMessage
+                        id="googleAnalytic.congratulationsTitle"
+                        defaultMessage="Congratulations, you have successfully created a new OpenSearch Dashboards Plugin!"
+                      />
+                    </h2>
+                  </EuiTitle>
+                </EuiPageContentHeader>
+                <EuiPageContentBody>
+                  <EuiText>
+                    <p>
+                      <FormattedMessage
+                        id="googleAnalytic.content"
+                        defaultMessage="Look through the generated code and check out the plugin development documentation."
+                      />
+                    </p>
+                    <EuiHorizontalRule />
+                    <p>
+                      <FormattedMessage
+                        id="googleAnalytic.timestampText"
+                        defaultMessage="Last timestamp: {time}"
+                        values={{ time: timestamp ? timestamp : 'Unknown' }}
+                      />
+                    </p>
+                    <EuiButton type="primary" size="s" onClick={onClickHandler}>
+                      <FormattedMessage id="googleAnalytic.buttonText" defaultMessage="Click me" />
+                    </EuiButton>
+                  </EuiText>
+                </EuiPageContentBody>
+              </EuiPageContent>
+            </EuiPageBody>
+          </EuiPage>
+        </>
+      </I18nProvider>
+    </Router>
+  );
+};

src/plugins/google_analytic/public/hacks.js

@@ -0,0 +1,12 @@
+console.log('from hack');
+debugger
+
+import ReactGA from 'react-ga';
+try {
+  const TRACKING_ID = 'UA-20742809-1'; // YOUR_OWN_TRACKING_ID
+  ReactGA.initialize(TRACKING_ID);
+
+  ReactGA.pageview(window.location.pathname + window.location.search);
+} catch (e) {
+  console.error(e);
+}

src/plugins/google_analytic/public/index.scss

@@ -0,0 +1 @@
+/* stylelint-disable no-empty-source */

src/plugins/google_analytic/public/index.ts

@@ -0,0 +1,10 @@
+import './index.scss';
+
+import { GoogleAnalyticPlugin } from './plugin';
+
+// This exports static code and TypeScript types,
+// as well as, OpenSearch Dashboards Platform `plugin()` initializer.
+export function plugin() {
+  return new GoogleAnalyticPlugin();
+}
+export { GoogleAnalyticPluginSetup, GoogleAnalyticPluginStart } from './types';

src/plugins/google_analytic/public/plugin.ts

@@ -0,0 +1,47 @@
+import { i18n } from '@osd/i18n';
+import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../core/public';
+import {
+  GoogleAnalyticPluginSetup,
+  GoogleAnalyticPluginStart,
+  AppPluginStartDependencies,
+} from './types';
+import { PLUGIN_NAME } from '../common';
+
+import './hacks.js';
+
+export class GoogleAnalyticPlugin
+  implements Plugin<GoogleAnalyticPluginSetup, GoogleAnalyticPluginStart> {
+  public setup(core: CoreSetup): GoogleAnalyticPluginSetup {
+    // Register an application into the side navigation menu
+    core.application.register({
+      id: 'googleAnalytic',
+      title: PLUGIN_NAME,
+      async mount(params: AppMountParameters) {
+        // Load application bundle
+        const { renderApp } = await import('./application');
+        // Get start services as specified in opensearch_dashboards.json
+        const [coreStart, depsStart] = await core.getStartServices();
+        // Render the application
+        return renderApp(coreStart, depsStart as AppPluginStartDependencies, params);
+      },
+    });
+
+    // Return methods that should be available to other plugins
+    return {
+      getGreeting() {
+        return i18n.translate('googleAnalytic.greetingText', {
+          defaultMessage: 'Hello from {name}!',
+          values: {
+            name: PLUGIN_NAME,
+          },
+        });
+      },
+    };
+  }
+
+  public start(core: CoreStart): GoogleAnalyticPluginStart {
+    return {};
+  }
+
+  public stop() {}
+}

src/plugins/google_analytic/public/types.ts

@@ -0,0 +1,11 @@
+import { NavigationPublicPluginStart } from '../../navigation/public';
+
+export interface GoogleAnalyticPluginSetup {
+  getGreeting: () => string;
+}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface GoogleAnalyticPluginStart {}
+
+export interface AppPluginStartDependencies {
+  navigation: NavigationPublicPluginStart;
+}

src/plugins/vis_type_vislib/public/index.ts

@@ -35,4 +35,6 @@ export function plugin(initializerContext: PluginInitializerContext) {
   return new Plugin(initializerContext);
 }
 
+export { getConfigCollections } from './utils/collections';
+
 export * from './types';

src/plugins/vis_type_vislib/public/types.ts

@@ -106,3 +106,5 @@ export interface BasicVislibParams extends CommonVislibParams {
   times: TimeMarker[];
   type: string;
 }
+
+export { Positions };

src/plugins/visualizations/public/index.ts

@@ -43,7 +43,7 @@ export { Vis } from './vis';
 export { TypesService } from './vis_types/types_service';
 export { VISUALIZE_EMBEDDABLE_TYPE, VIS_EVENT_TO_TRIGGER } from './embeddable';
 export { VisualizationContainer, VisualizationNoResults } from './components';
-export { getSchemas as getVisSchemas } from './legacy/build_pipeline';
+export { getSchemas as getVisSchemas, buildVislibDimensions } from './legacy/build_pipeline';
 
 /** @public types */
 export { VisualizationsSetup, VisualizationsStart };

src/plugins/wizard/opensearch_dashboards.json

@@ -16,7 +16,8 @@
     "dashboard",
     "visualizations",
     "opensearchUiShared",
-    "visDefaultEditor"
+    "visDefaultEditor",
+    "visTypeVislib"
   ],
   "optionalPlugins": []
 }

src/plugins/wizard/public/application/_variables.scss

@@ -6,4 +6,4 @@
 @import "@elastic/eui/src/global_styling/variables/form";
 
 $osdHeaderOffset: $euiHeaderHeightCompensation;
-$wizSideNavWidth: 470px;
+$wizLeftNavWidth: 462px;

src/plugins/wizard/public/application/app.scss

@@ -8,9 +8,18 @@
   padding: 0;
   display: grid;
   grid-template:
-    "topNav topNav topNav" min-content
-    "leftNav workspace rightNav" 1fr / #{$wizSideNavWidth} 1fr #{$wizSideNavWidth};
+    "topNav topNav" min-content
+    "leftNav workspaceNav" 1fr / #{$wizLeftNavWidth} 1fr;
   height: calc(100vh - #{$osdHeaderOffset});
+
+  &__resizeContainer {
+    min-height: 0;
+    background-color: $euiColorEmptyShade;
+  }
+
+  &__resizeButton {
+    transform: translateX(-$euiSizeM / 2);
+  }
 }
 
 .headerIsExpanded .wizLayout {