@n1k1t/mock-server 0.1.59 → 0.1.61

package/src/gui/app/components/chart.component/index.ts

@@ -0,0 +1,173 @@
+import Chart from 'chart.js/auto';
+import _ from 'lodash';
+
+import { IPanelConfiguration, PanelComponent, TPanelSize } from '../panel.component';
+import { buildCounter, cast } from '../../../../utils';
+import { calculateColor } from '../../utils';
+import { Component } from '../../models';
+
+interface IPoint {
+  legend: string;
+  values: Record<string, number>;
+}
+
+const calculateLegendsLimit = (size: TPanelSize) => cast<Record<TPanelSize, number>>({
+  L: 20,
+  M: 10,
+  S: 7,
+  XS: 5,
+})[size];
+
+const calculatePointsLimit = (size: TPanelSize) => cast<Record<TPanelSize, number>>({
+  L: 200,
+  M: 100,
+  S: 60,
+  XS: 40,
+})[size];
+
+export class ChartComponent extends Component {
+  private counter = buildCounter();
+
+  private aliases: Record<string, number> = {};
+  private stack: number[] = [];
+
+  private points = new Map<number, IPoint>();
+  private labels = new Set<string>();
+
+  private limits = {
+    legend: calculateLegendsLimit(this.provided.width ?? 'L'),
+    point: this.provided.limit ?? calculatePointsLimit(this.provided.width ?? 'L'),
+  };
+
+  private source = new Chart(document.createElement('canvas'), {
+    type: 'line',
+    data: {
+      labels: cast<string[]>([]),
+      datasets: [],
+    },
+
+    options: {
+      scales: {
+        y: {
+          grid: {
+            color: 'rgba(255, 255, 255, 0.05)',
+          },
+
+          ticks: {
+            maxTicksLimit: this.limits.legend * 2,
+          },
+        },
+
+        x: {
+          grid: {
+            color: 'rgba(255, 255, 255, 0.05)',
+          },
+
+          ticks: {
+            maxTicksLimit: this.limits.legend,
+          },
+        },
+      },
+
+      plugins: {
+        legend: {
+          labels: {
+            usePointStyle: true,
+            pointStyle: 'circle',
+
+            boxHeight: 5,
+            boxWidth: 5,
+          },
+        },
+      },
+    },
+  });
+
+  private panel = PanelComponent.build({ ...this.provided, class: 'chart' }).replace(this.source.canvas);
+
+  constructor(private provided: IPanelConfiguration & {
+    mode?: 'aggregation';
+    limit?: number;
+  }) {
+    super();
+    this.replace(this.panel);
+  }
+
+  public provide(points: IPoint[]) {
+    points.forEach((point) => {
+      if (this.provided.mode === 'aggregation') {
+        const id = this.aliases[point.legend] ?? this.counter();
+        const target = this.points.get(id) ?? cast<IPoint>({ legend: point.legend, values: {} });
+
+        if (!this.aliases[point.legend]) {
+          this.aliases[point.legend] = id;
+
+          this.points.set(id, target);
+          this.stack.push(id);
+        }
+
+        return Object.entries(point.values).forEach(([label, value]) => {
+          target.values[label] = (target.values[label] ?? 0) + value;
+          this.labels.add(label);
+        });
+      }
+
+      const id = this.counter();
+
+      this.stack.push(id);
+      this.points.set(id, point);
+
+      Object.keys(point.values).forEach((label) => this.labels.add(label));
+    });
+
+    this.stack.slice(0, _.clamp(this.stack.length - this.limits.point, 0, Infinity)).forEach((id) => {
+      const point = this.points.get(id);
+      if (point) {
+        _.unset(this.aliases, point.legend);
+      }
+
+      this.points.delete(id);
+      this.stack.shift();
+    });
+
+    const iterated = [...this.points.values()];
+
+    this.source.data = {
+      labels: iterated.map((point) => point.legend),
+
+      datasets: [...this.labels.values()].map((label) => ({
+        label,
+        data: Array(iterated.length).fill(null).map((value, index) => iterated[index].values[label] ?? null),
+
+        tension: 0.3,
+        pointRadius: 2,
+
+        pointHitRadius: 20,
+        pointHoverRadius: 5,
+
+        borderWidth: 1,
+        borderColor: calculateColor(label),
+        backgroundColor: calculateColor(label),
+      })),
+    };
+
+    this.source.update('none');
+    return this;
+  }
+
+  public clear(): this {
+    this.source.reset();
+
+    this.points.clear();
+    this.labels.clear();
+
+    this.aliases = {};
+    this.stack = [];
+
+    return this;
+  }
+
+  static build(provided: ChartComponent['provided']) {
+    return new ChartComponent(provided);
+  }
+}

package/src/gui/app/components/chart.component/style.scss

@@ -0,0 +1,4 @@
+div.chart {
+  div.source { padding-top: 10px }
+  canvas { margin-bottom: 5px }
+}

package/src/gui/app/components/checkbox-area.component/index.ts

@@ -0,0 +1,101 @@
+import EventEmitter from 'events';
+import hbs from 'handlebars';
+
+import { IPanelConfiguration, PanelComponent } from '../panel.component';
+import { CheckboxAreaButtonComponent } from './item.component';
+import { TFunction } from '../../../../../types';
+import { Component } from '../../models';
+import { cast } from '../../../../utils';
+
+interface IEvents {
+  enable: [CheckboxAreaButtonComponent];
+  disable: [CheckboxAreaButtonComponent];
+}
+
+const template = hbs.compile(require('./template.hbs'));
+
+export class CheckboxAreaComponent extends Component {
+  public buttons = {
+    all: CheckboxAreaButtonComponent.build({ name: 'ALL', isEnabled: true }),
+    provided: cast<Record<string, CheckboxAreaButtonComponent>>({}),
+  };
+
+  private events = new EventEmitter();
+
+  private panel = new PanelComponent({ ...this.provided, class: 'checkbox-area' }).append(template(this.provided));
+  private area = new Component(this.panel.element.querySelector('div.buttons')).append(this.buttons.all);
+
+  constructor(private provided: IPanelConfiguration) {
+    super();
+    this.replace(this.panel);
+
+    this.buttons.all.on('enable', (button, trigger) =>
+      trigger === 'click' ? this.extract().forEach((button) => button.enable()) : null
+    );
+
+    this.buttons.all.on('disable', (button, trigger) =>
+      trigger === 'click' ? this.extract().forEach((button) => button.disable()) : null
+    );
+  }
+
+  public extract(): CheckboxAreaButtonComponent[] {
+    return Object.values(this.buttons.provided);
+  }
+
+  public provide(...provided: (CheckboxAreaButtonComponent | CheckboxAreaButtonComponent['configuration'])[]): this {
+    provided.forEach((predicate) => {
+      const button = predicate instanceof CheckboxAreaButtonComponent
+        ? predicate
+        : CheckboxAreaButtonComponent.build(predicate);
+
+      this.buttons.provided[button.name] = button;
+      this.area.append(button);
+
+      button.on('enable', (button, trigger) => {
+        if (this.extract().every((nested) => nested.isEnabled)) {
+          this.buttons.all.enable();
+        }
+        if (trigger !== 'silent') {
+          this.emit('enable', button);
+        }
+      });
+
+      button.on('disable', (button, trigger) => {
+        if (this.extract().some((nested) => !nested.isEnabled)) {
+          this.buttons.all.disable();
+        }
+        if (trigger !== 'silent') {
+          this.emit('disable', button);
+        }
+      });
+    });
+
+    return this;
+  }
+
+  public clear(): this {
+    this.extract().forEach((button) => button.delete());
+    this.buttons.provided = {};
+
+    return this;
+  }
+
+  public on<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
+    this.events.on(event, handler);
+    return this;
+  }
+
+  public once<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
+    this.events.once(event, handler);
+    return this;
+  }
+
+  private emit<K extends keyof IEvents>(event: K, ...args: IEvents[K]) {
+    this.events.emit(event, ...args);
+    return this;
+  }
+
+  static build(provided: CheckboxAreaComponent['provided']) {
+    return new CheckboxAreaComponent(provided);
+  }
+}

package/src/gui/app/components/checkbox-area.component/item.component.ts

@@ -0,0 +1,72 @@
+import EventEmitter from 'events';
+
+import { calculateColor } from '../../utils';
+import { Component } from '../../models';
+import { TFunction } from '../../../../../types';
+
+type TTrigger = 'click' | 'auto' | 'silent';
+
+interface IEvents {
+  enable: [CheckboxAreaButtonComponent, TTrigger];
+  disable: [CheckboxAreaButtonComponent, TTrigger];
+}
+
+export class CheckboxAreaButtonComponent extends Component {
+  private events = new EventEmitter();
+
+  constructor(public configuration: { name: string, isEnabled?: boolean, colorify?: boolean }) {
+    super(`
+      <button
+        style="${configuration?.colorify ? `color: ${calculateColor(configuration.name)}` : ''}"
+        class="${configuration.isEnabled ? 'checked' : ''}"
+      >${configuration.name}</button>
+    `);
+
+    this.element.addEventListener('click', () => this.isEnabled ? this.disable('click') : this.enable('click'));
+  }
+
+  public get name(): string {
+    return this.configuration.name;
+  }
+
+  public get isEnabled(): boolean {
+    return this.element.classList.contains('checked');
+  }
+
+  public enable(trigger: TTrigger = 'auto'): this {
+    if (this.isEnabled) {
+      return this;
+    }
+
+    this.element.classList.add('checked');
+    return this.emit('enable', this, trigger);
+  }
+
+  public disable(trigger: TTrigger = 'auto'): this {
+    if (!this.isEnabled) {
+      return this;
+    }
+
+    this.element.classList.remove('checked');
+    return this.emit('disable', this, trigger);
+  }
+
+  public on<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
+    this.events.on(event, handler);
+    return this;
+  }
+
+  public once<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
+    this.events.once(event, handler);
+    return this;
+  }
+
+  private emit<K extends keyof IEvents>(event: K, ...args: IEvents[K]) {
+    this.events.emit(event, ...args);
+    return this;
+  }
+
+  static build(configuration: CheckboxAreaButtonComponent['configuration']) {
+    return new CheckboxAreaButtonComponent(configuration);
+  }
+}

package/src/gui/app/components/checkbox-area.component/style.scss

@@ -0,0 +1,19 @@
+div.checkbox-area {
+  div.buttons {
+    width: 100%;
+  }
+
+  button {
+    background-color: rgba(#fff, .05);
+    font-weight: normal;
+  }
+
+  button:not(.checked) {
+    background-color: rgba(#fff, 0);
+    color: rgba(#fff, .4) !important;
+  }
+
+  button.checked {
+    pointer-events: all;
+  }
+}

package/src/gui/app/components/checkbox-area.component/template.hbs

@@ -0,0 +1,3 @@
+export default `
+  <div class="buttons"></div>
+`

package/src/gui/app/components/curtain.component/index.ts

@@ -0,0 +1,19 @@
+import { Component } from '../../models';
+
+interface ICurtainComponentOptions {
+  isPreventedToManualClose?: boolean;
+}
+
+export class CurtainComponent extends Component {
+  constructor(public options: ICurtainComponentOptions = {}) {
+    super('<div class="curtain hidden"></div>');
+
+    if (!options.isPreventedToManualClose) {
+      this.element.addEventListener('click', (event) => event.target === this.element ? this.hide() : null);
+    }
+  }
+
+  static build(options: ICurtainComponentOptions) {
+    return new CurtainComponent(options);
+  }
+}

package/src/gui/app/components/curtain.component/style.scss

@@ -0,0 +1,14 @@
+div.curtain {
+  cursor: pointer;
+  position: fixed;
+  overflow-y: auto;
+  top: 0;
+  left: 0;
+  height: calc(100% - 50px);
+  width: 100%;
+  padding-top: 50px;
+  background-color: rgba($color-dark, .95);
+  z-index: +100;
+
+  & > * { cursor: auto }
+}

package/src/gui/app/components/empty.component/index.ts

@@ -0,0 +1,10 @@
+import hbs from 'handlebars';
+import { Component } from '../../models';
+
+const template = hbs.compile(require('./template.hbs'));
+
+export class EmptyComponent extends Component {
+  static build() {
+    return new EmptyComponent(template({}));
+  }
+}

package/src/gui/app/components/empty.component/style.scss

@@ -0,0 +1,34 @@
+@keyframes pending {
+  0% {
+    content: '\f251';
+  }
+  33% {
+    content: '\f252';
+  }
+  66% {
+    content: '\f253';
+  }
+}
+
+div.empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 50px;
+
+  i {
+    color: $color-main;
+    font-size: 50px;
+    margin-right: 30px;
+
+    &:before {
+      animation: pending 1s infinite;
+    }
+  }
+
+  p {
+    color: rgba(#fff, .3);
+    font-size: 25px;
+    font-weight: 300;
+  }
+}

package/src/gui/app/components/empty.component/template.hbs

@@ -0,0 +1,6 @@
+export default `
+  <div class="empty">
+    <i class="fas fa-hourglass-start"></i>
+    <p>There's still nothing...</p>
+  </div>
+`

package/src/gui/app/components/expectation.component/index.ts

@@ -0,0 +1,60 @@
+import hbs from 'handlebars';
+import _ from 'lodash';
+
+import type { Expectation } from '../../../../expectations';
+
+import { Button, Component } from '../../models';
+import { ViewerComponent } from '../viewer.component';
+
+import context from '../../context';
+
+const template = hbs.compile(require('./template.hbs'));
+
+export class ExpectationComponent extends Component {
+  public viewer = ViewerComponent.build({ depth: 3 }).hide();
+
+  constructor(public data: Expectation['TPlain']) {
+    super();
+    this.refresh();
+  }
+
+  public provide(data: Expectation['TPlain']) {
+    return Object.assign(this, { data });
+  }
+
+  public refresh(): this {
+    this.replace(template(this.data)).append(this.viewer);
+    this.viewer.provide(_.pick(this.data, ['id', 'type', 'transports', 'schema']));
+
+    Button
+      .build(this.element.querySelector('button.activity'))
+      .handle(() => context.services.io.exec('expectations:update', {
+        id: this.data.id,
+        set: { isEnabled: !this.data.isEnabled },
+      }));
+
+    this.element.querySelector('div.meta')!.addEventListener('click', (event) =>
+      event.composedPath().some((element) => (<Element>element)?.classList?.contains('meta'))
+        ? (<Element>event.target).nodeName !== 'BUTTON'
+          ? this.viewer.isHidden ? this.viewer.show() : this.viewer.hide()
+          : null
+        : null
+    );
+
+    return this;
+  }
+
+  public match(query: string): boolean {
+    return [
+      this.data.group,
+      this.data.name,
+      this.data.schema.forward?.baseUrl,
+      this.data.schema.forward?.url,
+      this.data.meta.tags.map(({ value }) => value).join(),
+    ].some((value) => value?.includes(query));
+  }
+
+  static build(expectation: Expectation['TPlain']) {
+    return new ExpectationComponent(expectation);
+  }
+}

package/src/gui/app/components/expectation.component/style.scss

@@ -0,0 +1,5 @@
+div.expectation {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+}

package/src/gui/app/components/expectation.component/template.hbs

@@ -0,0 +1,5 @@
+export default `
+  <div class="container expectation" id="{{id}}">
+    <div class="meta">{{> expectationMeta this}}</div>
+  </div>
+`

package/src/gui/app/components/header.component/index.ts

@@ -0,0 +1,81 @@
+import EventEmitter from 'events';
+import hbs from 'handlebars';
+import _ from 'lodash';
+
+import { Component, Section } from '../../models';
+import { TFunction } from '../../../../../types';
+
+import context from '../../context';
+
+const template = hbs.compile(require('./template.hbs'));
+
+type TTab = { type: 'section', entity: Section } | { type: 'separator' };
+
+interface IEvents {
+  select: [Section];
+}
+
+export class HeaderComponent extends Component {
+  public sections = this.tabs
+    .map((tab) => tab.type === 'section' ? tab.entity : null)
+    .filter(Boolean)
+    .reduce<Record<string, Section>>((acc, section) => _.set(acc, section!.id, section), {});
+
+  private events = new EventEmitter();
+
+  constructor(public tabs: TTab[]) {
+    super(
+      template({
+        tabs: tabs.map(
+          (tab) => tab.type === 'section'
+            ? Object.assign(tab, { id: tab.entity.id, isSelected: !tab.entity.isHidden })
+            : tab
+        ),
+      })
+    );
+
+    Object.values(this.sections).forEach((section) => section.on('select', () => {
+      const button = this.element.querySelector(`button#${section.id}`);
+
+      this.element.querySelectorAll('div#tabs button').forEach((element) => element.classList.remove('checked'));
+      button?.classList.add('checked');
+    }));
+
+    this.element.querySelector('div#tabs')!.addEventListener('click', (source) => {
+      const event = <Event & { target: Element }>source;
+
+      event.target?.nodeName !== 'BUTTON' || !this.sections[event.target.id]
+        ? null
+        : this.emit('select', this.sections[event.target.id]);
+    });
+
+    this.on('select', (section) => {
+      Object.values(this.sections).forEach((nested) => nested.hide());
+
+      context.switchStorage(section.storage);
+
+      !section.isInitialized
+        ? section.initialize().show().select()
+        : section.show().select();
+    })
+  }
+
+  public on<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
+    this.events.on(event, handler);
+    return this;
+  }
+
+  public once<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
+    this.events.once(event, handler);
+    return this;
+  }
+
+  private emit<K extends keyof IEvents>(event: K, ...args: IEvents[K]) {
+    this.events.emit(event, ...args);
+    return this;
+  }
+
+  static build(tabs: TTab[]) {
+    return new HeaderComponent(tabs);
+  }
+}

package/src/gui/app/components/header.component/style.scss

@@ -0,0 +1,46 @@
+header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+
+  button {
+    text-decoration: none;
+    font-size: 14px;
+    color: rgba(#fff, .5);
+    vertical-align: top;
+
+    i { margin-right: 10px }
+
+    &.icon-only i {
+      font-size: 16px;
+    }
+
+    &.checked {
+      background-color: $color-main;
+      color: $color-dark;
+    }
+
+    &:not(.checked) {
+      color: rgba(#fff, .5);
+      background-color: rgba(#fff, .05);
+    }
+  }
+
+  hr {
+    position: relative;
+    width: 1px;
+    height: 25px;
+    border: none;
+    background-color: rgba(#fff, .1);
+    margin: 10px 10px;
+  }
+
+  div#tabs {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    button { padding: 10px 20px }
+  }
+}

package/src/gui/app/components/header.component/template.hbs

@@ -0,0 +1,15 @@
+export default `
+  <header>
+    <div id="tabs">
+      {{#each tabs}}
+        {{#compare type 'eq' 'separator'}}<hr>{{/compare}}
+
+        {{#compare type 'eq' 'section'}}
+          <button class="{{#unless entity.meta.name}}icon-only{{/unless}} {{#if isSelected}}checked{{/if}}" id="{{id}}">
+            <i class="{{entity.meta.icon}}"></i>{{entity.meta.name}}
+          </button>
+        {{/compare}}
+      {{/each}}
+    </div>
+  </header>
+`