More container detail page tweaks :-)

hawtio · Sep 26, 2013 · 4029c36 · 4029c36
1 parent deac4e9
commit 4029c36
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 33 deletions.
diff --git a/hawtio-web/src/main/webapp/app/fabric/html/container.html b/hawtio-web/src/main/webapp/app/fabric/html/container.html
@@ -20,7 +20,7 @@ <h2><i ng-class="statusIcon()"></i>Container: {{row.id}}</h2>
       <div class="row-fluid">
 
 
-        <div class="span4 container-profile-settings">
+        <div class="span5 container-profile-settings">
           <dl class="dl-horizontal container-detail-profiles">
             <div class="btn-group pull-right container-detail-profile-buttons">
               <button class="btn" ng-click="addProfileDialog.open()" title="Add new profiles to this container"><i class="icon-plus"></i> Add</button>
@@ -33,7 +33,7 @@ <h2><i ng-class="statusIcon()"></i>Container: {{row.id}}</h2>
           </dl>
         </div>
 
-        <div class="span3 container-settings">
+        <div class="span6 container-settings">
           <div class="tabbable hawtio-form-tabs">
 
             <div class="tab-pane" title="Status">
@@ -161,9 +161,41 @@ <h2><i ng-class="statusIcon()"></i>Container: {{row.id}}</h2>
               </dl>
             </div>
 
-          </div>
+            <div class="tab-pane" title="URLs">
+              <dl class="dl-horizontal">
+                <dt>Git:</dt>
+                <dd>{{getGitURL(row.jolokiaUrl)}}</dd>
+              </dl>
+              <dl class="dl-horizontal">
+                <dt>SSH:</dt>
+                <dd>{{row.sshUrl}}</dd>
+              </dl>
+              <dl class="dl-horizontal">
+                <dt>JMX:</dt>
+                <dd>{{row.jmxUrl}}</dd>
+              </dl>
+              <dl class="dl-horizontal">
+                <dt>Jolokia:</dt>
+                <dd>{{row.jolokiaUrl}}</dd>
+              </dl>
+            </div>
+
+
+            <div class="tab-pane" title="Provision List">
+              <dl>
+                <dt class="provision-list-title">
+                  <input id="provision-list-filter" type="text" class="search-query" placeholder="Filter..." ng-model="provisionListFilter">
+                </dt>
+                <dd class="provision-list">
+                  <ul>
+                    <li ng-repeat="item in row.provisionList" ng-class="getClass(item)">{{item}}</li>
+                  </ul>
+                </dd>
+              </dl>
+            </div>
 
 
+          </div>
       </div>
 
       <div ng-show="row.provisionExceptionArray" class="row-fluid">
@@ -177,35 +209,6 @@ <h2><i ng-class="statusIcon()"></i>Container: {{row.id}}</h2>
         </div>
       </div>
 
-      <div class="row-fluid">
-        <div class="span8">
-          <dl>
-            <dt>URLs:</dt>
-            <dd>
-              <ul>
-                <li ng-show="row.sshUrl"><strong>SSH: </strong>{{row.sshUrl}}</li>
-                <li ng-show="row.jmxUrl"><strong>JMX: </strong>{{row.jmxUrl}}</li>
-                <li ng-show="row.jolokiaUrl"><strong>Jolokia: </strong>{{row.jolokiaUrl}}</li>
-              </ul>
-            </dd>
-          </dl>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-        <div class="span8">
-          <dl>
-            <dt>Provision List:
-              <input type="text" class="search-query" placeholder="Filter..." ng-model="provisionListFilter">
-            </dt>
-            <dd>
-              <ul ng-repeat="item in row.provisionList">
-                <li ng-class="getClass(item)">{{item}}</li>
-              </ul>
-            </dd>
-          </dl>
-        </div>
-      </div>
     </div>
   </div>
 

diff --git a/hawtio-web/src/main/webapp/app/fabric/html/profileSelector.html b/hawtio-web/src/main/webapp/app/fabric/html/profileSelector.html
@@ -12,7 +12,7 @@
       <li class="no-list profile-selector-folder" ng-repeat="branch in tree" ng-show="showBranch(branch)">
         <div class="expandable" ng-class="isOpen(branch)">
           <div title="{{branch.path}}" class="title">
-            <i class="expandable-indicator folder"></i> <span ng-show="branch.path">{{branch.path.capitalize(true)}}</span><span ng-hide="branch.path">Unsorted</span>
+            <i class="expandable-indicator folder"></i> <span class="folder-title" ng-show="branch.path">{{branch.path.capitalize(true)}}</span><span class="folder-title" ng-hide="branch.path">Unsorted</span>
           </div>
           <div class="expandable-body">
             <ul>

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/container.ts b/hawtio-web/src/main/webapp/app/fabric/js/container.ts
@@ -82,6 +82,10 @@ module Fabric {
       return Fabric.statusIcon($scope.row);
     };
 
+    $scope.getGitURL = (jolokiaUrl) => {
+      return jolokiaUrl.replace("jolokia", "git/fabric");
+    }
+
     $scope.getType = () => {
       if ($scope.row) {
         if ($scope.row.ensembleServer) {

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -878,10 +878,12 @@ div.hawtio-form-tabs ul.nav-tabs li.active {
   background-color: white;
   box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.1) !important;
 }
+
 div.hawtio-form-tabs ul.nav-tabs li.active a {
   box-shadow: none !important;
   text-shadow: none !important;
   background-color: inherit !important;
+  font-weight: bold;
 }
 .popover-inner .popover-title {
   overflow: hidden;
@@ -1940,3 +1942,35 @@ a.dashboard-link:hover {
   max-height: 327px;
   overflow-y: auto;
 }
+
+@media (max-width: 979px) {
+  .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
+    padding: 0;
+  }
+
+  .navbar-fixed-top, .navbar-fixed-bottom {
+    position: fixed;
+  }
+
+}
+
+.provision-list {
+  margin-left: 0px;
+}
+
+.provision-list ul {
+  margin-left: 0px;
+}
+
+.provision-list ul li {
+  list-style-type: none;
+  padding: 7px;
+}
+
+.provision-list ul li:nth-child(even) {
+  background-color: #f3f3f3;
+}
+
+.container-profile-settings span.folder-title {
+  font-weight: bold;
+}