You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@deltacloud.apache.org by mf...@redhat.com on 2012/02/23 14:55:59 UTC
[PATCH core 3/7] CIMI: Updated client layout and views to look nice with bootstrap 2.0
From: Michal Fojtik <mf...@redhat.com>
Signed-off-by: Michal fojtik <mf...@redhat.com>
---
clients/cimi/public/app.css | 1 +
clients/cimi/public/app.js | 14 ++++++
clients/cimi/views/layout.haml | 58 +++++++++++++++++++++++---
clients/cimi/views/machines/new.haml | 2 +-
clients/cimi/views/machines/show.haml | 72 +++++++++++++++++---------------
5 files changed, 105 insertions(+), 42 deletions(-)
diff --git a/clients/cimi/public/app.css b/clients/cimi/public/app.css
index 45580d6..1c20dfe 100644
--- a/clients/cimi/public/app.css
+++ b/clients/cimi/public/app.css
@@ -29,6 +29,7 @@ body {
.page-header {
background-color: #f5f5f5;
margin: -20px -20px 10px;
+ padding-bottom : 0px;
}
.page-header h1 {
diff --git a/clients/cimi/public/app.js b/clients/cimi/public/app.js
index 1491b7f..09acbd5 100644
--- a/clients/cimi/public/app.js
+++ b/clients/cimi/public/app.js
@@ -1,3 +1,17 @@
$(function() {
$(".alert-message").alert();
+
+ $("a#saveProvider").bind('click', function() {
+ $('#providerModal').modal('hide');
+ $("#providerModal form").submit();
+ return false;
+ })
+
});
+
+function toggleConfig(driver) {
+ $('#providerModal form input[name=driver]').attr('value', driver);
+ $('#providerModal span#driverName').html(driver.toUpperCase());
+ $('#providerModal').modal('show');
+ return false;
+}
diff --git a/clients/cimi/views/layout.haml b/clients/cimi/views/layout.haml
index 87cdd3a..b7b48fb 100644
--- a/clients/cimi/views/layout.haml
+++ b/clients/cimi/views/layout.haml
@@ -5,27 +5,71 @@
%title CIMI Client
/[if lt IE 9]
%script{ :src => '/html5.js' }
- %script{ :src => '/jquery-1.4.2.min.js' }
+ %script{ :src => '/jquery.js' }
%script{ :src => '/bootstrap/js/bootstrap-alerts.js' }
+ %script{ :src => '/bootstrap/js/bootstrap-dropdown.js' }
+ %script{ :src => '/bootstrap/js/bootstrap-transition.js' }
+ %script{ :src => '/bootstrap/js/bootstrap-modal.js' }
%link{ :href => '/bootstrap/bootstrap.min.css', :rel => :stylesheet }
%link{ :href => '/app.css', :rel => :stylesheet }
%script{ :src => '/app.js' }
%body
- .topbar
- .fill
- .container
- %a.brand{ :href => '/' } CIMI frontend
+ .navbar.navbar-fixed-top
+ .navbar-inner
+ .container-fluid
+ %a.brand{ :href => '/' } CIMI
+ .nav-collapse
+ %ul.nav
+ %li.dropdown
+ %a{ :href => '#', :class => 'dropdown-toggle', :'data-toggle' => 'dropdown'}
+ Driver
+ %b.caret
+ %ul.dropdown-menu
+ %li
+ %a{ :href => '/driver?driver=mock'} Mock
+ %li
+ %a{ :href => '#ec2', :onclick => "toggleConfig('ec2')"} Amazon EC2
+ %li
+ %a{ :href => '#providerModal', :onclick => "toggleConfig('rhevm')"} RHEV-M
+
.container
+ %div{ :id => 'providerModal', :class => 'modal hide fade' }
+ .modal-header
+ %a{ :class => :close, :'data-dismiss' => :modal }='x'
+ %h3
+ %span{ :id => 'driverName'}
+ Driver Configuration
+ .modal-body
+ %form{ :action => "/driver", :method => :get }
+ %input{ :type => :hidden, :name => :driver, :value => ''}
+ %fieldset
+ .control-group
+ %label.control-label API Username
+ .controls
+ %input{ :type => :text, :class => :span3, :name => :username, :value => credentials.user}
+ %span{ :class => 'help-inline'}
+ %label.control-label API Password
+ .controls
+ %input{ :type => :text, :class => :span3, :name => :password, :value => credentials.password}
+ %span{ :class => 'help-inline'}
+ %label.control-label API Provider
+ .controls
+ %input{ :type => :text, :class => :span3, :placeholder => 'http://', :name => :provider, :value => credentials.provider}
+ %br/
+ %span{ :class => 'help-inline'} Enter driver specific provider URL
+ .modal-footer
+ %a{ :href => '#', :class => 'btn btn-primary', :id => 'saveProvider'} Continue
+ %a{ :href => '#', :class => 'btn', :'data-dismiss' => 'modal'} Cancel
.content
.page-header
%h1=@title || 'no-title-fix-me'
= yield_content :breadcrumb
.row
- .span10#main
+ .span8#main
- [ :info, :error, :success ].map do |message|
= flash_block_for message
=yield
- .span4#toolbar=yield_content :actions
+ .span2#toolbar=yield_content :actions
%footer
%p
© 2009-2011 The Apache Software Foundation and individual contributors.
diff --git a/clients/cimi/views/machines/new.haml b/clients/cimi/views/machines/new.haml
index 8de1fe1..d2a354b 100644
--- a/clients/cimi/views/machines/new.haml
+++ b/clients/cimi/views/machines/new.haml
@@ -43,7 +43,7 @@
Machine Admin
%div.input
%select{ :name => 'machine[machine_admin]' }
- - unless @machine_admins.empty?
+ - if @machine_admins.kind_of?(Array)
%option{ :value => '', :selected => :selected }
- @machine_admins.machine_admins.each do |admin|
%option{ :value => admin.href }=href_to_id(admin.href)
diff --git a/clients/cimi/views/machines/show.haml b/clients/cimi/views/machines/show.haml
index d35a850..26deb9e 100644
--- a/clients/cimi/views/machines/show.haml
+++ b/clients/cimi/views/machines/show.haml
@@ -28,41 +28,45 @@
%input{ :type => :hidden, :name => '_method', :value => 'delete'}
%button{ :class => 'btn danger'} Destroy
+%h3 Details
-%blockquote
- %p
- This entity represents a
- Machine Instance
+%table{ :class => 'table table-bordered table-striped' }
+ %tbody
+ %tr
+ %th ID
+ %td
+ %a{ :href => @machine.uri }=@machine.uri
+ %tr
+ %th Description
+ %td=@machine.description
+ %tr
+ %th Created
+ %td #{@machine.created}
+ %tr
+ %th State
+ %td=state_span_for @machine.state
+ %tr
+ %th CPU
+ %td=boolean_span_for @machine.cpu
+ %tr
+ %th RAM
+ %td
+ - if @machine.memory.quantity.nil?
+ %span.label Not specified
+ - else
+ =[@machine.memory.quantity, @machine.memory.units].join(" ")
+ %tr
+ %th Meters
+ %td
+ - if @machine.meters.empty?
+ %span.label No meters
+ - else
+ - @machine.meters.each do |meters|
+ %dd=meters.ref
-%dl
- %dt URI
- %dd
- %a{ :href => @machine.uri }=@machine.uri
- %dt Description
- %dd=@machine.description
- %dt Created
- %dd #{@machine.created}
- %dt State
- %dd=state_span_for @machine.state
- %dt CPU
- %dd=boolean_span_for @machine.cpu
- %dt Memory
- %dd
- - if @machine.memory.quantity.nil?
- %span.label Not specified
- - else
- =[@machine.memory.quantity, @machine.memory.units].join(" ")
- %dt Meters
- %dd
- - if @machine.meters.empty?
- %span.label No meters
- - else
- - @machine.meters.each do |meters|
- %dd=meters.ref
%h3 Properties
-
-%table.bordered-table
+%table{ :class => 'table table-bordered table-striped' }
%thead
%tr
%th Name
@@ -75,7 +79,7 @@
%h3 Network Interfaces
-%table.bordered-table
+%table{ :class => 'table table-bordered table-striped' }
%thead
%tr
%th Address
@@ -96,7 +100,7 @@
%h3 Volumes
-%table.bordered-table
+%table{ :class => 'table table-bordered table-striped' }
%thead
%tr
%th ID
@@ -118,7 +122,7 @@
%h3 Disks
-%table.bordered-table
+%table{ :class => 'table table-bordered table-striped' }
%thead
%tr
%th Capacity
--
1.7.9.1