machinery-tool 1.6.0 → 1.7.0

data/html/assets/show/machinery-show.js

@@ -0,0 +1,65 @@
+angular.module("machinery-show", ["ngSanitize"]);
+
+angular.module("machinery-show")
+  .config(function($locationProvider) {
+    $locationProvider.html5Mode({enabled: true, requireBase: false});
+  })
+  .controller("showController", function($scope) {
+    $scope.description = getDescription();
+
+
+    $scope.description.meta_info = {};
+    angular.forEach($scope.description, function(index, scope) {
+      if($scope.description.meta[scope]) {
+        $scope.description.meta_info[scope] = " (" +
+        "inspected host: '" + $scope.description.meta[scope].hostname + "', " +
+        "at: " + new Date($scope.description.meta[scope].modified).toLocaleString() + ")";
+      }
+    });
+  })
+  .directive("scopeHeader", function(){
+    return {
+      restrict: "E",
+      scope: {
+        summary: "=summary",
+        logo: "=logo",
+        singular: "=singular",
+        plural: "=plural",
+        title: "=title",
+        meta: "=meta",
+        count: "=count",
+        additionalSummary: "=additionalSummary"
+      },
+      template:
+      "<div class='row'>" +
+        "<div class='col-xs-1'>" +
+          "<img class='over scope_logo_big' data-content='<p>{{summary}}</p>' data-toggle='popover' src='{{logo}}' title='' data-original-title='{{title}}' style='top: 125px;'>" +
+          "<span class='toggle' title='Collapse/Expand'></span>" +
+        "</div>" +
+        "<div class='col-xs-11'>" +
+          "<h2>" +
+            "{{title}}" +
+            "&nbsp;<div class='scope-summary'>" +
+              "{{additionalSummary}}" +
+              "<ng-pluralize count='count' when=\"{'1': '1 {{singular}}', 'other': '{} {{plural}}'}\"></ng-pluralize>" +
+              " (" +
+              "inspected host: '{{meta.hostname}}', " +
+              "at: {{meta.modified | date:'medium'}}" +
+              ")" +
+            "</div>" +
+          "</h2>" +
+        "</div>" +
+      "</div>"
+    }
+  })
+  .directive("metaInfo", function(){
+    return {
+      restrict: "E",
+      scope: { meta: "=data"},
+      template:
+        " (" +
+          "inspected host: '{{meta.hostname}}', " +
+          "at: {{meta.modified | date:'medium'}}" +
+        ")"
+    }
+  });

data/html/assets/{machinery.js → show/machinery.js}

@@ -1,89 +1,7 @@
 $(document).ready(function () {
-  // Render the system description
-  var description = getDescription();
-
-  templates = {};
-  scopes = [
-    "os",
-    "changed_managed_files",
-    "config_files",
-    "unmanaged_files",
-    "groups",
-    "users",
-    "packages",
-    "patterns",
-    "repositories",
-    "services"
-  ];
-
-
-  // Enrich description with meta information summaries
-  description.meta_info = {};
-  $.each(scopes, function(index, scope) {
-    if(description.meta[scope]) {
-      description.meta_info[scope] = " (" +
-        "inspected host: '" + description.meta[scope].hostname + "', " +
-        "at: " + new Date(description.meta[scope].modified).toLocaleString() + ")";
-    }
-  });
-
-  $.each(scopes, function(index, scope) {
-    templates[scope] = Hogan.compile($("#scope_" + scope).html());
-  });
-  templates["inspection_details_template"] =
-    Hogan.compile($("#inspection_details_template").html());
-  template = Hogan.compile($("#content").html());
-  $("#content_container").html(
-    template.render(description, templates)
-  );
-
-  // Implement filter functionality
-  var run_when_done_typing = (function(){
-    var timer = 0;
-    return function(callback, timeout){
-      clearTimeout(timer);
-      timer = setTimeout(callback, timeout);
-      };
-  })();
-
-  var filterdocument = function() {
-    window.scrollTo(0, 0);
-    var rows = $("body").find("tr");
-    if($("#filter").val() == "") {
-      rows.show();
-      return;
-    }
-
-    var filters = $("#filter").val().split(" ");
-
-    rows
-      .hide()
-      .filter(function() {
-        var $t = $(this);
-        for(var i = 0; i < filters.length; ++i) {
-          if($t.is(":contains('" + filters[i] + "')")) {
-            return true;
-          }
-        }
-        return false;
-      })
-      .show();
-  };
-
-  $("#filter").keyup(function() {
-    run_when_done_typing(function() {
-      filterdocument();
-    }, 500);
-  });
-
-  clearFilter = function() {
-    $("#filter").val("");
-    filterdocument();
-  };
-
   // Align content below floating menu
   var header_height =  $("#nav-bar").height() + 20;
-  $("#content_container").css("margin-top", header_height);
+  $("#content_container, #angular-content").css("margin-top", header_height);
   $("a.scope_anchor").css("height", header_height);
   $("a.scope_anchor").css("margin-top", -header_height);
 
@@ -191,4 +109,13 @@ $(document).ready(function () {
   $("td.systemd_disabled").attr("title", "Unit file is not enabled.");
   $("td.sysvinit_on").attr("title", "Service is enabled");
   $("td.sysvinit_off").attr("title", "Service is disabled");
+
+  // Show title on cut-off table elements
+  $('.scope td').bind('mouseenter', function(){
+    var $this = $(this);
+
+    if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
+      $this.attr('title', $this.text());
+    }
+  });
 });

data/html/comparison.html.haml

@@ -0,0 +1,613 @@
+!!!
+- description_a = diff[:meta][:description_a]
+- description_b = diff[:meta][:description_b]
+%html{"ng-app" => "machinery-compare"}
+  %head
+    %title
+      Machinery System Description Comparison
+    %meta{:charset => 'utf-8'}/
+    %meta{:name => "viewport", :content => "width=device-width, initial-scale=1"}
+    %link{:href => "assets/machinery-base.css", :rel => "stylesheet", :type => "text/css"}/
+    %link{:href => "assets/machinery.css", :rel => "stylesheet", :type => "text/css"}/
+    %script{:src => "assets/angular.min.js"}
+    %script{:src => "assets/compare/machinery-compare.js"}
+    %script{:src => "assets/jquery-2.1.1.min.js"}
+    %script{:src => "assets/transition.js"}
+    %script{:src => "assets/collapse.js"}
+
+    %script#scope_os_partial{:type => "text/ng-template"}
+      %table.table.table-striped.table-condensed
+        %tr
+          %th Name
+          %td {{object.name}}
+        %tr
+          %th Version
+          %td {{object.version}}
+        %tr
+          %th Architecture
+          %td {{object.architecture}}
+
+    %script#scope_os.partial{:type => "text/ng-template"}
+      %a.scope_anchor{:id => "os"}
+      #os_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#os"}
+              %img.scope_logo_big{:src => "assets/logo-os.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Operating System", :"data-content"=>"#{scope_help('os')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Operating System
+        .row.scope_content.collapse.in
+          .row
+            .col-xs-1
+            .col-xs-5{"ng-show" => "diff.os[0]"}
+              %only-in-a
+              %render-template{:template => "scope_os_partial", :object => "diff.os[0]"}
+            .col-xs-1
+            .col-xs-5{"ng-show" => "diff.os[1]"}
+              %only-in-b
+              %render-template{:template => "scope_os_partial", :object => "diff.os[1]"}
+          .row
+            .col-xs-1
+            .col-xs-11{"ng-show" => "diff.os[2]"}
+              %in-both
+              %render-template{:template => "scope_os_partial", :object => "diff.os[2]"}
+
+    %script#scope_packages_partial{:type => "text/ng-template"}
+      %table.table.table-striped.table-hover.table-condensed
+        %thead
+          %tr
+            %th Name
+            %th.small Version
+            %th.small.visible-md.visible-lg Release
+            %th.small.visible-md.visible-lg Arch
+            %th.visible-lg Vendor
+            %th.visible-lg Checksum
+            %th.tiny.hidden-lg
+        %tbody
+          %tr{"ng-repeat" => "package in object"}
+            %td {{package.name}}
+            %td {{package.version}}
+            %td.visible-md.visible-lg {{package.release}}
+            %td.visible-md.visible-lg {{package.arch}}
+            %td.visible-lg {{package.vendor}}
+            %td.visible-lg {{package.checksum}}
+            %td.hidden-lg{:title => "Name: {{package.name}}\nVersion: {{package.version}}\nRelease: {{package.release}}\n" |
+               "Architecture: {{package.arch}}\nVendor: {{package.vendor}}\nChecksum: {{package.checksum}}"} ... |
+
+    %script#scope_packages.partial{:type => "text/ng-template"}
+      %a.scope_anchor{:id => "packages"}
+      #packages_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#packages"}
+              %img.scope_logo_big{:src => "assets/logo-packages.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Packages", :"data-content"=>"#{scope_help('packages')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Packages
+              .scope-summary
+                %span.summary-part{"ng-show" => "diff.packages[0]"}
+                  {{diff.meta.description_a}}: {{diff.packages[0].length}} packages
+                %span.summary-part{"ng-show" => "diff.packages[1]"}
+                  {{diff.meta.description_b}}: {{diff.packages[1].length}} packages
+                %span.summary-part{"ng-show" => "diff.packages[2]"}
+                  %a{href: "#packages_both"}
+                    both
+                  = ": {{diff.packages[2].length}} packages"
+        .row.scope_content.collapse.in
+          .row
+            .col-xs-1
+            .col-xs-5.table_container{"ng-show" => "diff.packages[0]"}
+              %only-in-a
+              %render-template{:template => "scope_packages_partial", :object => "diff.packages[0]"}
+            .col-xs-1
+            .col-xs-5.table_container{"ng-show" => "diff.packages[1]"}
+              %only-in-b
+              %render-template{:template => "scope_packages_partial", :object => "diff.packages[1]"}
+          %a.both_anchor{id: "packages_both"}
+          .row{"ng-show" => "diff.packages[2]"}
+            .col-xs-1
+            .col-xs-11.table_container
+              %in-both
+              %render-template{:template => "scope_packages_partial", :object => "diff.packages[2]"}
+
+    %script#scope_patterns_partial{:type => "text/ng-template"}
+      %table.table.table-striped.table-hover.table-condensed
+        %thead
+          %tr
+            %th Name
+            %th Version
+            %th Release
+        %tbody
+          %tr{"ng-repeat" => "pattern in object"}
+            %td {{pattern.name}}
+            %td {{pattern.version}}
+            %td {{pattern.release}}
+
+    %script#scope_patterns.partial{:type => "text/ng-template"}
+      %a.scope_anchor{:id => "patterns"}
+      #patterns_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#patterns"}
+              %img.scope_logo_big{:src => "assets/logo-patterns.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Patterns", :"data-content"=>"#{scope_help('patterns')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Patterns
+              .scope-summary
+                %span.summary-part{"ng-show" => "diff.patterns[0]"}
+                  {{diff.meta.description_a}}: {{diff.patterns[0].length}} patterns
+                %span.summary-part{"ng-show" => "diff.patterns[1]"}
+                  {{diff.meta.description_b}}: {{diff.patterns[1].length}} patterns
+                %span.summary-part{"ng-show" => "diff.patterns[2]"}
+                  %a{href: "#patterns_both"}
+                    both
+                  = ": {{diff.patterns[2].length}} patterns"
+        .row.scope_content.collapse.in
+          .row
+            .col-xs-1
+            .col-xs-5{"ng-show" => "diff.patterns[0]"}
+              %only-in-a
+              %render-template{:template => "scope_patterns_partial", :object => "diff.patterns[0]"}
+            .col-xs-5{"ng-show" => "diff.patterns[1]"}
+              %only-in-b
+              %render-template{:template => "scope_patterns_partial", :object => "diff.patterns[1]"}
+          %a.both_anchor{id: "patterns_both"}
+          .row{"ng-show" => "diff.patterns[2]"}
+            .col-xs-1
+            .col-xs-11
+              %in-both
+              %render-template{:template => "scope_patterns_partial", :object => "diff.patterns[2]"}
+
+
+
+    %script#scope_users_partial{:type => "text/ng-template"}
+      %table.table.table-striped.table-hover.table-condensed
+        %thead
+          %tr
+            %th Name
+            %th.small UID
+            %th.small GID
+            %th Comment
+            %th Home
+            %th.small Shell
+        %tbody
+          %tr{"ng-repeat" => "user in object"}
+            %td {{user.name}}
+            %td {{user.uid}}
+            %td {{user.gid}}
+            %td {{user.comment}}
+            %td {{user.home}}
+            %td {{user.shell}}
+    %script#scope_users{:type => "text/ng-template"}
+      %a.scope_anchor{:id => "users"}
+      #users_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#users"}
+              %img.scope_logo_big{:src => "assets/logo-users.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Users", :"data-content"=>"#{scope_help('users')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Users
+              .scope-summary
+                %span.summary-part{"ng-show" => "diff.users[0]"}
+                  {{diff.meta.description_a}}: {{diff.users[0].length}} users
+                %span.summary-part{"ng-show" => "diff.users[1]"}
+                  {{diff.meta.description_b}}: {{diff.users[1].length}} users
+                %span.summary-part{"ng-show" => "diff.users[2]"}
+                  %a{href: "#users_both"}
+                    both
+                  = ": {{diff.users[2].length}} users"
+        .row.scope_content.collapse.in
+          .row
+            .col-xs-1
+            .col-xs-5{"ng-show" => "diff.users[0]"}
+              %only-in-a
+              %render-template{:template => "scope_users_partial", :object => "diff.users[0]"}
+            .col-xs-1
+            .col-xs-5{"ng-show" => "diff.users[1]"}
+              %only-in-b
+              %render-template{:template => "scope_users_partial", :object => "diff.users[1]"}
+          %a.both_anchor{id: "users_both"}
+          .row{"ng-show" => "diff.users[2]"}
+            .col-xs-1
+            .col-xs-11
+              %in-both
+              %render-template{:template => "scope_users_partial", :object => "diff.users[2]"}
+
+    %script#scope_unmanaged_files_partial{:type => "text/ng-template"}
+      %p
+        <strong>Files extracted:</strong> {{object.extracted}}
+      %table.table.table-striped.table-hover.table-condensed.files-table{{"ng-show" => "object.files"}}
+        %thead
+          %tr
+            %th Name
+            %th Type
+        %tbody
+          %tr{"ng-repeat" => "file in object.files"}
+            %td {{file.name}}
+            %td {{file.type}}
+    %script#scope_unmanaged_files.partial{:type => "text/ng-template"}
+      %a.scope_anchor{:id => "unmanaged_files"}
+      #unmanaged_files_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#unmanaged_files"}
+              %img.scope_logo_big{:src => "assets/logo-unmanaged-files.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Unmanaged Files", :"data-content"=>"#{scope_help('unmanaged_files')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Unmanaged Files
+              .scope-summary
+                %span.summary-part{"ng-show" => "diff.unmanaged_files[0]"}
+                  {{diff.meta.description_a}}: {{diff.unmanaged_files[0].files.length || 0}} files
+                %span.summary-part{"ng-show" => "diff.unmanaged_files[1]"}
+                  {{diff.meta.description_b}}: {{diff.unmanaged_files[1].files.length || 0}} files
+                %span.summary-part{"ng-show" => "diff.unmanaged_files[2]"}
+                  %a{href: "#unmanaged_files_both"}
+                    both
+                  = ": {{diff.unmanaged_files[2].files.length}} files"
+        .row.scope_content.collapse.in
+          .row
+            .col-xs-1
+            .col-xs-5
+              %only-in-a
+              %render-template{:template => "scope_unmanaged_files_partial", :object => "diff.unmanaged_files[0]"}
+            .col-xs-1
+            .col-xs-5
+              %only-in-b
+              %render-template{:template => "scope_unmanaged_files_partial", :object => "diff.unmanaged_files[1]"}
+          %a.both_anchor{id: "unmanaged_files_both"}
+          .row
+            .col-xs-1
+            .col-xs-11
+              %in-both
+              %render-template{:template => "scope_unmanaged_files_partial", :object => "diff.unmanaged_files[2]"}
+
+    %script#scope_groups_partial{:type => "text/ng-template"}
+      %table.table.table-striped.table-hover.table-condensed
+        %thead
+          %tr
+            %th Name
+            %th GID
+            %th Password
+            %th Users
+        %tbody
+          %tr{"ng-repeat" => "group in object"}
+            %td {{group.name}}
+            %td {{group.gid}}
+            %td {{group.password}}
+            %td {{group.users.join(",")}}
+    %script#scope_groups{:type => "text/ng-template"}
+      %a.scope_anchor{:id => "groups"}
+      #groups_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#groups"}
+              %img.scope_logo_big{:src => "assets/logo-groups.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Groups", :"data-content"=>"#{scope_help('groups')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Groups
+              .scope-summary
+                %span.summary-part{"ng-show" => "diff.groups[0]"}
+                  {{diff.meta.description_a}}: {{diff.groups[0].length}} groups
+                %span.summary-part{"ng-show" => "diff.groups[1]"}
+                  {{diff.meta.description_b}}: {{diff.groups[1].length}} groups
+                %span.summary-part{"ng-show" => "diff.groups[2]"}
+                  %a{href: "#groups_both"}
+                    both
+                  = ": {{diff.groups[2].length}} groups"
+        .row.scope_content.collapse.in
+          .row
+            .col-xs-1
+            .col-xs-5{"ng-show" => "diff.groups[0]"}
+              %only-in-a
+              %render-template{:template => "scope_groups_partial", :object => "diff.groups[0]"}
+            .col-xs-1
+            .col-xs-5{"ng-show" => "diff.groups[1]"}
+              %only-in-b
+              %render-template{:template => "scope_groups_partial", :object => "diff.groups[1]"}
+          %a.both_anchor{id: "groups_both"}
+          .row{"ng-show" => "diff.groups[2]"}
+            .col-xs-1
+            .col-xs-11
+              %in-both
+              %render-template{:template => "scope_groups_partial", :object => "diff.groups[2]"}
+
+    %script#scope_repositories_partial{:type => "text/ng-template"}
+      %table.table.table-striped.table-hover.table-condensed
+        %thead
+          %tr
+            %th Name
+            %th Alias
+            %th URL
+            %th.small Type
+            %th.small Enabled
+            %th.small.visible-lg Autorefresh
+            %th.small.visible-lg GPG Check
+            %th.small.visible-lg Priority
+            %th.tiny.hidden-lg
+        %tbody
+          %tr{"ng-repeat" => "repo in object"}
+            %td {{repo.name}}
+            %td {{repo.alias}}
+            %td
+              %a{:href => "{{repo.url}}" } {{repo.url}}
+            %td {{repo.type}}
+            %td {{repo.enabled}}
+            %td.visible-lg {{repo.autorefresh}}
+            %td.visible-lg {{repo.gpgcheck}}
+            %td.visible-lg {{repo.priority}}
+            %td.hidden-lg{:title => "Name: {{repo.name}}\nAlias: {{repo.alias}}\nUrl: {{repo.url}}\n" |
+               "Type: {{repo.type}}\nEnabled: {{repo.enabled}}\nAutorefresh: {{repo.autorefresh}}\n" |
+               "GPG Check: {{repo.gpgcheck}}\nPriority: {{repo.priority}}"} ... |
+    %script#scope_repositories.partial{:type => "text/ng-template"}
+      %a.scope_anchor{:id => "repositories"}
+      #repositories_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#repositories"}
+              %img.scope_logo_big{:src => "assets/logo-repositories.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Repositories", :"data-content"=>"#{scope_help('repositories')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Repositories
+              .scope-summary
+                %span.summary-part{"ng-show" => "diff.repositories[0]"}
+                  {{diff.meta.description_a}}: {{diff.repositories[0].length}} repos
+                %span.summary-part{"ng-show" => "diff.repositories[1]"}
+                  {{diff.meta.description_b}}: {{diff.repositories[1].length}} repos
+                %span.summary-part{"ng-show" => "diff.repositories[2]"}
+                  %a{href: "#repositories_both"}
+                    both
+                  = ": {{diff.repositories[2].length}} repos"
+        .row.scope_content.collapse.in
+          .row
+            .col-xs-1
+            .col-xs-5{"ng-show" => "diff.repositories[0]"}
+              %only-in-a
+              %render-template{:template => "scope_repositories_partial", :object => "diff.repositories[0]"}
+            .col-xs-1
+            .col-xs-5{"ng-show" => "diff.repositories[1]"}
+              %only-in-b
+              %render-template{:template => "scope_repositories_partial", :object => "diff.repositories[1]"}
+          %a.both_anchor{id: "repositories_both"}
+          .row{"ng-show" => "diff.repositories[2]"}
+            .col-xs-1
+            .col-xs-11
+              %in-both
+              %render-template{:template => "scope_repositories_partial", :object => "diff.repositories[2]"}
+
+    %script#scope_changed_managed_files_partial{:type => "text/ng-template"}
+      %p
+        <strong>Files extracted:</strong> {{object.extracted}}
+      %table.table.table-striped.table-hover.table-condensed.files-table{{"ng-show" => "object.files"}}
+        %thead
+          %tr
+            %th Name
+            %th Package Name
+            %th Package Version
+            %th.small Changes
+            %th.small Mode
+            %th.small User
+            %th.small Group
+        %tbody
+          %tr{"ng-repeat" => "file in object.files"}
+            %td {{file.name}}
+            %td {{file.package_name}}
+            %td {{file.package_version}}
+            %td {{file.changes.join(",")}}
+            %span{"ng-show" => "file.error_message", :title => "{{file.error_message}}"} (details)
+            %td {{file.mode}}
+            %td {{file.user}}
+            %td {{file.group}}
+    %script#scope_changed_managed_files.partial{:type => "text/ng-template"}
+      %a.scope_anchor{:id => "changed_managed_files"}
+      #changed_managed_files_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#changed_managed_files"}
+              %img.scope_logo_big{:src => "assets/logo-changed-managed-files.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Changed Managed Files", :"data-content"=>"#{scope_help('changed_managed_files')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Changed Managed Files
+              .scope-summary
+                %span.summary-part{"ng-show" => "diff.changed_managed_files[0]"}
+                  {{diff.meta.description_a}}: {{diff.changed_managed_files[0].files.length || 0}} files
+                %span.summary-part{"ng-show" => "diff.changed_managed_files[1]"}
+                  {{diff.meta.description_b}}: {{diff.changed_managed_files[1].files.length || 0}} files
+                %span.summary-part{"ng-show" => "diff.changed_managed_files[2]"}
+                  %a{href: "#changed_managed_files_both"}
+                    both
+                  = ": {{diff.changed_managed_files[2].files.length}} files"
+        .row.scope_content.collapse.in
+          .row
+            .col-xs-1
+            .col-xs-5{"ng-show" => "diff.changed_managed_files[0]"}
+              %only-in-a
+              %render-template{:template => "scope_changed_managed_files_partial", :object => "diff.changed_managed_files[0]"}
+            .col-xs-1
+            .col-xs-5{"ng-show" => "diff.changed_managed_files[1]"}
+              %only-in-b
+              %render-template{:template => "scope_changed_managed_files_partial", :object => "diff.changed_managed_files[1]"}
+          %a.both_anchor{id: "changed_managed_files_both"}
+          .row{"ng-show" => "diff.changed_managed_files[2]"}
+            .col-xs-1
+            .col-xs-11
+              %in-both
+              %render-template{:template => "scope_changed_managed_files_partial", :object => "diff.changed_managed_files[2]"}
+
+    %script#scope_config_files_partial{:type => "text/ng-template"}
+      %p
+        <strong>Files extracted:</strong> {{object.extracted}}
+      %table.table.table-striped.table-hover.table-condensed.files-table{{"ng-show" => "object.files"}}
+        %thead
+          %tr
+            %th Name
+            %th Package Name
+            %th Package Version
+            %th Changes
+            %th Mode
+            %th User
+            %th Group
+        %tbody
+          %tr{"ng-repeat" => "file in object.files"}
+            %td {{file.name}}
+            %td {{file.package_name}}
+            %td {{file.package_version}}
+            %td
+              {{file.changes.join(",")}}
+              %span{"ng-show" => "file.error_message", :title => "{{file.error_message}}"} (details)
+            %td {{file.mode}}
+            %td {{file.user}}
+            %td {{file.group}}
+
+    %script#scope_config_files.partial{:type => "text/ng-template"}
+      %a.scope_anchor{:id => "config_files"}
+      #config_files_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#config_files"}
+              %img.scope_logo_big{:src => "assets/logo-config-files.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Config Files", :"data-content"=>"#{scope_help('config_files')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Config Files
+              .scope-summary
+                %span.summary-part{"ng-show" => "diff.config_files[0]"}
+                  {{diff.meta.description_a}}: {{diff.config_files[0].files.length || 0}} files
+                %span.summary-part{"ng-show" => "diff.config_files[1]"}
+                  {{diff.meta.description_b}}: {{diff.config_files[1].files.length || 0}} files
+                %span.summary-part{"ng-show" => "diff.config_files[2]"}
+                  %a{href: "#config_files_both"}
+                    both
+                  = ": {{diff.config_files[2].files.length}} files"
+        .row.scope_content.collapse.in
+          .row
+            .col-xs-1
+            .col-xs-5{"ng-show" => "diff.config_files[0]"}
+              %only-in-a
+              %render-template{:template => "scope_config_files_partial", :object => "diff.config_files[0]"}
+            .col-xs-1
+            .col-xs-5{"ng-show" => "diff.config_files[1]"}
+              %only-in-b
+              %render-template{:template => "scope_config_files_partial", :object => "diff.config_files[1]"}
+          %a.both_anchor{id: "config_files_both"}
+          .row{"ng-show" => "diff.config_files[2]"}
+            .col-xs-1
+            .col-xs-11
+              %in-both
+                %render-template{:template => "scope_config_files_partial", :object => "diff.config_files[2]"}
+
+    %script#scope_services_partial{:type => "text/ng-template"}
+      %table.table.table-striped.table-hover.table-condensed
+        %thead
+          %tr
+            %th Name
+            %th State
+        %tbody
+          %tr{"ng-repeat" => "service in object.services"}
+            %td {{service.name}}
+            %td{:class=>"{{object.init_system}}_{{service.state}}"}
+              {{service.state}}
+    %script#scope_services.partial{:type => "text/ng-template"}
+      %a.scope_anchor{:id => "services"}
+      #services_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#services"}
+              %img.scope_logo_big{:src => "assets/logo-services.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Services", :"data-content"=>"#{scope_help('services')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Services
+              .scope-summary
+                %span.summary-part{"ng-show" => "diff.services[0]"}
+                  {{diff.meta.description_a}}: {{diff.services[0].services.length || 0}} services ({{diff.services[0].init_system}})
+                %span.summary-part{"ng-show" => "diff.services[1]"}
+                  {{diff.meta.description_b}}: {{diff.services[1].services.length || 0}} services ({{diff.services[1].init_system}})
+                %span.summary-part{"ng-show" => "diff.services[2]"}
+                  %a{href: "#services_both"}
+                    both
+                  = ": {{diff.services[2].services.length}} services ({{diff.services[2].init_system}})"
+        .row.scope_content.collapse.in
+          .row
+            .col-xs-1
+            .col-xs-5{"ng-show" => "diff.services[0]"}
+              %only-in-a
+              %render-template{:template => "scope_services_partial", :object => "diff.services[0]"}
+            .col-xs-1
+            .col-xs-5{"ng-show" => "diff.services[1]"}
+              %only-in-b
+              %render-template{:template => "scope_services_partial", :object => "diff.services[1]"}
+          %a.both_anchor{id: "services_both"}
+          .row{"ng-show" => "diff.services[2]"}
+            .col-xs-1
+            .col-xs-11
+              %in-both
+              %render-template{:template => "scope_services_partial", :object => "diff.services[2]"}
+
+    %script{:src => "assets/diff.js"}
+    %script{:src => "assets/compare/machinery.js"}
+    %script{:src => "assets/bootstrap-tooltip.js"}
+    %script{:src => "assets/bootstrap-popover.js"}
+
+  %body
+    .container-fluid
+      #nav-bar
+        .row
+          .col-xs-1
+          .col-xs-10
+            %h1
+              Comparing '#{description_a}' with '#{description_b}'
+            %span.scope-navigation
+              Scopes:
+              %a{:href => "#os", :title => "Operating System"}
+                %img{:src => "assets/logo-os-small.png"}/
+              %a{:href => "#packages", :title => "Packages"}
+                %img{:src => "assets/logo-packages-small.png"}/
+              %a{:href => "#patterns", :title => "Patterns"}
+                %img{:src => "assets/logo-patterns-small.png"}/
+              %a{:href => "#users", :title => "Users"}
+                %img{:src => "assets/logo-users-small.png"}/
+              %a{:href => "#groups", :title => "Groups"}
+                %img{:src => "assets/logo-groups-small.png"}/
+              %a{:href => "#repositories", :title => "Repositories"}
+                %img{:src => "assets/logo-repositories-small.png"}/
+              %a{:href => "#unmanaged_files", :title => "Unmanaged Files"}
+                %img{:src => "assets/logo-unmanaged-files-small.png"}/
+              %a{:href => "#changed_managed_files", :title => "Changed Managed Files"}
+                %img{:src => "assets/logo-changed-managed-files-small.png"}/
+              %a{:href => "#config_files", :title => "Config Files"}
+                %img{:src => "assets/logo-config-files-small.png"}/
+              %a{:href => "#services", :title => "Services"}
+                %img{:src => "assets/logo-services-small.png"}/
+        .row
+          .col-xs-1
+            %a#expand-all{:href => "#", :style => "display: none"}
+              Expand all
+            %a#collapse-all{:href => "#"}
+              Collapse all
+          .col-xs-10
+            %small.pull-right.pad-top
+              created by
+              %a{:href => "http://machinery-project.org", :target => "_blank"}
+                Machinery
+
+      #content_container{"ng-controller" => "compareController"}
+        %div{"src" => "'scope_os'", "ng-include" => true}
+        %div{"src" => "'scope_packages'", "ng-include" => true}
+        %div{"src" => "'scope_patterns'", "ng-include" => true}
+        %div{"src" => "'scope_users'", "ng-include" => true}
+        %div{"src" => "'scope_groups'", "ng-include" => true}
+        %div{"src" => "'scope_repositories'", "ng-include" => true}
+        %div{"src" => "'scope_unmanaged_files'", "ng-include" => true}
+        %div{"src" => "'scope_changed_managed_files'", "ng-include" => true}
+        %div{"src" => "'scope_config_files'", "ng-include" => true}
+        %div{"src" => "'scope_services'", "ng-include" => true}