show file / snapshot name in the browser / diff ui

Author: j-keck

webapp/index.html

@@ -19,7 +19,7 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a class="navbar-brand" href="#">ZFS-Snap-Diff</a>
+          <a class="navbar-brand" href="#/browse-actual">ZFS-Snap-Diff</a>
         </div>
         <div class="collapse navbar-collapse">
           <ul class="nav navbar-nav">

webapp/js/zsd-file-actions.js

@@ -24,6 +24,7 @@ angular.module('zsdFileActions', ['zsdServices', 'zsdUtils']).
 
         // trigger actions if a file is selected
         this.fileSelected = function(pathInActual, pathInSnap, curSnap){
+          $scope.fileName = PathUtils.extractFileName(pathInActual);
           $scope.pathInActual = pathInActual;
           $scope.pathInSnap = pathInSnap;
           $scope.curSnap = curSnap;

webapp/js/zsd-file-diff.js

@@ -5,6 +5,7 @@ angular.module('zsdFileDiff', ['zsdServices']).
       scope: {
         diffResult: '=',
         path: '=',
+        fileName: '=',
         curSnap: '='
       },
       templateUrl: 'template-file-diff.html',

webapp/template-file-actions.html

@@ -53,7 +53,7 @@
 
   <!-- text file content -->  
   <div class="panel panel-default center-block" ng-if="textFileContent">
-    <div class="panel-heading">{{curSnap.Name}}</div>
+    <div class="panel-heading">content of: <strong>{{fileName}}</strong> from snapshot: <strong>{{curSnap.Name}}</strong></div>
     <div class="pandel-body"><pre><code ng-bind-html="textFileContent"></code></pre></div>
   </div>
 
@@ -71,5 +71,5 @@
   </div>
 </div>
 
-<zsd-file-diff diff-result="diffResult" path="pathInActual", cur-snap="curSnap">
+<zsd-file-diff diff-result="diffResult" path="pathInActual", cur-snap="curSnap" file-name="fileName">
 </zsd-file-diff>

webapp/template-file-diff.html

@@ -9,7 +9,7 @@
   <!-- intext -->
   <div class="container" ng-show="diffResult && diffType === 'intext'">
     <div class="panel panel-default center-block">
-      <div class="panel-heading">{{curSnap.Name}}</div>
+      <div class="panel-heading">difference of: <strong>{{fileName}}</strong> between the actual version and the version from the snapshot: <strong>{{curSnap.Name}}</strong></div>      
       <div class="pandel-body">
         <div ng-repeat="diffContext in diffResult.intext">
           <div style="margin-bottom: 5px;">
@@ -35,11 +35,11 @@
   <!-- side by side -->
   <div class="container-fluid" ng-show="diffResult && diffType ==='sideBySide'">
     <div class="panel panel-default center-block">
-      <div class="panel-heading">{{curSnap.Name}}</div>
+      <div class="panel-heading">difference of: <strong>{{fileName}}</strong> between the actual version and the version from the snapshot: <strong>{{curSnap.Name}}</strong></div>
       <div class="pandel-body">  
         <table class="side-by-side-diff">
           <tr>
-            <th colspan="2"><h4 class="text-center" style="margin-bottom: -20px;">Snapshot</h4></td>
+            <th colspan="2"><h4 class="text-center" style="margin-bottom: -20px;">Snapshot (<small>{{curSnap.Name}}</small>)</h4></td>
             <th colspan="2"><h4 class="text-center" style="margin-bottom: -20px;">Actual</h4></td>
           </tr>
           <tr zsd-side-by-side-diff-rows blocks="diffResult.sideBySide">