Display multiple versions of a package

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

@@ -21,6 +21,7 @@
   function HeliumCtrl($scope, $rootScope, $http, $sce, baseUrlSrv, ngToast) {
     $scope.packageInfos = {};
     $scope.defaultVersions = {};
+    $scope.showVersions = {};
 
     var buildDefaultVersionListToDisplay = function(packageInfos) {
       var defaultVersions = {};
@@ -32,12 +33,15 @@
           pkg.pkg.icon = $sce.trustAsHtml(pkg.pkg.icon);
           if (pkg.enabled) {
             defaultVersions[name] = pkg;
+            pkgs.splice(pkgIdx, 1);
+            break;
           }
         }
 
         // show first available version if package is not enabled
         if (!defaultVersions[name]) {
           defaultVersions[name] = pkgs[0];
+          pkgs.splice(0, 1);
         }
       }
       $scope.defaultVersions = defaultVersions;
@@ -66,7 +70,7 @@
         closeByBackdrop: false,
         closeByKeyboard: false,
         title: '',
-        message: 'Enable ' + name + '?',
+        message: 'Enable ' + name + '? <div style="color:gray">' + artifact + '</div>',
         callback: function(result) {
           if (result) {
             confirm.$modalFooter.find('button').addClass('disabled');
@@ -121,5 +125,13 @@
         }
       });
     };
+
+    $scope.toggleVersions = function(pkgName) {
+      if ($scope.showVersions[pkgName]) {
+        $scope.showVersions[pkgName] = false;
+      } else {
+        $scope.showVersions[pkgName] = true;
+      }
+    };
   }
 })();

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

@@ -0,0 +1,53 @@
+/*
+ * 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.
+ */
+
+.heliumPackageList {
+  min-height: 25px;
+  margin-bottom: 20px;
+}
+
+.heliumPackageList .heliumPackageHead {
+  height: 30px;
+}
+
+.heliumPackageList .heliumPackageIcon {
+  float: left;
+  width: 28px;
+  height: 22px;
+  padding: 5px 2px 0px 2px;
+}
+
+.heliumPackageList .heliumPackageName {
+  font-size: 20px;
+  font-weight: bold;
+  color: #3071a9;
+  float: left;
+  margin-top: 0;
+  float: left;
+}
+
+.heliumPackageList .heliumPackageDisabledArtifact {
+  color:gray;
+}
+
+.heliumPackageList .heliumPackageEnabledArtifact {
+  color:#444444;
+}
+
+.heliumPackageList .heliumPackageVersions {
+}
+
+.heliumPackageList .heliumPackageDescription {
+  margin-top: 10px;
+}

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

@@ -24,14 +24,13 @@ limitations under the License.
 </div>
 
 <div class="box width-full">
-  <div class="row"
-       ng-repeat="(pkgName, pkgInfo) in defaultVersions"
-       style="margin-bottom:20px">
+  <div class="row heliumPackageList"
+       ng-repeat="(pkgName, pkgInfo) in defaultVersions">
     <div class="col-md-12">
-      <div style="height:25px">
-        <div style="float:left;width:28px;height:22px;padding:2px;2px;2px;2px"
+      <div class="heliumPackageHead">
+        <div class="heliumPackageIcon"
              ng-bind-html=pkgInfo.pkg.icon></div>
-        <b style="float:left">{{pkgName}}</b>
+        <div class="heliumPackageName">{{pkgName}}</div>
         <div ng-show="!pkgInfo.enabled"
              ng-click="enable(pkgName, pkgInfo.pkg.artifact)"
              class="btn btn-success btn-xs"
@@ -41,7 +40,28 @@ limitations under the License.
              class="btn btn-info btn-xs"
              style="float:right">Disable</div>
       </div>
-      {{pkgInfo.pkg.description}}
+      <div ng-class="{heliumPackageDisabledArtifact: !pkgInfo.enabled, heliumPackageEnabledArtifact: pkgInfo.enabled}">
+        {{pkgInfo.pkg.artifact}}
+        <span ng-show="packageInfos[pkgName].length > 0"
+              ng-click="toggleVersions(pkgName)"
+              style="margin-left:3px;cursor:pointer;text-decoration: underline;color:#3071a9">
+          Versions
+        </span>
+      </div>
+      <ul class="heliumPackageVersions"
+           ng-show="showVersions[pkgName]">
+        <li class="heliumPackageDisabledArtifact"
+             ng-repeat="pkg in packageInfos[pkgName]">
+          {{pkg.pkg.artifact}} -
+          <span ng-click="enable(pkgName, pkg.pkg.artifact)"
+                style="margin-left:3px;cursor:pointer;text-decoration: underline;color:#3071a9">
+            enable
+          </span>
+        </li>
+      </ul>
+      <div class="heliumPackageDescription">
+        {{pkgInfo.pkg.description}}
+      </div>
     </div>
   </div>
 </div>

zeppelin-web/src/index.html

@@ -61,6 +61,7 @@ limitations under the License.
     <link rel="stylesheet" href="app/jobmanager/jobmanager.css" />
     <link rel="stylesheet" href="app/jobmanager/jobs/job.css" />
     <link rel="stylesheet" href="app/interpreter/interpreter.css" />
+    <link rel="stylesheet" href="app/helium/helium.css" />
     <link rel="stylesheet" href="app/credential/credential.css" />
     <link rel="stylesheet" href="app/configuration/configuration.css" />
     <link rel="stylesheet" href="components/expandCollapse/expandCollapse.css" />