Set up plugin boilerplate & placeholder pages (#3)

Signed-off-by: Tyler Ohlsen <[email protected]>
(cherry picked from commit eab9065)

common/constants.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export const PLUGIN_ID = 'aiFlowDashboards';
+
+export const BASE_NODE_API_PATH = '/api/ai_flow';

common/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './constants';

opensearch_dashboards.json

@@ -0,0 +1,9 @@
+{
+  "id": "aiFlowDashboards",
+  "version": "3.0.0.0",
+  "opensearchDashboardsVersion": "3.0.0",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": ["navigation"],
+  "optionalPlugins": []
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "ai-flow-dashboards",
+  "version": "3.0.0.0",
+  "description": "OpenSearch AI Flow Dashboards Plugin",
+  "main": "index.js",
+  "config": {
+    "plugin_version": "3.0.0.0",
+    "plugin_name": "aiFlowDashboards",
+    "plugin_zip_name": "ai-flow-dashboards"
+  },
+  "private": true,
+  "scripts": {
+    "plugin-helpers": "../../scripts/use_node ../../scripts/plugin_helpers",
+    "osd": "../../scripts/use_node ../../scripts/osd",
+    "opensearch": "node ../../scripts/opensearch",
+    "lint": "node ../../scripts/eslint .",
+    "build": "yarn plugin-helpers build && echo Renaming artifact to $npm_package_config_plugin_zip_name-$npm_package_config_plugin_version.zip && mv ./build/$npm_package_config_plugin_name*.zip ./build/$npm_package_config_plugin_zip_name-$npm_package_config_plugin_version.zip"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx,json,css,md}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "devDependencies": {},
+  "dependencies": {},
+  "resolutions": {}
+}

public/app.tsx

@@ -0,0 +1,80 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { I18nProvider } from '@osd/i18n/react';
+import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { EuiPageSideBar, EuiSideNav, EuiPageTemplate } from '@elastic/eui';
+import { CoreStart } from '../../../src/core/public';
+import { Navigation, APP_PATH } from './utils';
+import { Overview, UseCases, Workflows } from './pages';
+import { CoreServicesConsumer } from './core_services';
+
+interface Props extends RouteComponentProps {}
+
+export const AiFlowDashboardsApp = (props: Props) => {
+  const sidebar = (
+    <EuiPageSideBar style={{ minWidth: 190 }} hidden={false}>
+      <EuiSideNav
+        style={{ width: 190 }}
+        items={[
+          {
+            name: Navigation.AiApplicationBuilder,
+            id: 0,
+            items: [
+              {
+                name: Navigation.UseCases,
+                id: 1,
+                href: `#${APP_PATH.USE_CASES}`,
+                isSelected: props.location.pathname === APP_PATH.USE_CASES,
+              },
+              {
+                name: Navigation.Workflows,
+                id: 2,
+                href: `#${APP_PATH.WORKFLOWS}`,
+                isSelected: props.location.pathname === APP_PATH.WORKFLOWS,
+              },
+            ],
+          },
+        ]}
+      />
+    </EuiPageSideBar>
+  );
+
+  // Render the application DOM.
+  return (
+    <CoreServicesConsumer>
+      {(core: CoreStart | null) =>
+        core && (
+          <I18nProvider>
+            <>
+              <EuiPageTemplate
+                template="empty"
+                pageContentProps={{ paddingSize: 'm' }}
+                pageSideBar={sidebar}
+              >
+                <Switch>
+                  <Route
+                    path={APP_PATH.USE_CASES}
+                    render={(props: RouteComponentProps) => <UseCases />}
+                  />
+                  <Route
+                    path={APP_PATH.WORKFLOWS}
+                    render={(props: RouteComponentProps) => <Workflows />}
+                  />
+                  {/* Defaulting to Overview page */}
+                  <Route
+                    path={`${APP_PATH.HOME}`}
+                    render={(props: RouteComponentProps) => <Overview />}
+                  />
+                </Switch>
+              </EuiPageTemplate>
+            </>
+          </I18nProvider>
+        )
+      }
+    </CoreServicesConsumer>
+  );
+};

public/core_services.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createContext } from 'react';
+import { CoreStart } from '../../../src/core/public';
+
+const CoreServicesContext = createContext<CoreStart | null>(null);
+
+const CoreServicesConsumer = CoreServicesContext.Consumer;
+
+export { CoreServicesContext, CoreServicesConsumer };

public/index.scss

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

public/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './index.scss';
+
+import { AiFlowDashboardsPlugin } from './plugin';
+
+// This exports static code and TypeScript types,
+// as well as, OpenSearch Dashboards Platform `plugin()` initializer.
+export function plugin() {
+  return new AiFlowDashboardsPlugin();
+}
+export {
+  AiFlowDashboardsPluginSetup,
+  AiFlowDashboardsPluginStart,
+} from './types';
+
+export * from './core_services';

public/pages/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './use_cases';
+export * from './workflows';
+export * from './overview';

public/pages/overview/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { Overview } from './overview';

public/pages/overview/overview.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import { EuiPageHeader, EuiText } from '@elastic/eui';
+import { CoreServicesContext } from '../../core_services';
+import { CoreStart } from '../../../../../src/core/public';
+import { BREADCRUMBS } from '../../utils';
+
+export function Overview() {
+  const core = React.useContext(CoreServicesContext) as CoreStart;
+  useEffect(() => {
+    core.chrome.setBreadcrumbs([BREADCRUMBS.AI_APPLICATION_BUILDER]);
+  });
+
+  return (
+    <EuiPageHeader>
+      <EuiText>Welcome to the AI Application Builder!</EuiText>
+    </EuiPageHeader>
+  );
+}

public/pages/use_cases/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { UseCases } from './use_cases';

public/pages/use_cases/use_cases.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import { EuiPageHeader, EuiText } from '@elastic/eui';
+import { CoreServicesContext } from '../../core_services';
+import { CoreStart } from '../../../../../src/core/public';
+import { BREADCRUMBS } from '../../utils';
+
+export function UseCases() {
+  const core = React.useContext(CoreServicesContext) as CoreStart;
+  useEffect(() => {
+    core.chrome.setBreadcrumbs([
+      BREADCRUMBS.AI_APPLICATION_BUILDER,
+      BREADCRUMBS.USE_CASES,
+    ]);
+  });
+
+  return (
+    <EuiPageHeader>
+      <EuiText>Use cases page placeholder...</EuiText>
+    </EuiPageHeader>
+  );
+}

public/pages/workflows/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { Workflows } from './workflows';

public/pages/workflows/workflows.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import { EuiPageHeader, EuiText } from '@elastic/eui';
+import { CoreServicesContext } from '../../core_services';
+import { CoreStart } from '../../../../../src/core/public';
+import { BREADCRUMBS } from '../../utils';
+
+export function Workflows() {
+  const core = React.useContext(CoreServicesContext) as CoreStart;
+  useEffect(() => {
+    core.chrome.setBreadcrumbs([
+      BREADCRUMBS.AI_APPLICATION_BUILDER,
+      BREADCRUMBS.WORKFLOWS,
+    ]);
+  });
+
+  return (
+    <EuiPageHeader>
+      <EuiText>Workflows page placeholder...</EuiText>
+    </EuiPageHeader>
+  );
+}

public/plugin.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  AppMountParameters,
+  CoreSetup,
+  CoreStart,
+  Plugin,
+} from '../../../src/core/public';
+import {
+  AiFlowDashboardsPluginSetup,
+  AiFlowDashboardsPluginStart,
+} from './types';
+import { PLUGIN_ID } from '../common';
+
+export class AiFlowDashboardsPlugin
+  implements Plugin<AiFlowDashboardsPluginSetup, AiFlowDashboardsPluginStart> {
+  public setup(core: CoreSetup): AiFlowDashboardsPluginSetup {
+    // Register the plugin in the side navigation
+    core.application.register({
+      id: PLUGIN_ID,
+      title: 'AI Application Builder',
+      category: {
+        id: 'opensearch',
+        label: 'OpenSearch plugins',
+        order: 2000,
+      },
+      // TODO: can i remove this below order
+      order: 5000,
+      async mount(params: AppMountParameters) {
+        const { renderApp } = await import('./render_app');
+        const [coreStart] = await core.getStartServices();
+        return renderApp(coreStart, params);
+      },
+    });
+    return {};
+  }
+
+  public start(core: CoreStart): AiFlowDashboardsPluginStart {
+    return {};
+  }
+
+  public stop() {}
+}

public/render_app.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { AppMountParameters, CoreStart } from '../../../src/core/public';
+import { AiFlowDashboardsApp } from './app';
+import { CoreServicesContext } from './core_services';
+
+export const renderApp = (
+  coreStart: CoreStart,
+  { appBasePath, element }: AppMountParameters
+) => {
+  ReactDOM.render(
+    <Router basename={appBasePath + '#/'}>
+      <Route
+        render={(props) => (
+          <CoreServicesContext.Provider value={coreStart}>
+            <AiFlowDashboardsApp {...props} />
+          </CoreServicesContext.Provider>
+        )}
+      ></Route>
+    </Router>,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

public/types.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { NavigationPublicPluginStart } from '../../../src/plugins/navigation/public';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface AiFlowDashboardsPluginSetup {}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface AiFlowDashboardsPluginStart {}
+
+export interface AppPluginStartDependencies {
+  navigation: NavigationPublicPluginStart;
+}

public/utils/constants.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export enum Navigation {
+  AiApplicationBuilder = 'AI Application Builder',
+  UseCases = 'Use Cases',
+  Workflows = 'Workflows',
+}
+
+export enum APP_PATH {
+  HOME = '/',
+  USE_CASES = '/use-cases',
+  WORKSPACE = '/workspace',
+  WORKFLOWS = '/workflows',
+  WORKFLOW_DETAIL = '/workflows/:workflowId/',
+}
+
+export const BREADCRUMBS = Object.freeze({
+  AI_APPLICATION_BUILDER: { text: 'AI application builder', href: '#/' },
+  USE_CASES: { text: 'Use cases', href: `#${APP_PATH.USE_CASES}` },
+  WORKFLOWS: { text: 'Workflows', href: `#${APP_PATH.WORKFLOWS}` },
+});