onebox/ts_web/elements/ob-view-services.ts

import * as plugins from '../plugins.js';
import * as shared from './shared/index.js';
import * as appstate from '../appstate.js';
import {
  DeesElement,
  customElement,
  html,
  state,
  css,
  cssManager,
  type TemplateResult,
} from '@design.estate/dees-element';

@customElement('ob-view-services')
export class ObViewServices extends DeesElement {
  @state()
  accessor servicesState: appstate.IServicesState = {
    services: [],
    currentService: null,
    currentServiceLogs: [],
    currentServiceStats: null,
    platformServices: [],
    currentPlatformService: null,
  };

  @state()
  accessor backupsState: appstate.IBackupsState = {
    backups: [],
    schedules: [],
  };

  @state()
  accessor currentView: 'list' | 'create' | 'detail' | 'backups' | 'platform-detail' = 'list';

  @state()
  accessor selectedServiceName: string = '';

  @state()
  accessor selectedPlatformType: string = '';

  constructor() {
    super();

    const servicesSub = appstate.servicesStatePart
      .select((s) => s)
      .subscribe((newState) => {
        this.servicesState = newState;
      });
    this.rxSubscriptions.push(servicesSub);

    const backupsSub = appstate.backupsStatePart
      .select((s) => s)
      .subscribe((newState) => {
        this.backupsState = newState;
      });
    this.rxSubscriptions.push(backupsSub);
  }

  public static styles = [
    cssManager.defaultStyles,
    shared.viewHostCss,
    css``,
  ];

  async connectedCallback() {
    super.connectedCallback();
    await Promise.all([
      appstate.servicesStatePart.dispatchAction(appstate.fetchServicesAction, null),
      appstate.servicesStatePart.dispatchAction(appstate.fetchPlatformServicesAction, null),
    ]);
  }

  public render(): TemplateResult {
    switch (this.currentView) {
      case 'create':
        return this.renderCreateView();
      case 'detail':
        return this.renderDetailView();
      case 'backups':
        return this.renderBackupsView();
      case 'platform-detail':
        return this.renderPlatformDetailView();
      default:
        return this.renderListView();
    }
  }

  private renderListView(): TemplateResult {
    return html`
      <ob-sectionheading>Services</ob-sectionheading>
      <sz-services-list-view
        .services=${this.servicesState.services}
        @service-click=${(e: CustomEvent) => {
          this.selectedServiceName = e.detail.name || e.detail.service?.name;
          appstate.servicesStatePart.dispatchAction(appstate.fetchServiceAction, {
            name: this.selectedServiceName,
          });
          appstate.servicesStatePart.dispatchAction(appstate.fetchServiceLogsAction, {
            name: this.selectedServiceName,
          });
          this.currentView = 'detail';
        }}
        @service-action=${(e: CustomEvent) => this.handleServiceAction(e)}
      ></sz-services-list-view>
    `;
  }

  private renderCreateView(): TemplateResult {
    return html`
      <ob-sectionheading>Create Service</ob-sectionheading>
      <sz-service-create-view
        .registries=${[]}
        @create-service=${async (e: CustomEvent) => {
          await appstate.servicesStatePart.dispatchAction(appstate.createServiceAction, {
            config: e.detail,
          });
          this.currentView = 'list';
        }}
        @cancel=${() => {
          this.currentView = 'list';
        }}
      ></sz-service-create-view>
    `;
  }

  private renderDetailView(): TemplateResult {
    return html`
      <ob-sectionheading>Service Details</ob-sectionheading>
      <sz-service-detail-view
        .service=${this.servicesState.currentService}
        .logs=${this.servicesState.currentServiceLogs}
        .stats=${this.servicesState.currentServiceStats}
        @back=${() => {
          this.currentView = 'list';
        }}
        @service-action=${(e: CustomEvent) => this.handleServiceAction(e)}
      ></sz-service-detail-view>
    `;
  }

  private renderBackupsView(): TemplateResult {
    return html`
      <ob-sectionheading>Backups</ob-sectionheading>
      <sz-services-backups-view
        .schedules=${this.backupsState.schedules}
        .backups=${this.backupsState.backups}
        @create-schedule=${(e: CustomEvent) => {
          appstate.backupsStatePart.dispatchAction(appstate.createScheduleAction, {
            config: e.detail,
          });
        }}
        @run-now=${(e: CustomEvent) => {
          appstate.backupsStatePart.dispatchAction(appstate.triggerScheduleAction, {
            scheduleId: e.detail.scheduleId,
          });
        }}
        @delete-backup=${(e: CustomEvent) => {
          appstate.backupsStatePart.dispatchAction(appstate.deleteBackupAction, {
            backupId: e.detail.backupId,
          });
        }}
      ></sz-services-backups-view>
    `;
  }

  private renderPlatformDetailView(): TemplateResult {
    const platformService = this.servicesState.platformServices.find(
      (ps) => ps.type === this.selectedPlatformType,
    );
    return html`
      <ob-sectionheading>Platform Service</ob-sectionheading>
      <sz-platform-service-detail-view
        .service=${platformService
          ? {
              id: platformService.type,
              name: platformService.displayName,
              type: platformService.type,
              status: platformService.status,
              version: '',
              host: 'localhost',
              port: 0,
              config: {},
            }
          : null}
        .logs=${[]}
        @start=${() => {
          appstate.servicesStatePart.dispatchAction(appstate.startPlatformServiceAction, {
            serviceType: this.selectedPlatformType as any,
          });
        }}
        @stop=${() => {
          appstate.servicesStatePart.dispatchAction(appstate.stopPlatformServiceAction, {
            serviceType: this.selectedPlatformType as any,
          });
        }}
      ></sz-platform-service-detail-view>
    `;
  }

  private async handleServiceAction(e: CustomEvent) {
    const action = e.detail.action;
    const name = e.detail.service?.name || e.detail.name || this.selectedServiceName;
    switch (action) {
      case 'start':
        await appstate.servicesStatePart.dispatchAction(appstate.startServiceAction, { name });
        break;
      case 'stop':
        await appstate.servicesStatePart.dispatchAction(appstate.stopServiceAction, { name });
        break;
      case 'restart':
        await appstate.servicesStatePart.dispatchAction(appstate.restartServiceAction, { name });
        break;
      case 'delete':
        await appstate.servicesStatePart.dispatchAction(appstate.deleteServiceAction, { name });
        this.currentView = 'list';
        break;
    }
  }
}