objectstorage/ts_web/elements/objst-view-config.ts

import * as plugins from '../plugins.js';
import * as appstate from '../appstate.js';
import * as shared from './shared/index.js';

import {
  DeesElement,
  customElement,
  html,
  state,
  css,
  cssManager,
  type TemplateResult,
} from '@design.estate/dees-element';
import { type IStatsTile } from '@design.estate/dees-catalog';

@customElement('objst-view-config')
export class ObjstViewConfig extends DeesElement {
  @state()
  accessor configState: appstate.IConfigState = { config: null };

  constructor() {
    super();
    const sub = appstate.configStatePart
      .select((s) => s)
      .subscribe((configState) => {
        this.configState = configState;
      });
    this.rxSubscriptions.push(sub);
  }

  async connectedCallback() {
    super.connectedCallback();
    appstate.configStatePart.dispatchAction(appstate.fetchConfigAction, null);
  }

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

  public render(): TemplateResult {
    const config = this.configState.config;

    const tiles: IStatsTile[] = [
      {
        id: 'objstPort',
        title: 'Storage API Port',
        value: config?.objstPort ?? '--',
        type: 'number',
        icon: 'lucide:network',
        color: '#2196f3',
      },
      {
        id: 'uiPort',
        title: 'UI Port',
        value: config?.uiPort ?? '--',
        type: 'number',
        icon: 'lucide:monitor',
        color: '#00bcd4',
      },
      {
        id: 'region',
        title: 'Region',
        value: config?.region ?? '--',
        type: 'text',
        icon: 'lucide:globe',
        color: '#607d8b',
      },
      {
        id: 'storageDir',
        title: 'Storage Directory',
        value: config?.storageDirectory ?? '--',
        type: 'text',
        icon: 'lucide:hardDrive',
        color: '#9c27b0',
      },
      {
        id: 'auth',
        title: 'Authentication',
        value: config?.authEnabled ? 'Enabled' : 'Disabled',
        type: 'text',
        icon: 'lucide:shield',
        color: config?.authEnabled ? '#4caf50' : '#f44336',
      },
      {
        id: 'cors',
        title: 'CORS',
        value: config?.corsEnabled ? 'Enabled' : 'Disabled',
        type: 'text',
        icon: 'lucide:globe2',
        color: config?.corsEnabled ? '#4caf50' : '#ff9800',
      },
    ];

    return html`
      <objst-sectionheading>Configuration</objst-sectionheading>
      <dees-statsgrid
        .tiles=${tiles}
        .gridActions=${[
          {
            name: 'Refresh',
            iconName: 'lucide:refreshCw',
            action: async () => {
              await appstate.configStatePart.dispatchAction(appstate.fetchConfigAction, null);
            },
          },
        ]}
      ></dees-statsgrid>
    `;
  }
}