ADMINUI-2331 fix design

TritonDataCenter · Sep 5, 2016 · caebda7 · caebda7
1 parent c080f88
commit caebda7
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 31 deletions.
diff --git a/less/services.less b/less/services.less
@@ -8,6 +8,8 @@
  * Copyright (c) 2016, Joyent, Inc.
  */
 
+@import "__vms-list";
+
 #page-services {
   ul.service-filters {
     padding: 20px;
@@ -45,19 +47,37 @@
   .services {
     .service-name {
       .widget-header;
-      font-size: 12px;
-      padding: 5px 10px;
+      padding: 6px;
+      .service-type {
+        width: 60px;
+        margin: 0 10px;
+        display: inline-block;
+        background-color: @gray-light;
+        font-size: 12px;
+        color: #fff;
+        text-align: center;
+        text-transform: uppercase;
+      }
     }
   }
-  .service+.service { margin-top: 1em;}
   .instance {
+    a {color: #0098b2; cursor: pointer;}
     .widget-content;
     font-size: 12px;
-    padding: 8px;
-    .state { color: @state-danger-text; }
-    .state.running { color: @state-success-text; }
-    .alias, .uuid, .state, .ram { display: inline-block;}
-    .alias { color: @gray-light; width: 100px;}
+    padding: 1% 0 1% 15%;
+    .state {
+      width: 70px;
+      margin: 0 10px;
+      vertical-align: top;
+      text-align: center;
+      .__vms-list.state;
+    }
+    .alias, .uuid, .state, .ram {display: inline-block;}
+    .alias {
+      width: 280px;
+      margin-left: 30px;
+      vertical-align: top;
+    }
     .uuid {
       width: 280px;
       font-style: italic;
@@ -67,11 +87,6 @@
       font-weight: normal;
       line-height: 1.2;
     }
-    .state { width: 100px;}
-    a {
-      cursor: pointer;
-    }
-
     .ram { width: 100px;}
   }
 }

diff --git a/www/js/components/pages/service/index.jsx b/www/js/components/pages/service/index.jsx
@@ -67,7 +67,7 @@ var ServicePage = React.createClass({
             <div className="page-header">
                 <h1>
                     <span className="service-name">{service.name}</span>&nbsp;
-                    <small className="uuid selectable">{service.uuid}</small>
+                    <small className="uuid selectable">{service.uuid}</small>&nbsp;
                     <span className="type">{service.type}</span>
                 </h1>
             </div>

diff --git a/www/js/tpl/services-instance.hbs b/www/js/tpl/services-instance.hbs
@@ -5,16 +5,18 @@
 -->
 
 <!--
-    Copyright (c) 2014, Joyent, Inc.
+    Copyright (c) 2016, Joyent, Inc.
 -->
 
-<div class="alias">{{params.alias}}</div>
-<div class="uuid">
+<div class="state"></div>
+<div class="alias">
     {{#if vm}}
-    <a class="{{type}}">{{uuid}}</a>
-    {{else}}
-    {{uuid}} (agent)
+        <a class="vm">{{name}}</a>
     {{/if}}
+    <div class="uuid selectable">{{uuid}}</div>
 </div>
-<div class="state"></div>
-<div class="ram"></div>
+
+{{#if vm}}
+    <i class="fa fa-codepen fa-fw"></i>
+    <div class="ram"></div>
+{{/if}}
diff --git a/www/js/tpl/services-item.hbs b/www/js/tpl/services-item.hbs
@@ -8,5 +8,7 @@
     Copyright (c) 2016, Joyent, Inc.
 -->
 
-<div class="service-name"><a class="service-link">{{name}}</a></div>
+<div class="service-name">
+    <div class="service-type">{{type}}</div><a class="service-link">{{name}}</a>
+</div>
 <div class="instances"></div>
diff --git a/www/js/views/services.js b/www/js/views/services.js
@@ -17,6 +17,11 @@ var Model = require('../models/model');
 var Collection = require('../models/collection');
 var CollectionView = require('./collection');
 var DEFAULT_TYPE = 'all';
+var TYPES = {
+    default: 'all',
+    vm: 'vm',
+    agent: 'agent'
+};
 
 var Instance = Model.extend({
     idAttribute: 'uuid',
@@ -41,7 +46,7 @@ var Applications = Collection.extend({
 Services = Services.extend({
     filterByType: function (type) {
         var services = null;
-        if (type !== DEFAULT_TYPE) {
+        if (type !== TYPES.default) {
             services = this.filter(function (service) {
                 return service.attributes.type.toLowerCase() === type;
             });
@@ -65,11 +70,12 @@ var InstanceView = Backbone.Marionette.ItemView.extend({
         var data = this.model.toJSON();
         data.vm = data.type === 'vm';
         data.agent = data.type === 'agent';
+        data.name = data.params && data.params.alias || data.uuid;
         return data;
     },
     onRender: function () {
         var self = this;
-        if (this.model.get('type') === 'vm') {
+        if (this.model.get('type') === TYPES.vm) {
             $.get('/api/vms/' + this.model.get('uuid')).done(function (res) {
                 self.$('.state').addClass(res.state).html(res.state);
                 self.$('.ram').addClass(res.state).html(res.ram + ' MB');
@@ -99,6 +105,7 @@ var ServicesListItemView = Backbone.Marionette.ItemView.extend({
             el: this.$('.instances'),
             collection: this.instances
         });
+
         this.instances.params = {service_uuid: this.model.get('uuid')};
         this.instances.fetch({reset: true});
     }
@@ -130,8 +137,8 @@ var View = Backbone.Marionette.ItemView.extend({
         this.services = new Services();
         this.sectionServices = this.services;
         this.applications = new Applications();
-        this.sectionType = DEFAULT_TYPE;
-        this.filterType = DEFAULT_TYPE;
+        this.sectionType = TYPES.default;
+        this.filterType = TYPES.default;
     },
     makeActive: function (selector) {
         this.$(selector).addClass('active').siblings().removeClass('active');
@@ -144,15 +151,15 @@ var View = Backbone.Marionette.ItemView.extend({
             var services;
             this.sectionType = newType;
             this.makeActive('[data-section-type=' + newType + ']');
-            if (newType !== DEFAULT_TYPE) {
+            if (newType !== TYPES.default) {
                 services = this.services.filter(function (service) {
                     return self.applications[newType] && self.applications[newType] === service.attributes.application_uuid;
                 });
             }
             this.computeServicesCount(services || this.services);
             this.sectionServices = services && new Services(services) || this.services;
             var filterType = $('.service-filters .active').attr('service-filter-type');
-            this.servicesListView.collection = filterType === DEFAULT_TYPE ? this.sectionServices :
+            this.servicesListView.collection = filterType === TYPES.default ? this.sectionServices :
                 this.sectionServices.filterByType(filterType);
 
             this.servicesListView.render();
@@ -171,7 +178,7 @@ var View = Backbone.Marionette.ItemView.extend({
     computeServicesCount: function (services) {
         var vmsCount = services.filter(function (service) {
             var type = service.type || service.attributes.type;
-            return type === 'vm';
+            return type === TYPES.vm;
         }).length;
 
         this.$('.number-of-services.vm').html(vmsCount);
@@ -181,7 +188,7 @@ var View = Backbone.Marionette.ItemView.extend({
     onRender: function () {
         var self = this;
         adminui.vent.trigger('settitle', 'services');
-        this.makeActive('[data-section-type=' + DEFAULT_TYPE + ']');
+        this.makeActive('[data-section-type=' + TYPES.default + ']');
         this.applications.fetch({reset: true}).then(function (applications) {
             self.applications = {};
             applications.forEach(function (application) {