Keep monitor table cell width flexible; Check for whether monitor is …

…enabled when displaying related action (#402) * made table cells flexible; added monitor enabled check for actions Signed-off-by: Amardeepsingh Siglani <[email protected]> * updated snapshot Signed-off-by: Amardeepsingh Siglani <[email protected]> * minor updates Signed-off-by: Amardeepsingh Siglani <[email protected]> * updated jest snapshots Signed-off-by: Amardeepsingh Siglani <[email protected]> Signed-off-by: Amardeepsingh Siglani <[email protected]> (cherry picked from commit bd62a0b)
opensearch-project · Dec 9, 2022 · 4fa7303 · 4fa7303
1 parent d3047e9
commit 4fa7303
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 56 deletions.
diff --git a/cypress/integration/query_level_monitor_spec.js b/cypress/integration/query_level_monitor_spec.js
@@ -166,7 +166,7 @@ describe('Query-Level Monitors', () => {
       cy.contains(SAMPLE_MONITOR, { timeout: 20000 });
 
       // Select the existing monitor
-      cy.get('a').contains(SAMPLE_MONITOR, { timeout: 20000 }).click();
+      cy.get(`[data-test-subj="${SAMPLE_MONITOR}"]`).click();
 
       // Click Edit button
       cy.contains('Edit', { timeout: 20000 }).click({ force: true });
@@ -195,7 +195,7 @@ describe('Query-Level Monitors', () => {
       cy.contains(SAMPLE_MONITOR, { timeout: 20000 });
 
       // Select the existing monitor
-      cy.get('a').contains(SAMPLE_MONITOR, { timeout: 20000 }).click({ force: true });
+      cy.get(`[data-test-subj="${SAMPLE_MONITOR}"]`).click({ force: true });
 
       // Click Edit button
       cy.contains('Edit', { timeout: 20000 }).click({ force: true });
@@ -304,7 +304,7 @@ describe('Query-Level Monitors', () => {
       cy.contains(SAMPLE_MONITOR);
 
       // Select the existing monitor
-      cy.get('a').contains(SAMPLE_MONITOR).click();
+      cy.get(`[data-test-subj="${SAMPLE_MONITOR}"]`).click();
 
       // Click Edit button
       cy.contains('Edit').click({ force: true });
@@ -373,7 +373,7 @@ describe('Query-Level Monitors', () => {
       cy.contains(SAMPLE_DAYS_INTERVAL_MONITOR, { timeout: 20000 });
 
       // Select the existing monitor
-      cy.get('a').contains(SAMPLE_DAYS_INTERVAL_MONITOR).click({ force: true });
+      cy.get(`[data-test-subj="${SAMPLE_DAYS_INTERVAL_MONITOR}"]`).click({ force: true });
 
       // Click Edit button
       cy.contains('Edit').click({ force: true });
@@ -398,7 +398,7 @@ describe('Query-Level Monitors', () => {
       cy.contains(SAMPLE_CRON_EXPRESSION_MONITOR, { timeout: 20000 });
 
       // Select the existing monitor
-      cy.get('a').contains(SAMPLE_CRON_EXPRESSION_MONITOR).click({ force: true });
+      cy.get(`[data-test-subj="${SAMPLE_CRON_EXPRESSION_MONITOR}"]`).click({ force: true });
 
       // Click Edit button
       cy.contains('Edit').click({ force: true });

diff --git a/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js b/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js
@@ -8,18 +8,17 @@ import { EuiCallOut, EuiButton, EuiSpacer } from '@elastic/eui';
 import { MANAGE_CHANNELS_PATH } from '../../../CreateTrigger/utils/constants';
 
 const NotificationsInfoCallOut = ({ hasNotificationPlugin }) => {
-  console.log(`NotificationsInfoCallOut: ${hasNotificationPlugin}`);
   return (
     <div>
       <EuiCallOut title="Destinations have become channels in Notifications.">
         <p>
           Your destinations have been migrated to Notifications, a new centralized place to manage
           your notification channels. Destinations will be deprecated going forward.
-          <EuiSpacer size="l" />
-          {hasNotificationPlugin && (
-            <EuiButton href={MANAGE_CHANNELS_PATH}>View Notifications</EuiButton>
-          )}
         </p>
+        <EuiSpacer size="l" />
+        {hasNotificationPlugin && (
+          <EuiButton href={MANAGE_CHANNELS_PATH}>View Notifications</EuiButton>
+        )}
       </EuiCallOut>
       <EuiSpacer size="l" />
     </div>

diff --git a/...s/components/NotificationsInfoCallOut/__snapshots__/NotificationsInfoCallOut.test.js.snap b/...s/components/NotificationsInfoCallOut/__snapshots__/NotificationsInfoCallOut.test.js.snap
@@ -41,7 +41,6 @@ exports[`NotificationsInfoCallOut renders when Notifications plugin is installed
             </span>
           </span>
         </a>
-        <p />
       </div>
     </div>
   </div>
@@ -77,7 +76,6 @@ exports[`NotificationsInfoCallOut renders when Notifications plugin is not insta
         <div
           class="euiSpacer euiSpacer--l"
         />
-        <p />
       </div>
     </div>
   </div>

diff --git a/...ages/Destinations/containers/DestinationsList/__snapshots__/DestinationsList.test.js.snap b/...ages/Destinations/containers/DestinationsList/__snapshots__/DestinationsList.test.js.snap
@@ -82,14 +82,14 @@ exports[`DestinationsList renders when Notification plugin is installed 1`] = `
                 >
                   <p>
                     Your destinations have been migrated to Notifications, a new centralized place to manage your notification channels. Destinations will be deprecated going forward.
-                    <EuiSpacer
-                      size="l"
-                    >
-                      <div
-                        className="euiSpacer euiSpacer--l"
-                      />
-                    </EuiSpacer>
                   </p>
+                  <EuiSpacer
+                    size="l"
+                  >
+                    <div
+                      className="euiSpacer euiSpacer--l"
+                    />
+                  </EuiSpacer>
                 </div>
               </EuiTextColor>
             </div>
@@ -1556,14 +1556,14 @@ exports[`DestinationsList renders when Notification plugin is not installed 1`]
                 >
                   <p>
                     Your destinations have been migrated to Notifications, a new centralized place to manage your notification channels. Destinations will be deprecated going forward.
-                    <EuiSpacer
-                      size="l"
-                    >
-                      <div
-                        className="euiSpacer euiSpacer--l"
-                      />
-                    </EuiSpacer>
                   </p>
+                  <EuiSpacer
+                    size="l"
+                  >
+                    <div
+                      className="euiSpacer euiSpacer--l"
+                    />
+                  </EuiSpacer>
                 </div>
               </EuiTextColor>
             </div>
@@ -2888,14 +2888,14 @@ exports[`DestinationsList renders when email is disallowed 1`] = `
                 >
                   <p>
                     Your destinations have been migrated to Notifications, a new centralized place to manage your notification channels. Destinations will be deprecated going forward.
-                    <EuiSpacer
-                      size="l"
-                    >
-                      <div
-                        className="euiSpacer euiSpacer--l"
-                      />
-                    </EuiSpacer>
                   </p>
+                  <EuiSpacer
+                    size="l"
+                  >
+                    <div
+                      className="euiSpacer euiSpacer--l"
+                    />
+                  </EuiSpacer>
                 </div>
               </EuiTextColor>
             </div>

diff --git a/public/pages/Monitors/containers/Monitors/Monitors.js b/public/pages/Monitors/containers/Monitors/Monitors.js
@@ -75,7 +75,7 @@ export default class Monitors extends Component {
       ...staticColumns,
       {
         name: 'Actions',
-        width: '75px',
+        width: '60px',
         actions: [
           {
             name: 'Acknowledge',
@@ -86,11 +86,13 @@ export default class Monitors extends Component {
             name: 'Enable',
             description: 'Enable this Monitor',
             onClick: this.onClickEnable,
+            available: (item) => !item.enabled,
           },
           {
             name: 'Disable',
             description: 'Disable this Monitor',
             onClick: this.onClickDisable,
+            available: (item) => item.enabled,
           },
           {
             name: 'Delete',

diff --git a/public/pages/Monitors/containers/Monitors/__snapshots__/Monitors.test.js.snap b/public/pages/Monitors/containers/Monitors/__snapshots__/Monitors.test.js.snap
@@ -40,8 +40,6 @@ exports[`Monitors renders 1`] = `
           "render": [Function],
           "sortable": true,
           "textOnly": true,
-          "truncateText": true,
-          "width": "150px",
         },
         Object {
           "field": "user",
@@ -50,23 +48,20 @@ exports[`Monitors renders 1`] = `
           "sortable": true,
           "textOnly": true,
           "truncateText": true,
-          "width": "100px",
         },
         Object {
           "field": "latestAlert",
           "name": "Latest alert",
           "sortable": false,
           "textOnly": true,
           "truncateText": true,
-          "width": "150px",
         },
         Object {
           "field": "enabled",
           "name": "State",
           "render": [Function],
           "sortable": false,
           "truncateText": false,
-          "width": "100px",
         },
         Object {
           "dataType": "date",
@@ -75,35 +70,30 @@ exports[`Monitors renders 1`] = `
           "render": [Function],
           "sortable": true,
           "truncateText": false,
-          "width": "150px",
         },
         Object {
           "field": "active",
           "name": "Active",
           "sortable": true,
           "truncateText": false,
-          "width": "100px",
         },
         Object {
           "field": "acknowledged",
           "name": "Acknowledged",
           "sortable": true,
           "truncateText": false,
-          "width": "100px",
         },
         Object {
           "field": "errors",
           "name": "Errors",
           "sortable": true,
           "truncateText": false,
-          "width": "100px",
         },
         Object {
           "field": "ignored",
           "name": "Ignored",
           "sortable": true,
           "truncateText": false,
-          "width": "100px",
         },
         Object {
           "actions": Array [
@@ -113,11 +103,13 @@ exports[`Monitors renders 1`] = `
               "onClick": [Function],
             },
             Object {
+              "available": [Function],
               "description": "Enable this Monitor",
               "name": "Enable",
               "onClick": [Function],
             },
             Object {
+              "available": [Function],
               "description": "Disable this Monitor",
               "name": "Disable",
               "onClick": [Function],
@@ -129,7 +121,7 @@ exports[`Monitors renders 1`] = `
             },
           ],
           "name": "Actions",
-          "width": "75px",
+          "width": "60px",
         },
       ]
     }

diff --git a/public/pages/Monitors/containers/Monitors/utils/tableUtils.js b/public/pages/Monitors/containers/Monitors/utils/tableUtils.js
@@ -20,18 +20,19 @@ export const columns = [
     field: 'name',
     name: 'Monitor name',
     sortable: true,
-    truncateText: true,
     textOnly: true,
-    width: '150px',
-    render: (name, item) => <EuiLink href={`${PLUGIN_NAME}#/monitors/${item.id}`}>{name}</EuiLink>,
+    render: (name, item) => (
+      <EuiLink data-test-subj={name} href={`${PLUGIN_NAME}#/monitors/${item.id}`}>
+        {name}
+      </EuiLink>
+    ),
   },
   {
     field: 'user',
     name: 'Last updated by',
     sortable: true,
     truncateText: true,
     textOnly: true,
-    width: '100px',
     /* There are 3 cases:
     1. Monitors created by older versions and never updated.
        These monitors won’t have User details in the monitor object. `monitor.user` will be null.
@@ -47,14 +48,12 @@ export const columns = [
     sortable: false,
     truncateText: true,
     textOnly: true,
-    width: '150px',
   },
   {
     field: 'enabled',
     name: 'State',
     sortable: false,
     truncateText: false,
-    width: '100px',
     render: (enabled) => (enabled ? 'Enabled' : 'Disabled'),
   },
   {
@@ -64,34 +63,29 @@ export const columns = [
     truncateText: false,
     render: renderTime,
     dataType: 'date',
-    width: '150px',
   },
   {
     field: 'active',
     name: 'Active',
     sortable: true,
     truncateText: false,
-    width: '100px',
   },
   {
     field: 'acknowledged',
     name: 'Acknowledged',
     sortable: true,
     truncateText: false,
-    width: '100px',
   },
   {
     field: 'errors',
     name: 'Errors',
     sortable: true,
     truncateText: false,
-    width: '100px',
   },
   {
     field: 'ignored',
     name: 'Ignored',
     sortable: true,
     truncateText: false,
-    width: '100px',
   },
 ];
-Original file line number
+Diff line change
@@ Expand Up @@
                 </span>
               </span>
             </a>
-            <p />
           </div>
         </div>
       </div>
@@ Expand Down Expand Up @@
             <div
               class="euiSpacer euiSpacer--l"
             />
-            <p />
           </div>
         </div>
       </div>
@@ Expand Down @@