From 40bcb60fd0d81deaec05671417a7a4bb3475dd8f Mon Sep 17 00:00:00 2001
From: Khalid Huseynov <khalidhnv@nflabs.com>
Date: Fri, 24 Jun 2016 10:27:52 -0700
Subject: [PATCH] initial implemenation of offline view

---
 zeppelin-web/src/app/app.js                   |  4 ++
 .../src/app/notebook/notebook-actionBar.html  | 42 ++++++++++++-------
 .../src/app/notebook/notebook.controller.js   | 19 ++++++++-
 zeppelin-web/src/app/notebook/notebook.html   |  2 +-
 .../notebook/paragraph/paragraph-control.html |  2 +
 .../paragraph/paragraph.controller.js         | 12 ++++++
 .../src/app/notebook/paragraph/paragraph.html |  4 +-
 7 files changed, 66 insertions(+), 19 deletions(-)

diff --git a/zeppelin-web/src/app/app.js b/zeppelin-web/src/app/app.js
index 3cbfe3f4be2..a854a8809c1 100644
--- a/zeppelin-web/src/app/app.js
+++ b/zeppelin-web/src/app/app.js
@@ -62,6 +62,10 @@
               templateUrl: 'app/notebook/notebook.html',
               controller: 'NotebookCtrl'
             })
+            .when('/notebook/:noteId/offlineView', {
+                templateUrl: 'app/notebook/notebook.html',
+                controller: 'NotebookCtrl'
+            })
             .when('/jobmanager', {
               templateUrl: 'app/jobmanager/jobmanager.html',
               controller: 'JobmanagerCtrl'
diff --git a/zeppelin-web/src/app/notebook/notebook-actionBar.html b/zeppelin-web/src/app/notebook/notebook-actionBar.html
index dc7a3ecff54..6b637442fb6 100644
--- a/zeppelin-web/src/app/notebook/notebook-actionBar.html
+++ b/zeppelin-web/src/app/notebook/notebook-actionBar.html
@@ -15,8 +15,8 @@
   <h3>
     <div style="float: left; width: auto; max-width: 40%">
       <input type="text" pu-elastic-input class="form-control2" placeholder="{{noteName(note)}}" style="min-width: 0px; max-width: 95%;"
-           ng-show="showEditor" ng-model="note.name" ng-blur="sendNewName();showEditor = false;" ng-enter="sendNewName();showEditor = false;" ng-escape="note.name = oldName; showEditor = false" focus-if="showEditor" />
-      <p class="form-control-static2" ng-click="showEditor = true; oldName = note.name" ng-show="!showEditor">{{noteName(note)}}</p>
+           ng-show="showEditor" ng-model="note.name" ng-blur="sendNewName();showEditor = false;" ng-enter="sendNewName();showEditor = false;" ng-escape="note.name = oldName; showEditor = false" focus-if="showEditor" ng-disabled="{{offlineView}}"/>
+      <p class="form-control-static2" ng-click="showEditor = !offlineView; oldName = note.name" ng-show="!showEditor">{{noteName(note)}}</p>
     </div>
     <div style="float: left; padding-bottom: 10px">
       <span class="labelBtn btn-group">
@@ -24,20 +24,23 @@ <h3>
               class="btn btn-default btn-xs"
               ng-click="runNote()"
               ng-class="{'disabled':isNoteRunning()}"
-              tooltip-placement="bottom" tooltip="Run all paragraphs">
+              tooltip-placement="bottom" tooltip="Run all paragraphs"
+              ng-disabled="{{offlineView}}">
         <i class="icon-control-play"></i>
       </button>
       <button type="button"
               class="btn btn-default btn-xs"
               ng-click="toggleAllEditor()"
               ng-hide="viewOnly"
-              tooltip-placement="bottom" tooltip="Show/hide the code">
+              tooltip-placement="bottom" tooltip="Show/hide the code"
+              ng-disabled="{{offlineView}}">
         <i ng-class="editorToggled ?  'fa icon-size-fullscreen' :'fa icon-size-actual'"></i></button>
       <button type="button"
               class="btn btn-default btn-xs"
               ng-click="toggleAllTable()"
               ng-hide="viewOnly"
-              tooltip-placement="bottom" tooltip="Show/hide the output">
+              tooltip-placement="bottom" tooltip="Show/hide the output"
+              ng-disabled="{{offlineView}}">
         <i ng-class="tableToggled ? 'fa icon-notebook' : 'fa icon-book-open'"></i>
       </button>
       <button type="button"
@@ -45,7 +48,8 @@ <h3>
               ng-click="clearAllParagraphOutput()"
               ng-hide="viewOnly"
               ng-class="{'disabled':isNoteRunning()}"
-              tooltip-placement="bottom" tooltip="Clear output">
+              tooltip-placement="bottom" tooltip="Clear output"
+              ng-disabled="{{offlineView}}">
         <i class="fa fa-eraser"></i>
       </button>
 
@@ -54,21 +58,23 @@ <h3>
               ng-hide="viewOnly"
               tooltip-placement="bottom" tooltip="Clone the notebook"
               data-toggle="modal" data-target="#noteNameModal" data-clone="true"
-              >
+              ng-disabled="{{offlineView}}">
         <i class="fa fa-copy"></i>
       </button>
       <button type="button"
               class="btn btn-default btn-xs"
               ng-hide="viewOnly"
               ng-click="exportNotebook()"
-              tooltip-placement="bottom" tooltip="Export the notebook">
+              tooltip-placement="bottom" tooltip="Export the notebook"
+              ng-disabled="{{offlineView}}">
         <i class="fa fa-download"></i>
       </button>
       <button type="button"
               class="btn btn-default btn-xs dropdown-toggle"
               ng-hide="viewOnly"
               data-toggle="dropdown"
-              tooltip-placement="bottom" tooltip="Version control">
+              tooltip-placement="bottom" tooltip="Version control"
+              ng-disabled="{{offlineView}}">
         <i class="fa fa-file-code-o"></i>
       </button>
       <ul class="dropdown-menu" role="menu" style="width:250px">
@@ -100,7 +106,8 @@ <h3>
                 class="btn btn-default btn-xs"
                 ng-click="removeNote(note.id)"
                 ng-hide="viewOnly"
-                tooltip-placement="bottom" tooltip="Remove the notebook">
+                tooltip-placement="bottom" tooltip="Remove the notebook"
+                ng-disabled="{{offlineView}}">
           <i class="icon-trash"></i>
         </button>
       </span>
@@ -111,7 +118,8 @@ <h3>
              type="button"
              data-toggle="dropdown"
              ng-class="{ 'btn-info' : note.config.cron, 'btn-danger' : note.info.cron, 'btn-default' : !note.config.cron}"
-             tooltip-placement="bottom" tooltip="Run scheduler">
+             tooltip-placement="bottom" tooltip="Run scheduler"
+             ng-disabled="{{offlineView}}">
           <span class="fa fa-clock-o"></span> {{getCronOptionNameFromValue(note.config.cron)}}
         </div>
         <ul class="dropdown-menu" role="menu" style="width:300px">
@@ -157,20 +165,20 @@ <h3>
     </div>
 
     <div class="pull-right" style="margin-top:15px; margin-right:15px; margin-left: 15px; margin-bottom: 13px; font-size:15px;">
-      <span class="setting-btn"
+      <span class="setting-btn {{offlineView ? 'disable' : ''}}"
             type="button"
             data-toggle="modal"
             data-target="#shortcutModal"
             tooltip-placement="bottom" tooltip="List of shortcut">
         <i class="fa fa-keyboard-o"></i>
       </span>
-      <span class="setting-btn"
+      <span class="setting-btn {{offlineView ? 'disable' : ''}}"
             type="button"
             ng-click="toggleSetting()"
             tooltip-placement="bottom" tooltip="Interpreter binding">
         <i class="fa fa-cog" ng-style="{color: showSetting ? '#3071A9' : 'black' }"></i>
       </span>
-      <span class="setting-btn"
+      <span class="setting-btn {{offlineView ? 'disable' : ''}}"
             type="button"
             ng-click="togglePermissions()"
             tooltip-placement="bottom" tooltip="Note permissions">
@@ -179,13 +187,17 @@ <h3>
 
       <span class="btn-group">
         <button type="button" class="btn btn-default btn-xs dropdown-toggle"
-                data-toggle="dropdown">
+                data-toggle="dropdown" ng-disabled="{{offlineView}}">
           {{note.config.looknfeel}} <span class="caret"></span>
         </button>
         <ul class="dropdown-menu pull-right" role="menu">
           <li ng-repeat="looknfeel in looknfeelOption">
             <a style="cursor:pointer" ng-click="setLookAndFeel(looknfeel)">{{looknfeel}}</a>
           </li>
+          <li class="divider"></li>
+          <li>
+            <a style="cursor:pointer" ng-href="{{offlineViewPath}}" target="_blank">offline view</a>
+          </li>
         </ul>
       </span>
     </div>
diff --git a/zeppelin-web/src/app/notebook/notebook.controller.js b/zeppelin-web/src/app/notebook/notebook.controller.js
index 7e0bd7e3ce2..39ed17b14d8 100644
--- a/zeppelin-web/src/app/notebook/notebook.controller.js
+++ b/zeppelin-web/src/app/notebook/notebook.controller.js
@@ -40,9 +40,21 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro
   $scope.interpreterBindings = [];
   $scope.isNoteDirty = null;
   $scope.saveTimer = null;
-
   var connectedOnce = false;
 
+
+  // offline view mode
+  var pattern = new RegExp('^.*\/notebook\/[a-zA-Z0-9_]*\/offlineView$');
+  $scope.offlineView = pattern.test($location.path());
+  var path = '';
+  if ($scope.offlineView) {
+    path = '/#' + $location.path();
+  } else {
+    path = '/#' + $location.path() + '/offlineView';
+  }
+  $scope.offlineViewPath = path;
+  $scope.offlineViewLoaded = false;
+
   // user auto complete related
   $scope.suggestions = [];
   $scope.selectIndex = -1;
@@ -338,6 +350,9 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro
 
   /** update the current note */
   $scope.$on('setNoteContent', function(event, note) {
+    if ($scope.offlineView && $scope.offlineViewLoaded) {
+      return;
+    }
     $scope.paragraphUrl = $routeParams.paragraphId;
     $scope.asIframe = $routeParams.asIframe;
     if ($scope.paragraphUrl) {
@@ -353,6 +368,8 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro
     initializeLookAndFeel();
     //open interpreter binding setting when there're none selected
     getInterpreterBindings(getInterpreterBindingsCallBack);
+    //note loaded for viewOnly mode
+    $scope.offlineViewLoaded = true;
   });
 
   var initializeLookAndFeel = function() {
diff --git a/zeppelin-web/src/app/notebook/notebook.html b/zeppelin-web/src/app/notebook/notebook.html
index f0e87a7250b..5114ba53889 100644
--- a/zeppelin-web/src/app/notebook/notebook.html
+++ b/zeppelin-web/src/app/notebook/notebook.html
@@ -139,7 +139,7 @@ <h4>Note Permissions (Only note owners can change)</h4>
        ng-init="init(currentParagraph, note)"
        ng-class="columnWidthClass(currentParagraph.config.colWidth)"
        class="paragraph-col">
-    <div class="new-paragraph" ng-click="insertNew('above')" ng-hide="viewOnly || asIframe">
+    <div class="new-paragraph" ng-click="insertNew('above')" ng-hide="viewOnly || asIframe || offlineView">
       <h4 class="plus-sign">&#43;</h4>
     </div>
     <div id="{{currentParagraph.id}}_paragraphColumn"
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
index 80a0dc579a0..196981e5e7a 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-control.html
@@ -34,6 +34,7 @@
   <span class="{{paragraph.config.tableHide ? 'icon-notebook' : 'icon-book-open'}}" style="cursor:pointer;" tooltip-placement="top" tooltip="{{(paragraph.config.tableHide ? 'Show' : 'Hide') + ' output'}}"
         ng-click="toggleOutput()"></span>
   <span class="dropdown navbar-right">
+    <span ng-if="!offlineView">
     <span class="icon-settings" style="cursor:pointer"
           data-toggle="dropdown"
           type="button">
@@ -91,4 +92,5 @@
       </li>
     </ul>
   </span>
+  </span>
 </div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 1febeb1cca4..c7f5ddc1ef9 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -385,6 +385,9 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
 
   // TODO: this may have impact on performance when there are many paragraphs in a note.
   $scope.$on('updateParagraph', function(event, data) {
+    if ($scope.offlineView) {
+      return;
+    }
     if (data.paragraph.id === $scope.paragraph.id &&
         (data.paragraph.dateCreated !== $scope.paragraph.dateCreated ||
          data.paragraph.dateFinished !== $scope.paragraph.dateFinished ||
@@ -528,6 +531,9 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
   };
 
   $scope.runParagraph = function(data) {
+    if ($scope.offlineView) {
+      return;
+    }
     websocketMsgSrv.runParagraph($scope.paragraph.id, $scope.paragraph.title,
                                  data, $scope.paragraph.config, $scope.paragraph.settings.params);
     $scope.originalText = angular.copy(data);
@@ -599,6 +605,9 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
   };
 
   $scope.toggleEditor = function() {
+    if ($scope.offlineView) {
+      return;
+    }
     if ($scope.paragraph.config.editorHide) {
       $scope.openEditor();
     } else {
@@ -720,6 +729,9 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
   };
 
   $scope.toggleOutput = function() {
+    if ($scope.offlineView) {
+      return;
+    }
     var newConfig = angular.copy($scope.paragraph.config);
     newConfig.tableHide = !newConfig.tableHide;
     var newParams = angular.copy($scope.paragraph.settings.params);
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
index 54d15af48c2..c1e9e574ada 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.html
@@ -28,7 +28,7 @@
            ng-blur="setTitle(); showTitleEditor = false"
            ng-enter="setTitle(); showTitleEditor = false"
            focus-if="showTitleEditor" />
-    <div ng-click="showTitleEditor = !asIframe && !viewOnly; oldTitle = paragraph.title;"
+    <div ng-click="showTitleEditor = !asIframe && !viewOnly  && !offlineView; oldTitle = paragraph.title;"
          ng-show="!showTitleEditor"
          ng-bind-html="paragraph.title || 'Untitled'">
     </div>
@@ -45,7 +45,7 @@
                      require : ['ace/ext/language_tools']
                    }"
            ng-model="paragraph.text"
-           ng-class="{'disable': paragraph.status == 'RUNNING' || paragraph.status == 'PENDING',
+           ng-class="{'disable': {{offlineView}} || paragraph.status == 'RUNNING' || paragraph.status == 'PENDING',
              'paragraph-text--dirty' : dirtyText !== originalText && dirtyText !== undefined}">
       </div>
     </div>