spectre-reporter-html 1.0.0

data/lib/spectre/reporter/html.rb

@@ -0,0 +1,1171 @@
+require 'cgi'
+require 'base64'
+
+module Spectre
+  module Reporter
+    class HTML
+      VERSION = '1.0.0'
+
+      def initialize config
+        @config = config
+        @date_format = '%FT%T.%L'
+      end
+
+      def get_error_info error
+        non_spectre_files = error.backtrace.select { |x| !x.include? 'lib/spectre' }
+
+        if non_spectre_files.count > 0
+          causing_file = non_spectre_files.first
+        else
+          causing_file = error.backtrace[0]
+        end
+
+        matches = causing_file.match(/(.*\.rb):(\d+)/)
+
+        return [nil, nil] unless matches
+
+        file, line = matches.captures
+        file.slice!(Dir.pwd + '/')
+
+        return [file, line]
+      end
+
+      def read_resource filename
+        file_path = File.join(__dir__, '../../../resources/', filename)
+
+        File.open(file_path, 'rb') do |file|
+          return file.read
+        end
+      end
+
+      def report run_infos
+        now = Time.now
+
+        failures = run_infos.select { |x| x.failure != nil }
+        errors = run_infos.select { |x| x.error != nil }
+        skipped = run_infos.select { |x| x.skipped? }
+        succeeded_count = run_infos.count - failures.count - errors.count - skipped.count
+
+        if failures.count > 0
+          overall_status = 'failed'
+        elsif errors.count > 0
+          overall_status = 'error'
+        elsif skipped.count > 0
+          overall_status = 'skipped'
+        else
+          overall_status = 'success'
+        end
+
+        json_report = {
+          command: $COMMAND,
+          project: @config['project'],
+          date: now.strftime(@date_format),
+          environment: @config['environment'],
+          hostname: Socket.gethostname,
+          duration: run_infos.sum { |x| x.duration },
+          failures: failures.count,
+          errors: errors.count,
+          skipped: skipped.count,
+          succeeded: succeeded_count,
+          total: run_infos.count,
+          overall_status: overall_status,
+          tags: run_infos
+            .map { |x| x.spec.tags }
+            .flatten
+            .uniq
+            .sort,
+          run_infos: run_infos.map do |run_info|
+            failure = nil
+            error = nil
+
+            if run_info.failed? and not run_info.failure.cause
+              failure_message = "Expected #{run_info.failure.expectation}"
+              failure_message += " with #{run_info.data}" if run_info.data
+              failure_message += " but it failed"
+              failure_message += " with message: #{run_info.failure.message}" if run_info.failure.message
+
+              failure = {
+                message: failure_message,
+                expected: run_info.failure.expected,
+                actual: run_info.failure.actual,
+              }
+            end
+
+            if run_info.error or (run_info.failed? and run_info.failure.cause)
+              error = run_info.error || run_info.failure.cause
+
+              file, line = get_error_info(error)
+
+              error = {
+                type: error.class.name,
+                message: error.message,
+                file: file,
+                line: line,
+                stack_trace: error.backtrace,
+              }
+            end
+
+            {
+              status: run_info.status,
+              subject: run_info.spec.subject.desc,
+              context: run_info.spec.context.__desc,
+              tags: run_info.spec.tags,
+              name: run_info.spec.name,
+              desc: run_info.spec.desc,
+              file: run_info.spec.file,
+              started: run_info.started.strftime(@date_format),
+              finished: run_info.finished.strftime(@date_format),
+              duration: run_info.duration,
+              properties: run_info.properties,
+              data: run_info.data,
+              failure: failure,
+              error: error,
+              # the <script> element has to be escaped in any string, as it causes the inline JavaScript to break
+              log: run_info.log.map { |x| [x[0], x[1].to_s.gsub(/\<(\/*script)/, '<`\1'), x[2], x[3]] },
+            }
+          end,
+          config: @config.obfuscate!,
+        }
+
+        vuejs_content = read_resource('vue.global.prod.js')
+        open_sans_font = Base64.strict_encode64 read_resource('OpenSans-Regular.ttf')
+        fa_solid = Base64.strict_encode64 read_resource('fa-solid-900.ttf')
+        fa_regular = Base64.strict_encode64 read_resource('fa-regular-400.ttf')
+        icon = read_resource('spectre_icon.svg')
+
+        html_str = <<~HTML
+          <html>
+            <head>
+              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+              <title>Spectre Report</title>
+
+              <!-- https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js -->
+              <script>#{vuejs_content}</script>
+
+              <style>
+                @font-face{
+                  font-family: 'Open Sans Regular';
+                  src: url(data:font/ttf;base64,#{open_sans_font}) format('truetype');
+                }
+
+                @font-face{
+                  font-family: 'Font Awesome';
+                  font-weight: 900;
+                  src: url(data:font/ttf;base64,#{fa_solid}) format('truetype');
+                }
+
+                @font-face{
+                  font-family: 'Font Awesome';
+                  font-weight: 400;
+                  src: url(data:font/ttf;base64,#{fa_regular}) format('truetype');
+                }
+
+                * {
+                  box-sizing: border-box;
+                  font-weight: inherit;
+                  line-height: 1.5em;
+                  font-size: inherit;
+                  margin: 0rem;
+                  padding: 0rem;
+                }
+
+                html, body {
+                  padding: 0rem;
+                  margin: 0rem;
+                }
+
+                body {
+                  font-family: 'Open Sans Regular', Arial, sans-serif;
+                  color: #223857;
+                  font-size: 16px;
+                  background-color: #f6f7f8;
+                }
+
+                section {
+                  margin-bottom: 2rem;
+                }
+
+                #spectre-banner {
+                  padding: 1rem;
+                  font-weight: bold;
+                  text-align: center;
+                  text-transform: uppercase;
+                }
+
+                #spectre-report {
+                  padding: 2rem;
+                  width: 90%;
+                  margin: auto;
+                }
+
+                #spectre-tags {
+                  text-align: center;
+                }
+
+                #spectre-logo {
+                  display: block;
+                  margin: 1.5rem auto;
+                }
+
+                fieldset {
+                  border: 1px solid #dfe2e7;
+                  border-radius: 3px;
+                  margin-bottom: 0.3rem;
+                  width: 100%;
+                  padding: 0rem 1rem 1rem 1rem;
+                }
+
+                legend {
+                  color: #bcc5d1;
+                  font-size: 0.9rem;
+                  padding: 0.3em;
+                }
+
+                th {
+                  font-weight: bold;
+                  text-align: right;
+                }
+
+                td {
+                  padding: 0.2em;
+                }
+
+                ul {
+                  padding: 0rem 0rem 0rem 1rem;
+                }
+
+                /* spectre-logo */
+
+                .spectre-status-success .spectre-logo-eye {
+                  fill: #9ddf1c !important;
+                }
+
+                .spectre-status-failed .spectre-logo-eye {
+                  fill: #e61160 !important;
+                }
+
+                .spectre-status-error .spectre-logo-eye {
+                  fill: #f5d915 !important;
+                }
+
+                .spectre-status-skipped .spectre-logo-eye {
+                  fill: #c1d5d9 !important;
+                }
+
+                /* spectre-controls */
+
+                ul.spectre-controls {
+                  list-style: none;
+                  margin: 0rem;
+                  padding: 0rem;
+                  text-align: center;
+                }
+
+                ul.spectre-controls > li {
+                  display: inline;
+                  margin-right: 1rem;
+                }
+
+                .spectre-controls-clear {
+                  position: relative;
+                }
+
+                .spectre-controls-clear:before {
+                  font-family: 'Font Awesome';
+                  font-weight: 900;
+                  content: '\\f0b0';
+                }
+
+                .spectre-controls-clear.active:before {
+                  font-family: 'Font Awesome';
+                  font-weight: 900;
+                  content: '\\e17b';
+                }
+
+                .spectre-filter-count {
+                  font-size: 0.7em;
+                  background-color: #223857;
+                  color: #fff;
+                  border-radius: 999px;
+                  padding: 0em 0.5em;
+                  position: absolute;
+                  top: -1em;
+                }
+
+                .spectre-link {
+                  display: inline;
+                  border-bottom: 2px solid #3196d6;
+                  text-decoration: none;
+                  cursor: pointer;
+                }
+
+                .spectre-link:hover {
+                  background-color: #dbedf8;
+                }
+
+                legend.spectre-toggle {
+                  cursor: pointer;
+                  user-select: none;
+                }
+
+                legend.spectre-toggle:before {
+                  content: '+';
+                  margin-right: 0.2em;
+                }
+
+                .spectre-expander:before {
+                  font-family: 'Font Awesome';
+                  font-weight: 400;
+                  display: inline-block;
+                  cursor: pointer;
+                  content: '\\f0fe';
+                  margin-right: 0.5rem;
+                }
+
+                .active > .spectre-expander:before {
+                  content: '\\f146';
+                }
+
+                #spectre-environment,
+                .spectre-command {
+                  display: block;
+                  font-family: monospace;
+                  background-color: #223857;
+                  color: #fff;
+                  border-radius: 3px;
+                  padding: 0.5rem;
+                }
+
+                .spectre-command:before {
+                  content: '$';
+                  margin-right: 0.5rem;
+                }
+
+                /* spectre-summary */
+
+                .spectre-summary {
+                  text-align: center;
+                }
+
+                .spectre-summary span {
+                  font-size: 1.5rem;
+                }
+
+                .spectre-summary span:not(:last-child) {
+                  margin-right: 2em;
+                }
+
+                span.spectre-summary-project {
+                  display: block;
+                  font-size: 2.5em;
+                  text-transform: uppercase;
+                  margin: 1rem 0rem !important;
+                }
+
+                .spectre-summary-environment {
+                  font-family: monospace;
+                }
+
+                .spectre-summary-environment:before,
+                .spectre-summary-date:before,
+                .spectre-summary-duration:before,
+                .spectre-summary-host:before {
+                  font-family: 'Font Awesome';
+                  margin-right: 0.5em;
+                }
+
+                .spectre-summary-environment:before {
+                  font-weight: 900;
+                  content: '\\e587';
+                }
+
+                .spectre-summary-date:before {
+                  content: '\\f133';
+                }
+
+                .spectre-summary-duration:before {
+                  font-weight: 900;
+                  content: '\\f2f2';
+                }
+
+                .spectre-summary-host:before {
+                  font-weight: 900;
+                  content: '\\e4e5';
+                }
+
+                ul.spectre-summary-result {
+                  list-style: none;
+                  padding: 0rem;
+                  margin: 0rem;
+                  text-align: center;
+                }
+
+                ul.spectre-summary-result > li {
+                  display: inline;
+                  margin-right: 1rem;
+                }
+
+                ul.spectre-tags {
+                  list-style: none;
+                  padding: 0rem;
+                  margin: 0rem;
+                  user-select: none;
+                }
+
+                ul.spectre-tags > li {
+                  display: inline-block;
+                  line-height: 1.5rem;
+                  cursor: pointer;
+                }
+
+                .spectre-tag {
+                  color: #11c7e6;
+                  padding: 0rem 0.5rem;
+                }
+
+                .spectre-tag:before {
+                  content: '#';
+                }
+
+                .spectre-tag.active {
+                  background-color: #11c7e6;
+                  color: #223857;
+                  border-radius: 999px;
+                }
+
+                /* spectre-button */
+
+                .spectre-button {
+                  background-color: #11c7e6;
+                  border: 3px solid #11c7e6;
+                  color: #0b2a63;
+                  cursor: pointer;
+                  border-radius: 999px;
+                  padding: 0.5rem 1rem;
+                  font-weight: bold;
+                  user-select: none;
+                }
+
+                .spectre-button:hover {
+                  background-color: #7fe4f6;
+                  border-color: #7fe4f6;
+                }
+
+                .spectre-button:active {
+                  background-color: #d2f6fc;
+                  border-color: #d2f6fc;
+                }
+
+                .spectre-button.disabled {
+                  background: none !important;
+                  border-color: rgba(0, 0, 0, 0.1) !important;
+                  color: rgba(0, 0, 0, 0.175) !important;
+                  cursor: default !important;
+                }
+
+                .spectre-button.inactive {
+                  background: none;
+                  border-color: #0b2a63;
+                }
+
+                .spectre-button.inactive:hover {
+                  background-color: #0b2a63;
+                  border-color: #0b2a63;
+                  color: #fff;
+                }
+
+                .spectre-button.inactive:active {
+                  background-color: #0b3476;
+                  border-color: #0b3476;
+                  color: #fff;
+                }
+
+                /* spectre-badge */
+
+                .spectre-badge {
+                  font-size: 0.8em;
+                  font-weight: bold;
+                  background-color: #11c7e6;
+                  color: #0b2a63;
+                  border-radius: 999rem;
+                  padding: 0.2rem 0.8rem;
+                }
+
+                /* spectre-result */
+
+                .spectre-result-subjects {
+                  list-style: none;
+                  padding: 3rem;
+                  margin: 0rem;
+                  background-color: #fff;
+                  border-radius: 3px;
+                  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%);
+                }
+
+                .spectre-result-runinfos {
+                  display: none;
+                }
+
+                .active > .spectre-result-runinfos {
+                  display: block;
+                }
+
+                ul.spectre-result-contexts, ul.spectre-result-runinfos {
+                  list-style: none;
+                  margin: 0rem;
+                }
+
+                .spectre-result-subjects > li {
+                  margin-bottom: 1rem;
+                }
+
+                /* spectre-subject */
+
+                .spectre-subject-desc {
+                  font-weight: bold;
+                  font-size: 1.3rem;
+                }
+
+                /* spectre-context */
+
+                .spectre-context-desc {
+                  font-style: italic;
+                  color: #11c7e6;
+                }
+
+                .spectre-context {
+                  line-height: 1.5em;
+                }
+
+                /* spectre-runinfo */
+
+                .spectre-runinfo {
+                  padding: 0.8rem 1rem;
+                }
+
+                .spectre-runinfo:not(:last-child) {
+                  border-bottom: 1px solid rgb(0, 0, 0, 0.1);
+                }
+
+                .spectre-runinfo-description > span {
+                  margin: 0em 0.2em;
+                }
+
+                .spectre-runinfo-details {
+                  margin: 1rem 0rem;
+                  padding-left: 1rem;
+                  display: none;
+                }
+
+                .spectre-runinfo.active .spectre-runinfo-details {
+                  display: block;
+                }
+
+                .spectre-description-data {
+                  color: #11c7e6;
+                }
+
+                .spectre-description-name {
+                  color: #9aa7b9;
+                }
+
+                .spectre-description-data:before,
+                .spectre-description-name:before {
+                  content: '[';
+                }
+
+                .spectre-description-data:after,
+                .spectre-description-name:after {
+                  content: ']';
+                }
+
+                .spectre-file {
+                  font-family: monospace;
+                }
+
+                .spectre-code {
+                  font-family: monospace;
+                }
+
+                .spectre-date {
+                  font-style: italic;
+                }
+
+                /* spectre-details */
+
+                .spectre-details-status {
+                  text-transform: uppercase;
+                }
+
+                /* spectre icons */
+
+                .spectre-description-status:before {
+                  font-family: 'Font Awesome';
+                  font-weight: 900;
+                  margin: 0em 0.3em;
+                }
+
+                .spectre-runinfo.spectre-status-success .spectre-description-status:before {
+                  content: '\\f00c';
+                  color: #9ddf1c;
+                }
+
+                .spectre-runinfo.spectre-status-failed .spectre-description-status:before {
+                  content: '\\f7a9';
+                  color: #e61160;
+                }
+
+                .spectre-runinfo.spectre-status-error .spectre-description-status:before {
+                  content: '\\f057';
+                  font-weight: 400;
+                  color: #f5d915;
+                }
+
+                .spectre-runinfo.spectre-status-skipped .spectre-description-status:before {
+                  content: '\\f04e';
+                  color: #c1d5d9;
+                }
+
+                /* spectre-status colors */
+
+                /* spectre-status colors SUCCESS */
+
+                .spectre-runinfo.spectre-status-success .spectre-details-status,
+                .spectre-button.spectre-summary-succeeded,
+                .spectre-status-success #spectre-banner {
+                  background-color: #9ddf1c;
+                  border-color:  #9ddf1c;
+                }
+
+                .spectre-button.spectre-summary-succeeded:hover {
+                  background-color: #c1f55b;
+                  border-color:  #c1f55b;
+                  color: #0b2a63;
+                }
+
+                .spectre-button.spectre-summary-succeeded:active {
+                  background-color: #d3ff7c;
+                  border-color:  #d3ff7c;
+                  color: #0b2a63;
+                }
+
+                .spectre-button.inactive.spectre-summary-succeeded {
+                  background: none;
+                  border-color: #9ddf1c;
+                  color: #0b2a63;
+                }
+
+                .spectre-button.inactive.spectre-summary-succeeded:hover {
+                  background-color: #9ddf1c;
+                  border-color: #9ddf1c;
+                }
+
+                .spectre-button.inactive.spectre-summary-succeeded:active {
+                  background-color: #83bd11;
+                  border-color: #83bd11;
+                }
+
+                .spectre-log-level-info {
+                  color: #9ddf1c;
+                }
+
+                /* spectre-status colors FAILED */
+
+                .spectre-runinfo.spectre-status-failed .spectre-details-status,
+                .spectre-button.spectre-summary-failures,
+                .spectre-status-failed #spectre-banner {
+                  background-color: #e61160;
+                  border-color:  #e61160;
+                }
+
+                .spectre-button.spectre-summary-failures:hover {
+                  background-color: #f56198;
+                  border-color:  #f56198;
+                  color: #0b2a63;
+                }
+
+                .spectre-button.spectre-summary-failures:active {
+                  background-color: #ffadcb;
+                  border-color:  #ffadcb;
+                  color: #0b2a63;
+                }
+
+                .spectre-button.inactive.spectre-summary-failures {
+                  background: none;
+                  border-color:  #e61160;
+                  color: #0b2a63;
+                }
+
+                .spectre-button.inactive.spectre-summary-failures:hover {
+                  background-color: #e61160;
+                  border-color: #e61160;
+                }
+
+                .spectre-button.inactive.spectre-summary-failures:active {
+                  background-color: #bb084a;
+                  border-color: #bb084a;
+                }
+
+                .spectre-log-level-error {
+                  color: #e61160;
+                }
+
+                /* spectre-status colors ERROR */
+
+                .spectre-runinfo.spectre-status-error .spectre-details-status,
+                .spectre-button.spectre-summary-errors,
+                .spectre-status-error #spectre-banner {
+                  background-color: #f5d915;
+                  border-color:  #f5d915;
+                }
+
+                .spectre-button.spectre-summary-errors:hover {
+                  background-color: #fde95e;
+                  border-color:  #fde95e;
+                  color: #0b2a63;
+                }
+
+                .spectre-button.spectre-summary-errors:active {
+                  background-color: #fff29b;
+                  border-color:  #fff29b;
+                  color: #0b2a63;
+                }
+
+                .spectre-button.inactive.spectre-summary-errors {
+                  background: none;
+                  border-color: #f5d915;
+                  color: #0b2a63;
+                }
+
+                .spectre-button.inactive.spectre-summary-errors:hover {
+                  background-color: #f5d915;
+                  border-color: #f5d915;
+                }
+
+                .spectre-button.inactive.spectre-summary-errors:active {
+                  background-color: #e7ca00;
+                  border-color: #e7ca00;
+                }
+
+                .spectre-log-level-warn {
+                  color: #f5d915;
+                }
+
+                /* spectre-status colors SKIPPED */
+
+                .spectre-runinfo.spectre-status-skipped .spectre-details-status,
+                .spectre-button.spectre-summary-skipped,
+                .spectre-status-skipped #spectre-banner {
+                  background-color: #c1d5d9;
+                  border-color:  #c1d5d9;
+                }
+
+                .spectre-log-level-debug {
+                  color: #c1d5d9;
+                }
+
+                /* spectre-log */
+
+                .spectre-log {
+                  font-family: monospace;
+                  font-size: 0.8rem;
+                  list-style: none;
+                  padding: 0rem;
+                  margin: 0rem;
+                }
+
+                .spectre-log-entry {
+                  display: block;
+                  font-family: monospace;
+                  white-space: pre;
+                }
+
+                .spectre-log-timestamp {
+                  font-style: italic;
+                  color: rgba(0, 0, 0, 0.5);
+                }
+
+                .spectre-log-timestamp:before {
+                  content: '[';
+                  color: #000;
+                }
+
+                .spectre-log-timestamp:after {
+                  content: ']';
+                  color: #000;
+                }
+
+                .spectre-log-level {
+                  text-transform: uppercase;
+                }
+              </style>
+            </head>
+            <body>
+              <div id="app">
+                <div :class="'spectre-status-' + spectreReport.overall_status">
+                  <div id="spectre-banner">{{ spectreReport.overall_status }}</div>
+
+                  <div class="spectre-summary">
+                    #{icon}
+
+                    <span class="spectre-summary-project">{{ spectreReport.project }}</span>
+
+                    <span class="spectre-summary-environment">{{ spectreReport.environment }}</span>
+                    <span class="spectre-summary-date">{{ new Date(spectreReport.date).toLocaleString() }}</span>
+                    <span class="spectre-summary-duration">{{ spectreReport.duration.toDurationString() }}</span>
+                    <span class="spectre-summary-host">{{ spectreReport.hostname }}</span>
+                  </div>
+
+                  <div id="spectre-report">
+                    <section>
+                      <div class="spectre-command">{{ spectreCommand }}</div>
+                    </section>
+
+                    <section id="spectre-tags">
+                      <ul class="spectre-tags">
+                        <li class="spectre-tag" v-for="tag in spectreReport.tags" @click="toggleTagFilter(tag)" :class="{ active: tagFilter.includes(tag)}">{{ tag }}</li>
+                      </ul>
+                    </section>
+
+                    <section>
+                      <ul class="spectre-summary-result">
+                        <li
+                          class="spectre-button spectre-summary-succeeded"
+                          :class="{ disabled: spectreReport.succeeded == 0, inactive: statusFilter != null && statusFilter != 'success' }"
+                          @click="filter('success')">{{ spectreReport.succeeded }} succeeded</li>
+
+                        <li
+                          class="spectre-button spectre-summary-skipped"
+                          :class="{ disabled: spectreReport.skipped == 0, inactive: statusFilter != null && statusFilter != 'skipped' }"
+                          @click="filter('skipped')">{{ spectreReport.skipped }} skipped</li>
+
+                        <li
+                          class="spectre-button spectre-summary-failures"
+                          :class="{ disabled: spectreReport.failures == 0, inactive: statusFilter != null && statusFilter != 'failed' }"
+                          @click="filter('failed')">{{ spectreReport.failures }} failures</li>
+
+                        <li
+                          class="spectre-button spectre-summary-errors"
+                          :class="{ disabled: spectreReport.errors == 0, inactive: statusFilter != null && statusFilter != 'error' }"
+                          @click="filter('error')">{{ spectreReport.errors }} errors</li>
+
+                        <li
+                          class="spectre-button spectre-summary-total"
+                          :class="{ disabled: spectreReport.total == 0, inactive: statusFilter != null }"
+                          @click="showAll()">{{ spectreReport.total }} total</li>
+                      </ul>
+                    </section>
+
+                    <section>
+                      <ul class="spectre-section spectre-controls">
+                        <li class="spectre-link" @click="collapseAll()">collapse all</li>
+                        <li class="spectre-link" @click="expandAll()">expand all</li>
+                        <li class="spectre-link spectre-controls-clear" :class="{ active: tagFilter.length > 0 || statusFilter != null }" @click="clearFilter()">
+                          <span class="spectre-filter-count">{{ filteredResults.length }}/{{ spectreReport.run_infos.length }}<span>
+                        </li>
+                      </ul>
+                    </section>
+
+                    <section>
+                      <ul class="spectre-result-subjects">
+                        <li class="spectre-subject" v-for="(contexts, subject) in mappedResults">
+                          <span class="spectre-subject-desc">{{ subject }}</span>
+
+                          <ul class="spectre-result-contexts">
+                            <li class="spectre-context" v-for="(runInfos, context) in contexts" :class="{ active: expandedContexts.includes(subject + '_' + context) }">
+                              <span class="spectre-expander" @click="toggleContext(subject, context)"></span>
+                              <span class="spectre-context-desc">{{ context }}</span>
+
+                              <ul class="spectre-result-runinfos">
+                                <li class="spectre-runinfo" v-for="runInfo in runInfos" :class="['spectre-status-' + runInfo.status, { active: shownDetails.includes(runInfo) }]">
+                                  <span class="spectre-expander" @click="showDetails(runInfo)"></span>
+                                  <span class="spectre-runinfo-description">
+                                    <span class="spectre-description-status"></span>
+                                    <span class="spectre-description-name">{{ runInfo.name }}</span>
+                                    <span class="spectre-description-data" v-if="runInfo.data">{{ runInfo.data }}</span>
+                                    <span class="spectre-description-subject">{{ subject }}</span>
+                                    <span class="spectre-description-spec">{{ runInfo.desc }}</span>
+                                  </span>
+
+                                  <div class="spectre-runinfo-details">
+                                    <fieldset>
+                                      <legend>Run Info</legend>
+
+                                      <table>
+                                        <tr><th>Status</th><td><span class="spectre-badge spectre-details-status">{{ runInfo.status }}</span></td></tr>
+                                        <tr><th>Name</th><td>{{ runInfo.name }}</td></tr>
+                                        <tr><th>Description</th><td>{{ runInfo.desc }}</td></tr>
+                                        <tr><th>Tags</th><td>
+                                          <ul class="spectre-tags">
+                                            <li class="spectre-tag" v-for="tag in runInfo.tags" @click="toggleTagFilter(tag)" :class="{ active: tagFilter.includes(tag)}">{{ tag }}</li>
+                                          </ul>
+                                        </td></tr>
+                                        <tr><th>File</th><td><span class="spectre-file">{{ runInfo.file }}<span></td></tr>
+                                        <tr><th>Started</th><td><span class="spectre-date">{{ runInfo.started }}<span></td></tr>
+                                        <tr><th>Finished</th><td><span class="spectre-date">{{ runInfo.finished }}<span></td></tr>
+                                        <tr><th>Duration</th><td>{{ runInfo.duration.toDurationString() }}</td></tr>
+                                      </table>
+                                    </fieldset>
+
+                                    <fieldset class="spectre-runinfo-data" v-if="runInfo.data">
+                                      <legend>Data</legend>
+                                      <pre>{{ runInfo.data }}</pre>
+                                    </fieldset>
+
+                                    <fieldset class="spectre-runinfo-properties" v-if="Object.keys(runInfo.properties).length > 0">
+                                      <legend>Properties</legend>
+
+                                      <table>
+                                        <tr v-for="(item, key) in runInfo.properties" :key="key"><th>{{ key }}</th><td>{{ item }}</td></tr>
+                                      </table>
+                                    </fieldset>
+
+                                    <fieldset class="spectre-runinfo-failure" v-if="runInfo.failure">
+                                      <legend>Failure</legend>
+
+                                      <table>
+                                        <tr><th>Message</th><td>{{ runInfo.failure.message }}</td></tr>
+                                        <tr><th>Expected</th><td>{{ runInfo.failure.expected }}</td></tr>
+                                        <tr><th>Actual</th><td>{{ runInfo.failure.actual }}</td></tr>
+                                      </table>
+                                    </fieldset>
+
+                                    <fieldset class="spectre-runinfo-error" v-if="runInfo.error">
+                                      <legend>Error</legend>
+
+                                      <table>
+                                        <tr><th>File</th><td><span class="spectre-file">{{ runInfo.error.file }}</span></td></tr>
+                                        <tr><th>Line</th><td>{{ runInfo.error.line }}</td></tr>
+                                        <tr><th>Type</th><td><span class="spectre-code">{{ runInfo.error.type }}</span></td></tr>
+                                        <tr><th>Message</th><td>{{ runInfo.error.message }}</td></tr>
+                                      </table>
+                                    </fieldset>
+
+                                    <fieldset class="spectre-runinfo-stacktrace" v-if="runInfo.error && runInfo.error.stack_strace">
+                                      <ul>
+                                        <li v-for="stackTraceEntry in runInfo.error.stack_strace">{{ stackTraceEntry }}</li>
+                                      </ul>
+                                    </fieldset>
+
+                                    <fieldset class="spectre-runinfo-log" v-if="runInfo.log && runInfo.log.length > 0">
+                                      <legend class="spectre-toggle" @click="toggleLog(runInfo)">Log</legend>
+
+                                      <ul class="spectre-log" v-if="shownLogs.includes(runInfo)">
+                                        <li v-for="logEntry in runInfo.log" class="spectre-log-entry">
+                                          <span class="spectre-log-timestamp">{{ logEntry[0] }}</span> <span class="spectre-log-level" :class="'spectre-log-level-' + logEntry[2]">{{ logEntry[2] }}</span> -- <span class="spectre-log-name">{{ logEntry[3] }}</span>: <span class="spectre-log-message">{{ logEntry[1] }}</span>
+                                        </li>
+                                      </ul>
+                                    </fieldset>
+                                  <div>
+                                </li>
+                              </ul>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </section>
+
+                    <section id="spectre-environment">
+                      <pre>#{ CGI::escapeHTML(YAML.dump json_report[:config]) }</pre>
+                    </section>
+                  </div>
+                </div>
+              </div>
+
+              <script>
+                Array.prototype.groupBy = function(callbackFn) {
+                  const map = new Object();
+                  this.forEach((item) => {
+                      const key = callbackFn(item);
+                      const collection = map[key];
+                      if (!collection) {
+                          map[key] = [item];
+                      } else {
+                          collection.push(item);
+                      }
+                  });
+                  return map;
+                }
+
+                Object.prototype.map = function(callbackFn) {
+                  return Object
+                    .entries(this)
+                    .map(callbackFn);
+                };
+
+                Array.prototype.toDict = function() {
+                  return Object.assign({}, ...this.map((x) => ({[x[0]]: x[1]})));
+                };
+
+                Array.prototype.distinct = function() {
+                  return this.filter((value, index, self) => self.indexOf(value) === index);
+                };
+
+                Number.prototype.toDurationString = function() {
+                  let date = new Date(this * 1000);
+                  let hours = date.getUTCHours();
+                  let minutes = date.getUTCMinutes();
+                  let seconds = date.getUTCSeconds();
+                  let milliseconds = date.getUTCMilliseconds();
+
+                  let durationString = '';
+
+                  if (hours > 0) {
+                    durationString += `${hours}h`
+                  }
+
+                  if (minutes > 0 || hours > 0) {
+                    if (durationString.length > 0) {
+                      durationString += ' ';
+                    }
+
+                    durationString += `${minutes}m`
+                  }
+
+                  if (seconds > 0 || minutes > 0) {
+                    if (durationString.length > 0) {
+                      durationString += ' ';
+                    }
+
+                    durationString += `${seconds}s`
+                  }
+
+                  if (milliseconds > 0) {
+                    if (durationString.length > 0) {
+                      durationString += ' ';
+                    }
+
+                    durationString += `${milliseconds}ms`
+                  }
+
+                  if (durationString.length == 0) {
+                    return `${this}s`
+                  }
+
+                  return durationString;
+                }
+
+                const { createApp } = Vue;
+
+                window.App = createApp({
+                  data() {
+                    return {
+                      spectreReport: #{json_report.to_json},
+                      statusFilter: null,
+                      tagFilter: [],
+                      shownDetails: [],
+                      shownLogs: [],
+                      expandedContexts: [],
+                    }
+                  },
+                  mounted() {
+                    this.expandAll();
+                  },
+                  computed: {
+                    filteredResults() {
+                      return this.spectreReport.run_infos
+                        .filter(x => this.statusFilter == null || x.status == this.statusFilter)
+                        .filter(x => this.tagFilter.length == 0 || x.tags.filter(x => this.tagFilter.includes(x)).length > 0);
+                    },
+                    mappedResults() {
+                      return this.filteredResults
+                        .groupBy(x => x.subject)
+                        .map(([key, val]) => [key, val.groupBy(x => x.context || '[main]')])
+                        .toDict();
+                    },
+                    spectreCommand() {
+                      let cmd = this.spectreReport.command;
+                      let filteredSpecs = this.filteredResults;
+
+                      if (this.statusFilter == null && this.tagFilter.length > 0) {
+                        cmd += ` -t ${this.tagFilter.join(',')}`
+
+                      } else if (this.statusFilter != null && filteredSpecs.length > 0) {
+                        cmd += ` -s ${this.filteredResults.map(x => x.name).join(',')}`
+                      }
+
+                      return cmd;
+                    },
+                  },
+                  methods: {
+                    filter(status) {
+                      if (this.statusFilter == status) {
+                        this.statusFilter = null;
+                        return;
+                      }
+
+                      if (this.spectreReport.run_infos.filter(x => x.status == status).length == 0) {
+                        return;
+                      }
+
+                      this.statusFilter = status;
+                    },
+                    showAll() {
+                      this.statusFilter = null;
+                    },
+                    toggleTagFilter(tag) {
+                      let index = this.tagFilter.indexOf(tag);
+
+                      if (index > -1) {
+                        this.tagFilter.splice(index, 1);
+                      } else {
+                        this.tagFilter.push(tag)
+                      }
+                    },
+                    clearFilter() {
+                      this.statusFilter = null;
+                      this.tagFilter = [];
+                    },
+                    showDetails(runInfo) {
+                      let index = this.shownDetails.indexOf(runInfo);
+
+                      if (index > -1) {
+                        this.shownDetails.splice(index, 1);
+                      } else {
+                        this.shownDetails.push(runInfo)
+                      }
+                    },
+                    toggleContext(subject, context) {
+                      let key = subject + '_' + context;
+
+                      let index = this.expandedContexts.indexOf(key);
+
+                      if (index > -1) {
+                        this.expandedContexts.splice(index, 1);
+                      } else {
+                        this.expandedContexts.push(key)
+                      }
+                    },
+                    toggleLog(runInfo) {
+                      let index = this.shownLogs.indexOf(runInfo);
+
+                      if (index > -1) {
+                        this.shownLogs.splice(index, 1);
+                      } else {
+                        this.shownLogs.push(runInfo)
+                      }
+                    },
+                    collapseAll() {
+                      this.expandedContexts = [];
+                    },
+                    expandAll() {
+                      this.expandedContexts = this.spectreReport.run_infos
+                        .map(x => x.subject + '_' + (x.context || '[main]'))
+                        .distinct();
+                    }
+                  }
+                }).mount('#app')
+              </script>
+            </body>
+          </html>
+        HTML
+
+        Dir.mkdir @config['out_path'] unless Dir.exist? @config['out_path']
+
+        file_path = File.join(@config['out_path'], "spectre-html_#{now.strftime('%s')}.html")
+
+        File.write(file_path, html_str)
+      end
+    end
+  end
+end