@allurereport/web-allure2 3.0.0-beta.9

package/src/blocks/status-details/styles.scss

@@ -0,0 +1,32 @@
+@import "../../mixins.scss";
+
+.status-details {
+  overflow: auto;
+  margin-bottom: 7px;
+  @include status-border();
+  @include status-bg-light();
+  &__expanded > &__content > &__trace {
+    display: block;
+  }
+  &__expanded > &__content {
+    display: inline-block;
+  }
+  &__message {
+    padding: $gap-size;
+  }
+  &__trace {
+    float: left;
+    display: none;
+    padding: $gap-size;
+    white-space: pre;
+    border-top: 1px solid $pane-bg-color;
+  }
+  &__content {
+    display: block;
+  }
+  &__trace-toggle {
+    &:hover {
+      background-color: $hover-color;
+    }
+  }
+}

package/src/blocks/step-stats/step-stats.hbs

@@ -0,0 +1,15 @@
+<span class="step-stats">
+  {{~#if parameters.length ~}}
+    <span class="step-stats__info">{{~t 'testResult.stats.count.parameters' count=parameters.length~}}</span>
+    <span class="step-stats__separator">,&nbsp;</span>
+  {{~/if~}}
+  {{~#if stepsCount ~}}
+    <span class="step-stats__info">{{~t 'testResult.stats.count.steps' count=stepsCount~}}</span>
+  <span class="step-stats__separator">,&nbsp;</span>
+  {{~/if~}}
+  {{~#if attachmentsCount ~}}
+    <span class="step-stats__info">{{~t 'testResult.stats.count.attachments' count=attachmentsCount~}}</span>
+  <span class="step-stats__separator">,&nbsp;</span>
+  {{~/if~}}
+</span>
+<span class="step-stats__info step-stats__info_time" data-tooltip="{{date time.start}} {{time time.start true}}&nbsp;&ndash;&nbsp;{{time time.stop true}}">{{duration time.duration}}</span>

package/src/blocks/step-stats/styles.scss

@@ -0,0 +1,19 @@
+@import "../../variables.scss";
+
+.step-stats {
+  display: contents;
+
+  &__info {
+    color: $text-muted-color;
+    font-size: small;
+    white-space: nowrap;
+
+    &_time {
+      float: right;
+    }
+  }
+
+  &__separator:last-child {
+    display: none;
+  }
+}

package/src/blocks/table/sort-down-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="#a5a5a5" d="M256 50l132.034 176h-264.068l132.034-176z"/><path d="M388.034 286h-264.068l132.034 176 132.034-176z"/></svg>

package/src/blocks/table/sort-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="#a5a5a5" d="M256 50l132.034 176h-264.068l132.034-176zM388.034 286h-264.068l132.034 176 132.034-176z"/></svg>

package/src/blocks/table/sort-up-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M256 50l132.034 176h-264.068l132.034-176z"/><path fill="#a5a5a5" d="M388.034 286h-264.068l132.034 176 132.034-176z"/></svg>

package/src/blocks/table/sortable-col.hbs

@@ -0,0 +1,4 @@
+<div class="{{b "table" "col" sortable=true sorted=(sort-class field sorting)}} {{class}}"
+     data-sort="{{field}}">
+    <span>{{title}}</span>
+</div>

package/src/blocks/table/styles.scss

@@ -0,0 +1,64 @@
+@import "../../variables.scss";
+
+.table {
+  &__row,
+  &__head {
+    display: flex;
+  }
+  &__row {
+    border-bottom: 1px solid $border-color;
+    text-decoration: none;
+    color: $text-color;
+  }
+  &__head {
+    border-bottom: 1px solid $border-accent-color;
+    font-weight: bold;
+  }
+  &__col {
+    line-height: 1.5em;
+    padding: 10px 15px;
+    flex: 1;
+    &_center {
+      text-align: center;
+    }
+    &_right {
+      text-align: right;
+      justify-content: flex-end;
+    }
+    &_sortable {
+      cursor: pointer;
+      display: flex;
+      & > span {
+        overflow: hidden;
+        padding-right: 5px;
+      }
+      &:after {
+        flex-shrink: 0;
+        vertical-align: middle;
+        content: " ";
+        display: inline-block;
+        width: 12px;
+        height: 18px;
+        background: url(./sort-icon.svg?inline) center no-repeat;
+        background-size: contain;
+      }
+    }
+    &_sorted_down:after {
+      background-image: url(./sort-down-icon.svg?inline);
+    }
+    &_sorted_up:after {
+      background-image: url(./sort-up-icon.svg?inline);
+    }
+  }
+  &_hover {
+    .table__row:not([disabled]):hover {
+      background: $hover-color;
+    }
+  }
+  .table__row_summary {
+    background: $summary-color;
+  }
+  .table__row_active {
+    background: $selected-color;
+  }
+}

package/src/blocks/tabs/styles.scss

@@ -0,0 +1,29 @@
+@import "../../variables.scss";
+
+.tabs {
+  list-style-type: none;
+  position: relative;
+  //  top: -1px;
+  background: #fff;
+  border-bottom: 1px solid $border-accent-color;
+  padding: 0;
+  margin: 0;
+}
+.tab {
+  display: inline-block;
+  font-size: 16px;
+  & > a {
+    display: inline-block;
+    padding: calc($gap-size / 2) $gap-size;
+    border-bottom: 3px solid transparent;
+    &:hover {
+      border-bottom-color: $border-color;
+    }
+  }
+  &_active > a {
+    &,
+    &:hover {
+      border-bottom-color: $text-color;
+    }
+  }
+}

package/src/blocks/tabs/tabs.hbs

@@ -0,0 +1,5 @@
+<ul class="tabs">
+    {{#each links}}
+        <li class="{{b 'tab' active=active}}"><a class="link link__no-decoration" href="{{href}}" data-ga4-event="tab_change_click" data-ga4-param-tab="{{name}}">{{t name}}</a></li>
+    {{/each}}
+</ul>

package/src/blocks/text/styles.scss

@@ -0,0 +1,5 @@
+@import "../../mixins.scss";
+
+.text {
+  @include status-text();
+}

package/src/blocks/widget/draggable.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><rect x='0' y='0' width='3' height='3' fill='#cccccc' /></svg>

package/src/blocks/widget/styles.scss

@@ -0,0 +1,76 @@
+@import "../../variables.scss";
+
+.widget {
+  margin-bottom: $gap-size;
+  position: relative;
+
+  &_ghost {
+    border: 1px dashed $border-accent-color;
+    box-shadow: none;
+    min-height: 50px;
+    & > * {
+      display: none;
+    }
+  }
+
+  &__title {
+    margin-top: 0;
+    margin-bottom: 15px;
+    font-weight: lighter;
+    text-transform: uppercase;
+  }
+
+  &__subtitle {
+    color: $text-muted-color;
+    font-size: 16px;
+    text-transform: none;
+  }
+
+  &__noitems {
+    font-size: 16px;
+    text-align: center;
+    padding: 10px 15px;
+    line-height: 1.5em;
+  }
+
+  &__flex-line {
+    display: flex;
+  }
+
+  &__column {
+    width: 50%;
+  }
+
+  &__handle {
+    display: none;
+    position: absolute;
+    right: $gap-size;
+    top: $gap-size;
+    color: $text-muted-color;
+    cursor: move; /* fallback if grab cursor is unsupported */
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    .widget:hover & {
+      display: block;
+    }
+  }
+
+  &__table {
+    border-top: 1px solid $border-color;
+    margin: 0 (-$gap-size);
+    word-break: break-all;
+    .table__row:last-child {
+      border-bottom: 0;
+    }
+  }
+}
+
+.draggable-icon {
+  position: absolute;
+  right: 0;
+  z-index: 1;
+}

package/src/components/attachment/AttachmentView.hbs

@@ -0,0 +1,58 @@
+{{#if (eq type "custom")}}
+    <div class="attachment__custom-view"></div>
+{{else if (eq type "code")}}
+    <div class="{{b 'attachment__text-container' fullscreen=fullScreen}}">
+        <pre class="attachment__code">{{content}}</pre>
+    </div>
+{{else if (eq type "text")}}
+    <div class="{{b 'attachment__text-container' fullscreen=fullScreen}}">
+        <pre class="attachment__text">{{content}}</pre>
+    </div>
+{{else if (eq type "table")}}
+    <div class="{{b 'attachment__table-container' fullscreen=fullScreen}}">
+        <table class="table attachment__table">
+            <tbody>
+            {{#each content}}
+                <tr>
+                    {{#each .}}
+                        <td>{{.}}</td>
+                    {{/each}}
+                </tr>
+            {{/each}}
+            </tbody>
+        </table>
+    </div>
+{{else if (eq type "image")}}
+    <div class="{{b 'attachment__media-container' fullscreen=fullScreen}}"><img class="attachment__media" src="{{sourceUrl}}"/>
+    </div>
+{{else if (eq type "svg")}}
+    <object class="attachment__embed" type="image/svg+xml" data="{{sourceUrl}}">
+        Your browser does not support SVG
+    </object>
+{{else if (eq type "video")}}
+    <div class="attachment__media-container">
+        <video class="attachment__media" controls>
+            <source src="{{sourceUrl}}" type="{{attachment.type}}">
+            Your browser does not support video tag
+        </video>
+    </div>
+{{else if (eq type "uri")}}
+    <div class="{{b 'attachment__text-container' fullscreen=fullScreen}}">
+        {{#each content}}
+            <p class="{{b 'attachment' 'url' comment=comment}}">
+                {{#if comment}}
+                    {{text}}
+                {{else}}
+                    <a href="{{text}}" target="_blank" class="link">{{text}}</a>
+                {{/if}}
+            </p>
+        {{/each}}
+    </div>
+{{else if (eq type "html")}}
+        <iframe class="{{b 'attachment__iframe' fullscreen=fullScreen}}" frameborder="0" src="{{sourceUrl}}"></iframe>
+{{else}}
+    <div class="{{b 'attachment__text-container' fullscreen=fullScreen}}">
+        {{allure-icon "download" noTooltip=true width="14px" height="14px"}}
+        <a class="link" href="{{sourceUrl}}" download="{{attachment.name}}">Click to download attachment</a>
+    </div>
+{{/if}}

package/src/components/attachment/AttachmentView.js

@@ -0,0 +1,90 @@
+import { reportDataUrl } from "@allurereport/web-commons";
+import { $ } from "backbone";
+import { View } from "backbone.marionette";
+import { behavior, className, on, regions } from "@/decorators/index.js";
+import router from "@/router.js";
+import attachmentType from "@/utils/attachmentType.js";
+import highlight from "@/utils/highlight.js";
+import template from "./AttachmentView.hbs";
+import "./styles.scss";
+
+@className("attachment")
+@behavior("TooltipBehavior", { position: "bottom" })
+@regions({
+  customView: ".attachment__custom-view",
+})
+class AttachmentView extends View {
+  template = template;
+
+  initialize() {
+    this.fullScreen = !!this.options.fullScreen;
+    this.attachment = this.options.attachment;
+    this.attachmentInfo = attachmentType(this.attachment.type);
+  }
+
+  onRender() {
+    if (!this.sourceUrl) {
+      reportDataUrl(`data/attachments/${this.attachment.source}`, this.attachment.type)
+        .then((sourceUrl) => {
+          this.sourceUrl = sourceUrl;
+        })
+        .then(() => {
+          if (this.needsFetch()) {
+            return this.loadContent();
+          }
+        })
+        .then(this.render);
+    }
+
+    if (this.attachmentInfo.type === "custom") {
+      this.showChildView(
+        "customView",
+        new this.attachmentInfo.View({
+          sourceUrl: this.sourceUrl,
+          attachment: this.attachment,
+        }),
+      );
+    } else if (this.attachmentInfo.type === "code") {
+      const codeBlock = this.$(".attachment__code");
+      codeBlock.addClass(`language-${this.attachment.type.split("/").pop()}`);
+      highlight.highlightElement(codeBlock[0]);
+    }
+  }
+
+  onDestroy() {
+    router.setSearch({ attachment: null });
+  }
+
+  @on("click .attachment__media-container")
+  onImageClick(e) {
+    const el = this.$(e.currentTarget);
+    if (el.hasClass("attachment__media-container_fullscreen")) {
+      this.onDestroy();
+    } else {
+      router.setSearch({ attachment: this.attachment.uid });
+    }
+  }
+
+  needsFetch() {
+    return "parser" in this.attachmentInfo;
+  }
+
+  loadContent() {
+    return $.ajax(this.sourceUrl, { dataType: "text" }).then((responseText) => {
+      const parser = this.attachmentInfo.parser;
+      this.content = parser(responseText);
+    });
+  }
+
+  serializeData() {
+    return {
+      type: this.attachmentInfo.type,
+      content: this.content,
+      sourceUrl: this.sourceUrl,
+      attachment: this.attachment,
+      fullScreen: this.fullScreen,
+    };
+  }
+}
+
+export default AttachmentView;

package/src/components/attachment/styles.scss

@@ -0,0 +1,78 @@
+@import "../../variables.scss";
+
+.attachment {
+  &__filename {
+    background: $heading-bg;
+    padding: $gap-size;
+  }
+  &__text {
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin: 0;
+    padding: 0;
+  }
+  &__code {
+    font: 14px normal "Courier New" monospace;
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin: 0;
+    padding: 0;
+  }
+  &__table {
+    width: 100%;
+
+    tr {
+      border-bottom: 1px solid $border-color;
+    }
+    td {
+      padding: 10px 15px;
+    }
+  }
+  &__url {
+    padding: 0 $gap-size;
+    margin: 0.5em 0;
+
+    &_comment {
+      color: $text-muted-color;
+    }
+  }
+  &__table-container {
+    overflow: auto;
+  }
+  &__text-container,
+  &__table-container {
+    &_fullscreen {
+      padding: $gap-size;
+      background-color: $pane-bg-color;
+    }
+  }
+  &__media-container {
+    text-align: center;
+    cursor: zoom-in;
+
+    &_fullscreen {
+      cursor: zoom-out;
+    }
+  }
+  &__iframe-container {
+    height: 100%;
+  }
+  &__embed,
+  &__media {
+    max-width: 100%;
+    display: block;
+    margin: auto;
+
+    &_fullscreen {
+      margin: auto;
+    }
+  }
+  &__iframe {
+    width: 100%;
+
+    &_fullscreen {
+      background-color: $pane-bg-color;
+      height: 85vh;
+    }
+  }
+}

package/src/components/empty/EmptyView.hbs

@@ -0,0 +1,3 @@
+<div class="{{cls}}">
+    <p class="{{b cls "message"}}">{{message}}</p>
+</div>

package/src/components/empty/EmptyView.js

@@ -0,0 +1,18 @@
+import { View } from "backbone.marionette";
+import { className } from "@/decorators/index.js";
+import template from "./EmptyView.hbs";
+import "./styles.scss";
+
+@className("empty-view")
+class EmptyView extends View {
+  template = template;
+
+  serializeData() {
+    return {
+      cls: this.className,
+      message: this.options.message,
+    };
+  }
+}
+
+export default EmptyView;

package/src/components/empty/styles.scss

@@ -0,0 +1,4 @@
+.empty-view {
+  padding: 10px;
+  text-align: center;
+}

package/src/components/error-splash/ErrorSplashView.hbs

@@ -0,0 +1,4 @@
+<div class="{{cls}}">
+    <h1 class="{{b cls "title"}}">{{code}}</h1>
+    <p class="{{b cls "message"}}">{{message}}</p>
+</div>

package/src/components/error-splash/ErrorSplashView.js

@@ -0,0 +1,19 @@
+import { View } from "backbone.marionette";
+import { className } from "@/decorators/index.js";
+import template from "./ErrorSplashView.hbs";
+import "./styles.scss";
+
+@className("error-splash")
+class ErrorSplashView extends View {
+  template = template;
+
+  serializeData() {
+    return {
+      cls: this.className,
+      code: this.options.code,
+      message: this.options.message,
+    };
+  }
+}
+
+export default ErrorSplashView;

package/src/components/error-splash/styles.scss

@@ -0,0 +1,4 @@
+.error-splash {
+  padding: 10px;
+  text-align: center;
+}

package/src/components/graph-base/BaseChartView.hbs

@@ -0,0 +1,5 @@
+<svg class="chart__svg">
+    <g class="chart__plot" transform="translate({{PAD_LEFT}}, {{PAD_TOP}})"></g>
+    <g class="chart__axis chart__axis_x"></g>
+    <g class="chart__axis chart__axis_y"></g>
+</svg>

package/src/components/graph-base/BaseChartView.js

@@ -0,0 +1,78 @@
+import { View } from "backbone";
+import { axisBottom, axisLeft } from "d3-axis";
+import { select } from "d3-selection";
+import template from "./BaseChartView.hbs";
+import "./styles.scss";
+
+export default class BaseChartView extends View {
+  PAD_LEFT = 50;
+  PAD_RIGHT = 15;
+  PAD_TOP = 10;
+  PAD_BOTTOM = 30;
+
+  constructor(options) {
+    super(options);
+    this.options = options;
+    this.firstRender = true;
+  }
+
+  onRender() {
+    select(window).on(`resize.${this.cid}`, this.onAttach.bind(this));
+  }
+
+  onDestroy() {
+    select(window).on(`resize.${this.cid}`, null);
+  }
+
+  onAttach() {
+    this.firstRender = false;
+  }
+
+  setupViewport() {
+    this.width = Math.floor(this.$el.outerWidth()) - this.PAD_LEFT - this.PAD_RIGHT;
+    this.height = Math.floor(this.$el.outerHeight()) - this.PAD_BOTTOM - this.PAD_TOP;
+    this.$el.html(template(this));
+    this.svg = select(this.$el[0]).select(".chart__svg");
+    this.plot = this.svg.select(".chart__plot");
+  }
+
+  makeLeftAxis(options) {
+    const axis = axisLeft();
+    return this.makeAxis(axis, this.svg.select(".chart__axis_y"), options, {
+      left: this.PAD_LEFT,
+      top: this.PAD_TOP,
+    });
+  }
+
+  makeBottomAxis(options) {
+    const axis = axisBottom();
+    return this.makeAxis(axis, this.svg.select(".chart__axis_x"), options, {
+      left: this.PAD_LEFT,
+      top: this.PAD_TOP + this.height,
+    });
+  }
+
+  makeAxis(axis, element, options, { left = 0, top = 0 } = {}) {
+    Object.keys(options).forEach((option) => axis[option](options[option]));
+    element.call(axis).attr("transform", `translate(${left},${top})`);
+    return axis;
+  }
+
+  getTooltipContent() {}
+
+  onItemOver(event, d) {
+    this.showTooltip(d, event.target);
+  }
+
+  showTooltip(d, element) {
+    this.tooltip.show(this.getTooltipContent(d), this.$(element));
+  }
+
+  hideTooltip() {
+    this.tooltip.hide();
+  }
+
+  bindTooltip(selection) {
+    selection.on("mouseenter", this.onItemOver.bind(this)).on("mouseleave", this.hideTooltip.bind(this));
+  }
+}