ux: dashboard settings progress

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

@@ -1,146 +1,122 @@
-<div class="tabbed-view-header">
-	<h2 class="tabbed-view-title">
-		Version history
-	</h2>
+<h3 class="dashboard-settings__header">
+  <a ng-click="ctrl.switchMode('list')">Version History</a>
+  <span ng-show="ctrl.mode === 'compare'">
+    &gt; Comparing {{ctrl.baseInfo.version}}
+    <i class="fa fa-arrows-h"></i>
+    {{ctrl.newInfo.version}}
+    <cite class="muted" ng-if="ctrl.isNewLatest">(Latest)</cite>
+  </span>
+</h3>
 
-	<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 class="page-action-bar" ng-show="ctrl.mode === 'list'">
+  <div class="page-action-bar__spacer"></div>
+  <button type="button"
+          class="btn btn-success"
+          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>
 </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.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.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 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 class="gf-form-group">
+        <div class="gf-form-button-row">
+          <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>
+</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 ng-if="ctrl.mode === 'compare'">
+  <div ng-if="ctrl.loading">
+    <i class="fa fa-spinner fa-spin"></i>
+    <em>Fetching changes&hellip;</em>
+  </div>
 
-    <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">
+    <button  type="button"
+        class="btn btn-danger 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}}
+    </button>
+    <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 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 id="delta" diff-delta>
+      <div class="delta-basic" compile="ctrl.delta.basic"></div>
+    </div>
+
+    <div class="gf-form-button-row">
+      <button class="btn btn-secondary" ng-click="ctrl.getDiff('json')">View JSON Diff</button>
     </div>
+
+    <div class="delta-html" ng-show="ctrl.diff === 'json'" compile="ctrl.delta.json"></div>
   </div>
 </div>

public/app/features/dashboard/partials/addAnnotationModal.html

@@ -1,65 +0,0 @@
-<div class="modal-body" ng-controller="AddAnnotationModalCtrl">
-
-  <div class="modal-header">
-    <h2 class="modal-header-title">
-      Add Annotation
-    </h2>
-
-    <a class="modal-header-close" ng-click="ctrl.close()">
-      <i class="fa fa-remove"></i>
-    </a>
-  </div>
-
-
-  <div class="modal-content">
-    <div class="share-modal-body">
-      <div class="share-modal-header">
-
-        <div class="share-modal-big-icon">
-          <i class="fa fa-tag"></i>
-        </div>
-
-        <div class="share-modal-content">
-
-          <div class="gf-form-group share-modal-options">
-            <p class="share-modal-info-text">
-              Add annotation details.
-            </p>
-
-            <div class="gf-form">
-              <span class="gf-form-label width-8">Title</span>
-              <input type="text" ng-model="ctrl.annotation.title" class="gf-form-input max-width-20">
-            </div>
-            <div class="gf-form">
-              <span class="gf-form-label width-8" ng-if="!ctrl.annotation.timeTo">Time</span>
-              <span class="gf-form-label width-8" ng-if="ctrl.annotation.timeTo">Time Start</span>
-              <input type="text" ng-model="ctrl.annotation.time" class="gf-form-input max-width-20">
-            </div>
-            <div class="gf-form" ng-if="ctrl.annotation.timeTo">
-              <span class="gf-form-label width-8">Time Stop</span>
-              <input type="text" ng-model="ctrl.annotation.timeTo" class="gf-form-input max-width-20">
-            </div>
-          </div>
-
-          <div>
-            <h6>Description</h6>
-          </div>
-          <div class="gf-form-group share-modal-options">
-            <div class="gf-form">
-              <textarea rows="3" class="gf-form-input width-27" ng-model="ctrl.annotation.text"></textarea>
-            </div>
-          </div>
-
-          <div class="gf-form-button-row">
-            <button class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.addAnnotation()">
-              <i class="fa fa-pencil"></i>
-              Add Annotation
-            </button>
-          </div>
-        </div>
-
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

public/app/features/dashboard/partials/settings.html

@@ -1,64 +0,0 @@
-<h3 class="dashboard-settings__header">General</h3>
-
-<div class="gf-form-group">
-	<div class="gf-form">
-		<label class="gf-form-label width-7">Name</label>
-		<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.title'></input>
-	</div>
-	<div class="gf-form">
-		<label class="gf-form-label width-7">Description</label>
-		<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.description'></input>
-	</div>
-	<div class="gf-form">
-		<label class="gf-form-label width-7">
-			Tags
-			<info-popover mode="right-normal">Press enter to add a tag</info-popover>
-		</label>
-		<bootstrap-tagsinput ng-model="ctrl.dashboard.tags" tagclass="label label-tag" placeholder="add tags">
-		</bootstrap-tagsinput>
-	</div>
-	<folder-picker initial-title="ctrl.dashboard.meta.folderTitle"
-                 initial-folder-id="ctrl.dashboard.folderId"
-                 on-change="ctrl.onFolderChange($folder)"
-                 label-class="width-7">
-	</folder-picker>
-</div>
-
-<div class="section">
-	<h5 class="section-heading">Options</h5>
-	<div class="gf-form-group">
-		<div class="gf-form">
-			<label class="gf-form-label width-11">Timezone</label>
-			<div class="gf-form-select-wrapper">
-				<select ng-model="ctrl.dashboard.timezone" class='gf-form-input' ng-options="f.value as f.text for f in [{value: '', text: 'Default'}, {value: 'browser', text: 'Local browser time'},{value: 'utc', text: 'UTC'}]" ng-change="timezoneChanged()"></select>
-			</div>
-		</div>
-		<gf-form-switch class="gf-form" label="Editable" tooltip="Uncheck, then save and reload to disable all dashboard editing" checked="ctrl.dashboard.editable" label-class="width-11">
-		</gf-form-switch>
-		<gf-form-switch class="gf-form" label="Hide Controls" tooltip="Hide row controls. Shortcut: CTRL+H or CMD+H" checked="ctrl.dashboard.hideControls" label-class="width-11">
-		</gf-form-switch>
-	</div>
-</div>
-
-<div class="section">
-	<h5 class="section-heading">Panel Options</h5>
-	<div class="gf-form">
-		<label class="gf-form-label width-11">
-			Graph Tooltip
-			<info-popover mode="right-normal">
-				Cycle between options using Shortcut: CTRL+O or CMD+O
-			</info-popover>
-		</label>
-		<div class="gf-form-select-wrapper">
-			<select ng-model="ctrl.dashboard.graphTooltip" class='gf-form-input' ng-options="f.value as f.text for f in [{value: 0, text: 'Default'}, {value: 1, text: 'Shared crosshair'},{value: 2, text: 'Shared Tooltip'}]"></select>
-		</div>
-	</div>
-</div>
-
-<!-- <div ng&#45;if="editor.index == 1"> -->
-</div>
-<!--  -->
-<!-- <div ng&#45;if="editor.index == 2"> -->
-<!-- </div> -->
-<!--  -->
-<!-- </div> -->

public/app/features/dashboard/settings/settings.html

@@ -66,3 +66,15 @@
 <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'links'" >
 	<dash-links-editor></dash-links-editor>
 </div>
+
+<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'versions'" >
+	<gf-dashboard-history dashboard="dashboard"></gf-dashboard-history>
+</div>
+
+<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'view_json'" >
+  <h3 class="dashboard-settings__header">View JSON</h3>
+
+  <div class="gf-form">
+    <textarea class="gf-form-input" ng-model="ctrl.json" rows="30" spellcheck="false"></textarea>
+  </div>
+</div>

public/app/features/dashboard/settings/settings.ts

@@ -7,6 +7,7 @@ export class SettingsCtrl {
   dashboard: DashboardModel;
   isOpen: boolean;
   viewId: string;
+  json: string;
 
   sections: any[] = [
     {title: 'General',     id: 'settings', icon: "fa fa-fw fa-sliders"},
@@ -31,21 +32,23 @@ export class SettingsCtrl {
     for (let section of this.sections) {
       const sectionParams = _.defaults({editview: section.id}, params);
       section.url = url + '?' + $.param(sectionParams);
-      console.log(section.url);
     }
 
-    this.viewId = params.editview;
-    $rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope);
-
     this.$scope.$on('$destroy', () => {
       this.dashboard.updateSubmenuVisibility();
       this.$rootScope.$broadcast("refresh");
     });
+
+    this.onRouteUpdated();
+    $rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope);
   }
 
   onRouteUpdated() {
-    console.log('settings route updated');
     this.viewId = this.$location.search().editview;
+
+    if (this.viewId) {
+      this.json = JSON.stringify(this.dashboard.getSaveModelClone(), null, 2);
+    }
   }
 
   hideSettings() {

public/app/features/templating/partials/editor.html

@@ -10,7 +10,7 @@
 
 		<div ng-if="variables.length === 0">
 			<div class="empty-list-cta">
-				<div class="empty-list-cta__title">There are no template variables added yet</div>
+				<div class="empty-list-cta__title">There are no variables added yet</div>
 				<a ng-click="setMode('new')" class="empty-list-cta__button btn btn-xlarge btn-success">
 					<i class="gicon gicon-dashboard-new"></i>
 					Add variable