init poc for datasource management in stack manaement

package.json

@@ -11,7 +11,7 @@
     "dashboarding"
   ],
   "private": true,
-  "version": "2.1.0",
+  "version": "2.0.1",
   "branch": "main",
   "types": "./opensearch_dashboards.d.ts",
   "tsdocMetadata": "./build/tsdoc-metadata.json",

src/plugins/data_source_management/.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/data_source_management/.i18nrc.json

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

src/plugins/data_source_management/README.md

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

src/plugins/data_source_management/common/index.ts

@@ -0,0 +1,2 @@
+export const PLUGIN_ID = 'dataSourceManagement';
+export const PLUGIN_NAME = 'Data Sources';

src/plugins/data_source_management/opensearch_dashboards.json

@@ -0,0 +1,10 @@
+{
+  "id": "dataSourceManagement",
+  "version": "1.0.0",
+  "opensearchDashboardsVersion": "opensearchDashboards",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": ["management", "data", "urlForwarding"],
+  "requiredBundles": ["opensearchDashboardsReact"],
+  "optionalPlugins": []
+}

src/plugins/data_source_management/public/application.tsx

@@ -0,0 +1,23 @@
+// import React from 'react';
+// import ReactDOM from 'react-dom';
+// import { AppMountParameters, CoreStart } from '../../../core/public';
+// import { AppPluginStartDependencies } from './types';
+// import { DataSourceManagementApp } from './components/app';
+
+// export const renderApp = (
+//   { notifications, http }: CoreStart,
+//   { navigation }: AppPluginStartDependencies,
+//   { appBasePath, element }: AppMountParameters
+// ) => {
+//   ReactDOM.render(
+//     <DataSourceManagementApp
+//       basename={appBasePath}
+//       notifications={notifications}
+//       http={http}
+//       navigation={navigation}
+//     />,
+//     element
+//   );
+
+//   return () => ReactDOM.unmountComponentAtNode(element);
+// };

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

@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+
+import {
+  EuiButton,
+  EuiHorizontalRule,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageContentHeader,
+  EuiPageHeader,
+  EuiTitle,
+  EuiText,
+} from '@elastic/eui';
+
+import { CoreStart } from '../../../../core/public';
+
+import { PLUGIN_ID, PLUGIN_NAME } from '../../common';
+import { DataSourceManagmentContext } from '../types';
+import { DataSourceTableWithRouter } from './datasource_table';
+
+// interface DataSourceManagementAppDeps {
+//   http: CoreStart['http'];
+// }
+
+export const DataSourceManagementApp = ({ services }: DataSourceManagmentContext) => {
+  // Use React hooks to manage state.
+  const [timestamp, setTimestamp] = useState<string | undefined>();
+
+  const onClickHandler = () => {
+    // Use the core http service to make a response to the server API.
+    services.http.get('/api/data_source_management/example').then((res) => {
+      setTimestamp(res.time);
+      // eslint-disable-next-line no-console
+      console.log('data updated');
+    });
+
+    services.savedObjects.client
+      .create('sample-data-source', { name: "i'm data source", count: 1 })
+      .then((res: any) => {
+        // eslint-disable-next-line no-console
+        console.log(res);
+      });
+  };
+
+  // Render the application DOM.
+  // Note that `navigation.ui.TopNavMenu` is a stateful component exported on the `navigation` plugin's start contract.
+  return (
+    <Router>
+      <I18nProvider>
+        <Router>
+          <Switch>
+            <Route path={['/']}>
+              <DataSourceTableWithRouter canSave={true} />
+              {/* <>
+                <EuiPage restrictWidth="1000px">
+                  <EuiPageBody component="main">
+                    <EuiPageHeader>
+                      <EuiTitle size="l">
+                        <h1>
+                          <FormattedMessage
+                            id="dataSourceManagement.helloWorldText"
+                            defaultMessage="{name}"
+                            values={{ name: PLUGIN_NAME }}
+                          />
+                        </h1>
+                      </EuiTitle>
+                    </EuiPageHeader>
+                    <EuiPageContent>
+                      <EuiPageContentHeader>
+                        <EuiTitle>
+                          <h2>
+                            <FormattedMessage
+                              id="dataSourceManagement.congratulationsTitle"
+                              defaultMessage="Congratulations, you have successfully created a new OpenSearch Dashboards Plugin!"
+                            />
+                          </h2>
+                        </EuiTitle>
+                      </EuiPageContentHeader>
+                      <EuiPageContentBody>
+                        <EuiText>
+                          <p>
+                            <FormattedMessage
+                              id="dataSourceManagement.content"
+                              defaultMessage="Look through the generated code and check out the plugin development documentation."
+                            />
+                          </p>
+                          <EuiHorizontalRule />
+                          <p>
+                            <FormattedMessage
+                              id="dataSourceManagement.timestampText"
+                              defaultMessage="Last timestamp: {time}"
+                              values={{ time: timestamp ? timestamp : 'Unknown' }}
+                            />
+                          </p>
+                          <EuiButton type="primary" size="s" onClick={onClickHandler}>
+                            <FormattedMessage
+                              id="dataSourceManagement.buttonText"
+                              defaultMessage="Get data"
+                            />
+                          </EuiButton>
+                        </EuiText>
+                      </EuiPageContentBody>
+                    </EuiPageContent>
+                  </EuiPageBody>
+                </EuiPage>
+              </> */}
+            </Route>
+          </Switch>
+        </Router>
+      </I18nProvider>
+    </Router>
+  );
+};

src/plugins/data_source_management/public/components/create_button/create_button.tsx

@@ -0,0 +1,140 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+// @ts-ignore
+import { euiColorAccent } from '@elastic/eui/dist/eui_theme_light.json';
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiBadge,
+  EuiButton,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiDescriptionList,
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiPopover,
+} from '@elastic/eui';
+
+import { FormattedMessage } from '@osd/i18n/react';
+
+interface State {
+  isPopoverOpen: boolean;
+}
+
+interface Props {
+  options: Array<{
+    text: string;
+    description?: string;
+    testSubj?: string;
+    isBeta?: boolean;
+    onClick: () => void;
+  }>;
+}
+
+export class CreateButton extends Component<Props, State> {
+  public state = {
+    isPopoverOpen: false,
+  };
+
+  public render() {
+    const { options, children } = this.props;
+    const { isPopoverOpen } = this.state;
+
+    if (!options || !options.length) {
+      return null;
+    }
+
+    if (options.length === 1) {
+      return (
+        <EuiButton
+          data-test-subj="createDataSourceButton"
+          fill={true}
+          onClick={options[0].onClick}
+          iconType="plusInCircle"
+        >
+          {children}
+        </EuiButton>
+      );
+    }
+
+    const button = (
+      <EuiButton
+        data-test-subj="createDataSourceButton"
+        fill={true}
+        size="s"
+        iconType="arrowDown"
+        iconSide="right"
+        onClick={this.togglePopover}
+      >
+        {children}
+      </EuiButton>
+    );
+
+    if (options.length > 1) {
+      return (
+        <EuiPopover
+          id="singlePanel"
+          button={button}
+          isOpen={isPopoverOpen}
+          closePopover={this.closePopover}
+          panelPaddingSize="none"
+          anchorPosition="downLeft"
+        >
+          <EuiContextMenuPanel
+            items={options.map((option) => {
+              return (
+                <EuiContextMenuItem
+                  key={option.text}
+                  onClick={option.onClick}
+                  data-test-subj={option.testSubj}
+                >
+                  <EuiDescriptionList style={{ whiteSpace: 'nowrap' }}>
+                    <EuiDescriptionListTitle>
+                      {option.text}
+                      {option.isBeta ? <Fragment> {this.renderBetaBadge()}</Fragment> : null}
+                    </EuiDescriptionListTitle>
+                    <EuiDescriptionListDescription>
+                      {option.description}
+                    </EuiDescriptionListDescription>
+                  </EuiDescriptionList>
+                </EuiContextMenuItem>
+              );
+            })}
+          />
+        </EuiPopover>
+      );
+    }
+  }
+
+  private togglePopover = () => {
+    this.setState({
+      isPopoverOpen: !this.state.isPopoverOpen,
+    });
+  };
+
+  private closePopover = () => {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  };
+
+  private renderBetaBadge = () => {
+    return (
+      <EuiBadge color={euiColorAccent}>
+        <FormattedMessage
+          id="dataSourceManagement.dataSourceList.createButton.betaLabel"
+          defaultMessage="Beta"
+        />
+      </EuiBadge>
+    );
+  };
+}

src/plugins/data_source_management/public/components/create_button/index.ts

@@ -0,0 +1,31 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { CreateButton } from './create_button';