@allurereport/web-allure2 3.0.0-beta.9

package/src/components/tree/styles.scss

@@ -0,0 +1,141 @@
+@import "../../mixins.scss";
+@import "../../variables.scss";
+
+.node {
+  margin-left: 0;
+  position: relative;
+  display: block;
+  text-decoration: none;
+  color: $text-color;
+
+  .node {
+    margin-left: 20px;
+  }
+
+  &:last-child {
+    padding-bottom: 10px;
+  }
+
+  &__arrow {
+    //left: 7px;
+    //position: absolute;
+  }
+
+  &__name {
+    //flex: 0 0 30%;
+  }
+
+  &__unknown {
+    color: $text-muted-color;
+  }
+
+  &__marks {
+    display: block;
+    float: right;
+    white-space: nowrap;
+  }
+
+  &__mark {
+    padding-left: 4px;
+    padding-right: 4px;
+    opacity: 0;
+
+    &_shown {
+      opacity: 1;
+    }
+  }
+
+  &__order {
+    min-width: 16px;
+    font-size: 12px;
+    color: $text-muted-color;
+    text-align: center;
+  }
+
+  &__anchor {
+    @include status-text();
+    display: flex;
+  }
+
+  &__stats {
+    display: block;
+    float: right;
+    white-space: nowrap;
+  }
+
+  &__title {
+    overflow: hidden;
+    line-height: 1.2em;
+    padding: 5px $gap-size 6px 16px;
+    gap: 0 4px;
+    flex: 1;
+    display: flex;
+    cursor: pointer;
+    border-top: 1px solid #eceff1;
+    position: relative;
+    align-items: center;
+
+    .node__leaf & {
+      padding: 7px $gap-size 7px 18px;
+    }
+
+    &_active {
+      background-color: $selected-color;
+
+      &::before {
+        background-color: $selected-color;
+      }
+    }
+
+    &:hover {
+      background-color: $hover-color;
+
+      &::before {
+        background-color: $hover-color;
+      }
+    }
+  }
+
+  &__time {
+    padding: 5px;
+  }
+
+  &__parameters {
+    padding: 0 2px;
+    color: $text-muted-color;
+    min-width: 2ch;
+    font-size: smaller;
+
+    &_separator:last-child {
+      display: none;
+    }
+  }
+
+  &__children {
+    display: none;
+
+    .node__expanded > & {
+      display: block;
+    }
+  }
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+[dir="rtl"] .attachment-row.attachment-row_selected > .attachment-row__arrow > .fa-angle-right {
+  transform: rotate(180deg);
+}
+
+[dir="rtl"] .step_expanded > .step__title > .step__arrow {
+  transform: rotate(90deg);
+}
+
+[dir="rtl"] .node__expanded > .node__title > .node__arrow {
+  transform: rotate(90deg);
+}
+
+[dir="ltr"] .node__expanded > .node__title > .node__arrow {
+  transform: rotate(90deg);
+}

package/src/components/tree/tree-group.hbs

@@ -0,0 +1,36 @@
+{{#if children}}
+    <div class="node">
+        <div class="node__title long-line" data-uid="{{uid}}">
+            <span class="node__arrow block__arrow">{{angle}}</span>
+            {{#if name}}
+                <div class="node__name">
+                    {{name}}
+                </div>
+            {{else}}
+                <span class="node__unknown">{{t 'component.tree.unknown'}}</span>
+            {{/if}}
+            <div class="tree__strut">&nbsp</div>
+            <span class="node__stats">
+                {{statistic-bar statistic}}
+            </span>
+        </div>
+
+        <div class="node__children">
+            {{#if showGroupInfo}}
+                <div class="node">
+                    <div class="node__info long-line" data-uid="{{uid}}">
+                        {{allure-icon "timeline" noTooltip=true width="12px" height="12px"}}
+                        {{> tree-time value=time.duration name=(t 'component.tree.time.total.name') tooltip=(t 'component.tree.time.total.tooltip')}}
+                        {{> tree-time value=time.maxDuration name=(t 'component.tree.time.max.name') tooltip=(t 'component.tree.time.max.tooltip')}}
+                        {{> tree-time value=time.sumDuration name=(t 'component.tree.time.sum.name') tooltip=(t 'component.tree.time.sum.tooltip')}}
+                    </div>
+                </div>
+            {{/if}}
+            {{#each children}}
+                {{~> tree-group baseUrl=../baseUrl showGroupInfo=../showGroupInfo tabName=../tabName testResultTab=../testResultTab}}
+            {{/each}}
+        </div>
+    </div>
+{{else}}
+    {{~> tree-leaf baseUrl=baseUrl testResultTab=testResultTab}}
+{{/if}}

package/src/components/tree/tree-leaf.hbs

@@ -0,0 +1,53 @@
+<a class="node node__leaf" href="#{{baseUrl}}/{{parentUid}}/{{uid}}/{{testResultTab}}">
+    <div class="node__title" data-uid="{{uid}}" data-parentUid="{{parentUid}}">
+        <div class="node__anchor_status_{{status}} {{b "node" "anchor"}}">
+            {{allure-icon status width='20px' height='20px'}}
+        </div>
+        <div class="node__order">{{order}}</div>
+        <div class="node__name">
+            {{name}}
+        </div>
+        {{#if parameters}}
+            <div class="node__parameters long-line line-ellipsis">
+                <span>&nbsp</span>
+                {{#each parameters}}
+                    {{#if this}}
+                        {{this}}
+                    {{~else}}
+                        null
+                    {{~/if~}}
+                    <span class="node__parameters_separator">,</span>
+                {{/each}}
+            </div>
+        {{/if}}
+        <div class="tree__strut">&nbsp</div>
+        {{#if flaky}}
+            <div class="{{b 'node' 'mark' shown=flaky}}">
+                {{allure-icon 'flaky'}}
+            </div>
+        {{/if}}
+        {{#if newFailed}}
+            <div class="{{b 'node' 'mark' shown=newFailed}}">
+                {{allure-icon 'newFailed'}}
+            </div>
+        {{/if}}
+        {{#if newBroken}}
+            <div class="{{b 'node' 'mark' shown=newBroken}}">
+                {{allure-icon 'newBroken'}}
+            </div>
+        {{/if}}
+        {{#if newPassed}}
+            <div class="{{b 'node' 'mark' shown=newPassed}}">
+                {{allure-icon 'newPassed'}}
+            </div>
+        {{/if}}
+        {{#if retriesStatusChange}}
+            <div class="{{b 'node' 'mark' shown=retriesStatusChange}}">
+                {{allure-icon 'retriesStatusChange'}}
+            </div>
+        {{/if}}
+        <div class="node__stats">
+            {{~duration time.duration~}}
+        </div>
+    </div>
+</a>

package/src/components/tree/tree-time.hbs

@@ -0,0 +1,6 @@
+{{#if (is-def value)}}
+    <span class="node__time" data-tooltip="{{tooltip}}">
+        {{name}}:
+        <b>{{duration value}}</b>
+    </span>
+{{/if}}

package/src/components/tree-view-container/TreeViewContainer.hbs

@@ -0,0 +1,34 @@
+<div class="{{b 'pane' 'title' borderless=true}}">
+    <span class="{{b 'pane' 'title-text'}}">{{t tabName}}</span>
+    {{#if filtered}}
+        <span class="{{b 'pane' 'subtitle'}}">
+        {{t 'component.tree.filtered.total' count=totalCases}},
+            {{t 'component.tree.filtered.shown' count=shownCases}}
+    </span>
+    {{/if}}
+    <div class="{{b 'pane' 'search'}}"></div>
+    <span class="pane__controls">
+        <span class="{{b cls 'control'}} {{b cls 'info'}}"
+              data-tooltip="{{t 'component.tree.groups'}}">
+          {{allure-icon "info" noTooltip=true width="18px" height="18px"}}
+        </span>
+        {{#if csvUrl}}
+            <span class="{{b cls 'control'}} {{b cls 'download'}}"
+               data-tooltip="{{t 'component.tree.download'}}"
+               data-ga4-event="csv_download_click"
+               data-download="{{csvUrl}}"
+               data-download-type="text/csv">
+              {{allure-icon "download" noTooltip=true width="18px" height="18px"}}
+            </span>
+        {{/if}}
+    </span>
+</div>
+
+<div class="{{b cls 'ctrl'}}">
+    <div class="{{b cls 'sorter'}}"></div>
+    <div class="{{b cls 'strut'}}"></div>
+    <div class="{{b cls 'filter'}}"></div>
+    <div class="{{b cls 'filter-marks'}}"></div>
+</div>
+
+<div class="{{b cls 'content'}}" ></div>

package/src/components/tree-view-container/TreeViewContainer.js

@@ -0,0 +1,103 @@
+import { Model } from "backbone";
+import { View } from "backbone.marionette";
+import MarksToggleView from "@/components/marks-toggle/MarksToggleView.js";
+import NodeSearchView from "@/components/node-search/NodeSearchView.js";
+import NodeSorterView from "@/components/node-sorter/NodeSorterView.js";
+import StatusToggleView from "@/components/status-toggle/StatusToggleView.js";
+import TreeView from "@/components/tree/TreeView.js";
+import { behavior, className, on, regions } from "@/decorators/index.js";
+import gtag from "@/utils/gtag.js";
+import { getSettingsForTreePlugin } from "@/utils/settingsFactory.js";
+import template from "./TreeViewContainer.hbs";
+import "./styles.scss";
+
+@className("tree")
+@behavior("TooltipBehavior", { position: "bottom" })
+@regions({
+  search: ".pane__search",
+  sorter: ".tree__sorter",
+  filter: ".tree__filter",
+  filterMarks: ".tree__filter-marks",
+  content: ".tree__content",
+})
+class TreeViewContainer extends View {
+  template = template;
+
+  initialize({
+    routeState,
+    state = new Model(),
+    tabName,
+    baseUrl,
+    csvUrl = null,
+    settings = getSettingsForTreePlugin(baseUrl),
+  }) {
+    this.state = state;
+    this.routeState = routeState;
+    this.baseUrl = baseUrl;
+    this.csvUrl = csvUrl;
+    this.tabName = tabName;
+    this.listenTo(this.routeState, "change:testResultTab", this.render);
+    this.settings = settings;
+  }
+
+  @on("click .tree__info")
+  onInfoClick() {
+    const show = this.settings.isShowGroupInfo();
+    this.settings.setShowGroupInfo(!show);
+    gtag("tree_info_click", { enable: !show });
+  }
+
+  onRender() {
+    this.showChildView(
+      "content",
+      new TreeView({
+        state: this.state,
+        routeState: this.routeState,
+        tabName: this.tabName,
+        baseUrl: this.baseUrl,
+        settings: this.settings,
+        collection: this.collection,
+      }),
+    );
+
+    this.showChildView(
+      "search",
+      new NodeSearchView({
+        state: this.state,
+      }),
+    );
+    this.showChildView(
+      "sorter",
+      new NodeSorterView({
+        settings: this.settings,
+      }),
+    );
+    this.showChildView(
+      "filter",
+      new StatusToggleView({
+        settings: this.settings,
+        statistic: this.collection.statistic,
+      }),
+    );
+    this.showChildView(
+      "filterMarks",
+      new MarksToggleView({
+        settings: this.settings,
+      }),
+    );
+  }
+
+  templateContext() {
+    return {
+      cls: this.className,
+      showGroupInfo: this.settings.isShowGroupInfo(),
+      tabName: this.tabName,
+      shownCases: 0,
+      totalCases: 0,
+      filtered: false,
+      csvUrl: this.csvUrl,
+    };
+  }
+}
+
+export default TreeViewContainer;

package/src/components/tree-view-container/styles.scss

@@ -0,0 +1,38 @@
+@import "../../variables.scss";
+
+.tree {
+  &__ctrl {
+    display: flex;
+    flex-wrap: wrap;
+    border-top: 1px solid $border-color;
+    background: $pane-overlay-bg-hover;
+    padding: 4px 0;
+  }
+  &__filter,
+  &__sorter,
+  &__filter-marks {
+    padding: 0 $gap-size 0 $gap-size;
+    position: relative;
+    white-space: nowrap;
+  }
+  &__strut {
+    flex: 1;
+  }
+  &__empty {
+    border-top: 1px solid #eceff1;
+    padding: 8px 0 0 15px;
+  }
+  .pane__controls {
+    display: flex;
+  }
+  &__info,
+  &__download {
+    cursor: pointer;
+    padding: 7px;
+    color: $text-color;
+    opacity: 0.7;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}

package/src/components/widget-status/WidgetStatusView.hbs

@@ -0,0 +1,21 @@
+<h2 class="widget__title">
+    {{t title}}
+    <span class="widget__subtitle">{{t 'component.widgetStatus.total' count=total}}</span>
+</h2>
+<div class="table table_hover widget__table">
+    {{#each items}}
+        <{{../rowTag}} class="table__row" href="#{{../baseUrl}}/{{uid}}">
+            <div class="table__col">{{name}}</div>
+            <div class="table__col">
+                {{status-bar statistic}}
+            </div>
+        </{{../rowTag}}>
+    {{/each}}
+    {{#if showAll}}
+        <a class="table__row" href="#{{baseUrl}}">
+            <div class="table__col table__col_center">
+                {{t 'component.widgetStatus.showAll'}}
+            </div>
+        </a>
+    {{/if}}
+</div>

package/src/components/widget-status/WidgetStatusView.js

@@ -0,0 +1,17 @@
+import { View } from "backbone.marionette";
+import template from "./WidgetStatusView.hbs";
+
+export default class WidgetStatusView extends View {
+  template = template;
+
+  serializeData() {
+    const showLinks = typeof this.showLinks !== "undefined" ? this.showLinks : true;
+    const showAll = typeof this.showAll !== "undefined" ? this.showAll : true;
+    return Object.assign(super.serializeData(), {
+      rowTag: showLinks ? "a" : "span",
+      title: this.title,
+      showAll: showAll,
+      baseUrl: this.baseUrl,
+    });
+  }
+}

package/src/components/widgets-grid/WidgetsGridView.js

@@ -0,0 +1,90 @@
+import { View } from "backbone.marionette";
+import $ from "jquery";
+import Sortable from "sortablejs";
+import draggable from "@/assets/icons/draggable.svg";
+import { className } from "@/decorators/index.js";
+import { fetchAndShow } from "@/utils/loading.js";
+import pluginsRegistry from "@/utils/pluginsRegistry.js";
+import { getSettingsForWidgetGridPlugin } from "@/utils/settingsFactory.js";
+import "./styles.scss";
+
+const widgetTpl = (id) => `<div class="widget island" data-id="${id}">
+    <div class="widget__handle">
+      <svg width="16px" height="16px" class="draggable-icon"><use xlink:href="#${draggable.id}"></use></svg>
+    </div>
+    <div class="widget__body"></div>
+</div>`;
+const colTpl = '<div class="widgets-grid__col"></div>';
+
+@className("widgets-grid")
+class WidgetsGridView extends View {
+  template = () => "";
+
+  initialize() {
+    this.widgets = pluginsRegistry.widgets[this.options.tabName];
+    this.settings = this.options.settings || getSettingsForWidgetGridPlugin(this.options.tabName);
+  }
+
+  onRender() {
+    this.getWidgetsArrangement()
+      .map((col) => {
+        return col.map((widgetName) => [widgetName, this.widgets[widgetName].widget, this.widgets[widgetName].model]);
+      })
+      .forEach((widgetCol) => {
+        const col = $(colTpl);
+        this.$el.append(col);
+        widgetCol.forEach(([name, Widget, Model]) => {
+          this.addWidget(col, name, Widget, Model);
+        });
+      });
+    this.$(".widgets-grid__col").each(
+      (i, colEl) =>
+        new Sortable(colEl, {
+          group: "widgets",
+          ghostClass: "widget_ghost",
+          handle: ".widget__handle",
+          onEnd: this.saveWidgetsArrangement.bind(this),
+        }),
+    );
+  }
+
+  getWidgetsArrangement() {
+    const savedData = this.settings.getWidgetsArrangement();
+
+    const storedWidgets = savedData.map((col) => {
+      return col.filter((widgetName) => this.widgets[widgetName]);
+    });
+    Object.keys(this.widgets).forEach((widgetName) => {
+      if (storedWidgets.every((col) => col.indexOf(widgetName) === -1)) {
+        const freeColumn = storedWidgets.reduce((smallestCol, col) =>
+          col.length < smallestCol.length ? col : smallestCol,
+        );
+        freeColumn.push(widgetName);
+      }
+    });
+    return storedWidgets;
+  }
+
+  saveWidgetsArrangement() {
+    this.settings.setWidgetsArrangement(
+      this.$(".widgets-grid__col")
+        .toArray()
+        .map((colEl) => {
+          return $(colEl)
+            .find(".widget")
+            .toArray()
+            .map((el) => $(el).data("id"));
+        }),
+    );
+  }
+
+  addWidget(col, name, Widget, Model) {
+    const el = $(widgetTpl(name));
+    col.append(el);
+    this.addRegion(name, { el: el.find(".widget__body") });
+    const widget = new Model({}, { name });
+    fetchAndShow(this, name, widget, new Widget({ model: widget }));
+  }
+}
+
+export default WidgetsGridView;

package/src/components/widgets-grid/styles.scss

@@ -0,0 +1,34 @@
+@import "../../variables.scss";
+
+.widgets-grid {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: $gap-size $gap-size 0 $gap-size;
+  max-height: 100%;
+  overflow: auto;
+  display: flex;
+  &__col {
+    flex: 1 0 0%;
+    width: 50%;
+    min-width: $min-pane-size;
+  }
+  &__col + &__col {
+    flex: 1 0 0%;
+    padding-left: $gap-size;
+  }
+}
+
+@media (max-width: $small-screen) {
+  .widgets-grid {
+    display: block;
+    &__col {
+      width: 100%;
+    }
+    &__col + &__col {
+      padding-left: 0;
+    }
+  }
+}

package/src/data/localstorage/LocalStorageModel.js

@@ -0,0 +1,23 @@
+import { Model } from "backbone";
+
+export default class LocalStorageModel extends Model {
+  storageKey() {
+    return "ALLURE_REPORT_SETTINGS";
+  }
+
+  fetch() {
+    return new Promise((resolve) => {
+      const settings = window.localStorage.getItem(this.storageKey());
+      if (settings) {
+        this.set(JSON.parse(settings));
+      }
+      resolve();
+    });
+  }
+
+  save(key, val) {
+    this.set(key, val);
+    const json = this.toJSON();
+    window.localStorage.setItem(this.storageKey(), JSON.stringify(json));
+  }
+}

package/src/data/testresult/TestResultModel.js

@@ -0,0 +1,36 @@
+import { reportDataUrl } from "@allurereport/web-commons";
+import { Model } from "backbone";
+import { findWhere } from "underscore";
+import { makeArray } from "@/utils/arrays.js";
+
+function collectAttachments({ steps, attachments }) {
+  return makeArray(steps)
+    .reduce((result, step) => result.concat(collectAttachments(step)), [])
+    .concat(makeArray(attachments));
+}
+
+export default class TestResultModel extends Model {
+  get idAttribute() {
+    return "uid";
+  }
+
+  fetch(options) {
+    return reportDataUrl(this.url(), "application/json").then((value) => super.fetch({ ...options, url: value }));
+  }
+
+  parse(testResult) {
+    this.allAttachments = makeArray(testResult.beforeStages)
+      .concat(makeArray(testResult.testStage))
+      .concat(makeArray(testResult.afterStages))
+      .reduce((result, stage) => result.concat(collectAttachments(stage)), []);
+    return testResult;
+  }
+
+  getAttachment(uid) {
+    return findWhere(this.allAttachments, { uid: uid.toString() });
+  }
+
+  url() {
+    return `data/test-cases/${this.id}.json`;
+  }
+}