collapse on inventory for long lists (#1103)

implements #1083

lib/App/Netdisco/Web/Plugin/Inventory.pm

@@ -16,19 +16,53 @@ get '/inventory' => require_login sub {
     my $platforms = schema(vars->{'tenant'})->resultset('Device')->get_platforms();
     my $releases = schema(vars->{'tenant'})->resultset('Device')->get_releases();
 
-    my %release_map = (
+    my %release_version_map = (
       map  { (join '', map {sprintf '%05s', $_} split m/(\D)/, ($_->{os_ver} || '')) => $_ }
       $releases->hri->all
     );
-    my @release_list =
+
-      map  { $release_map{$_} }
+    my %release_map = ();
-      sort {(($release_map{$a}->{os} || '') cmp ($release_map{$b}->{os} || '')) || ($a cmp $b)}
+    map  { push @{ $release_map{ $release_version_map{$_}->{os} } }, $release_version_map{$_} }
+    grep { $release_version_map{$_}->{os} }
+    grep { $_ }
+    sort {(lc($release_version_map{$a}->{os} || '') cmp lc($release_version_map{$b}->{os} || '')) || ($a cmp $b)}
+         keys %release_version_map;
+
+    my %release_totals =
+      map  { $_ => {rows => scalar @{ $release_map{$_} }, count => 0} }
+      grep { $_ }
            keys %release_map;
 
+    foreach my $r (keys %release_totals) {
+      map { $release_totals{$r}->{count} += $_->{count} }
+          @{ $release_map{ $r } };
+    }
+
+    my %platform_map = ();
+    map  { push @{ $platform_map{$_->{vendor}} }, $_ }
+    grep { $_->{vendor} }
+    grep { $_ }
+    sort {(lc($a->{vendor} || '') cmp lc($b->{vendor} || '')) || (lc($a->{model} || '') cmp lc($b->{model} || ''))}
+         $platforms->hri->all;
+
+    my %platform_totals =
+      map  { $_ => {rows => scalar @{ $platform_map{$_} }, count => 0} }
+      grep { $_ }
+           keys %platform_map;
+
+    foreach my $r (keys %platform_totals) {
+      map { $platform_totals{$r}->{count} += $_->{count} }
+          @{ $platform_map{ $r } };
+    }
+
     var(nav => 'inventory');
     template 'inventory', {
-      platforms => [ $platforms->hri->all ],
+      platforms => [ sort keys %platform_totals ],
-      releases  => [ @release_list ],
+      releases  => [ sort keys %release_totals ],
+      platform_map => \%platform_map,
+      release_map  => \%release_map,
+      platform_totals => \%platform_totals,
+      release_totals  => \%release_totals,
     }, { layout => 'main' };
 };
 

share/config.yml

@@ -244,6 +244,9 @@ table_pagesize: 10
 table_showrecordsmenu:
   - [10, 25, 50, 100, '-1']
   - [10, 25, 50, 100, 'All']
+inventory_collapse_threshold: 0
+inventory_platforms_collapse_threshold: 5
+inventory_releases_collapse_threshold: 5
 vlanctl: true
 portctl_nameonly: false
 portctl_no: []

share/views/inventory.tt

@@ -12,26 +12,55 @@
           </tr>
         </thead>
         <tbody>
-          [% FOREACH platform IN platforms %]
+          [% SET vendorcount = 0 %]
-          [% NEXT UNLESS platform.vendor OR platform.model %]
+          [% FOREACH vendor IN platforms %]
+          [% SET vendorcount = vendorcount + 1 %]
+          [% IF settings.inventory_collapse_threshold
+             AND platforms.size > settings.inventory_collapse_threshold
+             AND platform_totals.$vendor.rows > settings.inventory_platforms_collapse_threshold %]
           <tr>
             <th>
-              [% IF platform.vendor %]
               <a class="nd_linkcell"
-                href="[% search_device | none %]&q=[% platform.vendor | uri %]&vendor=[% platform.vendor | uri %]">
+                href="[% search_device | none %]&q=[% vendor | uri %]&vendor=[% vendor | uri %]">
-                  [% platform.vendor | html_entity %]</a>
+                  [% vendor | html_entity %]</a>
+            </th>
+            <th>
+              <span id="nd_platforms_[% vendorcount %]_chevron" class="icon-chevron-up"></span>
+              <a href="#" class="nd_collapse-inventory"
+                  data-chevron="#nd_platforms_[% vendorcount %]_chevron"
+                  data-target=".nd_platforms_[% vendorcount %]">
+                Show [% platform_totals.$vendor.rows  | html_entity %]
+              </a>
+            </th>
+            <th>[% platform_totals.$vendor.count | html_entity %]</th>
+          </tr>
+          [% END %]
+          [% FOREACH row IN platform_map.$vendor %]
+          [% IF settings.inventory_collapse_threshold
+             AND platforms.size > settings.inventory_collapse_threshold
+             AND platform_totals.$vendor.rows > settings.inventory_platforms_collapse_threshold %]
+          <tr class="nd_inventory_collapser nd_platforms_[% vendorcount %]">
+          [% ELSE %]
+          <tr>
+          [% END %]
+            <th>
+              [% IF row.vendor %]
+              <a class="nd_linkcell"
+                href="[% search_device | none %]&q=[% row.vendor | uri %]&vendor=[% row.vendor | uri %]">
+                  [% row.vendor | html_entity %]</a>
               [% ELSE %]unknown[% END %]
             </th>
             <th>
-              [% IF platform.model %]
+              [% IF row.model %]
               <a class="nd_linkcell"
-                href="[% search_device | none %]&q=[% platform.model | uri %]&model=[% platform.model | uri %]">
+                href="[% search_device | none %]&q=[% row.model | uri %]&model=[% row.model | uri %]">
-                  [% platform.model | html_entity %]</a>
+                  [% row.model | html_entity %]</a>
               [% ELSE %]unknown[% END %]
             </th>
-            <th>[% platform.count | html_entity %]</th>
+            <th>[% row.count | html_entity %]</th>
           </tr>
           [% END %]
+          [% END %]
         </tbody>
       </table>
     </div>
@@ -46,26 +75,56 @@
           </tr>
         </thead>
         <tbody>
-          [% FOREACH release IN releases %]
+          [% SET oscount = 0 %]
-          [% NEXT UNLESS release.os OR release.os_ver %]
+          [% FOREACH os IN releases %]
+          [% SET oscount = oscount + 1 %]
+          [% IF settings.inventory_collapse_threshold
+             AND releases.size > settings.inventory_collapse_threshold
+             AND release_totals.$os.rows > settings.inventory_releases_collapse_threshold %]
           <tr>
             <th>
-              [% IF release.os %]
               <a class="nd_linkcell"
-                href="[% search_device | none %]&q=[% release.os | uri %]&os=[% release.os | uri %]">
+                href="[% search_device | none %]&q=[% os | uri %]&vendor=[% os | uri %]">
-                  [% release.os | html_entity %]</a>
+                  [% os | html_entity %]</a>
+            </th>
+            <th>
+              <span id="nd_releases_[% oscount %]_chevron" class="icon-chevron-up"></span>
+              <a href="#" class="nd_collapse-inventory"
+                  data-chevron="#nd_releases_[% oscount %]_chevron"
+                  data-target=".nd_releases_[% oscount %]">
+                Show [% release_totals.$os.rows | html_entity %]
+              </a>
+            </th>
+            <th>[% release_totals.$os.count | html_entity %]</th>
+          </tr>
+          <div>
+          [% END %]
+          [% FOREACH row IN release_map.$os %]
+          [% IF settings.inventory_collapse_threshold
+             AND releases.size > settings.inventory_collapse_threshold
+             AND release_totals.$os.rows > settings.inventory_releases_collapse_threshold %]
+          <tr class="nd_inventory_collapser nd_releases_[% oscount %]">
+          [% ELSE %]
+          <tr>
+          [% END %]
+            <th>
+              [% IF row.os %]
+              <a class="nd_linkcell"
+                href="[% search_device | none %]&q=[% row.os | uri %]&os=[% row.os | uri %]">
+                  [% row.os | html_entity %]</a>
               [% ELSE %]unknown[% END %]
             </th>
             <th>
-              [% IF release.os_ver %]
+              [% IF row.os_ver %]
               <a class="nd_linkcell"
-                href="[% search_device | none %]&q=[% release.os_ver | uri %]&os_ver=[% release.os_ver | uri %]">
+                href="[% search_device | none %]&q=[% row.os_ver | uri %]&os_ver=[% row.os_ver | uri %]">
-                  [% release.os_ver | html_entity %]</a>
+                  [% row.os_ver | html_entity %]</a>
               [% ELSE %]unknown[% END %]
             </th>
-            <th>[% release.count | html_entity %]</th>
+            <th>[% row.count | html_entity %]</th>
           </tr>
           [% END %]
+          [% END %]
         </tbody>
       </table>
     </div>
@@ -76,3 +135,22 @@
   </script>
   [% END %]
 </div>
+<script type="text/javascript">
+  $('.nd_inventory_collapser').toggle();
+
+  $('.nd_collapse-inventory').on('click', function () {
+    var target = $(this).attr('data-target');
+    var chevron = $(this).attr('data-chevron');
+
+    $(target).toggle();
+
+    if ($(chevron).hasClass('icon-chevron-up')) {
+        $(chevron).removeClass('icon-chevron-up');
+        $(chevron).addClass('icon-chevron-down');
+    }
+    else {
+        $(chevron).addClass('icon-chevron-up');
+        $(chevron).removeClass('icon-chevron-down');
+    }
+  });
+</script>