Merge pull request #12 from metalabdesign/table-styles

Add checkbox and styles to audit table
walmartlabs · Feb 27, 2017 · 7dcbead · 7dcbead
2 parents 3e8861c + 3d5c731
commit 7dcbead
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 27 deletions.
diff --git a/public/app/features/audit/partials/log.html b/public/app/features/audit/partials/log.html
@@ -21,31 +21,44 @@ <h2 class="tabbed-view-title">
 	</div>
 
 	<div class="tabbed-view-body">
-		<div class="editor-row row" ng-if="ctrl.mode === 'list'">
-			<div ng-if="ctrl.revisions.length === 0">
-				<em>No revisions to compare</em>
-			</div>
-			<table class="grafana-options-table">
-				<tr ng-repeat="revision in ctrl.revisions">
-					<td>
-						{{revision.version}}
-					</td>
-					<td>
-						{{revision.created}}
-					</td>
-					<td>
-						{{revision.createdBy}}
-					</td>
-					<td>
-						<a ng-show="revision.version !== ctrl.dashboard.version">Restore this version</a>
-					</td>
-				</tr>
-			</table>
-		</div>
+		<div class="gf-form" ng-if="ctrl.mode === 'list'">
+			<div class="gf-form-group">
+				<div ng-if="ctrl.revisions.length === 0">
+					<em>No revisions to compare</em>
+				</div>
 
-		<div class="gf-form" ng-show="ctrl.mode === 'list' && ctrl.revisions.length > 0">
-			<div class="gf-form-button-row">
-				<a type="button" class="btn gf-form-button btn-success" ng-click="ctrl.mode = 'compare';"><i class="fa fa-copy" ></i>&nbsp;&nbsp;Compare</a>
+				<table class="filter-table">
+					<thead>
+						<tr>
+							<th></th>
+							<th>Version</th>
+							<th class="width-14">Date</th>
+							<th class="width-10">Created By</th>
+							<th class="width-10">Updated By</th>
+							<th></th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr ng-repeat="revision in ctrl.revisions">
+							<td><editor-checkbox text="" model="ctrl.active[revision.version]"></editor-checkbox></td>
+							<td>{{revision.version}}</td>
+							<td>{{ctrl.dashboard.formatDate(revision.created)}}</td>
+							<td>{{ctrl.dashboard.meta.createdBy}}</td>
+							<td>{{revision.createdBy}}</td>
+							<td class="text-right">
+								<a class="btn btn-inverse btn-small" ng-show="revision.version !== ctrl.dashboard.version">
+									<i class="fa fa-rotate-right"></i>
+									Restore this version
+								</a>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+				<div class="gf-form-group" ng-show="ctrl.mode === 'list' && ctrl.revisions.length > 0">
+					<div class="gf-form-button-row">
+						<a type="button" class="btn gf-form-button btn-success" ng-click="ctrl.mode = 'compare';"><i class="fa fa-copy" ></i>&nbsp;&nbsp;Compare</a>
+					</div>
+				</div>
 			</div>
 		</div>
 

diff --git a/public/app/features/audit/revision_ctrl.ts b/public/app/features/audit/revision_ctrl.ts
@@ -2,17 +2,35 @@
 
 import coreModule from 'app/core/core_module';
 
+import {DashboardModel} from '../dashboard/model';
+
+export interface CompareRevisionsModel {
+  [key: number]: boolean;
+}
+
+export interface RevisionsModel {
+  id: number;
+  dashboardId: number;
+  slug: string;
+  version: number;
+  created: Date;
+  createdBy: number;
+  message: string;
+}
+
 export class AuditLogCtrl {
-  dashboard: any;
-  mode: any;
-  revisions: any;
+  active: CompareRevisionsModel[];
+  dashboard: DashboardModel;
+  mode: string;
+  revisions: RevisionsModel[];
 
   /** @ngInject */
   constructor(private $scope, private auditSrv) {
     $scope.ctrl = this;
 
     this.mode = 'list';
     this.dashboard = $scope.dashboard;
+    this.active = [];
     this.reset();
 
     $scope.$watch('ctrl.mode', newVal => {
@@ -25,6 +43,9 @@ export class AuditLogCtrl {
   auditLogChange() {
     return this.auditSrv.getAuditLog(this.dashboard).then(revisions => {
       this.revisions = revisions.reverse();
+      this.active = this.revisions.map(revision => {
+        return { [revision.version]: false };
+      });
     });
   }