// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders component 1`] = `
<div>
  <header
    class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
  >
    <div
      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
    >
      <div
        class="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <h1
          class="euiTitle euiTitle--large"
          data-test-subj="overviewTitle"
        >
          Anomaly detection
        </h1>
      </div>
      <div
        class="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <a
          class="euiButton euiButton--primary euiButton--fill"
          data-test-subj="add_detector"
          href="anomaly-detection-dashboards#/create-detector-steps"
          rel="noreferrer"
        >
          <span
            class="euiButtonContent euiButton__content"
          >
            <span
              class="euiButton__text"
            >
              Create detector
            </span>
          </span>
        </a>
      </div>
    </div>
  </header>
  <div
    class="euiText euiText--medium"
  >
    The anomaly detection plugin automatically detects anomalies in your data in near real-time using the Random Cut Forest (RCF) algorithm.
     
    <a
      class="euiLink euiLink--primary"
      href="https://opensearch.org/docs/monitoring-plugins/ad"
      rel="noopener noreferrer"
      target="_blank"
    >
      Learn more
      <svg
        aria-hidden="true"
        aria-label="External link"
        class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
        focusable="false"
        height="16"
        role="img"
        viewBox="0 0 16 16"
        width="16"
        xmlns="http://www.w3.org/2000/svg"
      />
      <span
        class="euiScreenReaderOnly"
      >
        (opens in a new tab or window)
      </span>
    </a>
  </div>
  <div
    class="euiSpacer euiSpacer--xl"
  />
  <div
    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
    style="padding: 20px;"
  >
    <div
      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
      style="padding: 0px;"
    >
      <div
        class="euiFlexItem"
      >
        <h3
          class="euiTitle euiTitle--small"
          data-test-subj="contentPanelTitle"
        >
          How it works
        </h3>
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem content-panel-subTitle"
            style="line-height: normal; max-width: 75%;"
          />
        </div>
      </div>
      <div
        class="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          />
        </div>
      </div>
    </div>
    <div>
      <hr
        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
      />
      <div
        style="padding: 10px 0px;"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-bottom: 5px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 20px;"
                >
                  1. Define your detector
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-top: 0px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 14px;"
                >
                  Select a data source, set the detector interval, and specify a window delay.
                   
                  <a
                    class="euiLink euiLink--primary"
                    href="https://opensearch.org/docs/monitoring-plugins/ad"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                    <svg
                      aria-hidden="true"
                      aria-label="External link"
                      class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
                      focusable="false"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    />
                    <span
                      class="euiScreenReaderOnly"
                    >
                      (opens in a new tab or window)
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <div
              class="create-workflow-step-separator"
            />
          </div>
          <div
            class="euiFlexItem"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-bottom: 5px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 20px;"
                >
                  2. Configure your detector
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-top: 0px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 14px;"
                >
                  Choose the fields in your index that you want to check for anomalies. You may also set a category field to see a granular view of anomalies within each entity.
                   
                  <a
                    class="euiLink euiLink--primary"
                    href="https://opensearch.org/docs/monitoring-plugins/ad"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                    <svg
                      aria-hidden="true"
                      aria-label="External link"
                      class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
                      focusable="false"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    />
                    <span
                      class="euiScreenReaderOnly"
                    >
                      (opens in a new tab or window)
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <div
              class="create-workflow-step-separator"
            />
          </div>
          <div
            class="euiFlexItem"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-bottom: 5px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 20px;"
                >
                  3. Preview your detector
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-top: 0px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 14px;"
                >
                  After configuring your model, preview your results with sample data to fine-tune your settings.
                   
                  <a
                    class="euiLink euiLink--primary"
                    href="https://opensearch.org/docs/monitoring-plugins/ad"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                    <svg
                      aria-hidden="true"
                      aria-label="External link"
                      class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
                      focusable="false"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    />
                    <span
                      class="euiScreenReaderOnly"
                    >
                      (opens in a new tab or window)
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <div
              class="create-workflow-step-separator"
            />
          </div>
          <div
            class="euiFlexItem"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-bottom: 5px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 20px;"
                >
                  4. View results
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-top: 0px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 14px;"
                >
                  Run your detector to observe results in real-time. You can also enable historical analysis to view anomalies in your data history. 
                   
                  <a
                    class="euiLink euiLink--primary"
                    href="https://opensearch.org/docs/monitoring-plugins/ad"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                    <svg
                      aria-hidden="true"
                      aria-label="External link"
                      class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
                      focusable="false"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    />
                    <span
                      class="euiScreenReaderOnly"
                    >
                      (opens in a new tab or window)
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="euiSpacer euiSpacer--xl"
  />
  <div
    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
    style="padding: 20px;"
  >
    <div
      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
      style="padding: 0px;"
    >
      <div
        class="euiFlexItem"
      >
        <h3
          class="euiTitle euiTitle--small"
          data-test-subj="contentPanelTitle"
        >
          Start with a sample detector to learn about anomaly detection
        </h3>
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem content-panel-subTitle"
            style="line-height: normal; max-width: 75%;"
          >
            <div
              class="euiText euiText--medium"
              style="margin-top: 5px;"
            >
              New to anomaly detection? Get a better understanding of how it works by creating a detector with one of the sample datasets.
            </div>
          </div>
        </div>
      </div>
      <div
        class="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          />
        </div>
      </div>
    </div>
    <div>
      <hr
        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall hide-horizontal-rule"
      />
      <div
        style="padding: 10px 0px;"
      >
        <div
          class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--thirds euiFlexGrid--responsive"
        >
          <div
            class="euiFlexItem"
          >
            <div
              style="height: auto;"
            >
              <div
                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
              >
                <div
                  class="euiCard__content"
                >
                  <span
                    class="euiTitle euiTitle--small euiCard__title"
                    id="random_html_idTitle"
                  >
                    <div
                      style="display: flex; flex-direction: row; align-content: flexStart;"
                    >
                      <svg
                        aria-hidden="true"
                        class="euiIcon euiIcon--large euiIcon-isLoading"
                        focusable="false"
                        height="16"
                        role="img"
                        viewBox="0 0 16 16"
                        width="16"
                        xmlns="http://www.w3.org/2000/svg"
                      />
                      <h2
                        class="euiTitle euiTitle--small"
                        style="margin-left: 12px; margin-top: -3px;"
                      >
                        Monitor HTTP responses
                      </h2>
                      <button
                        class="euiLink euiLink--primary"
                        data-test-subj="flyoutInfoButton"
                        style="margin-left: 12px;"
                        type="button"
                      >
                        Info
                      </button>
                    </div>
                  </span>
                  <div
                    class="euiCard__children"
                  >
                    <div
                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                    >
                      <hr
                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
                      />
                      <div
                        class="euiFlexItem euiFlexItem--flexGrowZero"
                        style="height: 70px;"
                      >
                        <p
                          style="text-align: left; line-height: 1.4; max-height: 4.2px;"
                        >
                          Detect high numbers of error response codes in an index containing HTTP response data.
                        </p>
                      </div>
                      <div
                        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
                        style="height: 100px; margin-top: 0px; margin-bottom: 0px;"
                      >
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        >
                          <button
                            class="euiButton euiButton--primary"
                            data-test-subj="createHttpSampleDetectorButton"
                            style="width: 300px;"
                            type="button"
                          >
                            <span
                              class="euiButtonContent euiButton__content"
                            >
                              <span
                                class="euiButton__text"
                              >
                                Create HTTP response detector
                              </span>
                            </span>
                          </button>
                        </div>
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiFlexItem"
          >
            <div
              style="height: auto;"
            >
              <div
                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
              >
                <div
                  class="euiCard__content"
                >
                  <span
                    class="euiTitle euiTitle--small euiCard__title"
                    id="random_html_idTitle"
                  >
                    <div
                      style="display: flex; flex-direction: row; align-content: flexStart;"
                    >
                      <svg
                        aria-hidden="true"
                        class="euiIcon euiIcon--large euiIcon-isLoading"
                        focusable="false"
                        height="16"
                        role="img"
                        viewBox="0 0 16 16"
                        width="16"
                        xmlns="http://www.w3.org/2000/svg"
                      />
                      <h2
                        class="euiTitle euiTitle--small"
                        style="margin-left: 12px; margin-top: -3px;"
                      >
                        Monitor eCommerce orders
                      </h2>
                      <button
                        class="euiLink euiLink--primary"
                        data-test-subj="flyoutInfoButton"
                        style="margin-left: 12px;"
                        type="button"
                      >
                        Info
                      </button>
                    </div>
                  </span>
                  <div
                    class="euiCard__children"
                  >
                    <div
                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                    >
                      <hr
                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
                      />
                      <div
                        class="euiFlexItem euiFlexItem--flexGrowZero"
                        style="height: 70px;"
                      >
                        <p
                          style="text-align: left; line-height: 1.4; max-height: 4.2px;"
                        >
                          Detect any unusual increase or decrease of orders in an index containing online order data.
                        </p>
                      </div>
                      <div
                        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
                        style="height: 100px; margin-top: 0px; margin-bottom: 0px;"
                      >
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        >
                          <button
                            class="euiButton euiButton--primary"
                            data-test-subj="createECommerceSampleDetectorButton"
                            style="width: 300px;"
                            type="button"
                          >
                            <span
                              class="euiButtonContent euiButton__content"
                            >
                              <span
                                class="euiButton__text"
                              >
                                Create eCommerce orders detector
                              </span>
                            </span>
                          </button>
                        </div>
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiFlexItem"
          >
            <div
              style="height: auto;"
            >
              <div
                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
              >
                <div
                  class="euiCard__content"
                >
                  <span
                    class="euiTitle euiTitle--small euiCard__title"
                    id="random_html_idTitle"
                  >
                    <div
                      style="display: flex; flex-direction: row; align-content: flexStart;"
                    >
                      <svg
                        aria-hidden="true"
                        class="euiIcon euiIcon--large euiIcon-isLoading"
                        focusable="false"
                        height="16"
                        role="img"
                        viewBox="0 0 16 16"
                        width="16"
                        xmlns="http://www.w3.org/2000/svg"
                      />
                      <h2
                        class="euiTitle euiTitle--small"
                        style="margin-left: 12px; margin-top: -3px;"
                      >
                        Monitor host health
                      </h2>
                      <button
                        class="euiLink euiLink--primary"
                        data-test-subj="flyoutInfoButton"
                        style="margin-left: 12px;"
                        type="button"
                      >
                        Info
                      </button>
                    </div>
                  </span>
                  <div
                    class="euiCard__children"
                  >
                    <div
                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                    >
                      <hr
                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
                      />
                      <div
                        class="euiFlexItem euiFlexItem--flexGrowZero"
                        style="height: 70px;"
                      >
                        <p
                          style="text-align: left; line-height: 1.4; max-height: 4.2px;"
                        >
                          Detect increases in CPU and memory utilization in an index containing various health metrics from a host.
                        </p>
                      </div>
                      <div
                        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
                        style="height: 100px; margin-top: 0px; margin-bottom: 0px;"
                      >
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        >
                          <button
                            class="euiButton euiButton--primary"
                            data-test-subj="createHostHealthSampleDetectorButton"
                            style="width: 300px;"
                            type="button"
                          >
                            <span
                              class="euiButtonContent euiButton__content"
                            >
                              <span
                                class="euiButton__text"
                              >
                                Create health monitor detector
                              </span>
                            </span>
                          </button>
                        </div>
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--m"
          />
        </div>
      </div>
    </div>
  </div>
   
</div>
`;

exports[`<AnomalyDetectionOverview /> spec Some detectors created renders component with non-sample detector 1`] = `
<div>
  <header
    class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
  >
    <div
      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
    >
      <div
        class="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <h1
          class="euiTitle euiTitle--large"
          data-test-subj="overviewTitle"
        >
          Anomaly detection
        </h1>
      </div>
      <div
        class="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <a
          class="euiButton euiButton--primary euiButton--fill"
          data-test-subj="add_detector"
          href="anomaly-detection-dashboards#/create-detector-steps"
          rel="noreferrer"
        >
          <span
            class="euiButtonContent euiButton__content"
          >
            <span
              class="euiButton__text"
            >
              Create detector
            </span>
          </span>
        </a>
      </div>
    </div>
  </header>
  <div
    class="euiText euiText--medium"
  >
    The anomaly detection plugin automatically detects anomalies in your data in near real-time using the Random Cut Forest (RCF) algorithm.
     
    <a
      class="euiLink euiLink--primary"
      href="https://opensearch.org/docs/monitoring-plugins/ad"
      rel="noopener noreferrer"
      target="_blank"
    >
      Learn more
      <svg
        aria-label="External link"
        class="euiIcon euiIcon--small euiLink__externalIcon"
        focusable="false"
        height="16"
        role="img"
        viewBox="0 0 16 16"
        width="16"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
        />
      </svg>
      <span
        class="euiScreenReaderOnly"
      >
        (opens in a new tab or window)
      </span>
    </a>
  </div>
  <div
    class="euiSpacer euiSpacer--xl"
  />
  <div
    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
    style="padding: 20px;"
  >
    <div
      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
      style="padding: 0px;"
    >
      <div
        class="euiFlexItem"
      >
        <h3
          class="euiTitle euiTitle--small"
          data-test-subj="contentPanelTitle"
        >
          How it works
        </h3>
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem content-panel-subTitle"
            style="line-height: normal; max-width: 75%;"
          />
        </div>
      </div>
      <div
        class="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          />
        </div>
      </div>
    </div>
    <div>
      <hr
        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
      />
      <div
        style="padding: 10px 0px;"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-bottom: 5px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 20px;"
                >
                  1. Define your detector
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-top: 0px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 14px;"
                >
                  Select a data source, set the detector interval, and specify a window delay.
                   
                  <a
                    class="euiLink euiLink--primary"
                    href="https://opensearch.org/docs/monitoring-plugins/ad"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                    <svg
                      aria-label="External link"
                      class="euiIcon euiIcon--small euiLink__externalIcon"
                      focusable="false"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                      />
                    </svg>
                    <span
                      class="euiScreenReaderOnly"
                    >
                      (opens in a new tab or window)
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <div
              class="create-workflow-step-separator"
            />
          </div>
          <div
            class="euiFlexItem"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-bottom: 5px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 20px;"
                >
                  2. Configure your detector
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-top: 0px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 14px;"
                >
                  Choose the fields in your index that you want to check for anomalies. You may also set a category field to see a granular view of anomalies within each entity.
                   
                  <a
                    class="euiLink euiLink--primary"
                    href="https://opensearch.org/docs/monitoring-plugins/ad"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                    <svg
                      aria-label="External link"
                      class="euiIcon euiIcon--small euiLink__externalIcon"
                      focusable="false"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                      />
                    </svg>
                    <span
                      class="euiScreenReaderOnly"
                    >
                      (opens in a new tab or window)
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <div
              class="create-workflow-step-separator"
            />
          </div>
          <div
            class="euiFlexItem"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-bottom: 5px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 20px;"
                >
                  3. Preview your detector
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-top: 0px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 14px;"
                >
                  After configuring your model, preview your results with sample data to fine-tune your settings.
                   
                  <a
                    class="euiLink euiLink--primary"
                    href="https://opensearch.org/docs/monitoring-plugins/ad"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                    <svg
                      aria-label="External link"
                      class="euiIcon euiIcon--small euiLink__externalIcon"
                      focusable="false"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                      />
                    </svg>
                    <span
                      class="euiScreenReaderOnly"
                    >
                      (opens in a new tab or window)
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <div
              class="create-workflow-step-separator"
            />
          </div>
          <div
            class="euiFlexItem"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-bottom: 5px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 20px;"
                >
                  4. View results
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-top: 0px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 14px;"
                >
                  Run your detector to observe results in real-time. You can also enable historical analysis to view anomalies in your data history. 
                   
                  <a
                    class="euiLink euiLink--primary"
                    href="https://opensearch.org/docs/monitoring-plugins/ad"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                    <svg
                      aria-label="External link"
                      class="euiIcon euiIcon--small euiLink__externalIcon"
                      focusable="false"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                      />
                    </svg>
                    <span
                      class="euiScreenReaderOnly"
                    >
                      (opens in a new tab or window)
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="euiSpacer euiSpacer--xl"
  />
  <div
    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
    style="padding: 20px;"
  >
    <div
      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
      style="padding: 0px;"
    >
      <div
        class="euiFlexItem"
      >
        <h3
          class="euiTitle euiTitle--small"
          data-test-subj="contentPanelTitle"
        >
          Start with a sample detector to learn about anomaly detection
        </h3>
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem content-panel-subTitle"
            style="line-height: normal; max-width: 75%;"
          >
            <div
              class="euiText euiText--medium"
              style="margin-top: 5px;"
            >
              New to anomaly detection? Get a better understanding of how it works by creating a detector with one of the sample datasets.
            </div>
          </div>
        </div>
      </div>
      <div
        class="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          />
        </div>
      </div>
    </div>
    <div>
      <hr
        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall hide-horizontal-rule"
      />
      <div
        style="padding: 10px 0px;"
      >
        <div
          class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--thirds euiFlexGrid--responsive"
        >
          <div
            class="euiFlexItem"
          >
            <div
              style="height: auto;"
            >
              <div
                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
              >
                <div
                  class="euiCard__content"
                >
                  <span
                    class="euiTitle euiTitle--small euiCard__title"
                    id="random_html_idTitle"
                  >
                    <div
                      style="display: flex; flex-direction: row; align-content: flexStart;"
                    >
                      <svg
                        aria-hidden="true"
                        class="euiIcon euiIcon--large"
                        focusable="false"
                        height="16"
                        role="img"
                        viewBox="0 0 16 16"
                        width="16"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12.654 3.48c.248.225.552.389.888.467L11.24 9.43a1.99 1.99 0 00-.915-.404l2.33-5.547zM9.146 9.19a2.008 2.008 0 00-.769.64l-1.572-2c.311-.136.581-.35.785-.618l1.556 1.978zM5.581 7.956l-2.134 4.268a.5.5 0 01-.894-.448l2.134-4.268c.25.22.557.376.894.448zM1 15h13.5a.5.5 0 110 1H.5a.5.5 0 01-.5-.5v-14a.5.5 0 011 0V15zm5-8a1 1 0 110-2 1 1 0 010 2zm4 5a1 1 0 110-2 1 1 0 010 2zm4-9a1 1 0 110-2 1 1 0 010 2z"
                        />
                      </svg>
                      <h2
                        class="euiTitle euiTitle--small"
                        style="margin-left: 12px; margin-top: -3px;"
                      >
                        Monitor HTTP responses
                      </h2>
                      <button
                        class="euiLink euiLink--primary"
                        data-test-subj="flyoutInfoButton"
                        style="margin-left: 12px;"
                        type="button"
                      >
                        Info
                      </button>
                    </div>
                  </span>
                  <div
                    class="euiCard__children"
                  >
                    <div
                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                    >
                      <hr
                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
                      />
                      <div
                        class="euiFlexItem euiFlexItem--flexGrowZero"
                        style="height: 70px;"
                      >
                        <p
                          style="text-align: left; line-height: 1.4; max-height: 4.2px;"
                        >
                          Detect high numbers of error response codes in an index containing HTTP response data.
                        </p>
                      </div>
                      <div
                        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
                        style="height: 100px; margin-top: 0px; margin-bottom: 0px;"
                      >
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        >
                          <button
                            class="euiButton euiButton--primary"
                            data-test-subj="createHttpSampleDetectorButton"
                            style="width: 300px;"
                            type="button"
                          >
                            <span
                              class="euiButtonContent euiButton__content"
                            >
                              <span
                                class="euiButton__text"
                              >
                                Create HTTP response detector
                              </span>
                            </span>
                          </button>
                        </div>
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiFlexItem"
          >
            <div
              style="height: auto;"
            >
              <div
                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
              >
                <div
                  class="euiCard__content"
                >
                  <span
                    class="euiTitle euiTitle--small euiCard__title"
                    id="random_html_idTitle"
                  >
                    <div
                      style="display: flex; flex-direction: row; align-content: flexStart;"
                    >
                      <svg
                        aria-hidden="true"
                        class="euiIcon euiIcon--large"
                        focusable="false"
                        height="16"
                        role="img"
                        viewBox="0 0 16 16"
                        width="16"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M14.447 3.724l-6-3a1 1 0 00-.894 0l-6 3A1 1 0 001 4.618v6.764a1 1 0 00.553.894l6 3a1 1 0 00.894 0l6-3a1 1 0 00.553-.894V4.618a1 1 0 00-.553-.894zM5.871 5.897l5.343-2.672 2.158 1.079L8 6.943zM8 1.618l2.096 1.048-5.353 2.677-2.115-1.039zM2 5.11l2.25 1.105V9a.5.5 0 001 0V6.706L7.5 7.811v6.321L2 11.382zm6.5 9.022v-6.32L14 5.11v6.272z"
                        />
                      </svg>
                      <h2
                        class="euiTitle euiTitle--small"
                        style="margin-left: 12px; margin-top: -3px;"
                      >
                        Monitor eCommerce orders
                      </h2>
                      <button
                        class="euiLink euiLink--primary"
                        data-test-subj="flyoutInfoButton"
                        style="margin-left: 12px;"
                        type="button"
                      >
                        Info
                      </button>
                    </div>
                  </span>
                  <div
                    class="euiCard__children"
                  >
                    <div
                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                    >
                      <hr
                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
                      />
                      <div
                        class="euiFlexItem euiFlexItem--flexGrowZero"
                        style="height: 70px;"
                      >
                        <p
                          style="text-align: left; line-height: 1.4; max-height: 4.2px;"
                        >
                          Detect any unusual increase or decrease of orders in an index containing online order data.
                        </p>
                      </div>
                      <div
                        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
                        style="height: 100px; margin-top: 0px; margin-bottom: 0px;"
                      >
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        >
                          <button
                            class="euiButton euiButton--primary"
                            data-test-subj="createECommerceSampleDetectorButton"
                            style="width: 300px;"
                            type="button"
                          >
                            <span
                              class="euiButtonContent euiButton__content"
                            >
                              <span
                                class="euiButton__text"
                              >
                                Create eCommerce orders detector
                              </span>
                            </span>
                          </button>
                        </div>
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiFlexItem"
          >
            <div
              style="height: auto;"
            >
              <div
                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
              >
                <div
                  class="euiCard__content"
                >
                  <span
                    class="euiTitle euiTitle--small euiCard__title"
                    id="random_html_idTitle"
                  >
                    <div
                      style="display: flex; flex-direction: row; align-content: flexStart;"
                    >
                      <svg
                        aria-hidden="true"
                        class="euiIcon euiIcon--large"
                        focusable="false"
                        height="16"
                        role="img"
                        viewBox="0 0 16 16"
                        width="16"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12.877 5.847l-1.02 1.02a.5.5 0 01-.708-.707l1.1-1.099c-.05-.053-.1-.106-.152-.157A6.471 6.471 0 008 3.019V4.5a.5.5 0 01-1 0V3.019a6.47 6.47 0 00-4.261 2.055l1.07 1.071a.5.5 0 01-.706.707l-.99-.99A6.46 6.46 0 001.018 10H2.5a.5.5 0 110 1H1.174c.083.353.196.697.337 1.03a.5.5 0 11-.922.39A7.487 7.487 0 010 9.5a7.483 7.483 0 012.197-5.304A7.487 7.487 0 017.5 2a7.487 7.487 0 015.304 2.197A7.483 7.483 0 0115 9.5a7.487 7.487 0 01-.59 2.92.5.5 0 01-.92-.39c.14-.333.253-.677.336-1.03H12.5a.5.5 0 110-1h1.481a6.483 6.483 0 00-1.104-4.153zm-6.041 5.317a.993.993 0 01-.01-1.404c.384-.385 2.882-2.002 3.149-1.735.267.267-1.35 2.765-1.735 3.15a.993.993 0 01-1.404-.01z"
                        />
                      </svg>
                      <h2
                        class="euiTitle euiTitle--small"
                        style="margin-left: 12px; margin-top: -3px;"
                      >
                        Monitor host health
                      </h2>
                      <button
                        class="euiLink euiLink--primary"
                        data-test-subj="flyoutInfoButton"
                        style="margin-left: 12px;"
                        type="button"
                      >
                        Info
                      </button>
                    </div>
                  </span>
                  <div
                    class="euiCard__children"
                  >
                    <div
                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                    >
                      <hr
                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
                      />
                      <div
                        class="euiFlexItem euiFlexItem--flexGrowZero"
                        style="height: 70px;"
                      >
                        <p
                          style="text-align: left; line-height: 1.4; max-height: 4.2px;"
                        >
                          Detect increases in CPU and memory utilization in an index containing various health metrics from a host.
                        </p>
                      </div>
                      <div
                        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
                        style="height: 100px; margin-top: 0px; margin-bottom: 0px;"
                      >
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        >
                          <button
                            class="euiButton euiButton--primary"
                            data-test-subj="createHostHealthSampleDetectorButton"
                            style="width: 300px;"
                            type="button"
                          >
                            <span
                              class="euiButtonContent euiButton__content"
                            >
                              <span
                                class="euiButton__text"
                              >
                                Create health monitor detector
                              </span>
                            </span>
                          </button>
                        </div>
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--m"
          />
        </div>
      </div>
    </div>
  </div>
   
</div>
`;

exports[`<AnomalyDetectionOverview /> spec Some detectors created renders component with sample detector 1`] = `
<div>
  <header
    class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
  >
    <div
      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
    >
      <div
        class="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <h1
          class="euiTitle euiTitle--large"
          data-test-subj="overviewTitle"
        >
          Anomaly detection
        </h1>
      </div>
      <div
        class="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <a
          class="euiButton euiButton--primary euiButton--fill"
          data-test-subj="add_detector"
          href="anomaly-detection-dashboards#/create-detector-steps"
          rel="noreferrer"
        >
          <span
            class="euiButtonContent euiButton__content"
          >
            <span
              class="euiButton__text"
            >
              Create detector
            </span>
          </span>
        </a>
      </div>
    </div>
  </header>
  <div
    class="euiText euiText--medium"
  >
    The anomaly detection plugin automatically detects anomalies in your data in near real-time using the Random Cut Forest (RCF) algorithm.
     
    <a
      class="euiLink euiLink--primary"
      href="https://opensearch.org/docs/monitoring-plugins/ad"
      rel="noopener noreferrer"
      target="_blank"
    >
      Learn more
      <svg
        aria-label="External link"
        class="euiIcon euiIcon--small euiLink__externalIcon"
        focusable="false"
        height="16"
        role="img"
        viewBox="0 0 16 16"
        width="16"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
        />
      </svg>
      <span
        class="euiScreenReaderOnly"
      >
        (opens in a new tab or window)
      </span>
    </a>
  </div>
  <div
    class="euiSpacer euiSpacer--xl"
  />
  <div
    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
    style="padding: 20px;"
  >
    <div
      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
      style="padding: 0px;"
    >
      <div
        class="euiFlexItem"
      >
        <h3
          class="euiTitle euiTitle--small"
          data-test-subj="contentPanelTitle"
        >
          How it works
        </h3>
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem content-panel-subTitle"
            style="line-height: normal; max-width: 75%;"
          />
        </div>
      </div>
      <div
        class="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          />
        </div>
      </div>
    </div>
    <div>
      <hr
        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
      />
      <div
        style="padding: 10px 0px;"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-bottom: 5px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 20px;"
                >
                  1. Define your detector
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-top: 0px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 14px;"
                >
                  Select a data source, set the detector interval, and specify a window delay.
                   
                  <a
                    class="euiLink euiLink--primary"
                    href="https://opensearch.org/docs/monitoring-plugins/ad"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                    <svg
                      aria-label="External link"
                      class="euiIcon euiIcon--small euiLink__externalIcon"
                      focusable="false"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                      />
                    </svg>
                    <span
                      class="euiScreenReaderOnly"
                    >
                      (opens in a new tab or window)
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <div
              class="create-workflow-step-separator"
            />
          </div>
          <div
            class="euiFlexItem"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-bottom: 5px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 20px;"
                >
                  2. Configure your detector
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-top: 0px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 14px;"
                >
                  Choose the fields in your index that you want to check for anomalies. You may also set a category field to see a granular view of anomalies within each entity.
                   
                  <a
                    class="euiLink euiLink--primary"
                    href="https://opensearch.org/docs/monitoring-plugins/ad"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                    <svg
                      aria-label="External link"
                      class="euiIcon euiIcon--small euiLink__externalIcon"
                      focusable="false"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                      />
                    </svg>
                    <span
                      class="euiScreenReaderOnly"
                    >
                      (opens in a new tab or window)
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <div
              class="create-workflow-step-separator"
            />
          </div>
          <div
            class="euiFlexItem"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-bottom: 5px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 20px;"
                >
                  3. Preview your detector
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-top: 0px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 14px;"
                >
                  After configuring your model, preview your results with sample data to fine-tune your settings.
                   
                  <a
                    class="euiLink euiLink--primary"
                    href="https://opensearch.org/docs/monitoring-plugins/ad"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                    <svg
                      aria-label="External link"
                      class="euiIcon euiIcon--small euiLink__externalIcon"
                      focusable="false"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                      />
                    </svg>
                    <span
                      class="euiScreenReaderOnly"
                    >
                      (opens in a new tab or window)
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <div
              class="create-workflow-step-separator"
            />
          </div>
          <div
            class="euiFlexItem"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-bottom: 5px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 20px;"
                >
                  4. View results
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
                style="margin-top: 0px;"
              >
                <div
                  class="euiText euiText--medium"
                  style="font-size: 14px;"
                >
                  Run your detector to observe results in real-time. You can also enable historical analysis to view anomalies in your data history. 
                   
                  <a
                    class="euiLink euiLink--primary"
                    href="https://opensearch.org/docs/monitoring-plugins/ad"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                    <svg
                      aria-label="External link"
                      class="euiIcon euiIcon--small euiLink__externalIcon"
                      focusable="false"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                      />
                    </svg>
                    <span
                      class="euiScreenReaderOnly"
                    >
                      (opens in a new tab or window)
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="euiSpacer euiSpacer--xl"
  />
  <div
    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
    style="padding: 20px;"
  >
    <div
      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
      style="padding: 0px;"
    >
      <div
        class="euiFlexItem"
      >
        <h3
          class="euiTitle euiTitle--small"
          data-test-subj="contentPanelTitle"
        >
          Start with a sample detector to learn about anomaly detection
        </h3>
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem content-panel-subTitle"
            style="line-height: normal; max-width: 75%;"
          >
            <div
              class="euiText euiText--medium"
              style="margin-top: 5px;"
            >
              New to anomaly detection? Get a better understanding of how it works by creating a detector with one of the sample datasets.
            </div>
          </div>
        </div>
      </div>
      <div
        class="euiFlexItem euiFlexItem--flexGrowZero"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          />
        </div>
      </div>
    </div>
    <div>
      <hr
        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall hide-horizontal-rule"
      />
      <div
        style="padding: 10px 0px;"
      >
        <div
          class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--thirds euiFlexGrid--responsive"
        >
          <div
            class="euiFlexItem"
          >
            <div
              style="height: auto;"
            >
              <div
                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned euiCard--hasBetaBadge"
              >
                <div
                  class="euiCard__content"
                >
                  <span
                    class="euiTitle euiTitle--small euiCard__title"
                    id="random_html_idTitle"
                  >
                    <div
                      style="display: flex; flex-direction: row; align-content: flexStart;"
                    >
                      <svg
                        aria-hidden="true"
                        class="euiIcon euiIcon--large"
                        focusable="false"
                        height="16"
                        role="img"
                        viewBox="0 0 16 16"
                        width="16"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12.654 3.48c.248.225.552.389.888.467L11.24 9.43a1.99 1.99 0 00-.915-.404l2.33-5.547zM9.146 9.19a2.008 2.008 0 00-.769.64l-1.572-2c.311-.136.581-.35.785-.618l1.556 1.978zM5.581 7.956l-2.134 4.268a.5.5 0 01-.894-.448l2.134-4.268c.25.22.557.376.894.448zM1 15h13.5a.5.5 0 110 1H.5a.5.5 0 01-.5-.5v-14a.5.5 0 011 0V15zm5-8a1 1 0 110-2 1 1 0 010 2zm4 5a1 1 0 110-2 1 1 0 010 2zm4-9a1 1 0 110-2 1 1 0 010 2z"
                        />
                      </svg>
                      <h2
                        class="euiTitle euiTitle--small"
                        style="margin-left: 12px; margin-top: -3px;"
                      >
                        Monitor HTTP responses
                      </h2>
                      <button
                        class="euiLink euiLink--primary"
                        data-test-subj="flyoutInfoButton"
                        style="margin-left: 12px;"
                        type="button"
                      >
                        Info
                      </button>
                    </div>
                  </span>
                  <div
                    class="euiCard__children"
                  >
                    <div
                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                    >
                      <hr
                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
                      />
                      <div
                        class="euiFlexItem euiFlexItem--flexGrowZero"
                        style="height: 70px;"
                      >
                        <p
                          style="text-align: left; line-height: 1.4; max-height: 4.2px;"
                        >
                          Detect high numbers of error response codes in an index containing HTTP response data.
                        </p>
                      </div>
                      <div
                        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
                        style="height: 100px; margin-top: 0px; margin-bottom: 0px;"
                      >
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        >
                          <button
                            class="euiButton euiButton--primary euiButton-isDisabled"
                            data-test-subj="createHttpSampleDetectorButton"
                            disabled=""
                            style="width: 300px;"
                            type="button"
                          >
                            <span
                              class="euiButtonContent euiButton__content"
                            >
                              <span
                                class="euiButton__text"
                              >
                                Detector created
                              </span>
                            </span>
                          </button>
                        </div>
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        >
                          <a
                            class="euiLink euiLink--primary"
                            data-test-subj="viewSampleDetectorLink"
                            href="anomaly-detection-dashboards#/detectors/sample-detector-id"
                            rel="noreferrer"
                          >
                            View detector and sample data
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <span
                  class="euiCard__betaBadgeWrapper"
                >
                  <span
                    class="euiBetaBadge euiBetaBadge--hollow euiCard__betaBadge"
                    id="random_html_idBetaBadge"
                    title="INSTALLED"
                  >
                    INSTALLED
                  </span>
                </span>
              </div>
            </div>
          </div>
          <div
            class="euiFlexItem"
          >
            <div
              style="height: auto;"
            >
              <div
                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
              >
                <div
                  class="euiCard__content"
                >
                  <span
                    class="euiTitle euiTitle--small euiCard__title"
                    id="random_html_idTitle"
                  >
                    <div
                      style="display: flex; flex-direction: row; align-content: flexStart;"
                    >
                      <svg
                        aria-hidden="true"
                        class="euiIcon euiIcon--large"
                        focusable="false"
                        height="16"
                        role="img"
                        viewBox="0 0 16 16"
                        width="16"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M14.447 3.724l-6-3a1 1 0 00-.894 0l-6 3A1 1 0 001 4.618v6.764a1 1 0 00.553.894l6 3a1 1 0 00.894 0l6-3a1 1 0 00.553-.894V4.618a1 1 0 00-.553-.894zM5.871 5.897l5.343-2.672 2.158 1.079L8 6.943zM8 1.618l2.096 1.048-5.353 2.677-2.115-1.039zM2 5.11l2.25 1.105V9a.5.5 0 001 0V6.706L7.5 7.811v6.321L2 11.382zm6.5 9.022v-6.32L14 5.11v6.272z"
                        />
                      </svg>
                      <h2
                        class="euiTitle euiTitle--small"
                        style="margin-left: 12px; margin-top: -3px;"
                      >
                        Monitor eCommerce orders
                      </h2>
                      <button
                        class="euiLink euiLink--primary"
                        data-test-subj="flyoutInfoButton"
                        style="margin-left: 12px;"
                        type="button"
                      >
                        Info
                      </button>
                    </div>
                  </span>
                  <div
                    class="euiCard__children"
                  >
                    <div
                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                    >
                      <hr
                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
                      />
                      <div
                        class="euiFlexItem euiFlexItem--flexGrowZero"
                        style="height: 70px;"
                      >
                        <p
                          style="text-align: left; line-height: 1.4; max-height: 4.2px;"
                        >
                          Detect any unusual increase or decrease of orders in an index containing online order data.
                        </p>
                      </div>
                      <div
                        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
                        style="height: 100px; margin-top: 0px; margin-bottom: 0px;"
                      >
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        >
                          <button
                            class="euiButton euiButton--primary"
                            data-test-subj="createECommerceSampleDetectorButton"
                            style="width: 300px;"
                            type="button"
                          >
                            <span
                              class="euiButtonContent euiButton__content"
                            >
                              <span
                                class="euiButton__text"
                              >
                                Create eCommerce orders detector
                              </span>
                            </span>
                          </button>
                        </div>
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiFlexItem"
          >
            <div
              style="height: auto;"
            >
              <div
                class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
              >
                <div
                  class="euiCard__content"
                >
                  <span
                    class="euiTitle euiTitle--small euiCard__title"
                    id="random_html_idTitle"
                  >
                    <div
                      style="display: flex; flex-direction: row; align-content: flexStart;"
                    >
                      <svg
                        aria-hidden="true"
                        class="euiIcon euiIcon--large"
                        focusable="false"
                        height="16"
                        role="img"
                        viewBox="0 0 16 16"
                        width="16"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12.877 5.847l-1.02 1.02a.5.5 0 01-.708-.707l1.1-1.099c-.05-.053-.1-.106-.152-.157A6.471 6.471 0 008 3.019V4.5a.5.5 0 01-1 0V3.019a6.47 6.47 0 00-4.261 2.055l1.07 1.071a.5.5 0 01-.706.707l-.99-.99A6.46 6.46 0 001.018 10H2.5a.5.5 0 110 1H1.174c.083.353.196.697.337 1.03a.5.5 0 11-.922.39A7.487 7.487 0 010 9.5a7.483 7.483 0 012.197-5.304A7.487 7.487 0 017.5 2a7.487 7.487 0 015.304 2.197A7.483 7.483 0 0115 9.5a7.487 7.487 0 01-.59 2.92.5.5 0 01-.92-.39c.14-.333.253-.677.336-1.03H12.5a.5.5 0 110-1h1.481a6.483 6.483 0 00-1.104-4.153zm-6.041 5.317a.993.993 0 01-.01-1.404c.384-.385 2.882-2.002 3.149-1.735.267.267-1.35 2.765-1.735 3.15a.993.993 0 01-1.404-.01z"
                        />
                      </svg>
                      <h2
                        class="euiTitle euiTitle--small"
                        style="margin-left: 12px; margin-top: -3px;"
                      >
                        Monitor host health
                      </h2>
                      <button
                        class="euiLink euiLink--primary"
                        data-test-subj="flyoutInfoButton"
                        style="margin-left: 12px;"
                        type="button"
                      >
                        Info
                      </button>
                    </div>
                  </span>
                  <div
                    class="euiCard__children"
                  >
                    <div
                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
                    >
                      <hr
                        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
                      />
                      <div
                        class="euiFlexItem euiFlexItem--flexGrowZero"
                        style="height: 70px;"
                      >
                        <p
                          style="text-align: left; line-height: 1.4; max-height: 4.2px;"
                        >
                          Detect increases in CPU and memory utilization in an index containing various health metrics from a host.
                        </p>
                      </div>
                      <div
                        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
                        style="height: 100px; margin-top: 0px; margin-bottom: 0px;"
                      >
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        >
                          <button
                            class="euiButton euiButton--primary"
                            data-test-subj="createHostHealthSampleDetectorButton"
                            style="width: 300px;"
                            type="button"
                          >
                            <span
                              class="euiButtonContent euiButton__content"
                            >
                              <span
                                class="euiButton__text"
                              >
                                Create health monitor detector
                              </span>
                            </span>
                          </button>
                        </div>
                        <div
                          class="euiFlexItem euiFlexItem--flexGrowZero"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--m"
          />
        </div>
      </div>
    </div>
  </div>
   
</div>
`;