energylink/public/app/features/dashboard/partials/dashboardImport.html

<page-header model="ctrl.navModel"></page-header>

<div class="page-container page-body" ng-cloak>
  <div ng-if="ctrl.step === 1">

    <form class="page-action-bar">
      <div class="page-action-bar__spacer"></div>
      <dash-upload on-upload="ctrl.onUpload(dash)"></dash-upload>
    </form>

    <h5 class="section-heading">Grafana.com Dashboard</h5>

    <div class="gf-form-group">
      <div class="gf-form gf-form--grow">
        <input type="text" class="gf-form-input max-width-30" ng-model="ctrl.gnetUrl" placeholder="Paste Grafana.com dashboard url or id" ng-blur="ctrl.checkGnetDashboard()"></textarea>
      </div>
      <div class="gf-form" ng-if="ctrl.gnetError">
        <label class="gf-form-label text-warning">
          <i class="fa fa-warning"></i>
          {{ctrl.gnetError}}
        </label>
      </div>
    </div>

    <h5 class="section-heading">Or paste JSON</h5>

    <div class="gf-form-group">
      <div class="gf-form">
        <textarea rows="10" data-share-panel-url="" class="gf-form-input" ng-model="ctrl.jsonText"></textarea>
      </div>
      <button type="button" class="btn btn-secondary" ng-click="ctrl.loadJsonText()">
        <i class="fa fa-paste"></i>
        Load
      </button>
      <span ng-if="ctrl.parseError" class="text-error p-l-1">
        <i class="fa fa-warning"></i>
        {{ctrl.parseError}}
      </span>
    </div>
  </div>

  <div ng-if="ctrl.step === 2">
    <div class="gf-form-group" ng-if="ctrl.dash.gnetId">
      <h3 class="section-heading">
        Importing Dashboard from
        <a href="https://grafana.com/dashboards/{{ctrl.dash.gnetId}}" class="external-link" target="_blank">Grafana.com</a>
      </h3>

      <div class="gf-form">
        <label class="gf-form-label width-15">Published by</label>
        <label class="gf-form-label width-15">{{ctrl.gnetInfo.orgName}}</label>
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-15">Updated on</label>
        <label class="gf-form-label width-15">{{ctrl.gnetInfo.updatedAt | date : 'yyyy-MM-dd HH:mm:ss'}}</label>
      </div>
    </div>

    <h3 class="section-heading">
      Options
    </h3>

    <div class="gf-form-group">
      <div class="gf-form-inline">
        <div class="gf-form gf-form--grow">
          <label class="gf-form-label width-15">Name</label>
          <input type="text" class="gf-form-input" ng-model="ctrl.dash.title" give-focus="true" ng-change="ctrl.titleChanged()" ng-class="{'validation-error': ctrl.nameExists || !ctrl.dash.title}">
          <label class="gf-form-label text-success" ng-if="!ctrl.nameExists && ctrl.dash.title">
            <i class="fa fa-check"></i>
          </label>
        </div>
      </div>

      <div class="gf-form-inline" ng-if="ctrl.nameExists">
        <div class="gf-form offset-width-15 gf-form--grow">
          <label class="gf-form-label text-warning gf-form-label--grow">
            <i class="fa fa-warning"></i>
            A Dashboard with the same name already exists
          </label>
        </div>
      </div>

      <div class="gf-form-inline" ng-if="!ctrl.dash.title">
        <div class="gf-form offset-width-15 gf-form--grow">
          <label class="gf-form-label text-warning gf-form-label--grow">
            <i class="fa fa-warning"></i>
            A Dashboard should have a name
          </label>
        </div>
      </div>

      <div ng-repeat="input in ctrl.inputs">
        <div class="gf-form">
          <label class="gf-form-label width-15">
            {{input.label}}
            <info-popover mode="right-normal">
              {{input.info}}
            </info-popover>
          </label>
          <!-- Data source input -->
          <div class="gf-form-select-wrapper" style="width: 100%" ng-if="input.type === 'datasource'">
            <select class="gf-form-input" ng-model="input.value" ng-options="v.value as v.text for v in input.options" ng-change="ctrl.inputValueChanged()">
              <option value="" ng-hide="input.value">{{input.info}}</option>
            </select>
          </div>
          <!-- Constant input -->
          <input ng-if="input.type === 'constant'" type="text" class="gf-form-input" ng-model="input.value" placeholder="{{input.default}}" ng-change="ctrl.inputValueChanged()">
          <label class="gf-form-label text-success" ng-show="input.value">
            <i class="fa fa-check"></i>
          </label>
        </div>
      </div>
    </div>

    <div class="gf-form-button-row">
      <button type="button" class="btn btn-success width-12" ng-click="ctrl.saveDashboard()" ng-hide="ctrl.nameExists" ng-disabled="!ctrl.inputsValid">
        <i class="fa fa-save"></i> Import
      </button>
      <button type="button" class="btn btn-danger width-12" ng-click="ctrl.saveDashboard()" ng-show="ctrl.nameExists" ng-disabled="!ctrl.inputsValid">
        <i class="fa fa-save"></i> Import (Overwrite)
      </button>
      <a class="btn btn-link" ng-click="ctrl.back()">Cancel</a>
    </div>

  </div>
</div>