ZEPPELIN-964 ] Jobmanagement - (2) basic front-end

zeppelin-web/src/app/app.js

@@ -62,6 +62,10 @@
                     templateUrl: 'app/notebook/notebook.html',
                     controller: 'NotebookCtrl'
                 })
+                .when('/jobmanager', {
+                    templateUrl: 'app/jobmanager/jobmanager.html',
+                    controller: 'JobmanagerCtrl'
+                })
                 .when('/interpreter', {
                     templateUrl: 'app/interpreter/interpreter.html',
                     controller: 'InterpreterCtrl'
@@ -71,8 +75,8 @@
                     controller: 'CredentialCtrl'
                 })
                 .when('/configuration', {
-                  templateUrl: 'app/configuration/configuration.html',
-                  controller: 'ConfigurationCtrl'
+                    templateUrl: 'app/configuration/configuration.html',
+                    controller: 'ConfigurationCtrl'
                 })
                 .when('/search/:searchTerm', {
                     templateUrl: 'app/search/result-list.html',

zeppelin-web/src/app/jobmanager/jobmanager.controller.js

@@ -0,0 +1,93 @@
+/*jshint loopfunc: true, unused:false */
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+angular.module('zeppelinWebApp')
+  .controller('JobmanagerCtrl',
+    function($scope, $route, $routeParams, $location, $rootScope, $http, $q,
+             websocketMsgSrv, baseUrlSrv, $interval, $timeout, SaveAsService) {
+
+      $scope.$on('setNotebookJobs', function(event, responseData) {
+        $scope.lastJobServerUnixTime = responseData.lastResponseUnixTime;
+        $scope.jobInfomations = responseData.jobs;
+        $scope.jobInfomationsIndexs = $scope.jobInfomations? _.indexBy($scope.jobInfomations, 'notebookId') : {};
+      });
+
+      $scope.$on('setUpdateNotebookJobs', function(event, responseData) {
+        var jobInfomations = $scope.jobInfomations;
+        var indexStore = $scope.jobInfomationsIndexs;
+        $scope.lastJobServerUnixTime = responseData.lastResponseUnixTime;
+        var notes = responseData.jobs;
+        notes.map(function (changedItem) {
+          if (indexStore[changedItem.notebookId] === undefined) {
+            var newItem = angular.copy(changedItem);
+            jobInfomations.push(newItem);
+            indexStore[changedItem.notebookId] = newItem;
+          } else {
+            var changeOriginTarget = indexStore[changedItem.notebookId];
+
+            if (changedItem.isRemoved !== undefined && changedItem.isRemoved === true) {
+
+              // remove Item.
+              var removeIndex = _.findIndex(indexStore, changedItem.notebookId);
+              if (removeIndex > -1) {
+                indexStore.splice(removeIndex, 1);
+              }
+
+              removeIndex = _.findIndex(jobInfomations, { 'notebookId' : changedItem.notebookId});
+              if (removeIndex) {
+                jobInfomations.splice(removeIndex, 1);
+              }
+
+            } else {
+              // change value for item.
+              changeOriginTarget.isRunningJob = changedItem.isRunningJob;
+              changeOriginTarget.notebookName = changedItem.notebookName;
+              changeOriginTarget.notebookType = changedItem.notebookType;
+              changeOriginTarget.interpreter = changedItem.interpreter;
+              changeOriginTarget.unixTimeLastRun = changedItem.unixTimeLastRun;
+              changeOriginTarget.paragraphs = changedItem.paragraphs;
+            }
+          }
+        });
+      });
+
+      $scope.filterValueToName = function (filterValue) {
+        var index = _.findIndex($scope.ACTIVE_INTERPRETERS, {value : filterValue});
+
+        if ($scope.ACTIVE_INTERPRETERS[index].name !== undefined) {
+          return $scope.ACTIVE_INTERPRETERS[index].name;
+        } else {
+          return 'undefined';
+        }
+      };
+
+      $scope.init = function () {
+        $scope.jobInfomations = [];
+        $scope.JobInfomationsByFilter = $scope.jobInfomations;
+
+        websocketMsgSrv.getNotebookJobsList();
+        var refreshObj = $interval(function () {
+          if ($scope.lastJobServerUnixTime !== undefined) {
+            websocketMsgSrv.getUpdateNotebookJobsList($scope.lastJobServerUnixTime);
+          }
+        }, 1000);
+
+        $scope.$on('$destroy', function() {
+          $interval.cancel(refreshObj);
+          websocketMsgSrv.unsubscribeJobManager();
+        });
+      };
+});

zeppelin-web/src/app/jobmanager/jobmanager.css

@@ -0,0 +1,43 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.job-col {
+  margin: 0;
+  padding: 0;
+}
+
+.job {
+  padding: 2px 8px 4px 8px;
+  min-height: 32px;
+}
+
+.jobManagerHead {
+  margin: -10px -10px 20px;
+  padding: 10px 15px 15px 15px;
+  background: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  border-bottom: 1px solid #E5E5E5;
+}
+
+.jobManagerHead .header {
+  font-family: 'Roboto', sans-serif;
+}
+
+.job-note-name-query {
+  padding: 6px;
+  color: #000;
+  height: 22px;
+  width: 200px;
+  font: normal normal normal 14px/1 FontAwesome;
+}

zeppelin-web/src/app/jobmanager/jobmanager.html

@@ -0,0 +1,119 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!-- Here the controller <JobmanagerCtrl> is not needed because explicitly set in the app.js (route) -->
+<div class="jobManagerHead" data-ng-init="init()">
+  <div class="header">
+    <div class="row">
+      <div class="col-md-12">
+        <h3 class="new_h3">
+          Job
+        </h3>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12">
+        You can monitor the written notebook. Check the status of the Notebook and can control the action.
+      </div>
+    </div>
+  </div>
+  <div style="margin: 0px">
+    <hr style="margin-top: 10px; margin-bottom: 10px;" />
+  </div>
+
+  <div class="row">
+    <div
+      class="col-md-12 text-right"
+      style="padding-top: 6px;">
+      <span
+        ng-repeat="jobStatus in ['READY', 'FINISHED', 'ABORT', 'ERROR','PENDING','RUNNING']"
+        ng-switch="jobStatus">
+        <span
+          ng-switch-when="FINISHED">
+          <i style="color: green; margin-right: 3px;" class="fa fa-circle"
+             ng-click=""
+             tooltip="FINISHED">
+          </i>
+          {{jobStatus}}
+        </span>
+        <span
+          ng-switch-when="RUNNING"
+          style="margin-right: 3px;">
+          <i style="color: blue" class="fa fa-spinner"
+             ng-click=""
+             tooltip="RUNNING">
+          </i>
+          {{jobStatus}}
+        </span>
+        <span
+          ng-switch-when="READY"
+          style="margin-right: 3px;">
+          <i style="color: green" class="fa fa-circle-o"
+             ng-click=""
+             tooltip="READY">
+          </i>
+          {{jobStatus}}
+        </span>
+        <span
+          ng-switch-when="PENDING"
+          style="margin-right: 3px;">
+          <i style="color: gray" class="fa fa-circle"
+             ng-click=""
+             tooltip="PENDING"
+          >
+          </i>
+          {{jobStatus}}
+        </span>
+        <span
+          ng-switch-when="ABORT"
+          style="margin-right: 3px;">
+          <i style="color: orange" class="fa fa-circle"
+             ng-click=""
+             tooltip="ABORT">
+          </i>
+          {{jobStatus}}
+        </span>
+        <span
+          ng-switch-when="ERROR"
+          style="margin-right: 3px;">
+          <i style="color: red" class="fa fa-circle"
+             ng-click=""
+             tooltip="ERROR">
+          </i>
+          {{jobStatus}}
+        </span>
+      </span>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="note-jump"></div>
+  <div
+    ng-if="jobInfomations.length > 0"
+    ng-repeat="notebookJob in jobInfomations"
+    class="paragraph-col">
+    <div ng-include src="'app/jobmanager/jobs/job.html'"
+         class="job-space box job-margin"
+         ng-controller="JobCtrl">
+    </div>
+  </div>
+  <div
+    ng-if="jobInfomations.length <= 0"
+    class="paragraph-col">
+    <div
+      class="job-space box job-margin text-center">
+      Data does not exist
+    </div>
+  </div>
+  <div style="clear:both;height:10px"></div>
+</div>

zeppelin-web/src/app/jobmanager/jobs/job-control.html

@@ -0,0 +1,31 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div id="{{notebookJob.notebookId}}_control" class="control">
+  <span>
+    {{lastExecuteTime(notebookJob.unixTimeLastRun)}}
+  </span>
+  <span>
+    <span ng-if="notebookJob.isRunningJob === true">
+      Notebook is RUNNING
+    </span>
+    <span ng-if="notebookJob.isRunningJob === false">
+      Notebook is READY
+    </span>
+  </span>
+
+  <span ng-if="notebookJob.isRunningJob === true">
+    {{getProgress()}}%
+  </span>
+</div>

zeppelin-web/src/app/jobmanager/jobs/job-progressBar.html

@@ -0,0 +1,22 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div id="{{notebookJob.notebookId}}_runControl" class="runControl">
+  <div id="{{notebookJob.notebookId}}_progress" class="progress" ng-if="notebookJob.isRunningJob === true">
+      <div ng-if="getProgress()>0 && getProgress()<100 && notebookJob.isRunningJob === true"
+        class="progress-bar" role="progressbar" ng-style="{width:getProgress()+'%'}"></div>
+      <div ng-if="(getProgress()<=0 || getProgress()>=100) && (notebookJob.isRunningJob === true)"
+          class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%;"></div>
+  </div>
+</div>

zeppelin-web/src/app/jobmanager/jobs/job.controller.js

@@ -0,0 +1,39 @@
+/*jshint loopfunc: true, unused:false */
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+angular.module('zeppelinWebApp')
+  .controller('JobCtrl', function($scope,$rootScope, $http, baseUrlSrv) {
+
+    $scope.init = function (jobInformation) {
+      $scope.progressValue = 0;
+    };
+
+    $scope.getProgress = function () {
+      var statusList = _.pluck($scope.notebookJob.paragraphs, 'status');
+      var runningJob = _.countBy(statusList, function (status) {
+        if (status === 'FINISHED' || status === 'RUNNING') {
+          return 'matchCount';
+        } else {
+          return 'none';
+        }
+      });
+      var totalCount = statusList.length;
+      var runningJobCount = runningJob.matchCount;
+      var result = Math.ceil(runningJobCount / totalCount * 100);
+      return isNaN(result)? 0 : result;
+    };
+
+});