feat: compare and retrieve versions

xandervedder · xandervedder · commit 2bfdf9bae9f0 · 2025-01-17T09:25:27.000+01:00
diff --git a/packages/data-access/src/mappers/DashboardQuery.ts b/packages/data-access/src/mappers/DashboardQuery.ts
@@ -25,6 +25,13 @@ export class DashboardQuery<TModel, TPartitionKeyFields extends keyof TModel, TR
     return new DashboardQuery(this.ModelClass, [...this.whereConditions, whereCondition]);
   }
 
+  public findPartitionKeyRange(
+    start: string
+  ): DashboardQuery<TModel, TPartitionKeyFields, TRowKeyFields> {
+    const whereCondition: string = odata`PartitionKey ge ${start}`;
+    return new DashboardQuery(this.ModelClass, [...this.whereConditions, whereCondition]);
+  }
+
   public static create<TModel, TPartitionKeyFields extends keyof TModel, TRowKeyFields extends keyof TModel>(
     ModelClass: ModelClass<TModel, TPartitionKeyFields, TRowKeyFields>,
   ): DashboardQuery<TModel, TPartitionKeyFields, TRowKeyFields> {
diff --git a/packages/stryker-elements/src/lib/atoms/dropdown.ts b/packages/stryker-elements/src/lib/atoms/dropdown.ts
@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 
@@ -12,14 +12,27 @@ export class Dropdown extends BaseElement {
   @property({ type: Array })
   options: { name: string; value: string }[] = [];
 
+  @property({ type: String	})
+  selectedOption = '';
+
+  @property({ type: Boolean })
+  withDisabledEmtpyOption = false;
+
   render() {
     return html`
       <select
         id="${this.id}"
         class="w-full rounded-lg bg-neutral-800 p-2 text-3xl text-white"
         @change="${this.#handleChange}"
       >
-        ${map(this.options, (option) => html`<option value="${option.value}">${option.name}</option>`)}
+        ${when(
+          this.withDisabledEmtpyOption, 
+          () => html`<option value="" disabled selected>Select an option</option>`, 
+          () => nothing
+        )}
+        ${map(this.options, (option) => html`
+          <option value="${option.value}" ?selected="${option.value === this.selectedOption}">${option.name}</option>
+        `)}
       </select>
     `;
   }
diff --git a/packages/stryker-elements/src/lib/atoms/hr.ts b/packages/stryker-elements/src/lib/atoms/hr.ts
@@ -1,12 +1,25 @@
 import { html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 import { BaseElement } from '../base-element';
 
 @customElement('sme-hr')
 export class Hr extends BaseElement {
+  @property()
+  direction: 'horizontal' | 'vertical' = 'horizontal';
+
+  @property()
+  color: 'normal' | 'bright' = 'normal';
+
   render() {
-    return html`<hr class="my-2 rounded border-t-[3px] border-neutral-700" />`;
+    const color = classMap({ 'bg-neutral-700': this.color === 'normal', 'bg-neutral-400': this.color === 'bright' });
+
+    if (this.direction === 'vertical') {
+      return html`<hr class="${color} w-[3px] rounded h-full" />`;
+    }
+
+    return html`<hr class="${color} my-2 rounded border-t-[3px]" />`;
   }
 }
 
diff --git a/packages/stryker-elements/src/lib/molecules/split-layout.ts b/packages/stryker-elements/src/lib/molecules/split-layout.ts
@@ -0,0 +1,31 @@
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { BaseElement } from '../base-element.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+@customElement('sme-split-layout')
+export class SplitLayout extends BaseElement {
+  @property({ type: Boolean })
+  withBackground = false;
+
+  render() {
+    return html`
+      <div class="flex p-4 ${classMap({ 'bg-elementsDark': this.withBackground })}">
+        <div class="max-w-split">
+          <slot name="left"></slot>
+        </div>
+        <sme-hr class="ml-2 mr-2" color="bright" direction="vertical"></sme-hr>
+        <div class="max-w-split">
+          <slot name="right"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sme-split-layout': SplitLayout;
+  }
+}
diff --git a/packages/stryker-elements/src/lib/molecules/tab-panels.ts b/packages/stryker-elements/src/lib/molecules/tab-panels.ts
@@ -0,0 +1,63 @@
+import { html, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { map } from "lit/directives/map.js";
+import { classMap } from "lit/directives/class-map.js";
+
+import { BaseElement } from "../base-element";
+
+@customElement('sme-tab-panels')
+export class TabPanels extends BaseElement {
+  @property({ type: Array })
+  tabs: string[] = [];
+
+  @property({ type: Array })
+  panels: TemplateResult<1>[] = [];
+
+  @state()
+  activeTab: number = 0;
+
+  render() {
+    return html`
+      <div class="w-full h-full">
+        <div class="flex bg-red-900 justify-center">
+          ${map(this.tabs, (tab, index) => {
+            return html` 
+              <sme-button
+                @click="${this.#handleTabChange}"
+                class="${classMap({ 
+                  'bg-red-700': index === this.activeTab,
+                  'border-red-500': index === this.activeTab, // separate on multiple lines because it cannot contain whitespace
+                  'border-transparent': index !== this.activeTab
+                })} border-0 border-b-2 px-2 font-bold transition text-md text-white" 
+                type="plain" 
+              >${tab}</sme-button>
+            `; 
+          })}
+        </div>
+        <div class="w-full h-full">
+          ${map(this.panels, (panel, index) => {
+            return html`
+              <div id="panel-${index}" class="${classMap({ 'hidden': index !== this.activeTab })}">
+                ${panel}
+              </div>
+            `;
+          })}
+        </div>
+      </div>
+    `;
+  }
+
+  #handleTabChange(e: Event) {
+    const target = e.target as HTMLElement;
+    const index = this.tabs.indexOf(target.innerText);
+    this.activeTab = index;
+  }
+}
+
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sme-tab-panels': TabPanels;
+  }
+}
+
diff --git a/packages/stryker-elements/src/main.ts b/packages/stryker-elements/src/main.ts
@@ -26,7 +26,8 @@ export { Loader } from './lib/molecules/loader';
 export { Modal } from './lib/molecules/modal';
 export { ProfileButton } from './lib/molecules/profile-button';
 export { Repository } from './lib/molecules/repository';
-export { SupportedFrameworkList } from './lib/molecules/supported-framework-list';
+export { SplitLayout } from './lib/molecules/split-layout';
+export { TabPanels } from './lib/molecules/tab-panels';
 export { ToggleRepository } from './lib/molecules/toggle-repository';
 
 // Organisms
diff --git a/packages/stryker-elements/src/stories/atoms/hr.stories.ts b/packages/stryker-elements/src/stories/atoms/hr.stories.ts
@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import '../../lib/atoms/hr';
+
+export default {
+  title: 'Atoms/Hr',
+} as Meta;
+
+export const Default: StoryObj = {  
+  name: 'Default',
+  render: () => html`<sme-hr></sme-hr>`,
+};
+
+export const Vertical: StoryObj = {
+  name: 'Vertical',
+  render: () => html`<div style="height: 100px"><sme-hr direction="vertical"></sme-hr></div>`,
+};
diff --git a/packages/stryker-elements/src/stories/molecules/split-layout.stories.ts b/packages/stryker-elements/src/stories/molecules/split-layout.stories.ts
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import '../../lib/atoms/hr';
+import '../../lib/molecules/split-layout';
+
+export default {
+  title: 'Molecules/Split Layout',
+  component: 'sme-split-layout',
+} as Meta;
+
+export const Default: StoryObj = {
+  name: 'Default',
+  render: () => {
+    return html`
+      <sme-split-layout>
+        <div slot="left">Left</div>
+        <div slot="right">Right</div>
+      </sme-split-layout>
+    `;
+  },
+};
diff --git a/packages/stryker-elements/src/stories/molecules/tab-panels.stories.ts b/packages/stryker-elements/src/stories/molecules/tab-panels.stories.ts
@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import '../../lib/molecules/tab-panels';
+
+export default {
+  title: 'Molecules/Tab Panels',
+  component: 'sme-tab-panels',
+} as Meta;
+
+export const Default: StoryObj = {
+  name: 'Default',
+  render: () => {
+    return html`<sme-tab-panels .tabs="${["Report", "Compare"]}" .panels="${[html`<div>report</div>`, html`<div>compare</div>`]}"></sme-tab-panels>`;
+  },
+};
diff --git a/packages/stryker-elements/tailwind.config.js b/packages/stryker-elements/tailwind.config.js
@@ -6,6 +6,10 @@ export default {
       colors: {
         background: '#242526',
         hero_background: '#22323D',
+        elementsDark: '#18181b',
+      },
+      spacing: {
+        split: 'calc(50% - 9.5px)',
       },
       keyframes: {
         something: {
diff --git a/packages/website-backend/src/controllers/version.controller.ts b/packages/website-backend/src/controllers/version.controller.ts
@@ -1,5 +1,7 @@
-import { Controller, Get } from '@nestjs/common';
+import { Controller, Get, Param } from '@nestjs/common';
 import { version as frontendVersion } from '@stryker-mutator/dashboard-frontend';
+import { parseSlug } from '../utils/utils.js';
+import { createMutationTestingReportMapper, DashboardQuery, MutationTestingReport, MutationTestingReportMapper, Project, ProjectMapper } from '@stryker-mutator/dashboard-data-access';
 import fs from 'fs/promises';
 
 const dashboardVersion = (
@@ -8,6 +10,12 @@ const dashboardVersion = (
 
 @Controller('/version')
 export default class VersionController {
+  #reportMapper: MutationTestingReportMapper;
+
+  constructor() {
+    this.#reportMapper = createMutationTestingReportMapper();
+  }
+
   /**
    * Gets the current version of the dashboard
    */
@@ -18,4 +26,11 @@ export default class VersionController {
       frontend: frontendVersion,
     };
   }
+  
+  @Get("/:slug(*)")
+  public async getVersionsForReport(@Param('slug') slug: string): Promise<string[]> {
+    const { project } = parseSlug(slug);
+    const reports = await this.#reportMapper.findAll(DashboardQuery.create(MutationTestingReport).findPartitionKeyRange(project));
+    return reports.map((project) => project.model.version);
+  }
 }
diff --git a/packages/website-frontend/src/pages/report.page.ts b/packages/website-frontend/src/pages/report.page.ts
diff --git a/packages/website-frontend/src/services/version.service.ts b/packages/website-frontend/src/services/version.service.ts
