[PLAT-2366][Platform][UI] Suspend alerts during maintenance window

Summary:
Implemented Maintenance Windows

[[ https://www.figma.com/file/MQkzMPFEXGKrAP1BYT2oco/Alerts?node-id=312%3A595 | UI Link ]]

Test Plan:
Tested Manually.

{F22099}

{F22100}

{F22101}

{F22102}

{F22103}

Reviewers: ssutar, lsangappa, cpadinjareveettil, asathyan

Reviewed By: lsangappa, cpadinjareveettil, asathyan

Subscribers: jenkins-bot, ui

Differential Revision: https://phabricator.dev.yugabyte.com/D14957

managed/ui/src/components/alerts/AlertConfiguration/AlertConfiguration.js

@@ -16,6 +16,7 @@ import { AlertsList } from './AlertsList';
 import CreateAlert from './CreateAlert';
 import { getPromiseState } from '../../../utils/PromiseUtils';
 import { AlertDestinationChannels } from './AlertDestinationChannels';
+import { MaintenanceWindow } from '../MaintenanceWindow';
 
 export const AlertConfiguration = (props) => {
   const [listView, setListView] = useState(false);
@@ -156,6 +157,17 @@ export const AlertConfiguration = (props) => {
             {...props}
           />
         </Tab>
+        <Tab
+          eventKey="maintenanceWindow"
+          title={
+            <span>
+              <i className="fa fa-cog tab-logo" aria-hidden="true"></i> Maintenance Windows
+            </span>
+          }
+          unmountOnExit
+        >
+          <MaintenanceWindow />
+        </Tab>
       </YBTabsPanel>
     </div>
   );

managed/ui/src/components/alerts/MaintenanceWindow/CautionIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const CautionIcon = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 0C12.6522 0 15.1957 1.05357 17.0711 2.92893C18.9464 4.8043 20 7.34784 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 7.61305 18.0518 5.32387 16.364 3.63604C14.6761 1.94821 12.3869 1 10 1ZM9 6C9 5.44772 9.44771 5 10 5C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7C9.44771 7 9 6.55228 9 6ZM9 9C9 8.44772 9.44771 8 10 8C10.5523 8 11 8.44772 11 9V14C11 14.5523 10.5523 15 10 15C9.44771 15 9 14.5523 9 14V9Z"
+        fill="#333333"
+      />
+    </svg>
+  );
+};
+
+export default CautionIcon;

managed/ui/src/components/alerts/MaintenanceWindow/CreateMaintenanceWindow.scss

@@ -0,0 +1,70 @@
+.create-maintenance-window {
+  div.rw-datetime-picker {
+    margin-left: 0 !important;
+  }
+
+  div.rw-calendar-header {
+    display: flex;
+    align-items: center;
+
+    button.rw-calendar-btn-right,
+    button.rw-calendar-btn-left:hover {
+      background: #fff !important;
+      color: #000 !important;
+    }
+  }
+
+  .time-label {
+    margin-bottom: 5px;
+  }
+
+  .field-error {
+    color: #a94442;
+  }
+
+  .row {
+    margin-bottom: 16px;
+  }
+
+  label.btn-group-radio,
+  .form-item-custom-label,
+  .form-item-label {
+    font-weight: 100 !important;
+  }
+
+  .alert-notice {
+    padding: 8px;
+    border: 1px solid #e5e5e6;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    margin-top: 5px;
+    color: #333333;
+
+    .icon {
+      margin-right: 8px;
+      margin-top: 5px;
+    }
+  }
+
+  .action-btns-margin {
+    margin-bottom: 71px;
+  }
+
+  .maintenance-action-button-container {
+    position: absolute !important;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    min-height: 30px;
+    padding: 14px 12px;
+    border-top: 1px solid #ececea;
+    background-color: #f6f6f5;
+    margin-bottom: 0 !important;
+
+    .btn {
+      margin: 0 6px;
+      min-width: 120px !important;
+    }
+  }
+}