Backport from main to 2.1 (#822)

* Add availability help flyout (#734) Signed-off-by: Eugene Lee <[email protected]> * Make common delete modal for components (#766) Signed-off-by: Eugene Lee <[email protected]> * Sync app and app list types (#763) Signed-off-by: Eugene Lee <[email protected]> * Uses custom plugin to publish zips to maven (#786) Signed-off-by: Joshua Li <[email protected]> * backport main to 2.1 Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> Co-authored-by: Eugene Lee <[email protected]> Co-authored-by: Joshua Li <[email protected]>
opensearch-project · Jun 27, 2022 · a3fbfcd · a3fbfcd
1 parent 2d93bd3
commit a3fbfcd
Show file tree

Hide file tree

Showing 32 changed files with 435 additions and 203 deletions.
diff --git a/.github/workflows/dashboards-observability-test-and-build-workflow.yml b/.github/workflows/dashboards-observability-test-and-build-workflow.yml
@@ -5,8 +5,8 @@ on: [pull_request, push]
 
 env:
   PLUGIN_NAME: dashboards-observability
-  OPENSEARCH_VERSION: '2.0'
-  OPENSEARCH_PLUGIN_VERSION: 2.0.1.0
+  OPENSEARCH_VERSION: 'main'
+  OPENSEARCH_PLUGIN_VERSION: 2.1.0.0
 
 jobs:
 

diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js
@@ -35,13 +35,13 @@ describe('Has working breadcrumbs', () => {
   it('Redirect to correct page on breadcrumb click', () => {
     landOnEventExplorer();
     cy.wait(delay * 3);
-    cy.get('.euiBreadcrumb').contains('Explorer').click();
+    cy.get('.euiBreadcrumb[href="#/event_analytics/explorer"]').contains('Explorer').click();
     cy.wait(delay);
     cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('exist');
-    cy.get('.euiBreadcrumb').contains('Event analytics').click();
+    cy.get('.euiBreadcrumb[href="#/event_analytics"]').contains('Event analytics').click();
     cy.wait(delay);
     cy.get('.euiTitle').contains('Event analytics').should('exist');
-    cy.get('.euiBreadcrumb').contains('Observability').click();
+    cy.get('.euiBreadcrumb[href="observability-dashboards#/"]').contains('Observability').click();
     cy.wait(delay);
     cy.get('.euiTitle').contains('Event analytics').should('exist');
   });

diff --git a/dashboards-observability/.cypress/integration/7_app_analytics.spec.js b/dashboards-observability/.cypress/integration/7_app_analytics.spec.js
@@ -251,7 +251,7 @@ describe('Viewing application', () => {
   it('Adds filter when Trace group name is clicked', () => {
     cy.get('[data-test-subj="app-analytics-overviewTab"]').click();
     cy.get('[data-test-subj="dashboard-table-trace-group-name-button"]').contains('client_create_order').click();
-    cy.get('.euiTableRow').should('have.length', 1);
+    cy.get('.euiTableRow').should('have.length', 1, { timeout: timeoutDelay });
     cy.get('[data-test-subj="client_create_orderFilterBadge"]').should('exist');
     cy.get('[data-test-subj="filterBadge"]').click();
     cy.get('[data-test-subj="deleteFilterIcon"]').click();
@@ -560,6 +560,7 @@ describe('Application Analytics home page', () => {
     cy.get('.euiTableRow').first().within(($row) => {
       cy.get('.euiCheckbox').click();
     });
+    cy.wait(delay);
     cy.get('[data-test-subj="appAnalyticsActionsButton"]').click();
     cy.get('[data-test-subj="renameApplicationContextMenuItem"]').click();
     cy.get('[data-test-subj="customModalFieldText"]').clear().focus().type(newName);
@@ -586,7 +587,8 @@ describe('Application Analytics home page', () => {
     });
     cy.get('[data-test-subj="appAnalyticsActionsButton"]').click();
     cy.get('[data-test-subj="deleteApplicationContextMenuItem"]').click();
-    cy.get('[data-test-subj="confirmModalConfirmButton"]').click();
+    cy.get('[data-test-subj="popoverModal__deleteTextInput"]').type('delete');
+    cy.get('[data-test-subj="popoverModal__deleteButton"').click();
     cy.wait(delay);
     cy.get('.euiToast').contains(`Applications successfully deleted!`);
     cy.get(`[data-test-subj="${newName}ApplicationLink"]`).should('not.exist');

diff --git a/...servability/common/types/app_analytics.ts → ...ity/common/types/application_analytics.ts b/...servability/common/types/app_analytics.ts → ...ity/common/types/application_analytics.ts
@@ -7,17 +7,20 @@ export interface OptionType {
   label: string;
 }
 
-export interface ApplicationListType {
-  name: string;
+export interface ApplicationType {
   id: string;
-  panelId: string;
-  composition: string[];
   dateCreated: string;
   dateModified: string;
-  availability: { name: string; color: string; mainVisId: string };
+  name: string;
+  description: string;
+  baseQuery: string;
+  servicesEntities: string[];
+  traceGroups: string[];
+  panelId: string;
+  availability: { name: string; color: string; availabilityVisId: string };
 }
 
-export interface ApplicationType {
+export interface ApplicationRequestType {
   name: string;
   description: string;
   baseQuery: string;
@@ -26,3 +29,9 @@ export interface ApplicationType {
   panelId: string;
   availabilityVisId: string;
 }
+
+export interface AvailabilityType {
+  name: string;
+  color: string;
+  availabilityVisId: string;
+}
diff --git a/dashboards-observability/opensearch_dashboards.json b/dashboards-observability/opensearch_dashboards.json
@@ -1,7 +1,7 @@
 {
   "id": "observabilityDashboards",
-  "version": "2.0.1.0",
-  "opensearchDashboardsVersion": "2.0.1",
+  "version": "2.1.0.0",
+  "opensearchDashboardsVersion": "2.1.0",
   "server": true,
   "ui": true,
   "requiredPlugins": [

diff --git a/dashboards-observability/package.json b/dashboards-observability/package.json
@@ -1,6 +1,6 @@
 {
   "name": "observability-dashboards",
-  "version": "2.0.1.0",
+  "version": "2.1.0.0",
   "main": "index.ts",
   "license": "Apache-2.0",
   "scripts": {

diff --git a/dashboards-observability/public/components/application_analytics/components/app_table.tsx b/dashboards-observability/public/components/application_analytics/components/app_table.tsx
@@ -34,16 +34,15 @@ import {
 import _ from 'lodash';
 import React, { ReactElement, useEffect, useState } from 'react';
 import moment from 'moment';
+import { DeleteModal } from '../../common/helpers/delete_modal';
 import { AppAnalyticsComponentDeps } from '../home';
 import { getCustomModal } from '../../custom_panels/helpers/modal_containers';
-import { getClearModal } from '../helpers/modal_containers';
 import { pageStyles, UI_DATE_FORMAT } from '../../../../common/constants/shared';
-import { ApplicationListType } from '../../../../common/types/app_analytics';
-import { AvailabilityType } from '../helpers/types';
+import { ApplicationType, AvailabilityType } from '../../../../common/types/application_analytics';
 
 interface AppTableProps extends AppAnalyticsComponentDeps {
   loading: boolean;
-  applications: ApplicationListType[];
+  applications: ApplicationType[];
   fetchApplications: () => void;
   renameApplication: (newAppName: string, appId: string) => void;
   deleteApplication: (appList: string[], panelIdList: string[], toastMessage?: string) => void;
@@ -66,7 +65,7 @@ export function AppTable(props: AppTableProps) {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false);
   const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
-  const [selectedApplications, setSelectedApplications] = useState<ApplicationListType[]>([]);
+  const [selectedApplications, setSelectedApplications] = useState<ApplicationType[]>([]);
   const createButtonText = 'Create application';
 
   useEffect(() => {
@@ -129,12 +128,12 @@ export function AppTable(props: AppTableProps) {
   const deleteApp = () => {
     const applicationString = `application${selectedApplications.length > 1 ? 's' : ''}`;
     setModalLayout(
-      getClearModal(
-        closeModal,
-        onDelete,
-        `Delete ${selectedApplications.length} ${applicationString}`,
-        `Are you sure you want to delete the selected ${selectedApplications.length} ${applicationString}?`
-      )
+      <DeleteModal
+        onConfirm={onDelete}
+        onCancel={closeModal}
+        title={`Delete ${selectedApplications.length} ${applicationString}`}
+        message={`Are you sure you want to delete the selected ${selectedApplications.length} ${applicationString}?`}
+      />
     );
     showModal();
   };
@@ -182,7 +181,7 @@ export function AppTable(props: AppTableProps) {
     // <EuiContextMenuItem key="addSample">Add sample application</EuiContextMenuItem>,
   ];
 
-  const renderAvailability = (value: AvailabilityType, record: ApplicationListType) => {
+  const renderAvailability = (value: AvailabilityType, record: ApplicationType) => {
     if (value.color === 'loading') {
       return <EuiLoadingSpinner />;
     } else if (value.name) {
@@ -230,10 +229,10 @@ export function AppTable(props: AppTableProps) {
       name: 'Composition',
       sortable: false,
       truncateText: true,
-      render: (value) => (
-        <EuiToolTip content={value.join(', ')}>
+      render: (value, record) => (
+        <EuiToolTip content={record.servicesEntities.concat(record.traceGroups).join(', ')}>
           <EuiText id="compositionColumn" data-test-subj="appAnalytics__compositionColumn">
-            {value.join(', ')}
+            {record.servicesEntities.concat(record.traceGroups).join(', ')}
           </EuiText>
         </EuiToolTip>
       ),
@@ -250,7 +249,7 @@ export function AppTable(props: AppTableProps) {
       sortable: true,
       render: (value) => <EuiText>{moment(value).format(UI_DATE_FORMAT)}</EuiText>,
     },
-  ] as Array<EuiTableFieldDataColumnType<ApplicationListType>>;
+  ] as Array<EuiTableFieldDataColumnType<ApplicationType>>;
 
   return (
     <div style={pageStyles}>

diff --git a/dashboards-observability/public/components/application_analytics/components/application.tsx b/dashboards-observability/public/components/application_analytics/components/application.tsx
@@ -57,7 +57,10 @@ import { IQueryTab } from '../../../../common/types/explorer';
 import { NotificationsStart } from '../../../../../../src/core/public';
 import { AppAnalyticsComponentDeps } from '../home';
 import { CustomPanelView } from '../../../../public/components/custom_panels/custom_panel_view';
-import { ApplicationType } from '../../../../common/types/app_analytics';
+import {
+  ApplicationRequestType,
+  ApplicationType,
+} from '../../../../common/types/application_analytics';
 import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
 import { ServiceDetailFlyout } from './flyout_components/service_detail_flyout';
 import { SpanDetailFlyout } from '../../../../public/components/trace_analytics/components/traces/span_detail_flyout';
@@ -83,7 +86,7 @@ interface AppDetailProps extends AppAnalyticsComponentDeps {
   savedObjects: SavedObjects;
   timestampUtils: TimestampUtils;
   notifications: NotificationsStart;
-  updateApp: (appId: string, updateAppData: Partial<ApplicationType>, type: string) => void;
+  updateApp: (appId: string, updateAppData: Partial<ApplicationRequestType>, type: string) => void;
   setToasts: (title: string, color?: string, text?: ReactChild) => void;
   callback: (childfunction: () => void) => void;
 }
@@ -109,13 +112,16 @@ export function Application(props: AppDetailProps) {
     callback,
   } = props;
   const [application, setApplication] = useState<ApplicationType>({
+    id: '',
+    dateCreated: '',
+    dateModified: '',
     name: '',
     description: '',
     baseQuery: '',
     servicesEntities: [],
     traceGroups: [],
     panelId: '',
-    availabilityVisId: '',
+    availability: { name: '', color: '', availabilityVisId: '' },
   });
   const dispatch = useDispatch();
   const [triggerAvailability, setTriggerAvailability] = useState(false);
@@ -381,7 +387,11 @@ export function Application(props: AppDetailProps) {
   };
 
   const updateAvailabilityVizId = (vizs: VisualizationType[]) => {
-    if (!vizs.map((viz) => viz.savedVisualizationId).includes(application.availabilityVisId)) {
+    if (
+      !vizs
+        .map((viz) => viz.savedVisualizationId)
+        .includes(application.availability.availabilityVisId)
+    ) {
       updateApp(appId, { availabilityVisId: '' }, 'editAvailability');
     }
   };

diff --git a/...y/public/components/application_analytics/components/config_components/service_config.tsx b/...y/public/components/application_analytics/components/config_components/service_config.tsx
@@ -22,7 +22,7 @@ import { ServiceObject } from '../../../trace_analytics/components/common/plots/
 import { ServiceMap } from '../../../trace_analytics/components/services';
 import { handleServiceMapRequest } from '../../../trace_analytics/requests/services_request_handler';
 import { AppAnalyticsComponentDeps } from '../../home';
-import { OptionType } from '../../../../../common/types/app_analytics';
+import { OptionType } from '../../../../../common/types/application_analytics';
 import { getClearModal } from '../../helpers/modal_containers';
 
 interface ServiceConfigProps extends AppAnalyticsComponentDeps {

diff --git a/...ity/public/components/application_analytics/components/config_components/trace_config.tsx b/...ity/public/components/application_analytics/components/config_components/trace_config.tsx
@@ -18,7 +18,7 @@ import {
 import DSLService from 'public/services/requests/dsl';
 import React, { useEffect, useState } from 'react';
 import { FilterType } from 'public/components/trace_analytics/components/common/filters/filters';
-import { OptionType } from '../../../../../common/types/app_analytics';
+import { OptionType } from '../../../../../common/types/application_analytics';
 import { filtersToDsl } from '../../../trace_analytics/components/common/helper_functions';
 import { handleDashboardRequest } from '../../../trace_analytics/requests/dashboard_request_handler';
 import { AppAnalyticsComponentDeps } from '../../home';

diff --git a/...boards-observability/public/components/application_analytics/components/configuration.tsx b/...boards-observability/public/components/application_analytics/components/configuration.tsx
@@ -2,7 +2,6 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-/* eslint-disable react-hooks/exhaustive-deps */
 
 import {
   EuiBreadcrumb,
@@ -24,7 +23,7 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import { ApplicationType } from 'common/types/app_analytics';
+import { ApplicationRequestType, ApplicationType } from 'common/types/application_analytics';
 import { last } from 'lodash';
 import React, { useState } from 'react';
 
@@ -34,7 +33,7 @@ interface ConfigProps {
   parentBreadcrumbs: EuiBreadcrumb[];
   visWithAvailability: EuiSelectOption[];
   switchToAvailability: () => void;
-  updateApp: (appId: string, updateAppData: Partial<ApplicationType>, type: string) => void;
+  updateApp: (appId: string, updateAppData: Partial<ApplicationRequestType>, type: string) => void;
 }
 
 export const Configuration = (props: ConfigProps) => {
@@ -46,7 +45,9 @@ export const Configuration = (props: ConfigProps) => {
     updateApp,
     switchToAvailability,
   } = props;
-  const [availabilityVisId, setAvailabilityVisId] = useState(application.availabilityVisId || '');
+  const [availabilityVisId, setAvailabilityVisId] = useState(
+    application.availability.availabilityVisId || ''
+  );
 
   const onAvailabilityVisChange = (event: any) => {
     setAvailabilityVisId(event.target.value);

diff --git a/dashboards-observability/public/components/application_analytics/components/create.tsx b/dashboards-observability/public/components/application_analytics/components/create.tsx
@@ -32,15 +32,19 @@ import { TraceConfig } from './config_components/trace_config';
 import { ServiceConfig } from './config_components/service_config';
 import { LogConfig } from './config_components/log_config';
 import { PPLReferenceFlyout } from '../../../components/common/helpers';
-import { ApplicationType, OptionType } from '../../../../common/types/app_analytics';
+import {
+  ApplicationRequestType,
+  ApplicationType,
+  OptionType,
+} from '../../../../common/types/application_analytics';
 import { fetchAppById } from '../helpers/utils';
 
 interface CreateAppProps extends AppAnalyticsComponentDeps {
   dslService: DSLService;
   pplService: PPLService;
   setToasts: (title: string, color?: string, text?: ReactChild) => void;
-  createApp: (app: ApplicationType, type: string) => void;
-  updateApp: (appId: string, updateAppData: Partial<ApplicationType>, type: string) => void;
+  createApp: (app: ApplicationRequestType, type: string) => void;
+  updateApp: (appId: string, updateAppData: Partial<ApplicationRequestType>, type: string) => void;
   clearStorage: () => void;
   existingAppId: string;
 }
@@ -70,13 +74,16 @@ export const CreateApp = (props: CreateAppProps) => {
 
   const editMode = existingAppId !== 'undefined';
   const [existingApp, setExistingApp] = useState<ApplicationType>({
+    id: existingAppId,
+    dateCreated: '',
+    dateModified: '',
     name: '',
     description: '',
     baseQuery: '',
     servicesEntities: [],
     traceGroups: [],
     panelId: '',
-    availabilityVisId: '',
+    availability: { name: '', color: '', availabilityVisId: '' },
   });
 
   useEffect(() => {