energylink/public/app/features/dashboard/components/DashLinks/editor.html

<div class="page-action-bar">
  <h3 class="dashboard-settings__header">
    <a ng-click="ctrl.backToList()">Dashboard Links</a>
    <span ng-show="ctrl.mode === 'new'">&gt; New</span>
    <span ng-show="ctrl.mode === 'edit'">&gt; Edit</span>
  </h3>

  <div class="page-action-bar__spacer"></div>
  <a
    type="button"
    class="btn btn-primary"
    ng-click="ctrl.setupNew()"
    ng-if="ctrl.dashboard.links.length > 0"
    ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'">
    New
  </a
  >
</div>

<div ng-if="ctrl.mode == 'list'">
  <div ng-if="ctrl.dashboard.links.length === 0">
    <empty-list-cta on-click="ctrl.setupNew" title="ctrl.emptyListCta.title" buttonIcon="ctrl.emptyListCta.buttonIcon" buttonTitle="ctrl.emptyListCta.buttonTitle" infoBox="ctrl.emptyListCta.infoBox" infoBoxTitle="ctrl.emptyListCta.infoBoxTitle"/>
  </div>

  <div ng-if="ctrl.dashboard.links.length > 0">
    <table class="filter-table filter-table--hover">
      <thead>
        <tr>
          <th>Type</th>
          <th>Info</th>
          <th colspan="3"></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="link in ctrl.dashboard.links">
          <td class="pointer" ng-click="ctrl.editLink(link)">
            <i class="fa fa-fw fa-external-link"></i>
            {{ link.type }}
          </td>
          <td>
            <div ng-if="link.title">
              {{ link.title }}
            </div>
            <div ng-if="!link.title && link.url">
              {{ link.url }}
            </div>
            <span
              ng-if="!link.title && link.tags"
              ng-repeat="tag in link.tags"
              tag-color-from-name="tag"
              class="label label-tag"
              style="margin-right: 6px"
            >
              {{ tag }}
            </span>
          </td>
          <td style="width: 1%">
            <i ng-click="ctrl.moveLink($index, -1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
          </td>
          <td style="width: 1%">
            <i ng-click="ctrl.moveLink($index, 1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i>
          </td>
          <td style="width: 1%">
            <a ng-click="ctrl.deleteLink($index)" class="btn btn-danger btn-small" ng-hide="annotation.builtIn">
              <i class="fa fa-remove"></i>
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div ng-if="ctrl.mode == 'edit' || ctrl.mode == 'new'">
  <div class="gf-form-group">
    <div class="gf-form-group">
      <div class="gf-form">
        <span class="gf-form-label width-8">Type</span>
        <div class="gf-form-select-wrapper width-10">
          <select
            class="gf-form-input"
            ng-model="ctrl.link.type"
            ng-options="f for f in ['dashboards','link']"
          ></select>
        </div>
      </div>

      <div class="gf-form" ng-show="ctrl.link.type === 'dashboards'">
        <span class="gf-form-label width-8">With tags</span>
        <bootstrap-tagsinput
          ng-model="ctrl.link.tags"
          tagclass="label label-tag"
          placeholder="add tags"
          style="margin-right: .25rem"
        ></bootstrap-tagsinput>
      </div>

      <gf-form-switch
        ng-show="ctrl.link.type === 'dashboards'"
        class="gf-form"
        label="As dropdown"
        checked="ctrl.link.asDropdown"
        switch-class="max-width-4"
        label-class="width-8"
      ></gf-form-switch>
      <div class="gf-form" ng-show="ctrl.link.type === 'dashboards' && ctrl.link.asDropdown">
        <span class="gf-form-label width-8">Title</span>
        <input type="text" ng-model="ctrl.link.title" class="gf-form-input max-width-10" ng-model-onblur />
      </div>
      <div ng-show="ctrl.link.type === 'link'">
        <div class="gf-form">
          <li class="gf-form-label width-8">Url</li>
          <input type="text" ng-model="ctrl.link.url" class="gf-form-input width-20" ng-model-onblur />
        </div>

        <div class="gf-form">
          <span class="gf-form-label width-8">Title</span>
          <input type="text" ng-model="ctrl.link.title" class="gf-form-input width-20" ng-model-onblur />
        </div>

        <div class="gf-form">
          <span class="gf-form-label width-8">Tooltip</span>
          <input
            type="text"
            ng-model="ctrl.link.tooltip"
            class="gf-form-input width-20"
            placeholder="Open dashboard"
            ng-model-onblur
          />
        </div>

        <div class="gf-form">
          <span class="gf-form-label width-8">Icon</span>
          <div class="gf-form-select-wrapper width-20">
            <select
              class="gf-form-input"
              ng-model="ctrl.link.icon"
              ng-options="k as k for (k, v) in ctrl.iconMap"
            ></select>
          </div>
        </div>
      </div>
    </div>

    <div class="gf-form-group">
      <h5 class="section-heading">Include</h5>
      <div>
        <gf-form-switch
          class="gf-form"
          label="Time range"
          checked="ctrl.link.keepTime"
          switch-class="max-width-6"
          label-class="width-9"
        ></gf-form-switch>
        <gf-form-switch
          class="gf-form"
          label="Variable values"
          checked="ctrl.link.includeVars"
          switch-class="max-width-6"
          label-class="width-9"
        ></gf-form-switch>
        <gf-form-switch
          class="gf-form"
          label="Open in new tab"
          checked="ctrl.link.targetBlank"
          switch-class="max-width-6"
          label-class="width-9"
        ></gf-form-switch>
      </div>
    </div>
  </div>
  <button class="btn btn-primary" ng-if="ctrl.mode == 'new'" ng-click="ctrl.addLink()">
    Add
  </button>
  <button class="btn btn-primary" ng-if="ctrl.mode == 'edit'" ng-click="ctrl.saveLink()">
    Update
  </button>
</div>