oxidized-web 0.5.2 → 0.6.0

data/lib/oxidized/web/views/head.haml

@@ -1,5 +1,13 @@
 %head
+  %meta{charset: 'utf-8'}
+  %meta{'meta-equiv': 'X-UA-Compatible', content: 'IE=edge'}
+  %meta{name: 'viewport', content: 'width=device-width, initial-scale=1'}
   %title oxidized
-  %link{:rel=>'stylesheet', :href=>url_for('/css/bootstrap.min.css')}
-  %link{:rel=>'stylesheet', :href=>url_for('/css/oxidized.css')}
-  %link{:rel=>'shortcut icon', :href=>url_for('/images/favicon.ico')}
+  %link{rel: 'stylesheet', href: url_for('/css/bootstrap.min.css')}
+  %link{rel: 'stylesheet', href: url_for('/css/oxidized.css')}
+  %link{rel: 'shortcut icon', href: url_for('/images/favicon.ico')}
+  %link{rel: 'stylesheet', href: url_for('/css/dataTables.colVis.css')}
+  %link{rel: 'stylesheet', href: url_for('/css/dataTables.bootstrap.css')}
+  %link{rel: 'stylesheet', href: url_for('/css/buttons.bootstrap.min.css')}
+  %script{src: url_for('/scripts/jquery-2.1.1.min.js')}
+

data/lib/oxidized/web/views/layout.haml

@@ -1,11 +1,44 @@
-%html
+!!! 5
+%html{lang: 'en'}
   !=haml :head
   %body
-    %header{:class=>'navbar navbar-static-top ox-nav', :role=>'navigation'}
-      %div{:class=>'container'}
-        %div{:class=>'navbar-header'}
-          %div{:class=>'collapse navbar-collapse'}
-            %a{:class=>'navbar-brand', :href=>url_for('/')}
-              %img{:src=>url_for('/images/oxidizing_40px.png')} Oxidized
-    %div{:class=>'container'}
+    %nav.navbar.navbar-default.navbar-static-top{role: 'navigation'}
+      .container-fluid
+        .navbar-header
+          %button.navbar-toggle.collapsed{type: 'button',
+                                          'data-toggle': 'collapse',
+                                          'data-target': '#ox-nav',
+                                          'aria-expanded': 'false'}
+            %span.sr-only Toggle Navigation
+            %span.icon-bar
+            %span.icon-bar
+            %span.icon-bar
+          %a.navbar-brand{href: url_for('/')}
+            %img{src: url_for('/images/oxidizing_40px.png')} Oxidized
+
+        .collapse.navbar-collapse#ox-nav
+          %ul.nav.navbar-nav
+            %li{class: request.path_info == '/nodes/stats' ? 'active' : ''}
+              %a.navbar-link{href: url_for('/nodes/stats')} Stats
+
+            %li{class: request.path_info == '/migration' ? 'active' : ''}
+              %a.navbar-link{href: url_for('/migration')} Migration
+
+          %form.navbar-form.navbar-right{role: 'search',
+                                         action: '/nodes/conf_search',
+                                         method: 'post'}
+            .form-group#to_search_in_config{name: 'to_search_in_config'}
+              %input.form-control.input-sm{type: 'text',
+                                           name: 'search_in_conf_textbox',
+                                           placeholder: 'Search in Configs'}
+              %button.btn.btn-primary.btn-sm{type: 'submit'}
+                %span.glyphicon.glyphicon-search
+
+    .container-fluid
       =yield
+    %script{src: url_for('/scripts/bootstrap.min.js')}
+    %script{src: url_for('/scripts/jquery.dataTables.min.js')}
+    %script{src: url_for('/scripts/dataTables.bootstrap.js')}
+    %script{src: url_for('/scripts/dataTables.colVis.js')}
+    %script{src: url_for('/scripts/oxidized.js')}
+

data/lib/oxidized/web/views/migration.haml

@@ -1,41 +1,46 @@
-!=haml :head
-%script{:src=>url_for('/scripts/script-migration.js')}
-%body
-  
-  %span{:id=>"migration_span"}
-    Here you can migrate from your Rancid to Oxidized.
-    %br
-    To do it, just execute te following actions :
-  %br
-  %br
-  %form(method="post" enctype="multipart/form-data")
-    %label{:for=>"path_new_file"} Set the path for your future equipement file in .db format
-    %br
-    %input{:type=>"text", :name=>"path_new_file", :value=>"Path/to_file/here.db"}
-    %br
-    %br
-    %label{:for=>"cloginrc"} Select your .cloginrc file, must be readeable
-    %input{:type=>"file", :name=>"cloginrc"}
-    %br
-    %label{:for=>"files"} Select all your router.db fies of rancid, and add their group (Click "Add file" if you have multiple files)
-    %table{:id=>"files", :name=>"files"}
-      %th{:id=>"file"} Group
-      %th{:id=>"file"} File
-      %tbody
-        %tr
-          %td{:id=>"file"}
-            %input{:type=>"text", :name=>"group1", :value=>"default"}
-          %td{:id=>"file"}
-            %input{:type=>"file", :name=>"file1", :required=>""}
-    %br
-    %input(type='button' value ='Add file' onclick="add_file_upload();")
-    %br
-    %br
-    %label{:for=>"upload_button"}Then Click "Migrate" to do your migration
-    %br
-    %input(type='submit' value='Migrate !' id="upload_button")
-    /
-      used to know the numbers of files router.db
-    %input(type='hidden' value='1' id='number' name='number')
-    
-  
+%h2
+  RANCID to Oxidized
+  %small router.db and Group Migration
+%form.form-horizontal{method: 'post', enctype: 'multipart/form-data',
+                      role: 'form'}
+  .form-group
+    %label.col-sm-3{for: 'path_new_file'}
+      Oxidized router.db Path
+    .col-sm-3
+      %input.form-control{type: 'text', name: 'path_new_file',
+                          placeholder: 'Path/to_file/here.db'}
+  .form-group
+    %label.col-sm-3{for: 'clogrinc'} .cloginrc File
+    .col-sm-3
+      .input-group
+        %input.form-control{type: 'text'}
+        %span.input-group-btn
+          %span.btn.btn-default.btn-file
+            %input{type: 'file', name: 'cloginrc'}
+            Browse
+
+  .form-group
+    .col-sm-12
+      .row
+        %label.col-sm-3.label-control RANCID router.db File
+        %label.col-sm-3.label-control Device Group
+    .col-sm-12#rancid_routerdbs
+      .row#rancidDb1
+        .col-sm-3
+          .input-group
+            %input.form-control{type: 'text'}
+            %span.input-group-btn
+              %span.btn.btn-default.btn-file
+                %input#file1{type: 'file', name: 'file1', required: ''}
+                Browse
+        .col-sm-3
+          %input.form-control#group1{type: 'text', name: 'group1',
+                                     value: 'default'}
+      .row
+        .col-sm-3
+          %button.btn.btn-default#add{type: 'button'} Add More
+
+  .form-group
+    .col-sm-12
+      %button.btn.btn-primary#upload_button{type: 'submit'} Migrate!
+

data/lib/oxidized/web/views/node.haml

@@ -1,16 +1,18 @@
-!=haml :head
-%body
-  %h4
-    %a{:href=>url_for('/nodes')} nodes
-    %span /
-    =@data[:name]
-     
-    %a{:title => "configuration", :href => url_for("/node/fetch/#{@data[:full_name]}") }
-      %span{:class=>'glyphicon glyphicon-cloud-download', :style => "color: #000; font-size: 14px;"}
-    %a{:title => "versions", :href => url_for("/node/version?node_full=#{@data[:full_name]}") }
-      %img{:src=>url_for('/images/versioning_18px.png')}
-    %a{:title => "update", :href => url_for("/node/next/#{@data[:full_name]}") }
-      %span{:class=>'glyphicon glyphicon-repeat', :style => "color: #000; font-size: 14px;"}
-  -out='';PP.pp(@data,out)
-  %pre
-    = preserve "#{out}"
+.row
+  .col-sm-12
+    %h4
+      %a{href: url_for('/nodes')} nodes
+      %span /
+      =@data[:name]
+       
+      %a{title: 'configuration', href: url_for("/node/fetch/#{@data[:full_name]}")}
+        %span.glyphicon.glyphicon-cloud-download{style: 'color: #000; font-size: 14px;'}
+      %a{title: 'versions',
+         href: url_for("/node/version?node_full=#{@data[:full_name]}")}
+        %img{src: url_for('/images/versioning_18px.png')}
+      %a{title: 'update', href: url_for("/node/next/#{@data[:full_name]}")}
+        %span.glyphicon.glyphicon-repeat{style: 'color: #000; font-size: 14px;'}
+    - out = '';PP.pp(@data,out)
+    %pre
+      = preserve "#{out}"
+

data/lib/oxidized/web/views/nodes.haml

@@ -1,70 +1,67 @@
-%script{:src=>url_for('/scripts/jquery-2.1.1.min.js')}
-%script{:src=>url_for('/scripts/jquery.dataTables.min.js')}
-%script{:src=>url_for('/scripts/dataTables.bootstrap.js')}
-%script{:src=>url_for('/scripts/dataTables.colVis.js')}
-%link{:rel=>'stylesheet', :href=>url_for('/css/dataTables.bootstrap.css')}
-%link{:rel=>'stylesheet', :href=>url_for('/css/dataTables.colVis.css')}
+.row.tbl-header
+  .col-xs-12.col-md-2
+    %h4 nodes /
+
+.row
+  .pull-right
+    %form
+      %button.ColVis_Button{type: 'button', onclick: 'history.go();'}
+        %span.glyphicon.glyphicon-repeat Refresh
+
+  .table-responsive
+    %table.table.table-striped.table-hover.table-condensed#nodesTable
+      %thead
+        %tr
+          %th Name
+          %th IP
+          %th Model
+          %th Group
+          %th Last Status
+          %th Last Update
+          %th Actions
+
+      %tbody
+        - trclass = %w(even odd)
+        - @data.sort_by{|e|e[:name]}.each do |node|
+          - klass = trclass.rotate!.first
+          %tr{class: "#{klass} ox-status-#{node[:status]}"}
+            %td
+              %a{href: url_for("/node/show/#{node[:name]}")} #{node[:name]}
+            %td= node[:ip]
+            %td= node[:model]
+            %td= node[:group]
+            %td
+              %div{title: node[:status], class: node[:status]}
+                %span{style: 'visibility: hidden'}#{node[:status]}
+            %td.time= node[:time]
+            %td
+              %a{title: 'configuration',
+                 href: url_for("/node/fetch/#{node[:full_name]}")}
+                %span.glyphicon.glyphicon-cloud-download
+                
+              %a{title: 'versions',
+                 href: url_for("/node/version?node_full=#{node[:full_name]}")}
+                %img{src: url_for('/images/versioning_18px.png')}
+                
+              %a{title: 'update', href: url_for("/node/next/#{node[:full_name]}")}
+                %span.glyphicon.glyphicon-repeat
+
 :javascript
   $(function() {
     $('#nodesTable').dataTable({
       dom: 'C<"clear">lfrtip',
       "lengthMenu": [[50, 250, 500, -1], [50, 250, 500, "All"]],
-      columnDefs: [
-        { visible: false, targets: 1 },
-        {type: "string", targets: 3}
-      ],
+      columnDefs: [{
+        visible: false,
+        targets: 1
+      }, {
+        type: "string",
+        targets: 3
+      }],
       colVis: {
-            exclude: [ 0, 5 ]
-        }
+        exclude: [0, 5]
+      }
     });
   });
-%div{:class=>'row tbl-header'}
-  %div{:class=>'col-xs-12 col-md-2'}
-    %h4 nodes /
-%button{:onclick => "location.href='/migration'" }
-  %span migration
-%form{ :action => "/nodes/conf_search", :method => "post"}
-  %div{:name => "to_search_in_config", :id => "to_search_in_config"}
-    %input{:type => "submit", :value => "Search in confs"}
-    %input{:type => "text", :name => "search_in_conf_textbox"}
-  
-  
-%div{:class=>'row'}
-  %div{:class=>'refresh-div'}
-    %form
-      %button{:class => "ColVis_Button", :type => "button", :onclick => "history.go();"}
-        %span{:class=>"glyphicon glyphicon-repeat"}
-        Refresh
-  %table{:id=>'nodesTable', :class=>'table table-responsive tablesorter'}
-    %thead
-      %tr
-        %th Name
-        %th IP
-        %th Model
-        %th Group
-        %th Last Status
-        %th Last Update
-        %th Actions
 
-    %tbody
-      -trclass = %w(even odd)
-      -@data.sort_by{|e|e[:name]}.each do |node|
-        -klass = trclass.rotate!.first
-        %tr{:class=>"#{klass} ox-status-#{node[:status]}"}
-          %td
-            %a{:href => url_for("/node/show/#{node[:name]}") } #{node[:name]}
-          %td= node[:ip]
-          %td= node[:model]
-          %td= node[:group]
-          %td
-            %div{:title=>node[:status], :class=>node[:status]}
-          %td= node[:time]
-          %td
-            %a{:title => "configuration", :href => url_for("/node/fetch/#{node[:full_name]}") }
-              %span{:class=>'glyphicon glyphicon-cloud-download'}
-            &nbsp;&nbsp;
-            %a{:title => "versions", :href => url_for("/node/version?node_full=#{node[:full_name]}") }
-              %img{:src=>url_for('/images/versioning_18px.png')}
-            &nbsp;&nbsp;
-            %a{:title => "update", :href => url_for("/node/next/#{node[:full_name]}") }
-              %span{:class=>'glyphicon glyphicon-repeat'}
+

data/lib/oxidized/web/views/sass/oxidized.sass

@@ -1,4 +1,4 @@
-body table
+body
     font-size: 14px
 
 .ox-nav
@@ -17,33 +17,9 @@ body table
 .table a, .table a:visited
     color: #000
 
-.tbl-header
-    margin: 20px -20px
-
-
-.tablesorter-headerAsc .tablesorter-header-inner
-    display: inline-block
-    border-bottom: 1px dotted #333
-
-.tablesorter-headerDesc .tablesorter-header-inner
-    display: inline-block
-    border-bottom: 1px solid #333
-
 tr.ox-status-no_connection
     background-color: #fcf8e3
 
-input#search
-    border-color: 0 !important
-    border: none !important
-    box-shadow: 0 !important
-    border-bottom: 1px dotted #000 !important
-    -webkit-box-shadow: none !important
-    border-radius: 0 !important
-    width: 150px
-
-input#search .focused
-    border-bottom: 1px dotted #FFA600 !important
-    
 .added
     background-color: #DBFFDB
 
@@ -52,28 +28,28 @@ input#search .focused
 
 .diff-index
     background-color: #FFFF99
-    
+
 .diff-empty
-    background-color: #F0F0F0 
-    
+    background-color: #F0F0F0
+
 .diffs
     background-color: FAFAFA
     border: 2px solid #ccc
     border-radius: 5px
     padding: 3px
-    
+    font-family: Consolas, "Lucida Console", monospace
+    white-space: pre
+
 .diffs_old
     @extend .diffs
     float: left
     width: 49%
-    white-space: nowrap
     overflow: auto
 
 .diffs_new
     @extend .diffs
     margin-left: 51%
     width: 49%
-    white-space: nowrap
     overflow: auto
 
 .node_title
@@ -88,11 +64,6 @@ input#search .focused
     margin-left: 51%
     font-weight: bold
 
-.refresh-div
-    float: right
-    padding-left: 5px
-
-
 .status
     float: right
     width: 15px
@@ -101,10 +72,11 @@ input#search .focused
     margin-right: 70%
     margin-bottom: 0px
     border-radius: 2px
+
 .success
     @extend .status
     background-color: #64FE2E
- 
+
 .no_connection
     @extend .status
     background-color: #FF0000
@@ -113,24 +85,28 @@ input#search .focused
     background-color: #58ACFA
 
 a:hover
-    text-decoration: none 
+    text-decoration: none
+
+.btn-file
+    position: relative
+    overflow: hidden
+
+.btn-file > input[type=file]
+    position: absolute
+    top: 0
+    right: 0
+    min-width: 100%
+    min-height: 100%
+    font-size: 100px
+    text-align: right
+    filter: alpha(opacity=0)
+    opacity: 0
+    outline: none
+    background: white
+    cursor: inherit
+    display: block
+
+@-moz-document url-prefix()
+    fieldset
+        display: table-cell
 
-#migration_span
-    font-size: 20px
-    font-weight: bold
-    
-table#files
-    width: 70%
-    border: 1px solid
-    
-th#file
-    width: 50%
-    height: 30px
-    text-align: center
-
-td#file
-    @extend th#file
-    padding: 15px
-
-div#to_search_in_config
-    padding-top: 5px