Feature: AD: Add delete batch action

public/pages/DetectorsList/Components/ListActions/ListActions.tsx → public/pages/DetectorsList/components/ListActions/ListActions.tsx

@@ -22,13 +22,11 @@ import {
   EuiFlexItem,
   EuiPopover,
 } from '@elastic/eui';
-import { DetectorListItem } from '../../../../models/interfaces';
 
 interface ListActionsProps {
   onStartDetectors(): void;
   onStopDetectors(): void;
-  //onDeleteDetectors(): void;
-  detectors: DetectorListItem[];
+  onDeleteDetectors(): void;
   isActionsDisabled: boolean;
 }
 
@@ -72,16 +70,13 @@ export const ListActions = (props: ListActionsProps) => {
               Stop
             </EuiContextMenuItem>
 
-            {
-              // TODO: will add back in later PR
-            }
-            {/* <EuiContextMenuItem
+            <EuiContextMenuItem
               key="deleteDetectors"
               data-test-subj="deleteDetectors"
               onClick={props.onDeleteDetectors}
             >
               Delete
-            </EuiContextMenuItem> */}
+            </EuiContextMenuItem>
           </EuiContextMenuPanel>
         </EuiPopover>
       </EuiFlexItem>

public/pages/DetectorsList/containers/ConfirmActionModals/ConfirmDeleteDetectorsModal.tsx

@@ -0,0 +1,145 @@
+/*
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiOverlayMask,
+  EuiCallOut,
+  EuiText,
+  EuiFieldText,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalFooter,
+  EuiModalBody,
+  EuiModalHeaderTitle,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
+// @ts-ignore
+import { toastNotifications } from 'ui/notify';
+//@ts-ignore
+import chrome from 'ui/chrome';
+import { Monitor } from '../../../../models/interfaces';
+import { DetectorListItem } from '../../../../models/interfaces';
+import { Listener } from '../../../../utils/utils';
+import { EuiSpacer } from '@elastic/eui';
+import {
+  getNamesAndMonitorsGrid,
+  containsEnabledDetectors,
+} from './utils/helpers';
+
+interface ConfirmDeleteDetectorsModalProps {
+  detectors: DetectorListItem[];
+  monitors: { [key: string]: Monitor };
+  hideModal(): void;
+  onStopDetectors(listener?: Listener): void;
+  onDeleteDetectors(): void;
+  isListLoading: boolean;
+}
+
+export const ConfirmDeleteDetectorsModal = (
+  props: ConfirmDeleteDetectorsModalProps
+) => {
+  const containsEnabled = containsEnabledDetectors(props.detectors);
+  const [deleteTyped, setDeleteTyped] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  return (
+    <EuiOverlayMask>
+      <EuiModal onClose={props.hideModal}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>
+            {'Are you sure you want to delete the selected detectors?'}&nbsp;
+          </EuiModalHeaderTitle>
+        </EuiModalHeader>
+        <EuiModalBody>
+          {containsEnabled ? (
+            <EuiCallOut
+              title="Some of the selected detectors are currently running"
+              color="warning"
+              iconType="alert"
+            ></EuiCallOut>
+          ) : null}
+          {containsEnabled ? <EuiSpacer size="s" /> : null}
+          <EuiCallOut
+            title="The following detectors and feature configurations will be permanently removed. Any associated monitors will
+              not be able to receive any anomaly results to generate alerts"
+            color="warning"
+            iconType="alert"
+          ></EuiCallOut>
+          <EuiSpacer size="s" />
+          <EuiText>
+            <p>
+              To confirm deletion, type <i>delete</i> in the field.
+            </p>
+          </EuiText>
+          <EuiSpacer size="s" />
+          <EuiFieldText
+            fullWidth={true}
+            placeholder="delete"
+            onChange={e => {
+              if (e.target.value === 'delete') {
+                setDeleteTyped(true);
+              } else {
+                setDeleteTyped(false);
+              }
+            }}
+          />
+          <EuiSpacer size="m" />
+          <div>
+            {props.isListLoading ? (
+              <EuiLoadingSpinner size="xl" />
+            ) : (
+              getNamesAndMonitorsGrid(props.detectors, props.monitors)
+            )}
+          </div>
+        </EuiModalBody>
+        <EuiModalFooter>
+          <EuiButtonEmpty
+            data-test-subj="cancelButton"
+            onClick={props.hideModal}
+          >
+            Cancel
+          </EuiButtonEmpty>
+          <EuiButton
+            data-test-subj="confirmButton"
+            color="danger"
+            disabled={!deleteTyped}
+            fill
+            isLoading={isLoading || props.isListLoading}
+            onClick={async () => {
+              setIsLoading(true);
+              if (containsEnabled) {
+                const listener: Listener = {
+                  onSuccess: () => {
+                    props.onDeleteDetectors();
+                    props.hideModal();
+                  },
+                  onException: props.hideModal,
+                };
+                props.onStopDetectors(listener);
+              } else {
+                props.onDeleteDetectors();
+                props.hideModal();
+              }
+            }}
+          >
+            {'Delete detectors'}
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    </EuiOverlayMask>
+  );
+};

public/pages/DetectorsList/containers/ConfirmActionModals/ConfirmStartDetectorsModal.tsx

@@ -0,0 +1,95 @@
+/*
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiOverlayMask,
+  EuiCallOut,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalFooter,
+  EuiModalBody,
+  EuiModalHeaderTitle,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
+// @ts-ignore
+import { toastNotifications } from 'ui/notify';
+//@ts-ignore
+import chrome from 'ui/chrome';
+import { DetectorListItem } from '../../../../models/interfaces';
+import { EuiSpacer } from '@elastic/eui';
+import { getNamesGrid } from './utils/helpers';
+
+interface ConfirmStartDetectorsModalProps {
+  detectors: DetectorListItem[];
+  hideModal(): void;
+  onStartDetectors(): void;
+  isListLoading: boolean;
+}
+
+export const ConfirmStartDetectorsModal = (
+  props: ConfirmStartDetectorsModalProps
+) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  return (
+    <EuiOverlayMask>
+      <EuiModal onClose={props.hideModal}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>
+            {'Are you sure you want to start the selected detectors?'}&nbsp;
+          </EuiModalHeaderTitle>
+        </EuiModalHeader>
+        <EuiModalBody>
+          <EuiCallOut
+            title="The following detectors will begin initializing:"
+            color="success"
+            iconType="play"
+          ></EuiCallOut>
+          <EuiSpacer size="m" />
+          <div>
+            {props.isListLoading ? (
+              <EuiLoadingSpinner size="xl" />
+            ) : (
+              getNamesGrid(props.detectors)
+            )}
+          </div>
+        </EuiModalBody>
+        <EuiModalFooter>
+          <EuiButtonEmpty
+            data-test-subj="cancelButton"
+            onClick={props.hideModal}
+          >
+            Cancel
+          </EuiButtonEmpty>
+          <EuiButton
+            data-test-subj="confirmButton"
+            color="primary"
+            fill
+            isLoading={isLoading || props.isListLoading}
+            onClick={async () => {
+              setIsLoading(true);
+              props.onStartDetectors();
+              props.hideModal();
+            }}
+          >
+            {'Start detectors'}
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    </EuiOverlayMask>
+  );
+};

public/pages/DetectorsList/containers/ConfirmActionModals/ConfirmStopDetectorsModal.tsx

@@ -0,0 +1,99 @@
+/*
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiOverlayMask,
+  EuiCallOut,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalFooter,
+  EuiModalBody,
+  EuiModalHeaderTitle,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
+// @ts-ignore
+import { toastNotifications } from 'ui/notify';
+//@ts-ignore
+import chrome from 'ui/chrome';
+import { Monitor } from '../../../../models/interfaces';
+import { DetectorListItem } from '../../../../models/interfaces';
+import { Listener } from '../../../../utils/utils';
+import { EuiSpacer } from '@elastic/eui';
+import { getNamesAndMonitorsGrid } from './utils/helpers';
+
+interface ConfirmStopDetectorsModalProps {
+  detectors: DetectorListItem[];
+  monitors: { [key: string]: Monitor };
+  hideModal(): void;
+  onStopDetectors(listener?: Listener): void;
+  isListLoading: boolean;
+}
+
+export const ConfirmStopDetectorsModal = (
+  props: ConfirmStopDetectorsModalProps
+) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  return (
+    <EuiOverlayMask>
+      <EuiModal onClose={props.hideModal}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>
+            {'Are you sure you want to stop the selected detectors?'}&nbsp;
+          </EuiModalHeaderTitle>
+        </EuiModalHeader>
+        <EuiModalBody>
+          <EuiCallOut
+            title="The following detectors will be stopped. Any associated monitors will
+           not be able to receive any anomaly results to generate alerts:"
+            color="warning"
+            iconType="alert"
+          ></EuiCallOut>
+          <EuiSpacer size="m" />
+          <div>
+            {props.isListLoading ? (
+              <EuiLoadingSpinner size="xl" />
+            ) : (
+              getNamesAndMonitorsGrid(props.detectors, props.monitors)
+            )}
+          </div>
+        </EuiModalBody>
+        <EuiModalFooter>
+          <EuiButtonEmpty
+            data-test-subj="cancelButton"
+            onClick={props.hideModal}
+          >
+            Cancel
+          </EuiButtonEmpty>
+          <EuiButton
+            data-test-subj="confirmButton"
+            color="primary"
+            fill
+            isLoading={isLoading || props.isListLoading}
+            onClick={async () => {
+              setIsLoading(true);
+              props.onStopDetectors();
+              props.hideModal();
+            }}
+          >
+            {'Stop detectors'}
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    </EuiOverlayMask>
+  );
+};