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

exports[`<ConfigureModel /> spec creating model configuration renders the component 1`] = `
<div
  class="euiPage euiPage--paddingMedium euiPage--grow"
  style="margin-top: -24px;"
>
  <div
    class="euiPageBody euiPageBody--borderRadiusNone"
  >
    <header
      class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
    >
      <div
        class="euiPageHeaderSection"
      >
        <h1
          class="euiTitle euiTitle--large"
          data-test-subj="configureOrEditModelConfigurationTitle"
        >
          Configure model
           
        </h1>
        <div
          class="euiSpacer euiSpacer--s"
        />
        <div
          class="euiText euiText--medium"
        >
          Set the index fields that you want to find anomalies for by defining the model features. You can also set other model parameters such as category field and shingle size for more granular views. After you set the model features and other optional parameters, you can preview your anomalies from a sample feature output.
           
          <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--s"
        />
      </div>
    </header>
    <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"
          >
            Features
          </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 content-panel-subTitle"
                style="line-height: normal;"
              >
                A feature is the field in your index that you use to check for anomalies. You can add up to 5 features.
                 
                <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="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--directionColumn euiFlexGroup--responsive"
            style="margin: 0px;"
          >
            <div
              class="euiAccordion euiAccordion-isOpen euiAccordion__noTopBorder"
            >
              <div
                class="euiAccordion__triggerWrapper"
              >
                <button
                  aria-controls="featureList.0"
                  aria-expanded="true"
                  class="euiAccordion__button euiAccordionForm__noTopPaddingButton"
                  id="random_html_id"
                  type="button"
                >
                  <span
                    class="euiAccordion__iconWrapper"
                  >
                    <svg
                      aria-hidden="true"
                      class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
                      focusable="false"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    />
                  </span>
                  <span
                    class="euiIEFlexWrapFix"
                  >
                    <div
                      id="featureAccordionHeaders.0"
                    >
                      <div
                        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                      >
                        <div
                          class="euiFlexItem"
                        >
                          <h5
                            class="euiTitle euiTitle--xsmall euiAccordionForm__title"
                          >
                            Add feature
                          </h5>
                        </div>
                      </div>
                    </div>
                  </span>
                </button>
                <div
                  class="euiAccordion__optionalAction"
                >
                  <button
                    class="euiButton euiButton--danger euiButton--small"
                    type="button"
                  >
                    <span
                      class="euiButtonContent euiButton__content"
                    >
                      <span
                        class="euiButton__text"
                      >
                        Delete
                      </span>
                    </span>
                  </button>
                </div>
              </div>
              <div
                aria-labelledby="random_html_id"
                class="euiAccordion__childWrapper"
                id="featureList.0"
                role="region"
                tabindex="-1"
              >
                <div>
                  <div
                    class="euiAccordion__padding--l"
                  >
                    <div
                      class="euiFormRow"
                      id="random_html_id-row"
                    >
                      <div
                        class="euiFormRow__labelWrapper"
                      >
                        <label
                          aria-invalid="false"
                          class="euiFormLabel euiFormRow__label"
                          for="random_html_id"
                        >
                          Feature name
                        </label>
                      </div>
                      <div
                        class="euiFormRow__fieldWrapper"
                      >
                        <div
                          class="euiFormControlLayout"
                        >
                          <div
                            class="euiFormControlLayout__childrenWrapper"
                          >
                            <input
                              aria-describedby="random_html_id-help-0"
                              class="euiFieldText"
                              data-test-subj="featureNameTextInput-0"
                              id="random_html_id"
                              name="featureList.0.featureName"
                              placeholder="Enter feature name"
                              type="text"
                              value=""
                            />
                          </div>
                        </div>
                        <div
                          class="euiFormHelpText euiFormRow__text"
                          id="random_html_id-help-0"
                        >
                          Enter a descriptive name. The name must be unique within this detector. Feature name must contain 1-64 characters. Valid characters are a-z, A-Z, 0-9, -(hyphen) and _(underscore).
                        </div>
                      </div>
                    </div>
                    <div
                      class="euiFormRow"
                      id="random_html_id-row"
                    >
                      <div
                        class="euiFormRow__labelWrapper"
                      >
                        <label
                          aria-invalid="false"
                          class="euiFormLabel euiFormRow__label"
                          for="random_html_id"
                        >
                          Feature state
                        </label>
                      </div>
                      <div
                        class="euiFormRow__fieldWrapper"
                      >
                        <div
                          class="euiCheckbox"
                        >
                          <input
                            checked=""
                            class="euiCheckbox__input"
                            id="random_html_id"
                            name="featureList.0.featureEnabled"
                            type="checkbox"
                            value="true"
                          />
                          <div
                            class="euiCheckbox__square"
                          />
                          <label
                            class="euiCheckbox__label"
                            for="random_html_id"
                          >
                            Enable feature
                          </label>
                        </div>
                      </div>
                    </div>
                    <div
                      class="euiFormRow"
                      id="random_html_id-row"
                    >
                      <div
                        class="euiFormRow__labelWrapper"
                      >
                        <label
                          aria-invalid="false"
                          class="euiFormLabel euiFormRow__label"
                          for="random_html_id"
                        >
                          Find anomalies based on
                        </label>
                      </div>
                      <div
                        class="euiFormRow__fieldWrapper"
                      >
                        <div
                          class="euiFormControlLayout"
                        >
                          <div
                            class="euiFormControlLayout__childrenWrapper"
                          >
                            <select
                              class="euiSelect"
                              id="random_html_id"
                              name="featureList.0.featureType"
                            >
                              <option
                                value="simple_aggs"
                              >
                                Field value
                              </option>
                              <option
                                value="custom_aggs"
                              >
                                Custom expression
                              </option>
                            </select>
                            <div
                              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                            >
                              <span
                                class="euiFormControlLayoutCustomIcon"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                  focusable="false"
                                  height="16"
                                  role="img"
                                  viewBox="0 0 16 16"
                                  width="16"
                                  xmlns="http://www.w3.org/2000/svg"
                                />
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="euiFormRow"
                      id="random_html_id-row"
                    >
                      <div
                        class="euiFormRow__labelWrapper"
                      >
                        <label
                          aria-invalid="false"
                          class="euiFormLabel euiFormRow__label"
                          for="random_html_id"
                        >
                          Aggregation method
                        </label>
                      </div>
                      <div
                        class="euiFormRow__fieldWrapper"
                      >
                        <div
                          class="euiFormControlLayout"
                        >
                          <div
                            class="euiFormControlLayout__childrenWrapper"
                          >
                            <select
                              aria-describedby="random_html_id-help-0"
                              class="euiSelect"
                              data-test-subj="aggregationType"
                              id="random_html_id"
                              name="featureList.0.aggregationBy"
                            >
                              <option
                                value="avg"
                              >
                                average()
                              </option>
                              <option
                                value="value_count"
                              >
                                count()
                              </option>
                              <option
                                value="sum"
                              >
                                sum()
                              </option>
                              <option
                                value="min"
                              >
                                min()
                              </option>
                              <option
                                value="max"
                              >
                                max()
                              </option>
                            </select>
                            <div
                              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                            >
                              <span
                                class="euiFormControlLayoutCustomIcon"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                  focusable="false"
                                  height="16"
                                  role="img"
                                  viewBox="0 0 16 16"
                                  width="16"
                                  xmlns="http://www.w3.org/2000/svg"
                                />
                              </span>
                            </div>
                          </div>
                        </div>
                        <div
                          class="euiFormHelpText euiFormRow__text"
                          id="random_html_id-help-0"
                        >
                          The aggregation method determines what constitutes an anomaly. For example, if you choose min(), the detector focuses on finding anomalies based on the minimum values of your feature.
                        </div>
                      </div>
                    </div>
                    <div
                      class="euiFormRow"
                      id="random_html_id-row"
                    >
                      <div
                        class="euiFormRow__labelWrapper"
                      >
                        <label
                          aria-invalid="false"
                          class="euiFormLabel euiFormRow__label"
                          for="random_html_id"
                        >
                          Field
                        </label>
                      </div>
                      <div
                        class="euiFormRow__fieldWrapper"
                      >
                        <div
                          aria-expanded="false"
                          aria-haspopup="listbox"
                          class="euiComboBox"
                          data-test-subj="featureFieldTextInput-0"
                          name="featureList.0.aggregationOf"
                          role="combobox"
                        >
                          <div
                            class="euiFormControlLayout"
                          >
                            <div
                              class="euiFormControlLayout__childrenWrapper"
                            >
                              <div
                                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                                data-test-subj="comboBoxInput"
                                tabindex="-1"
                              >
                                <p
                                  class="euiComboBoxPlaceholder"
                                >
                                  Select field
                                </p>
                                <div
                                  class="euiComboBox__input"
                                  style="font-size: 14px; display: inline-block;"
                                >
                                  <input
                                    aria-controls=""
                                    data-test-subj="comboBoxSearchInput"
                                    id="random_html_id"
                                    role="textbox"
                                    style="box-sizing: content-box; width: 2px;"
                                    value=""
                                  />
                                  <div
                                    style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
                                  />
                                </div>
                              </div>
                              <div
                                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                              >
                                <button
                                  aria-label="Open list of options"
                                  class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
                                  data-test-subj="comboBoxToggleListButton"
                                  type="button"
                                >
                                  <svg
                                    aria-hidden="true"
                                    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                    focusable="false"
                                    height="16"
                                    role="img"
                                    viewBox="0 0 16 16"
                                    width="16"
                                    xmlns="http://www.w3.org/2000/svg"
                                  />
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
              style="padding: 12px 0px;"
            >
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
              >
                <button
                  class="euiButton euiButton--primary"
                  data-test-subj="addFeature"
                  type="button"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text"
                    >
                      Add another feature
                    </span>
                  </span>
                </button>
                <div
                  class="euiText euiText--medium content-panel-subTitle"
                >
                  <p>
                    You can add up to
                     
                    4
                     
                    more features.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="euiSpacer euiSpacer--l"
    />
    <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"
        >
          <div
            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
            data-test-subj="contentPanelTitle"
          >
            <div
              class="euiFlexItem"
            >
              <h2
                class="euiTitle euiTitle--small"
                id="categoryFieldTitle"
              >
                Categorical fields 
              </h2>
            </div>
          </div>
          <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 content-panel-subTitle"
                style="line-height: normal;"
              >
                Split a single time series into multiple time series based on categorical fields. You can select up to 2.
                 
                <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="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="euiCallOut euiCallOut--warning euiCallOut--small"
            data-test-subj="noCategoryFieldsCallout"
          >
            <div
              class="euiCallOutHeader"
            >
              <svg
                aria-hidden="true"
                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
                focusable="false"
                height="16"
                role="img"
                viewBox="0 0 16 16"
                width="16"
                xmlns="http://www.w3.org/2000/svg"
              />
              <span
                class="euiCallOutHeader__title"
              >
                There are no available category fields for the selected index
              </span>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--m"
          />
          <div
            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
          >
            <div
              class="euiFlexItem"
            >
              <div
                class="euiCheckbox"
              >
                <input
                  class="euiCheckbox__input"
                  disabled=""
                  id="categoryFieldCheckbox"
                  type="checkbox"
                />
                <div
                  class="euiCheckbox__square"
                />
                <label
                  class="euiCheckbox__label"
                  for="categoryFieldCheckbox"
                >
                  Enable categorical fields
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="euiSpacer euiSpacer--l"
    />
    <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"
        >
          <div
            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
            data-test-subj="contentPanelTitle"
          >
            <div
              class="euiFlexItem"
            >
              <div
                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                style="margin: 0px;"
              >
                <h2
                  class="euiTitle euiTitle--small"
                >
                  Advanced settings 
                </h2>
                <div
                  class="euiText euiText--medium"
                  style="margin-left: 18px; margin-top: 5px;"
                >
                  <button
                    class="euiLink euiLink--primary"
                    type="button"
                  >
                    Show
                  </button>
                </div>
              </div>
            </div>
          </div>
          <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>
    <div
      class="euiSpacer euiSpacer--l"
    />
    <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"
          >
            Sample anomalies
          </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="euiCallOut euiCallOut--primary"
          >
            <div
              class="euiCallOutHeader"
            >
              <svg
                aria-hidden="true"
                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
                focusable="false"
                height="16"
                role="img"
                viewBox="0 0 16 16"
                width="16"
                xmlns="http://www.w3.org/2000/svg"
              />
              <span
                class="euiCallOutHeader__title"
              >
                You can preview anomalies based on sample feature input
              </span>
            </div>
            <div
              class="euiText euiText--small"
            >
              <div
                class="euiTextColor euiTextColor--default"
              >
                <div
                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                >
                  <div
                    class="euiFlexItem"
                  >
                    <div
                      class="euiText euiText--medium"
                    >
                      You can preview how your anomalies may look like from sample feature output and adjust the feature settings as needed.
                       
                      <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
                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                >
                  <div
                    class="euiFlexItem euiFlexItem--flexGrowZero"
                  >
                    <button
                      class="euiButton euiButton--primary"
                      data-test-subj="previewDetector"
                      type="button"
                    >
                      <span
                        class="euiButtonContent euiButton__content"
                      >
                        <span
                          class="euiButton__text"
                        >
                          Preview anomalies
                        </span>
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--l"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<ConfigureModel /> spec editing model configuration renders the component 1`] = `
<div
  class="euiPage euiPage--paddingMedium euiPage--grow"
  style="margin-top: -24px;"
>
  <div
    class="euiPageBody euiPageBody--borderRadiusNone"
  >
    <header
      class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
    >
      <div
        class="euiPageHeaderSection"
      >
        <h1
          class="euiTitle euiTitle--large"
          data-test-subj="configureOrEditModelConfigurationTitle"
        >
          Edit model configuration
           
        </h1>
        <div
          class="euiSpacer euiSpacer--s"
        />
        <div
          class="euiText euiText--medium"
        >
          Set the index fields that you want to find anomalies for by defining the model features. You can also set other model parameters such as category field and shingle size for more granular views. After you set the model features and other optional parameters, you can preview your anomalies from a sample feature output.
           
          <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--s"
        />
      </div>
    </header>
    <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"
          >
            Features
          </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 content-panel-subTitle"
                style="line-height: normal;"
              >
                A feature is the field in your index that you use to check for anomalies. You can add up to 5 features.
                 
                <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="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--directionColumn euiFlexGroup--responsive"
            style="margin: 0px;"
          >
            <div
              class="euiAccordion euiAccordion-isOpen euiAccordion__noTopBorder"
            >
              <div
                class="euiAccordion__triggerWrapper"
              >
                <button
                  aria-controls="featureList.0"
                  aria-expanded="true"
                  class="euiAccordion__button euiAccordionForm__noTopPaddingButton"
                  id="random_html_id"
                  type="button"
                >
                  <span
                    class="euiAccordion__iconWrapper"
                  >
                    <svg
                      aria-hidden="true"
                      class="euiIcon euiIcon--medium euiAccordion__icon euiAccordion__icon-isOpen"
                      focusable="false"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
                        fill-rule="nonzero"
                      />
                    </svg>
                  </span>
                  <span
                    class="euiIEFlexWrapFix"
                  >
                    <div
                      id="featureAccordionHeaders.0"
                    >
                      <div
                        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                      >
                        <div
                          class="euiFlexItem"
                        >
                          <h5
                            class="euiTitle euiTitle--xsmall euiAccordionForm__title"
                          >
                            Add feature
                          </h5>
                        </div>
                      </div>
                    </div>
                  </span>
                </button>
                <div
                  class="euiAccordion__optionalAction"
                >
                  <button
                    class="euiButton euiButton--danger euiButton--small"
                    type="button"
                  >
                    <span
                      class="euiButtonContent euiButton__content"
                    >
                      <span
                        class="euiButton__text"
                      >
                        Delete
                      </span>
                    </span>
                  </button>
                </div>
              </div>
              <div
                aria-labelledby="random_html_id"
                class="euiAccordion__childWrapper"
                id="featureList.0"
                role="region"
                tabindex="-1"
              >
                <div>
                  <div
                    class="euiAccordion__padding--l"
                  >
                    <div
                      class="euiFormRow"
                      id="random_html_id-row"
                    >
                      <div
                        class="euiFormRow__labelWrapper"
                      >
                        <label
                          aria-invalid="false"
                          class="euiFormLabel euiFormRow__label"
                          for="random_html_id"
                        >
                          Feature name
                        </label>
                      </div>
                      <div
                        class="euiFormRow__fieldWrapper"
                      >
                        <div
                          class="euiFormControlLayout"
                        >
                          <div
                            class="euiFormControlLayout__childrenWrapper"
                          >
                            <input
                              aria-describedby="random_html_id-help-0"
                              class="euiFieldText"
                              data-test-subj="featureNameTextInput-0"
                              id="random_html_id"
                              name="featureList.0.featureName"
                              placeholder="Enter feature name"
                              type="text"
                              value=""
                            />
                          </div>
                        </div>
                        <div
                          class="euiFormHelpText euiFormRow__text"
                          id="random_html_id-help-0"
                        >
                          Enter a descriptive name. The name must be unique within this detector. Feature name must contain 1-64 characters. Valid characters are a-z, A-Z, 0-9, -(hyphen) and _(underscore).
                        </div>
                      </div>
                    </div>
                    <div
                      class="euiFormRow"
                      id="random_html_id-row"
                    >
                      <div
                        class="euiFormRow__labelWrapper"
                      >
                        <label
                          aria-invalid="false"
                          class="euiFormLabel euiFormRow__label"
                          for="random_html_id"
                        >
                          Feature state
                        </label>
                      </div>
                      <div
                        class="euiFormRow__fieldWrapper"
                      >
                        <div
                          class="euiCheckbox"
                        >
                          <input
                            checked=""
                            class="euiCheckbox__input"
                            id="random_html_id"
                            name="featureList.0.featureEnabled"
                            type="checkbox"
                            value="true"
                          />
                          <div
                            class="euiCheckbox__square"
                          />
                          <label
                            class="euiCheckbox__label"
                            for="random_html_id"
                          >
                            Enable feature
                          </label>
                        </div>
                      </div>
                    </div>
                    <div
                      class="euiFormRow"
                      id="random_html_id-row"
                    >
                      <div
                        class="euiFormRow__labelWrapper"
                      >
                        <label
                          aria-invalid="false"
                          class="euiFormLabel euiFormRow__label"
                          for="random_html_id"
                        >
                          Find anomalies based on
                        </label>
                      </div>
                      <div
                        class="euiFormRow__fieldWrapper"
                      >
                        <div
                          class="euiFormControlLayout"
                        >
                          <div
                            class="euiFormControlLayout__childrenWrapper"
                          >
                            <select
                              class="euiSelect"
                              id="random_html_id"
                              name="featureList.0.featureType"
                            >
                              <option
                                value="simple_aggs"
                              >
                                Field value
                              </option>
                              <option
                                value="custom_aggs"
                              >
                                Custom expression
                              </option>
                            </select>
                            <div
                              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                            >
                              <span
                                class="euiFormControlLayoutCustomIcon"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                  focusable="false"
                                  height="16"
                                  role="img"
                                  viewBox="0 0 16 16"
                                  width="16"
                                  xmlns="http://www.w3.org/2000/svg"
                                >
                                  <path
                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
                                    fill-rule="non-zero"
                                  />
                                </svg>
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="euiFormRow"
                      id="random_html_id-row"
                    >
                      <div
                        class="euiFormRow__labelWrapper"
                      >
                        <label
                          aria-invalid="false"
                          class="euiFormLabel euiFormRow__label"
                          for="random_html_id"
                        >
                          Aggregation method
                        </label>
                      </div>
                      <div
                        class="euiFormRow__fieldWrapper"
                      >
                        <div
                          class="euiFormControlLayout"
                        >
                          <div
                            class="euiFormControlLayout__childrenWrapper"
                          >
                            <select
                              aria-describedby="random_html_id-help-0"
                              class="euiSelect"
                              data-test-subj="aggregationType"
                              id="random_html_id"
                              name="featureList.0.aggregationBy"
                            >
                              <option
                                value="avg"
                              >
                                average()
                              </option>
                              <option
                                value="value_count"
                              >
                                count()
                              </option>
                              <option
                                value="sum"
                              >
                                sum()
                              </option>
                              <option
                                value="min"
                              >
                                min()
                              </option>
                              <option
                                value="max"
                              >
                                max()
                              </option>
                            </select>
                            <div
                              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                            >
                              <span
                                class="euiFormControlLayoutCustomIcon"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                  focusable="false"
                                  height="16"
                                  role="img"
                                  viewBox="0 0 16 16"
                                  width="16"
                                  xmlns="http://www.w3.org/2000/svg"
                                >
                                  <path
                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
                                    fill-rule="non-zero"
                                  />
                                </svg>
                              </span>
                            </div>
                          </div>
                        </div>
                        <div
                          class="euiFormHelpText euiFormRow__text"
                          id="random_html_id-help-0"
                        >
                          The aggregation method determines what constitutes an anomaly. For example, if you choose min(), the detector focuses on finding anomalies based on the minimum values of your feature.
                        </div>
                      </div>
                    </div>
                    <div
                      class="euiFormRow"
                      id="random_html_id-row"
                    >
                      <div
                        class="euiFormRow__labelWrapper"
                      >
                        <label
                          aria-invalid="false"
                          class="euiFormLabel euiFormRow__label"
                          for="random_html_id"
                        >
                          Field
                        </label>
                      </div>
                      <div
                        class="euiFormRow__fieldWrapper"
                      >
                        <div
                          aria-expanded="false"
                          aria-haspopup="listbox"
                          class="euiComboBox"
                          data-test-subj="featureFieldTextInput-0"
                          name="featureList.0.aggregationOf"
                          role="combobox"
                        >
                          <div
                            class="euiFormControlLayout"
                          >
                            <div
                              class="euiFormControlLayout__childrenWrapper"
                            >
                              <div
                                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                                data-test-subj="comboBoxInput"
                                tabindex="-1"
                              >
                                <p
                                  class="euiComboBoxPlaceholder"
                                >
                                  Select field
                                </p>
                                <div
                                  class="euiComboBox__input"
                                  style="font-size: 14px; display: inline-block;"
                                >
                                  <input
                                    aria-controls=""
                                    data-test-subj="comboBoxSearchInput"
                                    id="random_html_id"
                                    role="textbox"
                                    style="box-sizing: content-box; width: 2px;"
                                    value=""
                                  />
                                  <div
                                    style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
                                  />
                                </div>
                              </div>
                              <div
                                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                              >
                                <button
                                  aria-label="Open list of options"
                                  class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
                                  data-test-subj="comboBoxToggleListButton"
                                  type="button"
                                >
                                  <svg
                                    aria-hidden="true"
                                    class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                    focusable="false"
                                    height="16"
                                    role="img"
                                    viewBox="0 0 16 16"
                                    width="16"
                                    xmlns="http://www.w3.org/2000/svg"
                                  >
                                    <path
                                      d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
                                      fill-rule="non-zero"
                                    />
                                  </svg>
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
              style="padding: 12px 0px;"
            >
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
              >
                <button
                  class="euiButton euiButton--primary"
                  data-test-subj="addFeature"
                  type="button"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text"
                    >
                      Add another feature
                    </span>
                  </span>
                </button>
                <div
                  class="euiText euiText--medium content-panel-subTitle"
                >
                  <p>
                    You can add up to
                     
                    4
                     
                    more features.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="euiSpacer euiSpacer--l"
    />
    <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"
        >
          <div
            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
            data-test-subj="contentPanelTitle"
          >
            <div
              class="euiFlexItem"
            >
              <h2
                class="euiTitle euiTitle--small"
                id="categoryFieldTitle"
              >
                Categorical fields 
              </h2>
            </div>
          </div>
          <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 content-panel-subTitle"
                style="line-height: normal;"
              >
                Split a single time series into multiple time series based on categorical fields. You can select up to 2.
                 
                <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="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="euiCallOut euiCallOut--warning euiCallOut--small"
            data-test-subj="noCategoryFieldsCallout"
          >
            <div
              class="euiCallOutHeader"
            >
              <svg
                aria-hidden="true"
                class="euiIcon euiIcon--medium euiIcon--inherit euiCallOutHeader__icon"
                focusable="false"
                height="16"
                role="img"
                viewBox="0 0 16 16"
                width="16"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M7.59 10.059L7.35 5.18h1.3L8.4 10.06h-.81zm.394 1.901a.61.61 0 01-.448-.186.606.606 0 01-.186-.444c0-.174.062-.323.186-.446a.614.614 0 01.448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 01-.189.446.607.607 0 01-.437.184zM2 14a1 1 0 01-.878-1.479l6-11a1 1 0 011.756 0l6 11A1 1 0 0114 14H2zm0-1h12L8 2 2 13z"
                  fill-rule="evenodd"
                />
              </svg>
              <span
                class="euiCallOutHeader__title"
              >
                There are no available category fields for the selected index
              </span>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--m"
          />
          <div
            class="euiCallOut euiCallOut--primary euiCallOut--small"
            data-test-subj="categoryFieldReadOnlyCallout"
          >
            <div
              class="euiCallOutHeader"
            >
              <svg
                aria-hidden="true"
                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
                focusable="false"
                height="16"
                role="img"
                viewBox="0 0 16 16"
                width="16"
                xmlns="http://www.w3.org/2000/svg"
              />
              <span
                class="euiCallOutHeader__title"
              >
                You can't change the category fields after you create the detector.
              </span>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--m"
          />
          <div
            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
          >
            <div
              class="euiFlexItem"
            >
              <div
                class="euiCheckbox"
              >
                <input
                  class="euiCheckbox__input"
                  disabled=""
                  id="categoryFieldCheckbox"
                  type="checkbox"
                />
                <div
                  class="euiCheckbox__square"
                />
                <label
                  class="euiCheckbox__label"
                  for="categoryFieldCheckbox"
                >
                  Enable categorical fields
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="euiSpacer euiSpacer--l"
    />
    <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"
        >
          <div
            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
            data-test-subj="contentPanelTitle"
          >
            <div
              class="euiFlexItem"
            >
              <div
                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                style="margin: 0px;"
              >
                <h2
                  class="euiTitle euiTitle--small"
                >
                  Advanced settings 
                </h2>
                <div
                  class="euiText euiText--medium"
                  style="margin-left: 18px; margin-top: 5px;"
                >
                  <button
                    class="euiLink euiLink--primary"
                    type="button"
                  >
                    Show
                  </button>
                </div>
              </div>
            </div>
          </div>
          <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>
  </div>
</div>
`;