Merge remote-tracking branch 'refs/remotes/origin/main' into createAl…

…ert2 # Conflicts: # public/plugin.tsx # public/services/services.ts
opensearch-project · Aug 22, 2024 · 12cf885 · 12cf885
2 parents 168d72c + db4af39
commit 12cf885
Show file tree

Hide file tree

Showing 178 changed files with 2,777 additions and 1,759 deletions.
diff --git a/.github/workflows/cypress-workflow.yml b/.github/workflows/cypress-workflow.yml
@@ -34,7 +34,7 @@ jobs:
       - name: Run Opensearch with plugin
         run: |
           cd alerting
-          ./gradlew run -Dopensearch.version=${{ env.OPENSEARCH_VERSION }} &
+          ./gradlew :alerting:run -Dopensearch.version=${{ env.OPENSEARCH_VERSION }} &
           timeout 300 bash -c 'while [[ "$(curl -s -o /dev/null -w ''%{http_code}'' localhost:9200)" != "200" ]]; do sleep 5; done'
       - name: Checkout OpenSearch Dashboards
         uses: actions/checkout@v2

diff --git a/cypress/integration/bucket_level_monitor_spec.js b/cypress/integration/bucket_level_monitor_spec.js
@@ -355,6 +355,9 @@ describe('Bucket-Level Monitors', () => {
         // Click Edit button
         cy.contains('Edit').click({ force: true });
 
+        // Wait for page to load
+        cy.contains('Select clusters').click({ force: true });
+
         // Click on the Index field and type in multiple index names to replicate the bug
         cy.get('#index')
           .click({ force: true })
@@ -364,12 +367,12 @@ describe('Bucket-Level Monitors', () => {
           .trigger('blur', { force: true });
 
         // Confirm Index field only contains the expected text
-        cy.get('[data-test-subj="indicesComboBox"]').contains('*', { timeout: 20000 });
+        cy.get('[data-test-subj="indicesComboBox"]').contains('*', { timeout: 25000 });
         cy.get('[data-test-subj="indicesComboBox"]').contains(TESTING_INDEX_A, {
-          timeout: 20000,
+          timeout: 25000,
         });
         cy.get('[data-test-subj="indicesComboBox"]').contains(TESTING_INDEX_B, {
-          timeout: 20000,
+          timeout: 25000,
         });
 
         // Click the update button

diff --git a/cypress/integration/composite_level_monitor_spec.js b/cypress/integration/composite_level_monitor_spec.js
@@ -75,7 +75,7 @@ describe('CompositeLevelMonitor', () => {
         .type('{backspace}')
         .type('Composite trigger');
 
-      cy.intercept('api/alerting/workflows').as('createMonitorRequest');
+      cy.intercept('api/alerting/workflows?*').as('createMonitorRequest');
       cy.intercept(`api/alerting/monitors?*`).as('getMonitorsRequest');
       cy.get('button').contains('Create').click({ force: true });
 
@@ -116,7 +116,7 @@ describe('CompositeLevelMonitor', () => {
             cy.visit(
               `${Cypress.env('opensearch_dashboards')}/app/${PLUGIN_NAME}#/monitors/${
                 createdMonitor._id
-              }?action=update-monitor&type=workflow`
+              }?action=update-monitor&type=workflow&dataSourceId=`
             );
           } else {
             cy.log('Failed to get created monitor ', SAMPLE_VISUAL_EDITOR_MONITOR);
@@ -154,7 +154,7 @@ describe('CompositeLevelMonitor', () => {
 
       // Wait for monitor to be created
       cy.wait('@updateMonitorRequest').then(() => {
-        cy.get('.euiTitle--small').contains(`${SAMPLE_VISUAL_EDITOR_MONITOR}_edited`);
+        cy.get('.euiText--small').contains(`${SAMPLE_VISUAL_EDITOR_MONITOR}_edited`);
       });
     });
   });

diff --git a/cypress/integration/query_level_monitor_spec.js b/cypress/integration/query_level_monitor_spec.js
@@ -193,36 +193,40 @@ describe('Query-Level Monitors', () => {
 
     it('to have multiple indices', () => {
       // Confirm we can see the created monitor in the list
-      cy.contains(SAMPLE_MONITOR, { timeout: 20000 });
+      cy.contains(SAMPLE_MONITOR, { timeout: 25000 });
 
       // Select the existing monitor
       cy.get(`[data-test-subj="${SAMPLE_MONITOR}"]`).click({ force: true });
 
       // Click Edit button
-      cy.contains('Edit', { timeout: 20000 }).click({ force: true });
+      cy.contains('Edit', { timeout: 25000 }).click({ force: true });
+
+      // Wait for page to load
+      cy.contains('Select clusters').click({ force: true });
 
       // Click on the Index field and type in multiple index names to replicate the bug
       cy.get('#index')
+        .should('be.visible')
         .click({ force: true })
         .type(`${TESTING_INDEX_A}{enter}${TESTING_INDEX_B}{enter}`, {
           force: true,
         })
         .trigger('blur', { force: true });
 
       // Confirm Index field only contains the expected text
-      cy.get('[data-test-subj="indicesComboBox"]').contains('*', { timeout: 20000 });
+      cy.get('[data-test-subj="indicesComboBox"]').contains('*', { timeout: 25000 });
       cy.get('[data-test-subj="indicesComboBox"]').contains(TESTING_INDEX_A, {
-        timeout: 20000,
+        timeout: 25000,
       });
       cy.get('[data-test-subj="indicesComboBox"]').contains(TESTING_INDEX_B, {
-        timeout: 20000,
+        timeout: 25000,
       });
 
       // Click the update button
       cy.get('button').contains('Update').last().click();
 
       // Confirm we're on the Monitor Details page by searching for the History element
-      cy.contains('History', { timeout: 20000 });
+      cy.contains('History', { timeout: 25000 });
     });
   });
 
@@ -318,6 +322,9 @@ describe('Query-Level Monitors', () => {
       // Select visual editor
       cy.get('[data-test-subj="visualEditorRadioCard"]').click();
 
+      // Wait for page to load
+      cy.contains('Select clusters').click({ force: true });
+
       // Wait for input to load and then type in the index name
       cy.get('#index').type(`{backspace}${INDEX.SAMPLE_DATA_ECOMMERCE}{enter}`, { force: true });
 
@@ -336,7 +343,7 @@ describe('Query-Level Monitors', () => {
       cy.get('button').contains('Update').last().click({ force: true });
 
       // Confirm we can see the correct number of rows in the trigger list by checking <caption> element
-      cy.contains(`This table contains ${triggers.length} rows`, { timeout: 20000 });
+      cy.contains(`This table contains ${triggers.length} rows`, { timeout: 25000 });
 
       // Click Edit button
       cy.contains('Edit').click({ force: true });

diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
@@ -7,6 +7,7 @@
   "requiredPlugins": [
     "uiActions",
     "dashboard",
+    "navigation",
     "embeddable",
     "opensearchDashboardsReact",
     "savedObjects",
@@ -17,5 +18,7 @@
   ],
   "optionalPlugins": ["assistantDashboards"],
   "server": true,
-  "ui": true
+  "ui": true,
+  "supportedOSDataSourceVersions": ">=2.13.0",
+  "requiredOSDataSourcePlugins": ["opensearch-alerting"]
 }
diff --git a/package.json b/package.json
@@ -61,7 +61,8 @@
     "tough-cookie": "^4.1.3",
     "semver": "^5.7.2",
     "**/d3-color": "^3.1.0",
-    "@cypress/request": "^3.0.0"
+    "@cypress/request": "^3.0.0",
+    "braces": "^3.0.3"
   },
   "engines": {
     "yarn": "^1.21.1"

diff --git a/public/app.js b/public/app.js
@@ -15,7 +15,7 @@ import { CoreContext } from './utils/CoreContext';
 import { ServicesContext, NotificationService, getDataSourceEnabled } from './services';
 import { initManageChannelsUrl } from './utils/helpers';
 
-export function renderApp(coreStart, params) {
+export function renderApp(coreStart, params, defaultRoute) {
   const isDarkMode = coreStart.uiSettings.get('theme:darkMode') || false;
   const http = coreStart.http;
   coreStart.chrome.setBreadcrumbs([{ text: 'Alerting' }]); // Set Breadcrumbs for the plugin
@@ -26,6 +26,10 @@ export function renderApp(coreStart, params) {
     dataSourceEnabled: getDataSourceEnabled()?.enabled,
   };
 
+  const navProps = {
+    defaultRoute: defaultRoute,
+  };
+
   // Load Chart's dark mode CSS
   if (isDarkMode) {
     require('@elastic/charts/dist/theme_only_dark.css');
@@ -45,9 +49,10 @@ export function renderApp(coreStart, params) {
             isDarkMode,
             notifications: coreStart.notifications,
             chrome: coreStart.chrome,
+            defaultRoute: defaultRoute,
           }}
         >
-          <Route render={(props) => <Main title="Alerting" {...mdsProps} {...props} />} />
+          <Route render={(props) => <Main title="Alerting" {...mdsProps} {...navProps} {...props} />} />
         </CoreContext.Provider>
       </ServicesContext.Provider>
     </Router>,

diff --git a/public/components/Comments/AlertCommentsFlyout.tsx b/public/components/Comments/AlertCommentsFlyout.tsx
@@ -5,17 +5,17 @@
 
 import React, { useCallback, useEffect, useState } from "react";
 import { Comment } from "../../models/Comments";
-import { 
-  EuiFlyout, 
-  EuiFlyoutHeader, 
-  EuiFlyoutBody, 
-  EuiCommentList, 
-  EuiText, 
-  EuiButtonIcon, 
-  EuiContextMenuItem, 
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiFlyoutBody,
+  EuiCommentList,
+  EuiText,
+  EuiButtonIcon,
+  EuiContextMenuItem,
   EuiContextMenuPanel,
-  EuiPopover, 
-  EuiTitle, 
+  EuiPopover,
+  EuiTitle,
   EuiSpacer,
   EuiCallOut,
   EuiLink
@@ -77,7 +77,7 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
 
   const createComment = async () => {
     setCreatePending(true);
-    await httpClient.post(`../api/alerting/comments/${alertId}`, { body: JSON.stringify({ 
+    await httpClient.post(`../api/alerting/comments/${alertId}`, { body: JSON.stringify({
       content: draftCommentContent
     })});
 
@@ -150,7 +150,7 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
         onCancel={() => onEditCancel(comment, idx)}
       />
     );
-  
+
     const customActions = comment.state === 'readonly' && (
       <EuiPopover
         button={
@@ -186,7 +186,7 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
         />
       </EuiPopover>
     );
-  
+
     return {
       username: comment.user || 'Unknown',
       event: `${comment.last_updated_time ? 'edited' : 'added'} comment on`,
@@ -204,12 +204,12 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
         </EuiTitle>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
-        <EuiCallOut 
+        <EuiCallOut
           iconType='iInCircle'
           title='Experimental'>
-          <span>The feature is experimental and should not be used in a production environment. 
+          <span>The feature is experimental and should not be used in a production environment.
             The posted comments will be impacted if the feature is deactivated.
-            For more information see <EuiLink href="https://opensearch.org/docs/latest/observing-your-data/alerting/index/" target="_blank">Documentation.</EuiLink> 
+            For more information see <EuiLink href="https://opensearch.org/docs/latest/observing-your-data/alerting/index/" target="_blank">Documentation.</EuiLink>
             To leave feedback, visit <EuiLink href="https://github.com/opensearch-project/OpenSearch-Dashboards/issues/6999" target="_blank">github.com</EuiLink>.
           </span>
         </EuiCallOut>
@@ -236,4 +236,4 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
       </EuiFlyoutBody>
     </EuiFlyout>
   )
-}
+}
diff --git a/public/components/Comments/CommentEditor.tsx b/public/components/Comments/CommentEditor.tsx
@@ -4,10 +4,10 @@
 */
 
 import React from "react";
-import { 
-  EuiFlexGroup, 
-  EuiFlexItem, 
-  EuiButton 
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSmallButton
 } from "@elastic/eui";
 
 export interface CommentEditorProps {
@@ -19,13 +19,13 @@ export interface CommentEditorProps {
   onContentChange: React.ChangeEventHandler<HTMLTextAreaElement>;
 }
 
-export const CommentEditor: React.FC<CommentEditorProps> = ({ 
-  isLoading, 
+export const CommentEditor: React.FC<CommentEditorProps> = ({
+  isLoading,
   draftCommentContent,
   saveDisabled,
-  onSave, 
+  onSave,
   onCancel,
-  onContentChange, 
+  onContentChange,
 }) => (
   <EuiFlexGroup gutterSize="s" direction="column" >
     <EuiFlexItem>
@@ -35,17 +35,17 @@ export const CommentEditor: React.FC<CommentEditorProps> = ({
       <EuiFlexGroup gutterSize="s">
         {onCancel && (
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={onCancel}>
+            <EuiSmallButton onClick={onCancel}>
               Cancel
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         )}
         <EuiFlexItem grow={false}>
-          <EuiButton onClick={onSave} color="primary" isLoading={isLoading} disabled={saveDisabled} fill>
+          <EuiSmallButton onClick={onSave} color="primary" isLoading={isLoading} disabled={saveDisabled} fill>
             Save
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlexItem>
   </EuiFlexGroup>
-)
+)
diff --git a/public/components/Comments/ShowAlertComments.tsx b/public/components/Comments/ShowAlertComments.tsx
@@ -5,7 +5,7 @@
 
 import React, { useCallback, useEffect, useState } from "react";
 import { Comment } from "../../models/Comments";
-import { EuiButtonIcon, EuiToolTip } from "@elastic/eui";
+import { EuiSmallButtonIcon, EuiToolTip } from "@elastic/eui";
 import { AlertCommentsFlyout } from "./AlertCommentsFlyout";
 
 export interface ShowAlertCommentsProps {
@@ -15,19 +15,19 @@ export interface ShowAlertCommentsProps {
 
 export const ShowAlertComments: React.FC<ShowAlertCommentsProps> = ({ alert, httpClient }) => {
   const [commentsFlyout, setCommentsFlyout] = useState<React.ReactNode | null>(null);
-  
-  const showCommentsFlyout = useCallback(() => { 
+
+  const showCommentsFlyout = useCallback(() => {
     setCommentsFlyout(<AlertCommentsFlyout
       alertId={alert.id}
       httpClient={httpClient}
-      closeFlyout={() => setCommentsFlyout(null)} 
+      closeFlyout={() => setCommentsFlyout(null)}
     />);
   }, [setCommentsFlyout]);
 
   return (
     <>
       <EuiToolTip content={'Show comments'}>
-        <EuiButtonIcon
+        <EuiSmallButtonIcon
           aria-label={'Show comments'}
           data-test-subj={`show-comments-icon`}
           iconType={'editorComment'}
@@ -37,4 +37,4 @@ export const ShowAlertComments: React.FC<ShowAlertCommentsProps> = ({ alert, htt
       {commentsFlyout}
     </>
   )
-}
+}
diff --git a/public/components/ContentPanel/ContentPanel.js b/public/components/ContentPanel/ContentPanel.js
@@ -17,6 +17,7 @@ const ContentPanel = ({
   horizontalRuleClassName = '',
   actions,
   children,
+  panelOptions = {},
 }) => (
   <EuiPanel style={{ paddingLeft: '0px', paddingRight: '0px', ...panelStyles }}>
     <EuiFlexGroup style={{ padding: '0px 10px' }} justifyContent="spaceBetween" alignItems="center">
@@ -38,7 +39,9 @@ const ContentPanel = ({
     <EuiText style={{ padding: '0px 10px' }} size={descriptionSize} color="subdued">
       {description}
     </EuiText>
-    <EuiHorizontalRule margin="xs" className={horizontalRuleClassName} />
+    {!panelOptions.hideTitleBorder && (
+      <EuiHorizontalRule margin="xs" className={horizontalRuleClassName} />
+    )}
 
     <div style={{ padding: '0px 10px', ...bodyStyles }}>{children}</div>
   </EuiPanel>

diff --git a/public/components/DeleteModal/DeleteMonitorModal.tsx b/public/components/DeleteModal/DeleteMonitorModal.tsx
@@ -9,7 +9,6 @@ import {
   EuiLink,
   EuiOverlayMask
 } from '@elastic/eui';
-import { PLUGIN_NAME } from '../../../utils/constants';
 import { getDataSourceQueryObj, constructUrlFromDataSource } from '../../pages/utils/helpers';
 
 interface DeleteModalProps {
@@ -55,7 +54,7 @@ export const DeleteMonitorModal = ({
           {`The monitor ${monitorNames[0]} is currently being used as a delegate monitor for composite monitors. Unlink from the following composite monitors before deleting this monitor:`}
           { associatedWorkflows ?
                 <ul>
-                  {associatedWorkflows.map(({ id, name }) => <li><EuiLink target='_blank' href={constructUrlFromDataSource(`${PLUGIN_NAME}#/monitors/${id}?type=workflow`)}>{name}</EuiLink></li>)}
+                  {associatedWorkflows.map(({ id, name }) => <li><EuiLink target='_blank' href={constructUrlFromDataSource(`#/monitors/${id}?type=workflow`)}>{name}</EuiLink></li>)}
                 </ul>
               : null
           }