From 17528addb1cd0c33cdebaa6530ff63ffbae736f2 Mon Sep 17 00:00:00 2001 From: Vishal Kushwah Date: Mon, 1 Aug 2022 14:54:51 +0530 Subject: [PATCH 01/18] added integration folder and its subfolder Signed-off-by: Vishal Kushwah --- .../public/components/app.tsx | 4 +- .../public/components/common/side_nav.tsx | 10 +- .../integrations/plugins/all_apps.tsx | 242 + .../integrations/plugins/app_analytics.scss | 51 + .../integrations/plugins/app_table.tsx | 203 + .../__snapshots__/create.test.tsx.snap | 19055 ++++++++++++++++ .../__snapshots__/log_config.test.tsx.snap | 1006 + .../service_config.test.tsx.snap | 2169 ++ .../__snapshots__/trace_config.test.tsx.snap | 1613 ++ .../__tests__/create.test.tsx | 583 + .../__tests__/log_config.test.tsx | 121 + .../__tests__/service_config.test.tsx | 130 + .../__tests__/trace_config.test.tsx | 116 + .../application_analytics/app_analytics.scss | 29 + .../components/app_table.tsx | 347 + .../components/application.tsx | 576 + .../config_components/log_config.tsx | 167 + .../config_components/service_config.tsx | 193 + .../config_components/trace_config.tsx | 274 + .../components/configuration.tsx | 154 + .../components/create.tsx | 282 + .../availability_info_flyout.tsx | 62 + .../service_detail_flyout.tsx | 141 + .../flyout_components/trace_detail_flyout.tsx | 32 + .../flyout_components/trace_detail_render.tsx | 92 + .../helpers/modal_containers.tsx | 37 + .../application_analytics/helpers/utils.tsx | 333 + .../plugins/application_analytics/home.tsx | 454 + .../integrations/plugins/create.tsx | 257 + .../components/integrations/plugins/home.tsx | 83 + .../integrations/plugins/nginx/nginx.tsx | 639 + .../integrations/plugins/sql/sql.tsx | 655 + 32 files changed, 30103 insertions(+), 7 deletions(-) create mode 100644 dashboards-observability/public/components/integrations/plugins/all_apps.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/app_analytics.scss create mode 100644 dashboards-observability/public/components/integrations/plugins/app_table.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/__tests__/__snapshots__/create.test.tsx.snap create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/__tests__/create.test.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/__tests__/log_config.test.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/__tests__/service_config.test.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/__tests__/trace_config.test.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/app_analytics.scss create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/components/app_table.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/components/application.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/components/config_components/log_config.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/components/config_components/service_config.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/components/config_components/trace_config.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/components/configuration.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/components/create.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/components/flyout_components/availability_info_flyout.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/components/flyout_components/service_detail_flyout.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/components/flyout_components/trace_detail_flyout.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/components/flyout_components/trace_detail_render.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/helpers/modal_containers.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/helpers/utils.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/application_analytics/home.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/create.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/home.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/nginx/nginx.tsx create mode 100644 dashboards-observability/public/components/integrations/plugins/sql/sql.tsx diff --git a/dashboards-observability/public/components/app.tsx b/dashboards-observability/public/components/app.tsx index b4d164331..f68ca181a 100644 --- a/dashboards-observability/public/components/app.tsx +++ b/dashboards-observability/public/components/app.tsx @@ -11,7 +11,7 @@ import { CoreStart } from '../../../../src/core/public'; import { observabilityID, observabilityTitle } from '../../common/constants/shared'; import store from '../framework/redux/store'; import { AppPluginStartDependencies } from '../types'; -import { Home as ApplicationAnalyticsHome } from './application_analytics/home'; +import { Home as ApplicationAnalyticsHome } from './integrations/plugins/application_analytics/home'; import { Home as CustomPanelsHome } from './custom_panels/home'; import { EventAnalytics } from './event_analytics'; import { Main as NotebooksHome } from './notebooks/components/main'; @@ -57,7 +57,7 @@ export const App = ({ <> { return ( { +// const [test, setTest] = useState('sql app'); + +// return ( +//
+// +// { +// return ; +// }} +// /> +// { +// return ; +// }} +// /> +// Sql +// Nginx +// {/* +// */} +// +//
+// ); +// }; +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ +/* eslint-disable react-hooks/exhaustive-deps */ + +import { + EuiButton, + EuiCard, + EuiCodeBlock, + EuiFlexGrid, + EuiFlexGroup, + EuiFlexItem, + EuiHorizontalRule, + EuiIcon, + EuiInMemoryTable, + EuiLink, + EuiModal, + EuiModalBody, + EuiModalFooter, + EuiModalHeader, + EuiModalHeaderTitle, + EuiPage, + EuiPageBody, + EuiPageContent, + EuiPageContentHeader, + EuiPageContentHeaderSection, + EuiPageHeader, + EuiPageHeaderSection, + EuiSpacer, + EuiTableFieldDataColumnType, + EuiText, + EuiTitle, + EuiToolTip, +} from '@elastic/eui'; +import { ApplicationType, AvailabilityType } from '../../../../common/types/application_analytics'; +import _ from 'lodash'; +import moment from 'moment'; +import React, { useState } from 'react'; +import { pageStyles, UI_DATE_FORMAT } from '../../../../common/constants/shared'; +import './app_analytics.scss'; +// import { Sql } from '../../plugins/sql/sql'; + +export function AllApps() { + const [isModalVisible, setIsModalVisible] = useState(false); + + const closeModal = () => setIsModalVisible(false); + const showModal = () => setIsModalVisible(true); + + let modal; + + if (isModalVisible) { + modal = ( + + + +

Add Apps

+ + + + + This modal has the following apps: + + + {'Adobe'} +
+ {'Sql'} +
+ {'Nginx'} +
+ {'Sap'} + + + + + + Close + + + + ); + } + + const tableColumns = [ + { + field: 'name', + name: 'Name', + sortable: true, + truncateText: true, + render: (value, record) => ( + + {_.truncate(record.name, { length: 100 })} + + ), + }, + { + field: 'composition', + name: 'Composition', + sortable: false, + truncateText: true, + render: (value, record) => ( + + + {record.servicesEntities.concat(record.traceGroups).join(', ')} + + + ), + }, + { + field: 'availability', + name: 'Current Availability', + sortable: true, + render: () => Test data, + }, + { + field: 'dateModified', + name: 'Date Modified', + sortable: true, + render: (value) => {moment(value).format(UI_DATE_FORMAT)}, + }, + ] as Array>; + + const icons = [ + { + name: 'Application Analytics', + icon: 'Cloud', + path: 'application_analytics/create', + description: 'Application analytics', + }, + { + name: 'Sql', + icon: 'MySQL', + path: 'sql', + description: 'Collect performance schema metrics, query throughput, custom metrics, and more', + }, + { + name: 'Nginx', + icon: 'Nginx', + path: 'nginx', + description: 'Monitor connection and request metrics with NGINX', + }, + { + name: 'Kibana', + icon: 'Kibana', + path: 'kibana', + description: 'Monitor connection and request metrics with Kibana', + }, + { + name: 'Metrics', + icon: 'Metrics', + path: 'metrics', + description: 'Monitor connection and request metrics with Kibana', + }, + ]; + + const cardNodes = icons.map(function (item, index) { + return ( + + } + title={item.name} + href={`#/integrations/plugins/${item.path}`} + // isDisabled={item === 'Kibana' ? true : false} + description={item.description} + // onClick={() => window.alert('Card clicked')} + /> + + ); + }); + // console.log('applications', applications); + return ( +
+ + + {modal} + + {/* + +

Overview

+ + */} + + + + + +

+ All Integrations + {/* ({applications.length}) */} +

+ + + + +
+ + {cardNodes} + +
+ + + + {/* {isModalVisible && modalLayout} */} +
+ ); +} diff --git a/dashboards-observability/public/components/integrations/plugins/app_analytics.scss b/dashboards-observability/public/components/integrations/plugins/app_analytics.scss new file mode 100644 index 000000000..fd78960b7 --- /dev/null +++ b/dashboards-observability/public/components/integrations/plugins/app_analytics.scss @@ -0,0 +1,51 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +.query-area { + width: 900px; +} + +#logSource { + overflow: visible; + position: relative; + z-index: 10; + .ppl-link { + top: 103px; + right: 140px; + } +} + +#baseQueryCallout { + max-width: 900px; +} + +#compositionColumn { + width: 300px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +#test { + text-align: center; + font-size: 50px; +} + +#section-heading { + text-align: center; + color: #102c4e; + margin-top: 150px; + margin-bottom: 70px; + font-size: 35px; +} +#columnw { + float: left; + width: 21%; + padding: 10px; + margin: 20px; + height: 250px; +} +.project4 { + background-color: wheat; +} diff --git a/dashboards-observability/public/components/integrations/plugins/app_table.tsx b/dashboards-observability/public/components/integrations/plugins/app_table.tsx new file mode 100644 index 000000000..70f8cb7ba --- /dev/null +++ b/dashboards-observability/public/components/integrations/plugins/app_table.tsx @@ -0,0 +1,203 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ +/* eslint-disable react-hooks/exhaustive-deps */ + +import { + EuiButton, + EuiCard, + EuiCodeBlock, + EuiFlexGrid, + EuiFlexGroup, + EuiFlexItem, + EuiHorizontalRule, + EuiIcon, + EuiInMemoryTable, + EuiLink, + EuiModal, + EuiModalBody, + EuiModalFooter, + EuiModalHeader, + EuiModalHeaderTitle, + EuiPage, + EuiPageBody, + EuiPageContent, + EuiPageContentHeader, + EuiPageContentHeaderSection, + EuiPageHeader, + EuiPageHeaderSection, + EuiSpacer, + EuiTableFieldDataColumnType, + EuiText, + EuiTitle, + EuiToolTip, +} from '@elastic/eui'; +import { ApplicationType, AvailabilityType } from '../../../../common/types/application_analytics'; +import _ from 'lodash'; +import moment from 'moment'; +import React, { useState } from 'react'; +import { pageStyles, UI_DATE_FORMAT } from '../../../../common/constants/shared'; +import './app_analytics.scss'; +// import { Sql } from '../../plugins/sql/sql'; + +export const AppTable = () => { + const [isModalVisible, setIsModalVisible] = useState(false); + + const closeModal = () => setIsModalVisible(false); + const showModal = () => setIsModalVisible(true); + + let modal; + + if (isModalVisible) { + modal = ( + + + +

Add Apps

+ + + + + This modal has the following apps: + + + {'Adobe'} +
+ {'Sql'} +
+ {'Nginx'} +
+ {'Sap'} + + + + + + Close + + + + ); + } + + const tableColumns = [ + { + field: 'name', + name: 'Name', + sortable: true, + truncateText: true, + render: (value, record) => ( + + {_.truncate(record.name, { length: 100 })} + + ), + }, + { + field: 'composition', + name: 'Composition', + sortable: false, + truncateText: true, + render: (value, record) => ( + + + {record.servicesEntities.concat(record.traceGroups).join(', ')} + + + ), + }, + { + field: 'availability', + name: 'Current Availability', + sortable: true, + render: () => Test data, + }, + { + field: 'dateModified', + name: 'Date Modified', + sortable: true, + render: (value) => {moment(value).format(UI_DATE_FORMAT)}, + }, + ] as Array>; + + const createButtonText = 'Add Integration'; + const appAnalytics = 'Application Analytics'; + const icons = [ + { + name: 'Sql', + icon: 'MySQL', + description: 'Collect performance schema metrics, query throughput, custom metrics, and more', + }, + { + name: 'Nginx', + icon: 'Nginx', + description: 'Monitor connection and request metrics with NGINX', + }, + ]; + + const cardNodes = icons.map(function (item, index) { + return ( + + } + title={item.name} + href={`#/integrations/plugins/${item.name}`} + // isDisabled={item === 'Kibana' ? true : false} + description={item.description} + // onClick={() => window.alert('Card clicked')} + /> + + ); + }); + // console.log('applications', applications); + return ( +
+ + + {modal} + + + +

Overview

+ + + + + + + +

+ Integrations + {/* ({applications.length}) */} +

+ + + + + + + {appAnalytics} + + + + + {createButtonText} + + + + + + + {/* + {cardNodes} + */} + + + + {/* {isModalVisible && modalLayout} */} +
+ ); +}; diff --git a/dashboards-observability/public/components/integrations/plugins/application_analytics/__tests__/__snapshots__/create.test.tsx.snap b/dashboards-observability/public/components/integrations/plugins/application_analytics/__tests__/__snapshots__/create.test.tsx.snap new file mode 100644 index 000000000..fd2d3f4e4 --- /dev/null +++ b/dashboards-observability/public/components/integrations/plugins/application_analytics/__tests__/__snapshots__/create.test.tsx.snap @@ -0,0 +1,19055 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Create Page can clear query 1`] = ` +Object { + "asFragment": [Function], + "baseElement": +