oxidized-web 0.13.1 → 0.14.0

data/lib/oxidized/web/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Oxidized
+  module API
+    WEB_VERSION = '0.14.0'
+  end
+end

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

@@ -1,17 +1,19 @@
-.row.tbl-header
-  .col-xs-12
+.row
+  .col-8
     %h4
       %a{href: url_for('/nodes')} nodes
       \/ Nodes that contain 
-      %span "#{@to_research}"
-  
+      %b
+        &= "#{@to_research}"
+  .col-4
+    %form.float-end#oxButtons
+      %button.btn.btn-primary{type: 'button', onclick: 'history.go();'}
+        %i.bi.bi-arrow-clockwise
+        Refresh
+
 .row
-  .pull-right
-    %form
-      %button.ColVis_Button{type: 'button', onclick: 'history.go();'}
-        %span.glyphicon.glyphicon-repeat Refresh
   .table-responsive
-    %table.table.table-condensed.table-striped.table-hover#versionsTable
+    %table.table.table-sm.table-striped.table-hover#versionsTable
       %thead
         %tr
           %th Name
@@ -24,14 +26,13 @@
             %td
               %a{title: 'configuration',
                  href: url_for("/node/fetch/#{x[:full_name]}")}
-                %span.glyphicon.glyphicon-cloud-download
+                %i.bi.bi-cloud-download
 
 :javascript
   $(function() {
     $('#versionsTable').dataTable({
-      dom: 'C<"clear">lfrtip',
-      bAutoWidth: false,
-      "order": [[0, "desc"]]
+      autoWidth: false,
+      "order": [[0, "asc"]]
     });
   });
 

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

@@ -1,13 +1,13 @@
 .row
-  .col-sm-12
+  .col-4
     %h4
       - if @info[:group] != ''
         - node_full = "#{@info[:group]}/#{@info[:node]}"
       - else
         - node_full = "#{@info[:node]}"
       %a{href: url_for("/node/version?node_full=#{node_full}")} versions
-      \/ Diff version #{@info[:num]} - #{@info[:num2]} for Node
-      %span.node_title #{@info[:node]}
+      \/ Diff version #{@info[:num]} - #{@info[:num2]} for node
+      %b #{@info[:node]}
 .row
   .col-sm-12
     - date_version = Time.parse @info[:date]
@@ -25,7 +25,7 @@
     - params = "#{params}&date=#{@info[:date]}&num=#{@info[:num]}"
     %form{action: url_for("/node/version/diffs?#{params}"), method: 'post', role: 'form'}
       .form-group
-        %select.form-control#oid2{name: 'oid2'}
+        %select.form-select#oid2{name: 'oid2'}
           - diff2 = {}
           - num = @oids_dates.count + 1
           - next_id = false
@@ -37,7 +37,7 @@
             - elsif (x[:oid].to_s == @info[:oid]) && !(@info[:oid2])
               - next_id = true
 
-      %button.btn.btn-default{type: 'submit'} Get Diffs!
+      %button.btn.btn-primary{type: 'submit'} Get Diffs!
 
 .row
   .col-sm-12

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

@@ -1,4 +1,5 @@
-%footer
-  %hr
-  %span
-    %p Oxidized v.#{Oxidized::VERSION}
+%footer.bg-body-tertiary.border-top.border-secondary-subtle.mt-4.py-2
+  .container-fluid
+    .row
+      .col
+        Oxidized-web v.#{Oxidized::API::WEB_VERSION}, Oxidized v.#{Oxidized::VERSION}

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

@@ -4,12 +4,26 @@
   %meta{name: 'viewport', content: 'width=device-width, initial-scale=1'}
   %meta{name: 'google', content: 'notranslate'}
   %title oxidized
-  %link{rel: 'stylesheet', href: url_for('/css/bootstrap.min.css')}
-  %link{rel: 'stylesheet', href: url_for('/css/oxidized.css')}
-  %link{rel: 'stylesheet', href: url_for('/css/oxidized_custom.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')}
 
+  -# Bootstrap
+  %link{rel: 'stylesheet', href: url_for('/weblibs/bootstrap.css')}
+  %link{rel: 'stylesheet', href: url_for('/weblibs/bootstrap-icons.css')}
+  -# Datatables
+  %link{rel: 'stylesheet', href: url_for('/weblibs/dataTables.bootstrap5.css')}
+  %link{rel: 'stylesheet', href: url_for('/weblibs/buttons.bootstrap5.css')}
+  -# Custom Oxidized css
+  %link{rel: 'stylesheet', href: url_for('/css/oxidized.css')}
+
+  -# JQuery
+  %script{src: url_for('/weblibs/jquery.js')}
+  -# Bootstrap 5
+  %script{src: url_for('/weblibs/bootstrap.bundle.js')}
+  -# dataTables with bootstrap and buttons (colomn visibility)
+  %script{src: url_for('/weblibs/dataTables.js')}
+  %script{src: url_for('/weblibs/dataTables.bootstrap5.js')}
+  %script{src: url_for('/weblibs/dataTables.buttons.js')}
+  %script{src: url_for('/weblibs/buttons.bootstrap5.js')}
+  %script{src: url_for('/weblibs/buttons.colVis.js')}
+  -# Oxidized customisation
+  %script{src: url_for('/scripts/oxidized.js')}

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

@@ -2,44 +2,39 @@
 %html{lang: 'en'}
   !=haml :head
   %body
-    %nav.navbar.navbar-default.navbar-static-top{role: 'navigation'}
+    %nav.navbar.navbar-expand-lg.bg-body-tertiary.border-bottom.border-secondary-subtle.mb-4
       .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
-
+        %a.navbar-brand{href: url_for('/')}
+          %img{src: url_for('/images/oxidizing_40px.png')}
+          Oxidized
+        %button.navbar-toggler{type: 'button',
+                                  :'data-bs-toggle' => 'collapse',
+                                  :'data-bs-target' => '#ox-nav',
+                                  :'aria-expanded'  => 'false',
+                                  :'aria-label'     => 'Toggle navigation',
+                                  :'aria-controls'  => '#ox-nav'}
+          %span.navbar-toggler-icon
         .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: url_for('/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
+          %ul.navbar-nav.me-auto.mb-1
+            %li.nav-item
+              %a.nav-link{class: request.path_info == '/nodes/stats' ? 'active' : '',
+                            :'aria-current' => request.path_info == '/nodes/stats' ? 'page' : 'false',
+                            href: url_for('/nodes/stats')} Stats
+            %li.nav-item
+              %a.nav-link{class: request.path_info == '/migration' ? 'active' : '',
+                            :'aria-current' => request.path_info == '/migration' ? 'page' : 'false',
+                            href: url_for('/migration')} Migration
+          %form.d-flex{role: 'search',
+                      action: url_for('/nodes/conf_search'),
+                      method: 'post'}
+            %input.form-control.me-2{type: 'text',
+                                      name: 'search_in_conf_textbox',
+                                      placeholder: 'Search in Configs',
+                                      :'aria-label' => 'Search in Configs'}
+            %button.btn.btn-primary{type: 'submit'}
+              %i.bi.bi-search
 
     .container-fluid
       =yield
     !=haml :footer
-    %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,3 +1,10 @@
+.alert.alert-warning
+  The RANCID migration tool is deprecated and will be removed in a future
+  release. If you still need it
+  %b and
+  are willing to maintain it, open an issue at
+  %a{href: 'https://github.com/ytti/oxidized-web/issues'}oxidized-web issues (github)
+
 %h2
   RANCID to Oxidized
   %small router.db and Group Migration

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

@@ -5,14 +5,16 @@
       %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;'}
+      %a.link-dark.link-underline-opacity-0{title: 'configuration',
+        href: url_for("/node/fetch/#{@data[:full_name]}")}
+        %i.bi.bi-cloud-download
+      %a.link-dark.link-underline-opacity-0{title: 'versions',
+        href: url_for("/node/version?node_full=#{@data[:full_name]}")}
+        %i.bi.bi-stack
+      %a.link-dark.link-underline-opacity-0{title: 'update',
+        href: url_for("/node/next/#{@data[:full_name]}")}
+        %i.bi.bi-repeat
     - out = '';PP.pp(@data,out)
-    %pre
+    %pre.bg-body-tertiary.border.border-secondary-subtle.rounded
       = preserve "#{out}"
 

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

@@ -1,19 +1,20 @@
-.row.tbl-header
-  .col-xs-12.col-md-2
+.row
+  .col-4
     %h4 nodes /
+  .col-8
+    %form.float-end#oxButtons
+      %button.btn.btn-primary{type: 'button', onclick: 'history.go();'}
+        %i.bi.bi-arrow-clockwise
+        Refresh
+      %button.btn.btn-primary#reload{type: 'button'}
+        %i.bi.bi-repeat
+        Update node list
 
 .hidden.alert#flashMessage
 
 .row
-  .pull-right
-    %form
-      %button.ColVis_Button#reload{type: 'button'}
-        %span.glyphicon.glyphicon-refresh Reload
-      %button.ColVis_Button{type: 'button', onclick: 'history.go();'}
-        %span.glyphicon.glyphicon-repeat Refresh
-
   .table-responsive
-    %table.table.table-striped.table-hover.table-condensed#nodesTable
+    %table.table.table-sm.table-striped.table-hover#nodesTable
       %thead
         %tr
           %th Name
@@ -26,10 +27,8 @@
           %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]}"}
+          %tr
             %td
               %a{href: url_for("/node/show/#{node[:name]}")} #{node[:name]}
             %td= node[:ip]
@@ -43,34 +42,45 @@
             %td.time= node[:time]
             %td.time= node[:mtime]
             %td
-              %a{title: 'configuration',
-                 href: url_for("/node/fetch/#{node[:full_name]}")}
-                %span.glyphicon.glyphicon-cloud-download
+              %a.link-dark.link-underline-opacity-0{title: 'Configuration',
+                  href: url_for("/node/fetch/#{node[:full_name]}")}
+                %i.bi.bi-cloud-download
                 
-              %a{title: 'versions',
-                 href: url_for("/node/version?node_full=#{node[:full_name]}")}
-                %img{src: url_for('/images/versioning_18px.png')}
+              %a.link-dark.link-underline-opacity-0{title: 'Versions',
+                href: url_for("/node/version?node_full=#{node[:full_name]}")}
+                %i.bi.bi-stack
                 
-              %a{title: 'update', href: url_for("/node/next/#{node[:full_name]}")}
-                %span.glyphicon.glyphicon-repeat
+              %a.link-dark.link-underline-opacity-0{title: 'Update configuration',
+                href: url_for("/node/next/#{node[:full_name]}")}
+                %i.bi.bi-repeat
 
 :javascript
   $(function() {
-    $('#nodesTable').dataTable({
-      dom: 'C<"clear">lfrtip',
-      bAutoWidth: false,
-      "lengthMenu": [[50, 250, 500, -1], [50, 250, 500, "All"]],
-      columnDefs: [{
-        visible: false,
-        targets: 1
-      }, {
-        type: "string",
-        targets: 3
-      }],
-      colVis: {
-        exclude: [0, 7]
-      }
+    var table = $('#nodesTable').DataTable({
+      columnDefs: [
+        {
+          /* Hide IP address by default */
+          target: 1,
+          visible: false,
+        },
+        {
+          /* do not permit to hide Name and Actions */
+          targets: [0,7],
+          className: 'noVis'
+        },
+      ],
+      buttons:
+        [{
+          extend: 'colvis',
+          columns: ':not(.noVis)',
+          className: 'btn-primary',
+        }],
+      autoWidth: false,
+      lengthMenu: [20, 50, 250, 500, { label: 'All', value: -1 }]
     });
+
+    table.buttons(0,0).container().prependTo($('#oxButtons'));
+    table.buttons(0,0).nodes().removeClass('btn-secondary');
   });
 
 

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

@@ -1,18 +1,17 @@
-.row.tbl-header
-  .col-xs-12
+.row
+  .col-4
     %h4
       %a{href: url_for('/nodes')} nodes
       \/ stats
+  .col-8
+    %form.float-end#oxButtons
+      %button.btn.btn-primary{type: 'button', onclick: 'history.go();'}
+        %i.bi.bi-arrow-clockwise
+        Refresh
 
 .row
-  .pull-right
-    %button.ColVis_Button{type: 'button', onclick: 'history.go();'}
-      %span.glyphicon.glyphicon-repeat Refresh
-
   .table-responsive
-    %table.table.table-condensed.table-striped.table-hover#statsTable
-      %caption
-        %span Node Statistics
+    %table.table.table-sm.table-striped.table-hover#statsTable
 
       %thead
         %tr
@@ -76,26 +75,35 @@
             %td #{'%.2f' % avg_time}
             %td
               %div{title: status, class: status}
+                %span{style: 'visibility: hidden'}#{status}
             %td.time= last_success
             %td.time= last_failure
 
 :javascript
   $(function() {
-    $('#statsTable').dataTable({
-      dom: 'C<"clear">lfrtip',
-      "lengthMenu": [[50, 250, 500, -1], [50, 250, 500, "All"]],
-      bAutoWidth: false,
-      columnDefs: [{
-        visible: false,
-        targets: 1
-      }, {
-        render: function ( data, type, row) {
-            return type === 'display' ? data + 's' : data
+    var table = $('#statsTable').DataTable({
+      columnDefs: [
+        {
+          /* Hide IP address by default */
+          target: 1,
+          visible: false,
         },
-        targets: 4
-      }],
-      colVis: {
-        exclude: [0, 5]
-      }
+        {
+          /* do not permit to hide Name and Last Status */
+          targets: [0,5],
+          className: 'noVis'
+        },
+      ],
+      buttons:
+        [{
+          extend: 'colvis',
+          columns: ':not(.noVis)',
+          className: 'btn-primary',
+        }],
+      autoWidth: false,
+      lengthMenu: [20, 50, 250, 500, { label: 'All', value: -1 }],
     });
+
+    table.buttons(0,0).container().prependTo($('#oxButtons'));
+    table.buttons(0,0).nodes().removeClass('btn-secondary');
   });

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

@@ -1,13 +1,16 @@
 .row
-  .col-sm-12
+  .col-8
     %h4
       - if @info[:group] != ''
         - params = "node_full=#{@info[:group] + '/' + @info[:node]}"
       - else
         - params = "node_full=#{@info[:node]}"
       %a{href: url_for("/node/version?#{params}")} versions
-      \/ version #{@info[:num]} for Node
-      %span.node_title #{@info[:node]}
+      \/ version #{@info[:num]} for node
+      %b #{@info[:node]}
+  .col-4
+    .float-end
+      %a.btn.btn-primary{:href => "#{request.path}?#{request.query_string}&format=text"} raw
 .row
   .col-sm-12
     - date_version = Time.parse @info[:date]
@@ -16,7 +19,6 @@
 
 .row
   .col-sm-12
-    .diffs
+    %pre.bg-body-tertiary.border.border-secondary-subtle.rounded
       - @data.each_line do |line|
-        %div><
-          != escape_once("#{line}")
+        != escape_once("#{line}")

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

@@ -1,23 +1,22 @@
-.row.tbl-header
-  .col-xs-12
+.row
+  .col-4
     %h4
       %a{href: url_for('/nodes')} nodes
-      \/ Versions for Node 
-      %span.node_title #{@node}
-
+      \/ Versions for node
+      %b #{@node}
+  .col-8
+    %form.float-end#oxButtons
+      %button.btn.btn-primary{type: 'button', onclick: 'history.go();'}
+        %i.bi.bi-arrow-clockwise
+        Refresh
 .row
-  .pull-right
-    %form
-      %button.ColVis_Button{type: 'button', onclick: 'history.go();'}
-        %span.glyphicon.glyphicon-repeat Refresh
   .table-responsive
-    %table.table.table-condensed.table-striped.table-hover#versionsTable
+    %table.table.table-sm.table-striped.table-hover#versionsTable
       %thead
         %tr
           %th Version
-          %th Dates
-          %th Author
-          %th Message
+          %th Date
+          %th Elapsed time
           %th Actions
 
       %tbody
@@ -25,28 +24,28 @@
         - @data.each do |x|
           %tr
             %td #{nb -= 1}
+            %td #{x[:date]}
             %td #{time_from_now x[:date]}
-            %td #{x[:author][:name]}
-            %td #{x[:message]}
             %td
               - params = "node=#{@node}&group=#{@group}&oid=#{x[:oid]}"
               - params = "#{params}&date=#{x[:date]}&num=#{nb}"
-              %a{title: 'configuration',
+              %a.link-dark.link-underline-opacity-0{title: 'configuration',
                  href: url_for("/node/version/view?#{params}")}
-                %span.glyphicon.glyphicon-cloud-download
+                %i.bi.bi-cloud-download
                 
-              %a{title: 'diff', href: url_for("/node/version/diffs?#{params}")}
-                %img{src: url_for('/images/diff_15x17.png')}
+              %a.link-dark.link-underline-opacity-0{title: 'diff', href: url_for("/node/version/diffs?#{params}")}
+                %i.bi.bi-file-earmark-diff
 
 :javascript
   $(function() {
     $('#versionsTable').dataTable({
-      dom: 'C<"clear">lfrtip',
       "order": [[0, "desc"]],
       bAutoWidth: false,
-      columnDefs: [{
-        visible: false,
-        targets: [2, 3]
-      }]
+      columnDefs: [
+        {
+          targets: _all,
+          className: 'text-start'
+        }
+      ]
     });
   });