@allurereport/web-allure2 3.0.0-beta.10

package/src/plugins/tab-timeline/TimelineView.js

@@ -0,0 +1,250 @@
+import { axisBottom } from "d3-axis";
+import { brushX } from "d3-brush";
+import { drag } from "d3-drag";
+import { scaleLinear } from "d3-scale";
+import { select } from "d3-selection";
+import BaseChartView from "@/components/graph-base/BaseChartView.js";
+import TooltipView from "@/components/tooltip/TooltipView.js";
+import getComparator from "@/data/tree/comparator.js";
+import { byDuration } from "@/data/tree/filter.js";
+import { className } from "@/decorators/index.js";
+import duration from "@/helpers/duration.js";
+import translate from "@/helpers/t.js";
+import escape from "@/utils/escape.js";
+import template from "./TimelineView.hbs";
+import "./styles.scss";
+
+const BRUSH_HEIGHT = 20;
+const BAR_HEIGHT = 20;
+const BAR_GAP = 2;
+const PADDING = 30;
+
+@className("timeline")
+class TimelineView extends BaseChartView {
+  initialize() {
+    this.chartX = scaleLinear();
+    this.brushX = scaleLinear();
+    this.sorter = getComparator({ sorter: "sorter.name", ascending: true });
+
+    this.brush = brushX().on("start brush end", this.onBrushChange.bind(this));
+    this.tooltip = new TooltipView({ position: "bottom" });
+    this.collection.applyFilterAndSorting(() => 1, this.sorter);
+    this.minDuration = this.collection.time.minDuration;
+    this.maxDuration = this.collection.time.maxDuration;
+    this.selectedDuration = this.minDuration;
+    this.data = this.collection.toJSON();
+    this.total = this.collection.allResults.length;
+    this.timeOffset = (d) => d - this.collection.time.start;
+  }
+
+  onAttach() {
+    this.doShow();
+  }
+
+  setupViewport() {
+    this.$el.html(template({ PADDING }));
+    this.svgChart = select(this.$el[0]).select(".timeline__chart_svg");
+    this.svgBrush = select(this.$el[0]).select(".timeline__brush_svg");
+    this.slider = this.svgChart.select(".timeline__slider");
+  }
+
+  setupSlider() {
+    const sliderScale = scaleLinear().range([0, this.width]).domain([this.minDuration, this.maxDuration]).clamp(true);
+
+    this.slider
+      .append("line")
+      .attr("class", "timeline__slider_track")
+      .attr("x1", sliderScale.range()[0])
+      .attr("x2", sliderScale.range()[1]);
+
+    this.handle = this.slider
+      .insert("circle")
+      .attr("class", "timeline__slider_handle")
+      .attr("cx", sliderScale(this.selectedDuration))
+      .attr("r", 8)
+      .call(
+        drag()
+          .on("drag", (event) => {
+            this.selectedDuration = sliderScale.invert(event.x);
+            this.handle.attr("cx", sliderScale(this.selectedDuration));
+          })
+          .on("end", () => {
+            const filter = byDuration(this.selectedDuration, this.maxDuration);
+            this.collection.applyFilterAndSorting(filter, this.sorter);
+            this.data = this.collection.toJSON();
+            this.doShow();
+            this.handle.attr("cx", sliderScale(this.selectedDuration));
+          }),
+      );
+
+    const selectedResults = this.collection.testResults.length;
+    const opts = {
+      count: selectedResults,
+      percent: ((100 * selectedResults) / this.total).toFixed(2),
+      duration: duration(this.selectedDuration),
+    };
+
+    this.slider
+      .insert("g")
+      .append("text")
+      .attr("transform", `translate(${this.width / 2}, 20)`)
+      .attr("class", "timeline__slider_text")
+      .text(translate("tab.timeline.selected", { hash: opts }));
+
+    this.slider
+      .insert("g")
+      .attr("class", "timeline__slider_text")
+      .attr("transform", `translate(0, ${20})`)
+      .selectAll("text")
+      .data(sliderScale.domain())
+      .enter()
+      .append("text")
+      .attr("x", sliderScale)
+      .text((d) => duration(d, 1));
+  }
+
+  doShow() {
+    this.width = this.$el.width() > 2 * PADDING ? this.$el.width() - 2 * PADDING : this.$el.width();
+
+    const domain = [this.collection.time.start, this.collection.time.stop];
+    this.chartX.domain(domain).range([0, this.width]);
+    this.brushX.domain(domain).range([0, this.width]);
+
+    this.setupViewport();
+    this.setupSlider();
+
+    let height = 10;
+    const group = this.svgChart.select(".timeline__plot");
+    height += this.drawTestGroups(this.data, height, group, true);
+
+    select(this.$el[0])
+      .select(".timeline__brush")
+      .style("top", () => {
+        return `${Math.min(this.$el.height() - BRUSH_HEIGHT, height + PADDING)}px`;
+      });
+
+    this.xChartAxis = this.makeAxis(axisBottom(), this.svgChart.select(".timeline__chart__axis_x"), {
+      scale: this.chartX,
+      tickFormat: () => "",
+      tickSizeOuter: 0,
+      tickSizeInner: height,
+    });
+
+    this.xBrushAxis = this.makeAxis(
+      axisBottom(),
+      this.svgBrush.select(".timeline__brush__axis_x"),
+      {
+        scale: this.chartX,
+        tickFormat: (d) => duration(d - this.collection.time.start, 2),
+        tickSizeOuter: 0,
+      },
+      {
+        top: BAR_GAP + BRUSH_HEIGHT + BAR_GAP,
+        left: PADDING,
+      },
+    );
+
+    this.brush.extent([
+      [0, 0],
+      [this.width, BRUSH_HEIGHT],
+    ]);
+    this.svgBrush
+      .append("g")
+      .attr("transform", `translate(${PADDING}, ${BAR_GAP})`)
+      .attr("class", "brush")
+      .call(this.brush)
+      .call(this.brush.move, this.chartX.range());
+
+    if (this.firstRender) {
+      this.svgBrush
+        .select(".brush")
+        .transition()
+        .duration(300)
+        .call(this.brush.move, [(1 / 16) * this.width, (15 / 16) * this.width])
+        .transition()
+        .duration(500)
+        .call(this.brush.move, this.chartX.range());
+    }
+
+    this.svgChart.attr("height", () => {
+      return PADDING + height + BRUSH_HEIGHT;
+    });
+
+    super.onRender();
+  }
+
+  drawTestGroups(items, offset, parent, showTitle) {
+    items
+      .filter((item) => item.children)
+      .forEach((item) => {
+        let groupHeight = 0;
+        const group = parent.append("g").attr("class", "timeline__group").attr("transform", `translate(0, ${offset})`);
+
+        if (showTitle) {
+          const text = group
+            .append("text")
+            .datum(item)
+            .text((d) => d.name)
+            .attr("class", "timeline__group_title");
+          this.bindTooltip(text);
+          groupHeight = BAR_HEIGHT + BAR_GAP;
+          offset += groupHeight;
+        }
+
+        offset += this.drawTestGroups(item.children, groupHeight, group, false);
+      });
+    offset += this.drawTestResults(
+      items.filter((item) => !item.children),
+      parent,
+      offset,
+    );
+    return offset;
+  }
+
+  drawTestResults(items, parent) {
+    if (items.length) {
+      const bars = parent
+        .selectAll(".timeline__item")
+        .data(items)
+        .enter()
+        .append("a")
+        .attr("xlink:href", (d) => `#testresult/${d.uid}`)
+        .append("rect")
+        .attr("class", (d) => `timeline__item chart__fill_status_${d.status}`)
+        .attr("x", (d) => this.chartX(d.time.start))
+        .attr("width", (d) => this.chartX(d.time.start + d.time.duration))
+        .attr("rx", 2)
+        .attr("ry", 2)
+        .attr("height", BAR_HEIGHT);
+      this.bindTooltip(bars);
+      bars.on("click", this.hideTooltip.bind(this));
+      return BAR_HEIGHT + BAR_GAP;
+    }
+    return 0;
+  }
+
+  onBrushChange(event) {
+    const selection = event.selection;
+    const start = (d) => Math.max(0, Math.min(this.chartX(d.time.start), this.width));
+    const stop = (d) => Math.max(0, Math.min(this.chartX(d.time.stop), this.width));
+
+    if (selection) {
+      this.chartX.domain(selection.map(this.brushX.invert, this.brushX));
+      this.svgChart
+        .selectAll(".timeline__item")
+        .attr("x", (d) => start(d))
+        .attr("width", (d) => stop(d) - start(d));
+      this.svgBrush.select(".timeline__brush__axis_x").call(this.xBrushAxis);
+      this.svgChart.select(".timeline__chart__axis_x").call(this.xChartAxis);
+    }
+
+    this.svgBrush.selectAll(".handle").attr("y", 0).attr("height", BAR_HEIGHT);
+  }
+
+  getTooltipContent(d) {
+    return escape`${d.name}<br>
+            ${duration(this.timeOffset(d.time.start))} — ${duration(this.timeOffset(d.time.stop))}`;
+  }
+}
+
+export default TimelineView;

package/src/plugins/tab-timeline/index.js

@@ -0,0 +1,12 @@
+import TimelineLayout from "./TimelineLayout.js";
+
+allure.api.addTab("timeline", {
+  title: "tab.timeline.name",
+  icon: "timeline",
+  route: "timeline",
+  onEnter: (...routeParams) =>
+    new TimelineLayout({
+      ...routeParams,
+      url: "data/timeline.json",
+    }),
+});

package/src/plugins/tab-timeline/styles.scss

@@ -0,0 +1,76 @@
+@import "../../variables.scss";
+
+.timeline {
+  padding: $gap-size;
+  overflow: auto;
+  height: 100vh;
+
+  &__chart_svg,
+  &__brush_svg {
+    width: 100%;
+  }
+
+  &__chart {
+    &__axis_x {
+      .tick {
+        opacity: 0.3;
+        stroke-dasharray: 1, 4;
+        shape-rendering: crispEdges;
+      }
+    }
+  }
+  &__item:hover {
+    opacity: 0.7;
+  }
+
+  &__group_title {
+    font-size: 12px;
+    fill: #838383;
+    dominant-baseline: central;
+  }
+
+  &__host-bg {
+    fill: #eee;
+    stroke: #e0e0e0;
+    rx: 3;
+    ry: 9;
+  }
+
+  &__brush {
+    position: absolute;
+    width: 100%;
+
+    .selection {
+      fill: #000;
+      fill-opacity: 0.3;
+    }
+    &__axis_bg {
+      fill: white;
+    }
+    .handle {
+      fill: #fff;
+      stroke: #000;
+      stroke-opacity: 0.5;
+      stroke-width: 1px;
+    }
+  }
+
+  &__slider {
+    &_track {
+      stroke-linecap: round;
+      stroke: #000;
+      stroke-opacity: 0.3;
+      stroke-width: 10px;
+    }
+    &_handle {
+      fill: #fff;
+      stroke: #000;
+      stroke-opacity: 0.5;
+      stroke-width: 1px;
+      cursor: pointer;
+    }
+    &_text {
+      text-anchor: middle;
+    }
+  }
+}

package/src/plugins/testresult-category/CategoryView.hbs

@@ -0,0 +1,6 @@
+{{#if categories}}
+    {{t 'testResult.categories.name'}}:
+    {{#each categories}}
+        <span>{{name}} </span>
+    {{/each}}
+{{/if}}

package/src/plugins/testresult-category/CategoryView.js

@@ -0,0 +1,17 @@
+import { View } from "backbone.marionette";
+import { className } from "@/decorators/index.js";
+import template from "./CategoryView.hbs";
+
+@className("pane__section")
+class CategoryView extends View {
+  template = template;
+
+  serializeData() {
+    const extra = this.model.get("extra");
+    return {
+      categories: extra ? extra.categories : null,
+    };
+  }
+}
+
+export default CategoryView;

package/src/plugins/testresult-category/index.js

@@ -0,0 +1,3 @@
+import CategoryView from "./CategoryView.js";
+
+allure.api.addTestResultBlock(CategoryView, { position: "tag" });

package/src/plugins/testresult-description/DescriptionView.hbs

@@ -0,0 +1,4 @@
+{{#if descriptionHtml}}
+    <h3 class="pane__section-title">{{t 'testResult.description.name'}}</h3>
+    <div class="description__text">{{{descriptionHtml}}}</div>
+{{/if}}

package/src/plugins/testresult-description/DescriptionView.js

@@ -0,0 +1,16 @@
+import { View } from "backbone.marionette";
+import { className } from "@/decorators/index.js";
+import template from "./DescriptionView.hbs";
+
+@className("pane__section")
+class DescriptionView extends View {
+  template = template;
+
+  serializeData() {
+    return {
+      descriptionHtml: this.model.get("descriptionHtml"),
+    };
+  }
+}
+
+export default DescriptionView;

package/src/plugins/testresult-description/index.js

@@ -0,0 +1,3 @@
+import DescriptionView from "./DescriptionView.js";
+
+allure.api.addTestResultBlock(DescriptionView, { position: "before" });

package/src/plugins/testresult-duration/DurationView.hbs

@@ -0,0 +1,7 @@
+{{#if time}}
+    <span data-tooltip="{{date time.start}} {{time time.start}}&nbsp;&ndash;&nbsp;{{time time.stop}}">
+        {{t 'testResult.duration.name'}}:
+        {{allure-icon "timeline" noTooltip=true width="14px" height="14px"}}
+        {{duration time.duration 2}}
+    </span>
+{{/if}}

package/src/plugins/testresult-duration/DurationView.js

@@ -0,0 +1,16 @@
+import { View } from "backbone.marionette";
+import { className } from "@/decorators/index.js";
+import template from "./DurationView.hbs";
+
+@className("pane__section")
+class DurationView extends View {
+  template = template;
+
+  serializeData() {
+    return {
+      time: this.model.get("time"),
+    };
+  }
+}
+
+export default DurationView;

package/src/plugins/testresult-duration/index.js

@@ -0,0 +1,3 @@
+import DurationView from "./DurationView.js";
+
+allure.api.addTestResultBlock(DurationView, { position: "tag" });

package/src/plugins/testresult-history/HistoryView.hbs

@@ -0,0 +1,27 @@
+<div class="{{b 'pane' 'section'}}">
+    {{#if history}}
+        <div class="{{b cls 'success-rate'}}">
+            {{t 'testResult.history.successRate'}} {{successRate}}
+            {{#if history.statistic.total}}
+                ({{t 'testResult.history.statistic' passed=history.statistic.passed total=history.statistic.total}})
+            {{/if}}
+        </div>
+        {{#each history.items}}
+            {{#if reportUrl}}
+                <div class="{{b ../cls 'row'}}">
+                    <a class="link" href="{{reportUrl}}" target="_blank">
+                        <span class="label label_status_{{status}}">{{status}}</span>
+                        <span>{{t 'testResult.history.time' date=(date time.start) time=(time time.start)}}</span>
+                    </a>
+                </div>
+            {{else}}
+                <div>
+                    <span class="label label_status_{{status}}">{{status}}</span>
+                    <span>{{t 'testResult.history.time' date=(date time.start) time=(time time.start)}}</span>
+                </div>
+            {{/if}}
+        {{/each}}
+    {{else}}
+        {{t 'testResult.history.empty'}}
+    {{/if}}
+</div>

package/src/plugins/testresult-history/HistoryView.js

@@ -0,0 +1,33 @@
+import { View } from "backbone.marionette";
+import { className } from "@/decorators/index.js";
+import template from "./HistoryView.hbs";
+import "./styles.scss";
+
+function formatNumber(n) {
+  return (Math.floor(n * 100) / 100).toString();
+}
+
+function getSuccessRate(history) {
+  if (!history || !history.statistic || !history.statistic.total) {
+    return "unknown";
+  }
+  const { passed, total } = history.statistic;
+  return `${formatNumber(((passed || 0) / total) * 100)}%`;
+}
+
+@className("test-result-history")
+class HistoryView extends View {
+  template = template;
+
+  serializeData() {
+    const extra = this.model.get("extra");
+    const history = extra ? extra.history : null;
+    return {
+      cls: this.className,
+      history: history,
+      successRate: getSuccessRate(history),
+    };
+  }
+}
+
+export default HistoryView;

package/src/plugins/testresult-history/index.js

@@ -0,0 +1,3 @@
+import HistoryView from "./HistoryView.js";
+
+allure.api.addTestResultTab("history", "testResult.history.name", HistoryView);

package/src/plugins/testresult-history/styles.scss

@@ -0,0 +1,10 @@
+@import "../../variables.scss";
+
+.test-result-history {
+  &__row {
+    padding: 7px 15px 7px 0;
+  }
+  &__success-rate {
+    padding-bottom: 10px;
+  }
+}

package/src/plugins/testresult-links/LinksView.hbs

@@ -0,0 +1,17 @@
+{{#if links}}
+    <h3 class="pane__section-title">{{t 'testResult.links.name'}}</h3>
+    <div class="testresult-links">
+      {{#each links}}
+        <span class="testresult-link">
+          {{#if (eq type "issue")}}
+            {{allure-icon "bug" noTooltip=true width="14px" height="14px"}}
+          {{else if (eq type "tms")}}
+            {{allure-icon "task" noTooltip=true width="14px" height="14px"}}
+          {{else}}
+            {{allure-icon "link" noTooltip=true width="14px" height="14px"}}
+          {{/if}}
+            <a class="link" href="{{default url name}}" target="_blank">{{default name url 'link'}}</a>
+      </span>
+      {{/each}}
+    </div>
+{{/if}}

package/src/plugins/testresult-links/LinksView.js

@@ -0,0 +1,17 @@
+import { View } from "backbone.marionette";
+import { className } from "@/decorators/index.js";
+import template from "./LinksView.hbs";
+import "./styles.scss";
+
+@className("pane__section")
+class LinksView extends View {
+  template = template;
+
+  serializeData() {
+    return {
+      links: this.model.get("links"),
+    };
+  }
+}
+
+export default LinksView;

package/src/plugins/testresult-links/index.js

@@ -0,0 +1,3 @@
+import LinksView from "./LinksView.js";
+
+allure.api.addTestResultBlock(LinksView, { position: "before" });

package/src/plugins/testresult-links/styles.scss

@@ -0,0 +1,19 @@
+.testresult-links {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0 4px;
+}
+
+.testresult-link {
+  display: inline-flex;
+  align-items: center;
+
+  &:not(:last-child):after {
+    content: ",";
+  }
+
+  & .link {
+    margin-left: 4px;
+  }
+}

package/src/plugins/testresult-owner/OwnerView.hbs

@@ -0,0 +1,4 @@
+{{#if owner}}
+    <h3 class="pane__section-title">{{t 'testResult.owner.name'}}</h3>
+    <div>{{owner}}</div>
+{{/if}}

package/src/plugins/testresult-owner/OwnerView.js

@@ -0,0 +1,17 @@
+import { View } from "backbone.marionette";
+import { className } from "@/decorators/index.js";
+import template from "./OwnerView.hbs";
+
+@className("pane__section")
+class OwnerView extends View {
+  template = template;
+
+  serializeData() {
+    const extra = this.model.get("extra");
+    return {
+      owner: extra ? extra.owner : null,
+    };
+  }
+}
+
+export default OwnerView;

package/src/plugins/testresult-owner/index.js

@@ -0,0 +1,3 @@
+import OwnerView from "./OwnerView.js";
+
+allure.api.addTestResultBlock(OwnerView, { position: "before" });

package/src/plugins/testresult-parameters/ParametersView.hbs

@@ -0,0 +1,13 @@
+{{#if parameters.length}}
+<h3>{{t 'testResult.parameters.name'}}</h3>
+    {{#each parameters}}
+        <div class="environment long-line line-ellipsis">
+            <span class="environment__key">{{#if name}}{{name}}{{else}}&lt;null&gt;{{/if}}</span>:
+            {{#if value}}
+                <span>{{linky value}}</span>
+            {{else}}
+                null
+            {{/if}}
+        </div>
+    {{/each}}
+{{/if}}

package/src/plugins/testresult-parameters/ParametersView.js

@@ -0,0 +1,22 @@
+import { View } from "backbone.marionette";
+import { className, on } from "@/decorators/index.js";
+import template from "./ParametersView.hbs";
+import "./styles.scss";
+
+@className("pane__section")
+class ParametersView extends View {
+  template = template;
+
+  serializeData() {
+    return {
+      parameters: this.model.get("parameters"),
+    };
+  }
+
+  @on("click .environment")
+  onParameterClick() {
+    this.$(".environment").toggleClass("line-ellipsis", false);
+  }
+}
+
+export default ParametersView;

package/src/plugins/testresult-parameters/index.js

@@ -0,0 +1,3 @@
+import ParametersView from "./ParametersView.js";
+
+allure.api.addTestResultBlock(ParametersView, { position: "before" });

package/src/plugins/testresult-parameters/styles.scss

@@ -0,0 +1,8 @@
+@import "../../variables.scss";
+
+.environment {
+  margin-bottom: 0.5em;
+  &__key {
+    color: $text-muted-color;
+  }
+}

package/src/plugins/testresult-retries/RetriesView.hbs

@@ -0,0 +1,13 @@
+<div class="{{b 'pane' 'section'}}">
+    {{#if retries}}
+        {{#each retries}}
+            <a class="link" href="#/testresult/{{uid}}">
+                <span class="label label_status_{{status}}">{{status}}</span>
+                <span>{{t 'testResult.retries.time' time=(date time.start) date=(time time.start)}}</span>
+                <pre class="preformated-text"><code>{{statusDetails}}</code></pre>
+            </a>
+        {{/each}}
+    {{else}}
+        {{t 'testResult.retries.empty'}}
+    {{/if}}
+</div>