kibana-123/src/ui/public/share/views/share.html

Kibana is an open source (Apache Licensed), browser based analytics and search dashboard for Elasticsearch. Kibana is a snap to setup and start using. Kibana strives to be easy to get started with, while also being flexible and powerful, just like Elastic

<div class="kuiLocalDropdownPanels">
  <!-- Left panel -->
  <div class="kuiLocalDropdownPanel kuiLocalDropdownPanel--left">
    <!-- Title -->
    <div
      data-test-subj="shareUiTitle"
      class="kuiLocalDropdownTitle"
    >
      Share saved {{share.objectType}}
    </div>

    <!-- Help text -->
    <div ng-if="share.urls.original" class="kuiLocalDropdownHelpText">
      You can share this URL with people to let them load the most recent saved version of this {{share.objectType}}.
    </div>

    <div ng-if="!share.urls.original" class="kuiLocalDropdownWarning">
      Please save this {{share.objectType}} to enable this sharing option.
    </div>

    <div ng-if="share.urls.original">
      <!-- iframe -->
      <div class="kuiLocalDropdownSection" ng-if="share.allowEmbed">
        <!-- Header -->
        <div class="kuiLocalDropdownHeader">
          <div class="kuiLocalDropdownHeader__label">
            Embedded iframe
          </div>
          <div class="kuiLocalDropdownHeader__actions">
            <a
              class="kuiLocalDropdownHeader__action"
              ng-click="share.copyToClipboard('#originalIframeUrl')"
            >
              Copy
            </a>
          </div>
        </div>

        <!-- Input -->
        <input
          id="originalIframeUrl"
          class="kuiLocalDropdownInput"
          type="text"
          readonly
          value="{{share.makeIframeTag(share.urls.original)}}"
        />

        <!-- Notes -->
        <div class="kuiLocalDropdownFormNote">
          Add to your HTML source. Note that all clients must be able to access Kibana.
        </div>
      </div>

      <!-- Link -->
      <div class="kuiLocalDropdownSection">
        <!-- Header -->
        <div class="kuiLocalDropdownHeader">
          <div class="kuiLocalDropdownHeader__label">
            Link
          </div>
          <div class="kuiLocalDropdownHeader__actions">
            <a
              class="kuiLocalDropdownHeader__action"
              ng-click="share.copyToClipboard('#originalUrl')"
            >
              Copy
            </a>
          </div>
        </div>

        <!-- Input -->
        <input
          id="originalUrl"
          class="kuiLocalDropdownInput"
          type="text"
          readonly
          value="{{share.urls.original}}"
        />
      </div>
    </div>
  </div>

  <!-- Right panel -->
  <div class="kuiLocalDropdownPanel kuiLocalDropdownPanel--right">
    <!-- Title -->
    <div class="kuiLocalDropdownTitle">
      Share Snapshot
    </div>

    <!-- Help text -->
    <div class="kuiLocalDropdownHelpText">
      Snapshot URLs encode the current state of the {{share.objectType}} in the URL itself. Edits to the saved {{share.objectType}} won't be visible via this URL.
    </div>

    <!-- iframe -->
    <div class="kuiLocalDropdownSection" ng-if="share.allowEmbed">
      <!-- Header -->
      <div class="kuiLocalDropdownHeader">
        <div class="kuiLocalDropdownHeader__label">
          Embedded iframe
        </div>
        <div class="kuiLocalDropdownHeader__actions">
          <a
            class="kuiLocalDropdownHeader__action"
            ng-if="!share.urlFlags.shortSnapshotIframe"
            ng-click="share.toggleShortSnapshotIframeUrl()"
          >
            Short URL
          </a>

          <a
            class="kuiLocalDropdownHeader__action"
            ng-if="share.urlFlags.shortSnapshotIframe"
            ng-click="share.toggleShortSnapshotIframeUrl()"
          >
            Long URL
          </a>

          <a
            class="kuiLocalDropdownHeader__action"
            ng-click="share.copyToClipboard('#snapshotIframeUrl')"
          >
            Copy
          </a>
        </div>
      </div>

      <!-- Input -->
      <input
        id="snapshotIframeUrl"
        class="kuiLocalDropdownInput"
        type="text"
        readonly
        value="{{share.urlFlags.shortSnapshotIframe ? share.makeIframeTag(share.urls.shortSnapshotIframe) : share.makeIframeTag(share.urls.snapshot)}}"
      />

      <!-- Notes -->
      <div class="kuiLocalDropdownFormNote">
        Add to your HTML source. Note that all clients must be able to access Kibana.
      </div>
    </div>

    <!-- Link -->
    <div class="kuiLocalDropdownSection">
      <!-- Header -->
      <div class="kuiLocalDropdownHeader">
        <div class="kuiLocalDropdownHeader__label">
          Link
        </div>
        <div class="kuiLocalDropdownHeader__actions">
          <a
            data-test-subj="sharedSnapshotShortUrlButton"
            class="kuiLocalDropdownHeader__action"
            ng-if="!share.urlFlags.shortSnapshot"
            ng-click="share.toggleShortSnapshotUrl()"
          >
            Short URL
          </a>

          <a
            class="kuiLocalDropdownHeader__action"
            ng-if="share.urlFlags.shortSnapshot"
            ng-click="share.toggleShortSnapshotUrl()"
          >
            Long URL
          </a>

          <a
            data-test-subj="sharedSnapshotCopyButton"
            class="kuiLocalDropdownHeader__action"
            ng-click="share.copyToClipboard('#snapshotUrl')"
          >
            Copy
          </a>
        </div>
      </div>

      <!-- Input -->
      <input
        data-test-subj="sharedSnapshotUrl"
        id="snapshotUrl"
        class="kuiLocalDropdownInput"
        type="text"
        readonly
        value="{{share.urlFlags.shortSnapshot ? share.urls.shortSnapshot : share.urls.snapshot}}"
      />

      <!-- Notes -->
      <div class="kuiLocalDropdownFormNote">
        We recommend sharing shortened snapshot URLs for maximum compatibility. Internet Explorer has URL length restrictions, and some wiki and markup parsers don't do well with the full-length version of the snapshot URL, but the short URL should work great.
      </div>
    </div>
  </div>
</div>