@n1k1t/mock-server 0.1.59 → 0.1.61

package/src/gui/app/sections/analytics.section/index.ts

@@ -0,0 +1,97 @@
+import dayjs from 'dayjs';
+import hbs from 'handlebars';
+
+import { ChartComponent } from '../../components';
+import { Section } from '../../models';
+
+import context from '../../context';
+
+const template = hbs.compile(require('./template.hbs'));
+
+const charts = {
+  memory: ChartComponent.build({
+    title: {
+      text: 'Server memory usage',
+      icon: 'fas fa-memory',
+
+      description: 'updates every 5 seconds',
+    },
+
+    width: 'M',
+  }),
+
+  cache: ChartComponent.build({
+    title: {
+      text: 'Cache memory usage',
+      icon: 'fas fa-database',
+
+      description: 'updates every 10 minutes'
+    },
+
+    width: 'M',
+  }),
+
+  containers: ChartComponent.build({
+    title: {
+      text: 'Registered containers',
+      icon: 'fas fa-box',
+
+      description: 'updates every 5 seconds'
+    },
+
+    width: 'S',
+  }),
+
+  rate: ChartComponent.build({
+    title: {
+      text: 'Requests rate',
+      icon: 'fas fa-rocket',
+
+      description: 'updates instantly',
+    },
+
+    mode: 'aggregation',
+    width: 'S',
+  }),
+};
+
+export default Section
+  .build(template({}))
+  .assignMeta({ icon: 'fas fa-chart-line' })
+  .once('initialize', (section) => {
+    section.content.append(charts.memory);
+    section.content.append(charts.cache);
+
+    section.content.append(charts.containers);
+    section.content.append(charts.rate);
+
+    context.services.io.subscribe('metric:registered', ({ name, point: { timestamp, values } }) =>
+      name in charts
+        ? charts[<keyof typeof charts>name].provide([{ values, legend: dayjs(timestamp).format('HH:mm') }])
+        : null
+    );
+  })
+  .on('initialize', async () => {
+    charts.containers.clear();
+    charts.memory.clear();
+    charts.cache.clear();
+    charts.rate.clear();
+
+    const { data } = await context.services.io.exec('metrics:get');
+
+    charts.memory.provide(
+      data.memory.map(({ timestamp, values }) => ({ values, legend: dayjs(timestamp).format('HH:mm') }))
+    );
+
+    charts.cache.provide(
+      data.cache.map(({ timestamp, values }) => ({ values, legend: dayjs(timestamp).format('HH:mm') }))
+    );
+
+    charts.rate.provide(
+      data.rate.map(({ timestamp, values }) => ({ values, legend: dayjs(timestamp).format('HH:mm') }))
+    );
+
+    charts.containers.provide(
+      data.containers.map(({ timestamp, values }) => ({ values, legend: dayjs(timestamp).format('HH:mm') }))
+    );
+  });

package/src/gui/app/sections/analytics.section/style.scss

@@ -0,0 +1 @@
+section#analytics {}

package/src/gui/app/sections/analytics.section/template.hbs

@@ -0,0 +1,6 @@
+export default `
+  <section id="analytics">
+    <div class="storage"></div>
+    <div class="content container"></div>
+  </section>
+`

package/src/gui/app/sections/expectations.section/index.ts

@@ -0,0 +1,179 @@
+import hbs from 'handlebars';
+
+import { CheckboxAreaComponent, EmptyComponent, ExpectationComponent, SearchComponent } from '../../components';
+import { Section } from '../../models';
+import { cast } from '../../../../utils';
+
+import context from '../../context';
+
+const template = hbs.compile(require('./template.hbs'));
+
+const storage = new Map<string, ExpectationComponent>();
+const empty = EmptyComponent.build();
+
+const controls = {
+  state: {
+    filters: {
+      search: cast<null | string>(null),
+      groups: cast<null | string[]>(null),
+    },
+  },
+
+  search: SearchComponent
+    .build({ title: 'Search expectations' })
+    .on('clear', () => {
+      controls.state.filters.search = null;
+      refresh();
+    })
+    .on('input', (value) => {
+      controls.state.filters.search = value;
+      refresh();
+    }),
+
+  filter: CheckboxAreaComponent.build({
+    title: {
+      text: 'Groups filter',
+      icon: 'fas fa-filter',
+
+      description: 'shows/hides items in the list below',
+    },
+
+    width: 'M',
+  }),
+
+  switcher: CheckboxAreaComponent.build({
+    title: {
+      text: 'Groups switcher',
+      icon: 'fas fa-power-off',
+
+      description: 'turnes on/off items in the list below',
+    },
+
+    width: 'M',
+  }),
+};
+
+const filter = (provided: ExpectationComponent[]): ExpectationComponent[] => {
+  let filtred = provided;
+
+  if (controls.state.filters.groups) {
+    filtred = filtred.filter((expectation) => controls.state.filters.groups!.includes(expectation.data.group));
+  }
+  if (controls.state.filters.search) {
+    filtred = filtred.filter((expectation) => expectation.match(controls.state.filters.search!));
+  }
+
+  return filtred;
+}
+
+const refresh = (list: ExpectationComponent[] = [...storage.values()]) => {
+  const shown = filter(list.map((expectation) => expectation.hide())).map((expectation) => expectation.show());
+
+  if (list.length === storage.size) {
+    shown.length ? empty.hide() : empty.show();
+  }
+}
+
+const toggle = (groups?: string[]) =>
+  (groups ?? context.shared.groups).forEach((group) => {
+    const filtred = [...storage.values()].filter((expectation) => expectation.data.group === group);
+
+    filtred.every((expectation) => !expectation.data.isEnabled)
+      ? controls.switcher.buttons.provided[group]?.disable('silent')
+      : controls.switcher.buttons.provided[group]?.enable('silent');
+  });
+
+export default Section
+  .build(template({}))
+  .assignMeta({ name: 'Expectations', icon: 'fas fa-magic' })
+  .once('initialize', (section) => {
+    section.append(empty);
+
+    section.controls.main.append(controls.search);
+    section.controls.additional.append(controls.filter);
+    section.controls.additional.append(controls.switcher);
+
+    context.on('group:register', (name) => {
+      controls.switcher.provide({ name, isEnabled: true, colorify: true });
+      controls.filter.provide({ name, isEnabled: true, colorify: true });
+    });
+
+    controls.switcher.on('enable', (item) =>
+      context.services.io.exec('expectations:group:update', { name: item.name, set: { isEnabled: true } })
+    );
+
+    controls.switcher.on('disable', (item) =>
+      context.services.io.exec('expectations:group:update', { name: item.name, set: { isEnabled: false } })
+    );
+
+    controls.filter.on('enable', () => {
+      controls.state.filters.groups = controls.filter.extract().filter((item) => item.isEnabled).map((item) => item.name);
+      refresh();
+    });
+
+    controls.filter.on('disable', () => {
+      controls.state.filters.groups = controls.filter.extract().filter((item) => item.isEnabled).map((item) => item.name);
+      refresh();
+    });
+
+    context.services.io.subscribe('expectation:added', (data) => {
+      const expectation = ExpectationComponent.build(data);
+
+      storage.set(data.id, expectation);
+      section.content.append(expectation);
+
+      if (!context.shared.groups.has(data.group)) {
+        context.shared.groups.add(data.group);
+        context.emit('group:register', data.group);
+      }
+
+      refresh([expectation]);
+      toggle([expectation.data.group]);
+    });
+
+    context.services.io.subscribe('expectation:updated', (data) => {
+      const expectation = storage.get(data.id) ?? ExpectationComponent.build(data);
+
+      if (storage.has(data.id)) {
+        expectation.provide(data).refresh();
+      }
+
+      if (!section.content.element.querySelector(`div.expectation[id="${data.id}"]`)) {
+        section.content.append(expectation);
+        refresh([expectation])
+      }
+
+      if (!context.shared.groups.has(data.group)) {
+        context.shared.groups.add(data.group);
+        context.emit('group:register', data.group);
+      }
+
+      storage.set(data.id, expectation);
+      toggle([expectation.data.group]);
+    });
+  })
+  .on('initialize', async (section) => {
+    context.shared.groups.clear();
+    section.content.clear();
+
+    controls.switcher.clear();
+    controls.filter.clear();
+    storage.clear();
+
+    const { data } = await context.services.io.exec('expectations:get-list');
+
+    data.forEach((expectation) => {
+      const component = ExpectationComponent.build(expectation);
+
+      if (!context.shared.groups.has(expectation.group)) {
+        context.shared.groups.add(expectation.group);
+        context.emit('group:register', expectation.group);
+      }
+
+      storage.set(expectation.id, component);
+      section.content.append(component);
+    });
+
+    refresh();
+    toggle();
+  });

package/src/gui/app/sections/expectations.section/style.scss

@@ -0,0 +1 @@
+section#expectations {}

package/src/gui/app/sections/expectations.section/template.hbs

@@ -0,0 +1,15 @@
+export default `
+  <section id="expectations">
+    <div class="storage"></div>
+
+    <div class="controls">
+      <div class="main">
+        <button class="icon-only" id="expand"><i class="fas fa-chevron-down"></i></button>
+      </div>
+
+      <div class="additional container hidden"></div>
+    </div>
+
+    <div class="content"></div>
+  </section>
+`

package/src/gui/app/sections/history.section/index.ts

@@ -0,0 +1,175 @@
+import hbs from 'handlebars';
+
+import { Button, Section } from '../../models';
+import { cast } from '../../../../utils';
+import {
+  CheckboxAreaComponent,
+  EmptyComponent,
+  HistoryComponent,
+  PanelComponent,
+  SearchComponent,
+} from '../../components';
+
+import context from '../../context';
+
+const templates = {
+  section: hbs.compile(require('./templates/section.hbs')),
+  actions: hbs.compile(require('./templates/actions.hbs')),
+};
+
+const empty = EmptyComponent.build();
+
+const controls = {
+  state: {
+    storage: new Map<string, HistoryComponent>(),
+    stack: cast<string[]>([]),
+
+    filters: {
+      search: cast<null | string>(null),
+      groups: cast<null | string[]>(null),
+    },
+  },
+
+  search: SearchComponent
+    .build({ title: 'Search history' })
+    .on('clear', () => {
+      controls.state.filters.search = null;
+      refresh();
+    })
+    .on('input', (value) => {
+      controls.state.filters.search = value;
+      refresh();
+    }),
+
+  filter: CheckboxAreaComponent.build({
+    title: {
+      text: 'Groups filter',
+      icon: 'fas fa-filter',
+
+      description: 'shows/hides items in the list below'
+    },
+
+    width: 'M',
+  }),
+
+  actions: PanelComponent
+    .build({
+      title: {
+        text: 'Actions',
+        icon: 'fas fa-sliders-h',
+      },
+
+      class: 'actions',
+      width: 'M',
+    })
+    .append(templates.actions({})),
+};
+
+const filter = (list: HistoryComponent[]): HistoryComponent[] => {
+  let filtred = list;
+
+  if (controls.state.filters.groups) {
+    filtred = filtred.filter((history) => controls.state.filters.groups!.includes(history.data.group));
+  }
+  if (controls.state.filters.search) {
+    filtred = filtred.filter((history) => history.match(controls.state.filters.search!));
+  }
+
+  return filtred;
+}
+
+const refresh = (list: HistoryComponent[] = [...controls.state.storage.values()]) => {
+  const shown = filter(list.map((history) => history.hide())).map((history) => history.show());
+
+  if (list.length === controls.state.storage.size) {
+    shown.length ? empty.hide() : empty.show();
+  }
+}
+
+export default Section
+  .build(templates.section({}))
+  .assignMeta({ name: 'History', icon: 'fas fa-history' })
+  .once('initialize', (section) => {
+    section.append(empty);
+
+    section.controls.main.append(controls.search);
+    section.controls.additional.append(controls.filter);
+    section.controls.additional.append(controls.actions);
+
+    Button.build(controls.actions.element.querySelector('button#clear')).handle(async () => {
+      if (!controls.state.stack.length) {
+        return context.shared.popups.push('Nothing to clear', { level: 'warning' });
+      }
+
+      await context.services.io.exec('history:delete');
+
+      controls.state.storage.clear();
+      controls.state.stack = [];
+
+      section.content.clear();
+      context.shared.popups.push('History has cleared');
+
+      refresh();
+    });
+
+    context.on('group:register', (name) => controls.filter.provide({ name, isEnabled: true, colorify: true }));
+
+    controls.filter.on('enable', () => {
+      controls.state.filters.groups = controls.filter.extract().filter((item) => item.isEnabled).map((item) => item.name);
+      refresh();
+    });
+
+    controls.filter.on('disable', () => {
+      controls.state.filters.groups = controls.filter.extract().filter((item) => item.isEnabled).map((item) => item.name);
+      refresh();
+    });
+
+    context.services.io.subscribe('history:added', (data) => {
+      const history = HistoryComponent.build(data);
+
+      controls.state.storage.set(data.id, history);
+      controls.state.stack.push(data.id);
+
+      if (controls.state.stack.length > context.config.history.limit * context.shared.groups.size) {
+        const id = controls.state.stack.shift()!;
+
+        controls.state.storage.get(id)?.delete();
+        controls.state.storage.delete(id);
+      }
+
+      section.content.prepend(history);
+      refresh([history]);
+    });
+
+    context.services.io.subscribe('history:updated', (data) => {
+      const history = controls.state.storage.get(data.id) ?? HistoryComponent.build(data);
+
+      controls.state.storage.has(data.id) ? history.provide(data).refresh() : controls.state.stack.push(data.id);
+      controls.state.storage.set(data.id, history);
+
+      if (!section.element.querySelector(`div.history[id="${data.id}"]`)) {
+        section.content.prepend(history);
+        refresh([history]);
+      }
+    });
+  })
+  .on('initialize', async (section) => {
+    controls.filter.clear();
+    controls.state.stack = [];
+
+    section.content.clear();
+    controls.state.storage.clear();
+
+    const { data } = await context.services.io.exec('history:get-list');
+
+    data.forEach((history) => {
+      const component = HistoryComponent.build(history);
+
+      controls.state.storage.set(history.id, component);
+      controls.state.stack.push(history.id);
+
+      section.content.append(component);
+    });
+
+    refresh();
+  });

package/src/gui/app/sections/history.section/style.scss

@@ -0,0 +1,10 @@
+section#history {
+  div.actions {
+    button {
+      background-color: $color-main;
+      color: $color-dark;
+    }
+
+    button#clear { background-color: $color-red }
+  }
+}

package/src/gui/app/sections/history.section/templates/actions.hbs

@@ -0,0 +1,5 @@
+export default `
+  <div class="buttons">
+    <button id="clear"><i class="fas fa-trash-alt"></i>Clear list</button>
+  </div>
+`

package/src/gui/app/sections/history.section/templates/section.hbs

@@ -0,0 +1,15 @@
+export default `
+  <section id="history">
+    <div class="storage"></div>
+
+    <div class="controls">
+      <div class="main">
+        <button class="icon-only" id="expand"><i class="fas fa-chevron-down"></i></button>
+      </div>
+
+      <div class="additional container hidden"></div>
+    </div>
+
+    <div class="content"></div>
+  </section>
+`

package/src/gui/app/sections/index.ts

@@ -0,0 +1,4 @@
+export { default as expectations } from './expectations.section';
+export { default as analytics } from './analytics.section';
+export { default as settings } from './settings.section';
+export { default as history } from './history.section';

package/src/gui/app/sections/settings.section/index.ts

@@ -0,0 +1,63 @@
+import hbs from 'handlebars';
+
+import { PanelComponent } from '../../components';
+import { Button, Form, Section } from '../../models';
+
+import context from '../../context';
+
+const templates = {
+  section: hbs.compile(require('./templates/section.hbs')),
+  cache: hbs.compile(require('./templates/cache.hbs')),
+  stats: hbs.compile(require('./templates/stats.hbs')),
+};
+
+const panels = {
+  stats: PanelComponent.build({
+    title: {
+      text: 'Stats',
+      icon: 'fas fa-server'
+    },
+
+    class: 'stats',
+
+    height: 'XS',
+    width: 'M',
+  }),
+
+  cache: PanelComponent
+    .build({
+      title: {
+        text: 'Cache',
+        icon: 'fas fa-database',
+      },
+
+      class: 'cache',
+
+      height: 'XS',
+      width: 'M',
+    })
+    .replace(templates.cache({})),
+};
+
+export default Section
+  .build(templates.section({}))
+  .assignMeta({ icon: 'fas fa-cog' })
+  .once('initialize', async (section) => {
+    const form = Form.build<{
+      cache: {
+        prefix: string;
+      };
+    }>(section.content);
+
+    section.content.append(panels.stats);
+    section.content.append(panels.cache);
+
+    Button.build(panels.cache.element.querySelector('button#delete')).handle(async () => {
+      const { data } = await context.services.io.exec('cache:delete', form.extract().cache);
+      context.shared.popups.push(`Deleted <b>${data.redis?.count ?? 0}</b> cache keys`);
+    });
+  })
+  .on('select', async () => {
+    const { data } = await context.services.io.exec('stats');
+    panels.stats.replace(templates.stats(data));
+  });

package/src/gui/app/sections/settings.section/style.scss

@@ -0,0 +1,24 @@
+section#settings {
+  div.stats div.content {
+    flex-direction: column;
+
+    p {
+      margin: 5px 0;
+      font-size: 14px;
+
+      span { color: rgba(#fff, .5) }
+
+      b {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  div.cache div.content {
+    button {
+      background-color: $color-red;
+      color: $color-dark;
+      margin-top: 0;
+    }
+  }
+}

package/src/gui/app/sections/settings.section/templates/cache.hbs

@@ -0,0 +1,6 @@
+export default `
+  <div class="content">
+    <div class="input size-L" title="prefix"><input type="text" data-key="cache.prefix" value="*"></div>
+    <button id="delete"><i class="fas fa-trash-alt"></i>Delete</button>
+  </div>
+`

package/src/gui/app/sections/settings.section/templates/section.hbs

@@ -0,0 +1,6 @@
+export default `
+  <section id="settings">
+    <div class="storage"></div>
+    <div class="content container"></div>
+  </section>
+`

package/src/gui/app/sections/settings.section/templates/stats.hbs

@@ -0,0 +1,6 @@
+export default `
+  <div class="content">
+    <p class="version"><span>Version</span><b>{{version}}</b></p>
+    <p class="version"><span>Uptime</span><b>{{uptime}}</b></p>
+  </div>
+`

package/src/gui/app/setup.ts

@@ -0,0 +1,7 @@
+import dayjsRelativeTimePlugin from 'dayjs/plugin/relativeTime';
+import dayjs from 'dayjs';
+
+import handlebars from './handlebars';
+
+dayjs.extend(dayjsRelativeTimePlugin);
+handlebars.init();

package/src/gui/app/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "CommonJS",
+
+    "forceConsistentCasingInFileNames": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+
+    "strict": true,
+    "strictNullChecks": true,
+
+    "skipLibCheck": true,
+    "typeRoots": ["../../../node_modules/@types", "types/**/*.global.ts"],
+  },
+  "include": ["./**/*.ts"]
+}

package/src/gui/app/types/dev.ts

@@ -0,0 +1,6 @@
+export interface IDevContext {
+  io: {
+    origin: string;
+    path: string;
+  };
+}

package/src/gui/app/types/index.ts

@@ -0,0 +1 @@
+export * from './dev';

package/src/gui/app/types/window.global.ts

@@ -0,0 +1,9 @@
+import { IDevContext } from './dev';
+
+declare global {
+  interface Window {
+    DEV?: IDevContext;
+  }
+}
+
+export {}