bug 13210: User dashboard layout cleanup

-Replace broken 'My projects' with latest events listing

-Show real network stats; replace with 'Owned networks' and 'Owned IP
addresses'

status 13210: resolved fixed

ui/css/cloudstack3.css

@@ -3469,6 +3469,35 @@ Dialogs*/
   position: relative;
 }
 
+.dashboard.user .button.view-all {
+  float: right;
+  border: 1px solid #4B5B6B;
+  /*+border-radius:4px;*/
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  border-radius: 4px 4px 4px 4px;
+  color: #FFFFFF;
+  /*+text-shadow:0px -1px 2px #13293E;*/
+  -moz-text-shadow: 0px -1px 2px #13293E;
+  -webkit-text-shadow: 0px -1px 2px #13293E;
+  -o-text-shadow: 0px -1px 2px #13293E;
+  text-shadow: 0px -1px 2px #13293E;
+  padding: 2px 3px 3px;
+  margin: -4px 4px -4px 0;
+  text-indent: 0;
+  background: url(../images/bg-gradients.png) 0px -147px;
+}
+
+.dashboard.user .button.view-all:hover {
+  background-position: 0px 0px;
+  /*+text-shadow:0px 1px 1px #000000;*/
+  -moz-text-shadow: 0px 1px 1px #000000;
+  -webkit-text-shadow: 0px 1px 1px #000000;
+  -o-text-shadow: 0px 1px 1px #000000;
+  text-shadow: 0px 1px 1px #000000;
+}
+
 /**** Actions*/
 .dashboard.user .dashboard-actions {
 }
@@ -3634,6 +3663,42 @@ Dialogs*/
   margin: 15px 0 0 8px;
 }
 
+.dashboard.user .status-lists ul li.events {
+  width: 512px;
+}
+
+.dashboard.user .status-lists ul li.events .content li {
+  width: 97%;
+  cursor: pointer;
+  margin: 6px 11px 0 0;
+  font-size: 11px;
+  padding: 13px 0 12px 16px;
+  color: #495A76;
+  /*+text-shadow:0px 1px #FFFFFF;*/
+  -moz-text-shadow: 0px 1px #FFFFFF;
+  -webkit-text-shadow: 0px 1px #FFFFFF;
+  -o-text-shadow: 0px 1px #FFFFFF;
+  text-shadow: 0px 1px #FFFFFF;
+  border: 1px solid #DBDBDB;
+  /*+box-shadow:0px 2px 4px #C0C0C0;*/
+  -moz-box-shadow: 0px 2px 4px #C0C0C0;
+  -webkit-box-shadow: 0px 2px 4px #C0C0C0;
+  -o-box-shadow: 0px 2px 4px #C0C0C0;
+  box-shadow: 0px 2px 4px #C0C0C0;
+  background: #EFEFEF url(../images/bg-gradients.png) repeat-x 0px -29px;
+  /*+border-radius:4px;*/
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  border-radius: 4px 4px 4px 4px;
+}
+
+.dashboard.user .status-lists ul li.events .content li .title {
+  font-weight: bold;
+  color: #4A5A6A;
+  margin-bottom: 9px;
+}
+
 .dashboard.user .status-lists ul li {
   float: left;
   margin: 0 10px 0 0;
@@ -3649,8 +3714,12 @@ Dialogs*/
   padding: 8px 0px 6px;
 }
 
+.dashboard.user .status-lists .events table {
+  width: 515px;
+}
+
 .dashboard.user .status-lists table tbody {
-  height: 150px;
+  height: 256px;
   display: block;
   overflow: auto;
   padding: 0 0px;
@@ -3666,6 +3735,14 @@ Dialogs*/
   cursor: default;
 }
 
+.dashboard.user .status-lists .my-account table tbody tr {
+}
+
+.dashboard.user .status-lists .my-account table tbody tr td {
+  padding-top: 19px;
+  padding-bottom: 19px;
+}
+
 .dashboard.user .status-lists table thead {
   background: url(../images/bg-gradients.png) 0px -351px;
   border-top: 1px solid #C4C5C5;
@@ -3684,8 +3761,8 @@ Dialogs*/
 }
 
 .dashboard.user .status-lists li.ip-addresses td {
-  padding: 13px 0;
   width: 250px;
+  padding: 28px 0 51px;
 }
 
 .dashboard.user .status-lists li.ip-addresses .desc {

ui/index.jsp

@@ -1155,47 +1155,28 @@
 
         <div class="status-lists">
           <ul>
-            <li class="recent-errors">
+            <li class="events">
               <table>
                 <thead>
                   <tr>
-                    <th>My Projects</th>
+                    <th>Latest events <div class="button view-all events">view all</div></th>
                   </tr>
                 </thead>
               </table>
               <div class="content">
-                <table>
-                  <tbody>
-                    <tr><td class="desc"></td><td class="value"></td></tr>
-                  </tbody>
-                </table>
-              </div>
-            </li>
-            <li class="my-account">
-              <table>
-                <thead>
-                  <tr>
-                    <th>My Account</th>
-                  </tr>
-                </thead>
-              </table>
-              <div class="content">
-                <table>
-                  <tbody>
-                    <tr class="odd"><td class="desc">Account</td><td class="value" data-item="accountName"></td></tr>
-                    <tr><td class="desc">User</td><td class="value" data-item="userName"></td></tr>
-                    <tr class="odd"><td class="desc">Role</td><td class="value" data-item="accountType"></td></tr>
-                    <tr><td class="desc">Account ID</td><td class="value" data-item="accountID"></td></tr>
-                    <tr class="odd"><td class="desc">Domain ID</td><td class="value" data-item="accountDomainID"></td></tr>
-                  </tbody>
-                </table>
+                <ul data-item="events">
+                  <li data-list-item="description">
+                    <div class="title" data-list-item="type"></div>
+                    <span data-list-item="description"></span>
+                  </li>
+                </ul>
               </div>
             </li>
             <li class="ip-addresses">
               <table>
                 <thead>
                   <tr>
-                    <th>IP Addresses</th>
+                    <th>Network <div class="button view-all network">view all</div></th>
                   </tr>
                 </thead>
               </table>
@@ -1203,14 +1184,14 @@
                 <tbody>
                   <tr>
                     <td>
-                      <div class="desc"><span>Available public IP addresses:</span></div>
-                      <div class="value"><span>18</span></div>
+                      <div class="desc"><span>Owned isolated networks:</span></div>
+                      <div class="value"><span data-item="netTotal"></span></div>
                     </td>
                   </tr>
                   <tr class="odd">
                     <td>
                       <div class="desc"><span>Owned public IP addresses:</span></div>
-                      <div class="value"><span>03</span></div>
+                      <div class="value"><span data-item="ipTotal"></span></div>
                     </td>
                   </tr>
                 </tbody>

ui/scripts/dashboard.js

@@ -34,13 +34,58 @@
 
           account: function(data) {
             var user = cloudStack.context.users[0];
-            complete($.extend(data, {
+            dataFns.events($.extend(data, {
               accountID: user.userid,
               accountName: user.account,
               userName: user.username,
               accountType: cloudStack.converters.toRole(user.type),
               accountDomainID: user.domainid
             }));
+          },
+
+          events: function(data) {
+            $.ajax({
+              url: createURL('listEvents'),
+              data: {
+                listAll: true,
+                page: 1,
+                pageSize: 4
+              },
+              success: function(json) {
+                dataFns.ipAddresses($.extend(data, {
+                  events: json.listeventsresponse.event ?
+                    json.listeventsresponse.event : []
+                }));
+              }
+            });
+          },
+
+          ipAddresses: function(data) {
+            $.ajax({
+              url: createURL('listNetworks'),
+              data: {
+                listAll: true,
+                type: 'isolated',
+                supportedServices: 'SourceNat'
+              },
+              success: function(json) {
+                var netTotal = json.listnetworksresponse.count ?
+                  json.listnetworksresponse.count : 0;
+
+                 $.ajax({
+                  url: createURL('listPublicIpAddresses'),
+                  success: function(json) {
+                    var ipTotal = json.listpublicipaddressesresponse.count ?
+                      json.listpublicipaddressesresponse.count : 0;
+
+                    complete($.extend(data, {
+                      netTotal: netTotal,
+                      ipTotal: ipTotal
+                    }));
+                  }
+                });                
+              }
+            });
           }
         };
 

ui/scripts/ui-custom/dashboard.js

@@ -127,7 +127,8 @@
 
     // View all action
     $dashboard.find('.view-all').click(function() {
-      $('#navigation li.events').click();
+      if ($(this).hasClass('network')) $('#navigation li.network').click();
+      else $('#navigation li.events').click();
     });