serman/front/templates/servicesComponent.tsx

import React, { Component, RefObject } from "react";
import * as ReactDom from "react-dom/client";
import { Api as DTApiType } from 'datatables.net';
import DataTable, {DataTableRef} from 'datatables.net-react';
import {HostnameServiceDescription, Service} from "../../src/models/service";
import menu from "./menu";

interface SingleServiceProp {
    hostname: string;
    serviceName: string;
    status: string;
}

interface SystemServiceProps {
    data: SingleServiceProp[];
}

export class SystemServiceComponent extends Component<SystemServiceProps> {
    private dtRef: RefObject<DataTableRef|null>;

    public constructor(props: SystemServiceProps) {
        super(props);

        this.dtRef = React.createRef<DataTableRef>();
        menu.addFilterEventListener(() => {
            this.onMenuFilter();
        });
    }

    private getDatatableApi(): DTApiType|null {
        return this.dtRef?.current?.dt() ?? null;
    }

    private onMenuFilter() {
        const dtApi = this.getDatatableApi();
        const values = menu.getFilteredHostnames().join("|");
        if (!dtApi) return;
        dtApi.search("");
        dtApi.column(0).search(values, { regex: true }).draw();
    }

    public componentDidMount() {
        this.onMenuFilter();
    }

    public render(): React.JSX.Element {
        if (this.props.data === null)
            return (<>Error</>);
        let defaultSearch = menu.getFilteredHostnames().join("|");
        return (
            <DataTable options={{
                    layout: { topEnd: null },
                    search: { search: defaultSearch, regex: true },
                    columns: [
                        { columnControl: { target: 0, content: [ "order" ] } },
                        { columnControl: { target: 0, content: [ "order", [ "search" ] ] } },
                        { columnControl: { target: 0, content: [ "order", [ "searchList" ] ] } }
                    ],
                    pageLength: 20,
                    lengthMenu: [10, 20, 50, 100, -1],
                    ordering: {
                        indicators: false,
                        handler: false
                    }
                }} ref={this.dtRef} data={this.props.data.map(x => [ x.hostname, x.serviceName, x.status ])}>
                <thead><tr>
                    <th>Host</th>
                    <th>Service Name</th>
                    <th>Status</th>
                </tr></thead>
            </DataTable>
            );
    }

    public static renderMultiple(container: HTMLElement, data: HostnameServiceDescription): void {
        const dataArray: SingleServiceProp[] = Object.keys(data).reduce((acc: SingleServiceProp[], hostname: string): SingleServiceProp[] => {
            return acc.concat(data[hostname]!.map((x: Service) : SingleServiceProp => { return { hostname: hostname, serviceName: x.name, status: x.statusText }}));
        }, []);
        ReactDom.createRoot(container).render(<SystemServiceComponent data={dataArray} />);
    }
}