Add sample detectors and indices

public/components/ContentPanel/ContentPanel.tsx

@@ -31,6 +31,7 @@ type ContentPanelProps = {
   title: string | React.ReactNode | React.ReactNode[];
   titleSize?: EuiTitleSize;
   subTitle?: React.ReactNode | React.ReactNode[];
+  badgeLabel?: string;
   bodyStyles?: React.CSSProperties;
   panelStyles?: React.CSSProperties;
   horizontalRuleClassName?: string;
@@ -45,6 +46,7 @@ const ContentPanel = (props: ContentPanelProps) => (
   <EuiPanel
     style={{ padding: '20px', ...props.panelStyles }}
     className={props.contentPanelClassName}
+    betaBadgeLabel={props.badgeLabel}
   >
     <EuiFlexGroup
       style={{ padding: '0px', ...props.titleContainerStyles }}

public/components/CreateDetectorButtons/CreateDetectorButtons.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
+import React from 'react';
+import { APP_PATH, PLUGIN_NAME } from '../../utils/constants';
+
+export const CreateDetectorButtons = () => {
+  return (
+    <EuiFlexGroup direction="row" gutterSize="m" justifyContent="center">
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          style={{ width: '200px' }}
+          href={`${PLUGIN_NAME}#${APP_PATH.SAMPLE_DETECTORS}`}
+          data-test-subj="sampleDetectorButton"
+        >
+          Try a sample detector
+        </EuiButton>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          style={{ width: '200px' }}
+          fill
+          href={`${PLUGIN_NAME}#${APP_PATH.CREATE_DETECTOR}`}
+          data-test-subj="createDetectorButton"
+        >
+          Create detector
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

public/pages/Dashboard/Components/EmptyDashboard/EmptyDashboard.tsx

@@ -13,9 +13,9 @@
  * permissions and limitations under the License.
  */
 
-import { EuiButton, EuiEmptyPrompt, EuiLink, EuiIcon } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiLink, EuiIcon } from '@elastic/eui';
 import React, { Component, Fragment } from 'react';
-import { APP_PATH, PLUGIN_NAME } from '../../../../utils/constants';
+import { CreateDetectorButtons } from '../../../../components/CreateDetectorButtons/CreateDetectorButtons';
 
 export class EmptyDashboard extends Component<{}, {}> {
   render() {
@@ -27,7 +27,7 @@ export class EmptyDashboard extends Component<{}, {}> {
             <p>Create detector first to detect anomalies in your data.</p>
             <p>
               Dashboard will generate insights on the anomalies across all of
-              your detectors
+              your detectors.
             </p>
             <p>
               Read about{' '}
@@ -41,15 +41,7 @@ export class EmptyDashboard extends Component<{}, {}> {
             </p>
           </Fragment>
         }
-        actions={
-          <EuiButton
-            fill
-            href={`${PLUGIN_NAME}#${APP_PATH.CREATE_DETECTOR}`}
-            data-test-subj="add_detector"
-          >
-            Create detector
-          </EuiButton>
-        }
+        actions={<CreateDetectorButtons />}
       />
     );
   }

public/pages/Dashboard/Components/EmptyDashboard/__tests__/__snapshots__/EmptyDashboard.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`<EmptyDetector /> spec Empty results renders component with empty messa
         Create detector first to detect anomalies in your data.
       </p>
       <p>
-        Dashboard will generate insights on the anomalies across all of your detectors
+        Dashboard will generate insights on the anomalies across all of your detectors.
       </p>
       <p>
         Read about
@@ -55,21 +55,51 @@ exports[`<EmptyDetector /> spec Empty results renders component with empty messa
   <div
     class="euiSpacer euiSpacer--s"
   />
-  <a
-    class="euiButton euiButton--primary euiButton--fill"
-    data-test-subj="add_detector"
-    href="opendistro-anomaly-detection-kibana#/create-ad/"
-    rel="noreferrer"
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
-    <span
-      class="euiButton__content"
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
     >
-      <span
-        class="euiButton__text"
+      <a
+        class="euiButton euiButton--primary"
+        data-test-subj="sampleDetectorButton"
+        href="opendistro-anomaly-detection-kibana#/sample-detectors"
+        rel="noreferrer"
+        style="width: 200px;"
       >
-        Create detector
-      </span>
-    </span>
-  </a>
+        <span
+          class="euiButton__content"
+        >
+          <span
+            class="euiButton__text"
+          >
+            Try a sample detector
+          </span>
+        </span>
+      </a>
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <a
+        class="euiButton euiButton--primary euiButton--fill"
+        data-test-subj="createDetectorButton"
+        href="opendistro-anomaly-detection-kibana#/create-ad/"
+        rel="noreferrer"
+        style="width: 200px;"
+      >
+        <span
+          class="euiButton__content"
+        >
+          <span
+            class="euiButton__text"
+          >
+            Create detector
+          </span>
+        </span>
+      </a>
+    </div>
+  </div>
 </div>
 `;

public/pages/DetectorResults/containers/AnomalyResults.tsx

@@ -63,6 +63,11 @@ import {
   FEATURE_DATA_CHECK_WINDOW_OFFSET,
 } from '../../utils/anomalyResultUtils';
 import { getDetectorResults } from '../../../redux/reducers/anomalyResults';
+import {
+  detectorIsSample,
+  getAssociatedIndex,
+} from '../../SampleData/utils/helpers';
+import { SampleIndexDetailsCallout } from '../../SampleData/components/SampleIndexDetailsCallout/SampleIndexDetailsCallout';
 
 interface AnomalyResultsProps extends RouteComponentProps {
   detectorId: string;
@@ -112,13 +117,26 @@ export function AnomalyResults(props: AnomalyResultsProps) {
     }
   }, [detector]);
 
+  useEffect(() => {
+    if (detector && detectorIsSample(detector)) {
+      setIsSampleDetector(true);
+      setSampleIndexName(getAssociatedIndex(detector));
+    } else {
+      setIsSampleDetector(false);
+    }
+  }, [detector]);
+
   const monitors = useSelector((state: AppState) => state.alerting.monitors);
   const monitor = get(monitors, `${detectorId}.0`);
 
   const [featureMissingSeverity, setFeatureMissingSeverity] = useState<
     MISSING_FEATURE_DATA_SEVERITY
   >();
 
+  const [isSampleDetector, setIsSampleDetector] = useState<boolean>(false);
+
+  const [sampleIndexName, setSampleIndexName] = useState<string>('');
+
   const [featureNamesAtHighSev, setFeatureNamesAtHighSev] = useState(
     [] as string[]
   );
@@ -367,6 +385,15 @@ export function AnomalyResults(props: AnomalyResultsProps) {
               isDetectorInitializing ||
               isDetectorFailed ? (
                 <Fragment>
+                  {isSampleDetector ? (
+                    <Fragment>
+                      {' '}
+                      <SampleIndexDetailsCallout
+                        indexName={sampleIndexName}
+                      />{' '}
+                      <EuiSpacer size="l" />{' '}
+                    </Fragment>
+                  ) : null}
                   {isDetectorUpdated ||
                   isDetectorMissingData ||
                   isInitializingNormally ||

public/pages/DetectorsList/components/EmptyMessage/EmptyMessage.tsx

@@ -15,7 +15,7 @@
 
 import { EuiButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 import React from 'react';
-import { APP_PATH, PLUGIN_NAME } from '../../../../utils/constants';
+import { CreateDetectorButtons } from '../../../../components/CreateDetectorButtons/CreateDetectorButtons';
 
 const filterText =
   'There are no detectors matching your applied filters. Reset your filters to view all detectors.';
@@ -45,13 +45,7 @@ export const EmptyDetectorMessage = (props: EmptyDetectorProps) => (
           Reset filters
         </EuiButton>
       ) : (
-        <EuiButton
-          fill
-          href={`${PLUGIN_NAME}#${APP_PATH.CREATE_DETECTOR}`}
-          data-test-subj="createDetectorButton"
-        >
-          Create detector
-        </EuiButton>
+        <CreateDetectorButtons />
       )
     }
   />

public/pages/DetectorsList/components/EmptyMessage/__tests__/__snapshots__/EmptyMessage.test.tsx.snap

@@ -26,22 +26,52 @@ exports[`<EmptyDetectorMessage /> spec Empty results renders component with empt
   <div
     class="euiSpacer euiSpacer--s"
   />
-  <a
-    class="euiButton euiButton--primary euiButton--fill"
-    data-test-subj="createDetectorButton"
-    href="opendistro-anomaly-detection-kibana#/create-ad/"
-    rel="noreferrer"
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
-    <span
-      class="euiButton__content"
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
     >
-      <span
-        class="euiButton__text"
+      <a
+        class="euiButton euiButton--primary"
+        data-test-subj="sampleDetectorButton"
+        href="opendistro-anomaly-detection-kibana#/sample-detectors"
+        rel="noreferrer"
+        style="width: 200px;"
       >
-        Create detector
-      </span>
-    </span>
-  </a>
+        <span
+          class="euiButton__content"
+        >
+          <span
+            class="euiButton__text"
+          >
+            Try a sample detector
+          </span>
+        </span>
+      </a>
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <a
+        class="euiButton euiButton--primary euiButton--fill"
+        data-test-subj="createDetectorButton"
+        href="opendistro-anomaly-detection-kibana#/create-ad/"
+        rel="noreferrer"
+        style="width: 200px;"
+      >
+        <span
+          class="euiButton__content"
+        >
+          <span
+            class="euiButton__text"
+          >
+            Create detector
+          </span>
+        </span>
+      </a>
+    </div>
+  </div>
 </div>
 `;