[BACKPORT 2024.1][PLAT-13857][UI] Change snooze alert behaviour to us…

…e maintenance windows

Summary: Backport of this [[ https://phorge.dev.yugabyte.com/D35081 | diff ]]

Test Plan: Tested manually

Reviewers: lsangappa

Reviewed By: lsangappa

Subscribers: yugaware

Tags: #jenkins-ready

Differential Revision: https://phorge.dev.yugabyte.com/D35158

managed/ui/src/actions/universe.js

@@ -120,9 +120,6 @@ export const GET_HEALTH_CHECK_RESPONSE = 'GET_HEALTH_CHECK_RESPONSE';
 export const SET_ENCRYPTION_KEY = 'SET_ENCRYPTION_KEY';
 export const SET_ENCRYPTION_KEY_RESPONSE = 'SET_ENCRYPTION_KEY_RESPONSE';
 
-export const SET_ALERTS_CONFIG = 'SET_ALERTS_CONFIG';
-export const SET_ALERTS_CONFIG_RESPONSE = 'SET_ALERTS_CONFIG_RESPONSE';
-
 export const UPDATE_BACKUP_STATE = 'UPDATE_BACKUP_STATE';
 export const UPDATE_BACKUP_STATE_RESPONSE = 'UPDATE_BACKUP_STATE_RESPONSE';
 
@@ -706,23 +703,6 @@ export function setEncryptionKeyResponse(response) {
   };
 }
 
-export function setAlertsConfig(universeUUID, data) {
-  const customerUUID = localStorage.getItem('customerId');
-  const endpoint = `${ROOT_URL}/customers/${customerUUID}/universes/${universeUUID}/config_alerts`;
-  const request = axios.post(endpoint, data);
-  return {
-    type: SET_ALERTS_CONFIG,
-    payload: request
-  };
-}
-
-export function setAlertsConfigResponse(response) {
-  return {
-    type: SET_ALERTS_CONFIG_RESPONSE,
-    payload: response
-  };
-}
-
 export function updateBackupState(universeUUID, flag) {
   const customerUUID = localStorage.getItem('customerId');
   const endpoint = `${ROOT_URL}/customers/${customerUUID}/universes/${universeUUID}/update_backup_state?markActive=${flag}`;

managed/ui/src/components/universes/UniverseAction/UniverseAction.js

@@ -2,164 +2,40 @@
 
 import { Component } from 'react';
 import { connect } from 'react-redux';
-import moment from 'moment';
 
 import { YBButton } from '../../common/forms/fields';
-import { getPromiseState } from '../../../utils/PromiseUtils';
-import { AlertSnoozeModal } from '../../universes';
-
-import {
-  setAlertsConfig,
-  setAlertsConfigResponse,
-  fetchUniverseInfo,
-  fetchUniverseInfoResponse
-} from '../../../actions/universe';
+import YBInfoTip from '../../common/descriptors/YBInfoTip';
 import { RbacValidator } from '../../../redesign/features/rbac/common/RbacApiPermValidator';
 import { ApiPermissionMap } from '../../../redesign/features/rbac/ApiAndUserPermMapping';
 
 class UniverseAction extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showModal: false
-    };
-  }
-  openModal = () => {
-    this.setState((prevState, props) => {
-      return {
-        showModal: true
-      };
-    });
-  };
-  closeModal = () => {
-    this.setState((prevState, props) => {
-      return {
-        showModal: false
-      };
-    });
-  };
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (
-      getPromiseState(nextProps.backupState).isSuccess() ||
-      getPromiseState(nextProps.alertsConfig).isSuccess()
-    ) {
-      this.closeModal();
-      this.props.fetchCurrentUniverse(nextProps.universe.universeUUID);
-    }
-  }
-
-  performAction = (values) => {
-    const { universe, actionType, setAlertsConfig } = this.props;
-    switch (actionType) {
-      case 'alert-config':
-        setAlertsConfig(universe.universeUUID, values);
-        break;
-      default:
-        break;
-    }
-  };
-
   render() {
-    const {
-      btnClass,
-      disabled,
-      actionType,
-      universe,
-      universe: { universeConfig }
-    } = this.props;
-
-    const universePaused = universe?.universeDetails?.universePaused;
-    let btnLabel = null;
-    let btnIcon = null;
-    let modalForm = null;
-    switch (actionType) {
-      case 'alert-config': {
-        let disablePeriodSecs = null;
-        let alertsSnoozed = false;
-        if (universeConfig) {
-          // If the disableAlertsUntilSecs is null or it is 0, it means the alerts is not snoozed.
-          if (
-            !universeConfig.disableAlertsUntilSecs ||
-            universeConfig.disableAlertsUntilSecs === '0'
-          ) {
-            disablePeriodSecs = 0;
-          } else {
-            // If it has a value, we need to check if the snooze until time has elasped
-            // if so then the universe alerts aren't snoozed.
-            const disabledUntil = moment.unix(universeConfig.disableAlertsUntilSecs);
-            if (disabledUntil.isValid()) {
-              disablePeriodSecs = universeConfig.disableAlertsUntilSecs - moment().unix();
-              alertsSnoozed = disablePeriodSecs > 0;
-            } else {
-              // If the disable alert until seconds is a invalid timestamp,
-              // it means the alerts was snoozed indefinitely.
-              alertsSnoozed = true;
-            }
-          }
-        }
-        btnLabel = alertsSnoozed ? 'Enable Alerts' : 'Snooze Alerts';
-        btnIcon = alertsSnoozed ? 'fa fa-play' : 'fa fa-pause';
-        modalForm = (
-          <AlertSnoozeModal
-            {...this.props}
-            visible={this.state.showModal}
-            onHide={this.closeModal}
-            alertsSnoozed={alertsSnoozed}
-            disablePeriodSecs={disablePeriodSecs}
-            onFormSubmit={this.performAction}
-          />
-        );
-        break;
-      }
-      default:
-        break;
-    }
     return (
       <div>
-        {!universePaused && (
+        {(
           <RbacValidator
             accessRequiredOn={{
-              onResource: universe.universeUUID,
-              ...ApiPermissionMap.MODIFY_UNIVERSE
+              ...ApiPermissionMap.CREATE_MAINTENANCE_WINDOW
             }}
             isControl
           >
             <YBButton
-              btnText={btnLabel}
-              btnIcon={btnIcon}
-              btnClass={`btn ${btnClass}`}
-              disabled={disabled}
-              onClick={disabled ? null : this.openModal}
+              btnText="Create Maintenance Window"
+              btnIcon="fa fa-clock-o"
+              btnClass={`btn btn-orange`}
+              onClick={() => window.open(`/admin/alertConfig/maintenanceWindow`, '_blank')}
+              style={{ marginRight: '5px' }}
             />
+            <YBInfoTip
+                title="Create Maintenance Window"
+                content="Create a maintenance window to snooze alerts on your universe."
+                placement="left"
+              />
           </RbacValidator>
         )}
-        {modalForm}
       </div>
     );
   }
 }
 
-const mapDispatchToProps = (dispatch) => {
-  return {
-    setAlertsConfig: (uuid, payload) => {
-      dispatch(setAlertsConfig(uuid, payload)).then((response) => {
-        dispatch(setAlertsConfigResponse(response.payload));
-      });
-    },
-
-    fetchCurrentUniverse: (universeUUID) => {
-      dispatch(fetchUniverseInfo(universeUUID)).then((response) => {
-        dispatch(fetchUniverseInfoResponse(response.payload));
-      });
-    }
-  };
-};
-
-function mapStateToProps(state, ownProps) {
-  return {
-    alertsConfig: state.universe.alertsConfig,
-    backupState: state.universe.backupState
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(UniverseAction);
+export default UniverseAction;

managed/ui/src/components/universes/UniverseDetail/compounds/UniverseHealthCheckList.js

@@ -11,7 +11,7 @@ import { YBPanelItem } from '../../../panels';
 import { isNonEmptyArray, isEmptyArray, isNonEmptyString } from '../../../../utils/ObjectUtils';
 import { getPromiseState } from '../../../../utils/PromiseUtils';
 import { UniverseAction } from '../../../universes';
-import { isDisabled, isNotHidden } from '../../../../utils/LayoutUtils';
+import { isNotHidden } from '../../../../utils/LayoutUtils';
 import { getPrimaryCluster, isKubernetesUniverse } from '../../../../utils/UniverseUtils';
 import Wrench from '../../../../redesign/assets/wrench.svg';
 
@@ -64,7 +64,6 @@ export const UniverseHealthCheckList = (props) => {
     ));
   }
 
-  const actions_disabled = isDisabled(currentCustomer.data.features, 'universes.actions');
 
   return (
     <YBPanelItem
@@ -82,8 +81,6 @@ export const UniverseHealthCheckList = (props) => {
                     className="table-action"
                     universe={currentUniverse.data}
                     actionType="alert-config"
-                    btnClass={'btn-orange'}
-                    disabled={actions_disabled}
                   />
                 </div>
               </div>

managed/ui/src/components/universes/index.js

@@ -28,6 +28,5 @@ export { default as UniverseOverviewContainerNew } from './UniverseOverview/Univ
 export { default as EncryptionKeyModal } from './SecurityModal/EncryptionKeyModal';
 export { default as EncryptionKeyModalContainer } from './SecurityModal/EncryptionKeyModalContainer';
 export { default as UniverseAction } from './UniverseAction/UniverseAction';
-export { default as AlertSnoozeModal } from './UniverseAction/AlertSnoozeModal';
 export { ToggleBackupState } from './DisableBackup/DisableBackupState';
 export { default as ToggleBackupStateContainer } from './DisableBackup/DisableBackupStateContainer';

managed/ui/src/reducers/reducer_universe.js

@@ -63,8 +63,6 @@ import {
   DELETE_READ_REPLICA_RESPONSE,
   UPDATE_BACKUP_STATE,
   UPDATE_BACKUP_STATE_RESPONSE,
-  SET_ALERTS_CONFIG,
-  SET_ALERTS_CONFIG_RESPONSE,
   FETCH_SUPPORTED_RELEASES,
   FETCH_SUPPORTED_RELEASES_RESPONSE
 } from '../actions/universe';
@@ -307,10 +305,6 @@ export default function (state = INITIAL_STATE, action) {
     case GET_HEALTH_CHECK_RESPONSE:
       return setPromiseResponse(state, 'healthCheck', action);
 
-    case SET_ALERTS_CONFIG:
-      return { ...state, alertsConfig: getInitialState([]) };
-    case SET_ALERTS_CONFIG_RESPONSE:
-      return setPromiseResponse(state, 'alertsConfig', action);
     case UPDATE_BACKUP_STATE:
       return { ...state, backupState: getInitialState([]) };
     case UPDATE_BACKUP_STATE_RESPONSE: