grafana/public/app/features/dashboard/import/dash_import.html

<div class="modal-body">

	<div class="modal-header">
		<h2 class="modal-header-title">
			<i class="fa fa-upload"></i>
			<span class="p-l-1">Import Dashboard</span>
		</h2>

		<a class="modal-header-close" ng-click="dismiss();">
			<i class="fa fa-remove"></i>
		</a>
	</div>

	<div class="modal-content" ng-cloak>
		<div ng-if="ctrl.step === 1">

			<form class="gf-form-group">
				<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">
					<input type="text" class="gf-form-input" 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="7" 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 gf-form-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 gf-form-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="dismiss()">Cancel</a>
        <a class="btn btn-link" ng-click="ctrl.back()">Back</a>
      </div>

    </div>
  </div>
</div>