Create prometheus datasource flow

common/types/data_connections.ts

@@ -14,4 +14,4 @@ export interface PermissionsConfigurationProps {
 
 export type Role = EuiComboBoxOptionOption;
 
-export type DatasourceType = 'SPARK' | 'S3GLUE' | 'OPENSEARCH';
+export type DatasourceType = 'SPARK' | 'S3GLUE' | 'OPENSEARCH' | 'PROMETHEUS';

opensearch_dashboards.json

@@ -16,7 +16,8 @@
  "savedObjects",
  "uiActions",
  "urlForwarding",
- "visualizations"
+ "visualizations",
+ "management"
  ],
  "optionalPlugins": [
  "managementOverview"

public/components/datasources/components/manage/connection_configuration.tsx

@@ -38,7 +38,6 @@ export const ConnectionConfiguration = (props: ConnectionConfigurationProps) =>
  const [details, setDetails] = useState(connectionDetails);
 
  const [password, setPassword] = useState('');
- const [dual, setDual] = useState(true);
 
  const NameRow = () => {
  return (
@@ -127,7 +126,7 @@ export const ConnectionConfiguration = (props: ConnectionConfigurationProps) =>
  </EuiFormRow>
  <EuiFormRow label="Password">
  <EuiFieldPassword
- type={dual ? 'dual' : undefined}
+ type={'dual'}
  value={password}
  onChange={(e) => setPassword(e.target.value)}
  />

public/components/datasources/components/manage/data_connection.tsx

@@ -22,7 +22,11 @@ import {
 import React, { useEffect, useState } from 'react';
 import { AccessControlTab } from './access_control_tab';
 import { NoAccess } from '../no_access';
-import { DATACONNECTIONS_BASE } from '../../../../../common/constants/shared';
+import {
+ DATACONNECTIONS_BASE,
+ observabilityLogsID,
+ observabilityMetricsID,
+} from '../../../../../common/constants/shared';
 import { coreRefs } from '../../../../framework/core_refs';
 import { ConnectionDetails } from './connection_details';
 
@@ -44,7 +48,7 @@ export const DataConnection = (props: any) => {
  properties: {},
  });
  const [hasAccess, setHasAccess] = useState(true);
- const { http, chrome } = coreRefs;
+ const { http, chrome, application } = coreRefs;
 
  useEffect(() => {
  chrome!.setBreadcrumbs([
@@ -103,6 +107,48 @@ export const DataConnection = (props: any) => {
  },
  ];
 
+ const QueryOrAccelerateData = () => {
+ console.log(chrome);
+ switch (datasourceDetails.connector) {
+ case 'S3GLUE':
+ return (
+ <EuiFlexGroup>
+ <EuiFlexItem>
+ <EuiCard
+ icon={<EuiIcon size="xxl" type="discoverApp" />}
+ title={'Query data'}
+ description="Query your data in Data Explorer or Observability Logs."
+ onClick={() => application!.navigateToApp(observabilityLogsID)}
+ />
+ </EuiFlexItem>
+ <EuiFlexItem>
+ <EuiCard
+ icon={<EuiIcon size="xxl" type="bolt" />}
+ title={'Accelerate performance'}
+ description="Accelerate performance through OpenSearch indexing."
+ onClick={() => {}}
+ />
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ );
+ case 'PROMETHEUS':
+ return (
+ <EuiFlexGroup>
+ <EuiFlexItem>
+ <EuiCard
+ icon={<EuiIcon size="xxl" type="discoverApp" />}
+ title={'Query data'}
+ description="Query your data in Metrics Analytics."
+ onClick={() => application!.navigateToApp(observabilityMetricsID)}
+ />
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ );
+ default:
+ return null;
+ }
+ };
+
  const DatasourceOverview = () => {
  return (
  <EuiPanel>
@@ -183,24 +229,7 @@ export const DataConnection = (props: any) => {
  buttonContent="Ways to use in Dashboards"
  initialIsOpen={true}
  >
- <EuiFlexGroup>
- <EuiFlexItem>
- <EuiCard
- icon={<EuiIcon size="xxl" type="discoverApp" />}
- title={'Query data'}
- description="Query your data in Data Explorer or Observability Logs."
- onClick={() => {}}
- />
- </EuiFlexItem>
- <EuiFlexItem>
- <EuiCard
- icon={<EuiIcon size="xxl" type="bolt" />}
- title={'Accelerate performance'}
- description="Accelerate performance through OpenSearch indexing."
- onClick={() => {}}
- />
- </EuiFlexItem>
- </EuiFlexGroup>
+ <QueryOrAccelerateData />
  </EuiAccordion>
  <EuiTabbedContent tabs={tabs} />
 

public/components/datasources/components/manage/manage_data_connections_table.tsx

@@ -24,6 +24,7 @@ import { DATACONNECTIONS_BASE } from '../../../../../common/constants/shared';
 import { useToast } from '../../../common/toast';
 import { DeleteModal } from '../../../common/helpers/delete_modal';
 import S3Logo from '../../icons/s3-logo.svg';
+import PrometheusLogo from '../../icons/prometheus-logo.svg';
 import { DatasourceType } from '../../../../../common/types/data_connections';
 
 interface DataConnection {
@@ -97,6 +98,8 @@ export const ManageDataConnectionsTable = (props: HomeProps) => {
  switch (record.connectionType) {
  case 'S3GLUE':
  return <EuiIcon type={S3Logo} />;
+ case 'PROMETHEUS':
+ return <EuiIcon type={PrometheusLogo} />;
  default:
  return <></>;
  }

public/components/datasources/components/new/configure_datasource.tsx

@@ -23,20 +23,27 @@ import { DATACONNECTIONS_BASE } from '../../../../../common/constants/shared';
 import { ReviewS3Datasource } from './review_s3_datasource_configuration';
 import { useToast } from '../../../../../public/components/common/toast';
 import { DatasourceType, Role } from '../../../../../common/types/data_connections';
+import { ConfigurePrometheusDatasource } from './configure_prometheus_datasource';
+import { ReviewPrometheusDatasource } from './review_prometheus_datasource_configuration';
 
 interface ConfigureDatasourceProps {
  type: string;
 }
 
 export function Configure(props: ConfigureDatasourceProps) {
  const { type } = props;
- const { http } = coreRefs;
+ const { http, chrome } = coreRefs;
  const { setToast } = useToast();
 
  const [name, setName] = useState('');
  const [details, setDetails] = useState('');
  const [arn, setArn] = useState('');
- const [store, setStore] = useState('');
+ const [storeURI, setStoreURI] = useState('');
+ const [username, setUsername] = useState('');
+ const [password, setPassword] = useState('');
+ const [accessKey, setAccessKey] = useState('');
+ const [secretKey, setSecretKey] = useState('');
+ const [region, setRegion] = useState('');
  const [roles, setRoles] = useState<Role[]>([]);
  const [selectedQueryPermissionRoles, setSelectedQueryPermissionRoles] = useState<Role[]>([]);
  const [page, setPage] = useState<'configure' | 'review'>('configure');
@@ -59,6 +66,20 @@ export function Configure(props: ConfigureDatasourceProps) {
  })
  )
  );
+ chrome!.setBreadcrumbs([
+ {
+ text: 'Data sources',
+ href: '#/',
+ },
+ {
+ text: 'New',
+ href: '#/new',
+ },
+ {
+ text: `${type}`,
+ href: `#/configure/${type}`,
+ },
+ ]);
  }, []);
 
  const ConfigureDatasource = (configurationProps: { datasourceType: DatasourceType }) => {
@@ -73,13 +94,37 @@ export function Configure(props: ConfigureDatasourceProps) {
  setDetailsForRequest={setDetails}
  currentArn={arn}
  setArnForRequest={setArn}
- currentStore={store}
- setStoreForRequest={setStore}
+ currentStore={storeURI}
+ setStoreForRequest={setStoreURI}
  roles={roles}
  selectedQueryPermissionRoles={selectedQueryPermissionRoles}
  setSelectedQueryPermissionRoles={setSelectedQueryPermissionRoles}
  />
  );
+ case 'PROMETHEUS':
+ return (
+ <ConfigurePrometheusDatasource
+ currentName={name}
+ currentDetails={details}
+ setNameForRequest={setName}
+ setDetailsForRequest={setDetails}
+ currentStore={storeURI}
+ setStoreForRequest={setStoreURI}
+ roles={roles}
+ currentUsername={username}
+ setUsernameForRequest={setUsername}
+ currentPassword={password}
+ setPasswordForRequest={setPassword}
+ selectedQueryPermissionRoles={selectedQueryPermissionRoles}
+ setSelectedQueryPermissionRoles={setSelectedQueryPermissionRoles}
+ currentAccessKey={accessKey}
+ currentSecretKey={secretKey}
+ setAccessKeyForRequest={setAccessKey}
+ setSecretKeyForRequest={setSecretKey}
+ currentRegion={region}
+ setRegionForRequest={setRegion}
+ />
+ );
  default:
  return <></>;
  }
@@ -88,13 +133,25 @@ export function Configure(props: ConfigureDatasourceProps) {
  const ReviewDatasourceConfiguration = (configurationProps: { datasourceType: string }) => {
  const { datasourceType } = configurationProps;
  switch (datasourceType) {
- case 'S3':
+ case 'S3GLUE':
  return (
  <ReviewS3Datasource
  currentName={name}
  currentDetails={details}
  currentArn={arn}
- currentStore={store}
+ currentStore={storeURI}
+ selectedQueryPermissionRoles={selectedQueryPermissionRoles}
+ goBack={() => setPage('configure')}
+ />
+ );
+ case 'PROMETHEUS':
+ return (
+ <ReviewPrometheusDatasource
+ currentName={name}
+ currentDetails={details}
+ currentArn={arn}
+ currentStore={storeURI}
+ currentUsername={username}
  selectedQueryPermissionRoles={selectedQueryPermissionRoles}
  goBack={() => setPage('configure')}
  />
@@ -146,28 +203,63 @@ export function Configure(props: ConfigureDatasourceProps) {
  }, [page]);
 
  const createDatasource = () => {
- http!
- .post(`${DATACONNECTIONS_BASE}`, {
- body: JSON.stringify({
- name,
- allowedRoles: selectedQueryPermissionRoles.map((role) => role.label),
- connector: 's3glue',
- properties: {
- 'glue.auth.type': 'iam_role',
- 'glue.auth.role_arn': arn,
- 'glue.indexstore.opensearch.uri': store,
- 'glue.indexstore.opensearch.auth': false,
- 'glue.indexstore.opensearch.region': 'us-west-2',
- },
- }),
- })
+ let response;
+ switch (type) {
+ case 'S3GLUE':
+ response = http!.post(`${DATACONNECTIONS_BASE}`, {
+ body: JSON.stringify({
+ name,
+ allowedRoles: selectedQueryPermissionRoles.map((role) => role.label),
+ connector: 's3glue',
+ properties: {
+ 'glue.auth.type': 'iam_role',
+ 'glue.auth.role_arn': arn,
+ 'glue.indexstore.opensearch.uri': storeURI,
+ 'glue.indexstore.opensearch.auth': false,
+ 'glue.indexstore.opensearch.region': 'us-west-2',
+ },
+ }),
+ });
+ break;
+ case 'PROMETHEUS':
+ const properties = username
+ ? {
+ 'prometheus.uri': storeURI,
+ 'prometheus.auth.type': 'basicauth',
+ 'prometheus.auth.username': username,
+ 'prometheus.auth.password': password,
+ }
+ : {
+ 'prometheus.uri': storeURI,
+ 'prometheus.auth.type': 'awssigv4',
+ 'prometheus.auth.region': region,
+ 'prometheus.auth.access_key': accessKey,
+ 'prometheus.auth.secret_key': secretKey,
+ };
+ response = http!.post(`${DATACONNECTIONS_BASE}`, {
+ body: JSON.stringify({
+ name,
+ allowedRoles: selectedQueryPermissionRoles.map((role) => role.label),
+ connector: 'prometheus',
+ properties,
+ }),
+ });
+ break;
+ default:
+ response = Promise.reject('Invalid data source type');
+ }
+ response
  .then(() => {
  setToast(`Data source ${name} created`, 'success');
  window.location.hash = '#/manage';
  })
  .catch((err) => {
- setToast(`Data source ${name} created`, 'success');
- window.location.hash = '#/manage';
+ setToast(
+ `Could not create data source`,
+ 'danger',
+ `An error occured while trying to create the ${type} data source ${name}: ${err}`
+ );
+ setPage('configure');
  });
  };