energylink/public/app/features/dashboard/history/history.html

<div class="tabbed-view-header">
	<h2 class="tabbed-view-title">
		Version history
	</h2>

	<ul class="gf-tabs">
		<li class="gf-tabs-item" >
			<a class="gf-tabs-link" ng-click="ctrl.switchMode('list');" ng-class="{active: ctrl.mode === 'list'}">
				List
			</a>
		</li>
		<li class="gf-tabs-item" ng-show="ctrl.mode === 'compare'">
			<span class="active gf-tabs-link">
				Version Comparison
			</span>
		</li>
	</ul>

	<button class="tabbed-view-close-btn" ng-click="ctrl.dismiss();">
		<i class="fa fa-remove"></i>
	</button>
</div>

<div class="tabbed-view-body">

	<div ng-if="ctrl.mode === 'list'">
		<div ng-if="ctrl.loading">
			<i class="fa fa-spinner fa-spin"></i>
			<em>Fetching history list&hellip;</em>
		</div>

		<div ng-if="!ctrl.loading">
      <div class="gf-form-group">
        <table class="filter-table">
          <thead>
            <tr>
              <th class="width-4"></th>
              <th class="width-4">Version</th>
              <th class="width-14">Date</th>
              <th class="width-10">Updated By</th>
              <th>Notes</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="revision in ctrl.revisions">
              <td class="filter-table__switch-cell" bs-tooltip="!revision.checked && ctrl.canCompare ? 'You can only compare 2 versions at a time' : ''" data-placement="right">
                <gf-form-switch switch-class="gf-form-switch--table-cell"
                                checked="revision.checked"
                                on-change="ctrl.revisionSelectionChanged()"
																ng-disabled="!revision.checked && ctrl.canCompare">
                </gf-form-switch>
              </td>
              <td class="text-center">{{revision.version}}</td>
              <td>{{revision.createdDateString}}</td>
              <td>{{revision.createdBy}}</td>
              <td>{{revision.message}}</td>
              <td class="text-right">
                <a class="btn btn-inverse btn-small" ng-show="revision.version !== ctrl.dashboard.version" ng-click="ctrl.restore(revision.version)">
                  <i class="fa fa-history"></i>&nbsp;&nbsp;Restore
                </a>
                <a class="btn btn-outline-disabled btn-small" ng-show="revision.version === ctrl.dashboard.version">
                  <i class="fa fa-check"></i>&nbsp;&nbsp;Latest
                </a>
              </td>
            </tr>
          </tbody>
        </table>

        <div ng-if="ctrl.appending">
          <i class="fa fa-spinner fa-spin"></i>
          <em>Fetching more entries&hellip;</em>
        </div>

        <div class="gf-form-group" ng-show="ctrl.mode === 'list'">
          <div class="gf-form-button-row">
            <button	type="button"
                class="btn gf-form-button btn-secondary"
                ng-if="ctrl.revisions.length > 1"
                ng-disabled="!ctrl.canCompare"
                ng-click="ctrl.getDiff(ctrl.diff)"
								bs-tooltip="ctrl.canCompare ? '' : 'Select 2 versions to start comparing'" data-placement="bottom">
              <i class="fa fa-code-fork" ></i>&nbsp;&nbsp;Compare versions
            </button>
            <button  type="button"
                class="btn gf-form-button btn-inverse"
                ng-if="ctrl.revisions.length >= ctrl.limit"
                ng-click="ctrl.addToLog()"
                ng-disabled="ctrl.isLastPage()">
              Show more versions
            </button>
          </div>
        </div>
      </div>
		</div>
	</div>

	<div class="edit-tab-with-sidemenu" ng-if="ctrl.mode === 'compare'">
    <aside class="edit-sidemenu-aside">
      <ul class="edit-sidemenu">
        <li ng-class="{active: ctrl.diff === 'basic'}"><a ng-click="ctrl.getDiff('basic')" href="">Change Summary</a></li>
        <li ng-class="{active: ctrl.diff === 'html'}"><a ng-click="ctrl.getDiff('json')" href="">JSON Diff</a></li>
      </ul>
    </aside>

    <div class="edit-tab-content">
      <div ng-if="ctrl.loading">
        <i class="fa fa-spinner fa-spin"></i>
        <em>Fetching changes&hellip;</em>
      </div>

      <div ng-if="!ctrl.loading">
        <a  type="button"
            class="btn gf-form-button btn-secondary pull-right"
            ng-click="ctrl.restore(ctrl.baseInfo.version)"
            ng-if="ctrl.isNewLatest">
          <i class="fa fa-history" ></i>&nbsp;&nbsp;Restore to version {{ctrl.baseInfo.version}}
        </a>
        <h4>
          Comparing Version {{ctrl.baseInfo.version}}
          <i class="fa fa-arrows-h"></i>
					Version {{ctrl.newInfo.version}}
          <cite class="muted" ng-if="ctrl.isNewLatest">(Latest)</cite>
        </h4>
        <section>
          <p class="small muted">
          <strong>Version {{ctrl.newInfo.version}}</strong> updated by
          <span>{{ctrl.newInfo.createdBy}} </span>
          <span>{{ctrl.newInfo.ageString}}</span>
          <span> - {{ctrl.newInfo.message}}</span>
          </p>
          <p class="small muted">
          <strong>Version {{ctrl.baseInfo.version}}</strong> updated by
          <span>{{ctrl.baseInfo.createdBy}} </span>
          <span>{{ctrl.baseInfo.ageString}}</span>
          <span> - {{ctrl.baseInfo.message}}</span>
          </p>
        </section>
        <div id="delta" diff-delta>
          <div class="delta-basic" ng-show="ctrl.diff === 'basic'" compile="ctrl.delta.basic"></div>
          <div class="delta-html" ng-show="ctrl.diff === 'json'" compile="ctrl.delta.json"></div>
        </div>
      </div>
    </div>
  </div>
</div>