Update home page with dashboard partials

css/app.css

@@ -75,6 +75,11 @@
     margin: 0 auto;
   }
 
+  .center {
+    width: 80%;
+    margin: 0 auto;
+  }
+
  .btn-remove {
     margin: 0 auto;
     max-width: 70%;
@@ -83,3 +88,7 @@
   .actions {
     margin: 0 auto;
   }
+
+  .container-bottom {
+      height: 50px;
+  }

index.html

@@ -29,15 +29,16 @@
 
     <div class="container">
 
-    <div ng-include="template" ng-controller="MastheadController" ></div>
-    <div id="view" ng-view>
+        <div ng-include="template" ng-controller="MastheadController" ></div>
+        <div id="view" ng-view>
 
     </div>
-     <div class="footer">
-        <p>Created by:<a href="http://crosbymichael.com">Michael Crosby</a></p>
+    <div class="container-bottom"></div>
+     <div class="footer center well">
+        <p>Created by: <a href="http://crosbymichael.com">crosbymichael</a></p>
     </div>
 
-    </div> <!-- /container -->
+    </div> 
 
     <script src="../assets/js/jquery.js"></script>
     <script src="../assets/js/bootstrap-transition.js"></script>

js/app.js

@@ -2,7 +2,7 @@
 
 angular.module('dockerui', ['dockerui.services', 'dockerui.filters'])
     .config(['$routeProvider', function ($routeProvider) {
-        $routeProvider.when('/', {templateUrl: 'partials/home.html', controller: 'DashboardController'});
+        $routeProvider.when('/', {templateUrl: 'partials/dashboard.html', controller: 'DashboardController'});
         $routeProvider.when('/containers/', {templateUrl: 'partials/containers.html', controller: 'ContainersController'});
         $routeProvider.when('/containers/:id/', {templateUrl: 'partials/container.html', controller: 'ContainerController'});
         $routeProvider.when('/images/', {templateUrl: 'partials/images.html', controller: 'ImagesController'});

js/controllers.js

@@ -37,6 +37,16 @@ function DashboardController($scope, Container) {
     
 }
 
+function SideBarController($scope, Container, Settings) {
+    $scope.template = 'partials/sidebar.html';
+    $scope.containers = [];
+    $scope.endpoint = Settings.endpoint;
+
+    Container.query({all: 0}, function(d) {
+        $scope.containers = d;    
+    }); 
+}
+
 function SettingsController($scope, Auth, System, Docker, Settings) {
     $scope.auth = {};
     $scope.info = {};

partials/dashboard.html

@@ -1,7 +1,13 @@
-  <div class="jumbotron">
-    <h1>DockerUI</h1>
-    <p class="lead">The Linux container engine</p>
-    <a class="btn btn-large btn-success" href="http://docker.io">Learn more.</a>
-  </div>
-
-  <hr>
+ 
+<div class="row-fluid">
+    <!--<div class="sidebar span4">
+        <div ng-include="template" ng-controller="SideBarController"></div>
+    </div>-->
+    <div class="span12">
+        <div class="jumbotron">
+            <h1>DockerUI</h1>
+            <p class="lead">The Linux container engine</p>
+                <a class="btn btn-large btn-success" href="http://docker.io">Learn more.</a>
+          </div>
+    </div>
+</div>

partials/masthead.html

@@ -4,12 +4,12 @@
       <div class="navbar-inner">
         <div class="container">
           <ul class="nav">
-            <li class="{{ hclass }}" ng-click="linkChange('home')"><a href="#">Home</a></li>
+            <li class="{{ hclass }}" ng-click="linkChange('home')"><a href="#">Dashboard</a></li>
             <li class="{{ cclass }}" ng-click="linkChange('containers')"><a href="/#/containers/">Containers</a></li>
             <li class="{{ iclass }}" ng-click="linkChange('images')"><a href="/#/images/">Images</a></li>
             <li class="{{ sclass }}" ng-click="linkChange('settings')"><a href="/#/settings/">Settings</a></li>
           </ul>
         </div>
       </div>
-    </div><!-- /.navbar -->
+    </div>
   </div>

partials/sidebar.html

@@ -0,0 +1,11 @@
+<div class="well">
+    <strong>Running containers:</strong>
+    <br />
+    <strong>Endpoint: </strong>{{ endpoint }}
+    <ul>
+        <li ng-repeat="container in containers">
+            <a href="/#/containers/{{ container.Id }}/">{{ container.Id|truncate:20 }}</a>
+            <span class="pull-right label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span>   
+        </li>
+    </ul>
+</div>