ui(admin): add "working" React admin ui

resources/scripts/api/admin/nodes/allocations/createAllocation.ts

@@ -0,0 +1,16 @@
+import http from '@/api/http';
+import { Allocation, rawDataToAllocation } from '@/api/admin/nodes/getAllocations';
+
+export interface Values {
+    ip: string;
+    ports: number[];
+    alias?: string;
+}
+
+export default (id: string | number, values: Values, include: string[] = []): Promise<Allocation[]> => {
+    return new Promise((resolve, reject) => {
+        http.post(`/api/application/nodes/${id}/allocations`, values, { params: { include: include.join(',') } })
+            .then(({ data }) => resolve((data || []).map(rawDataToAllocation)))
+            .catch(reject);
+    });
+};

resources/scripts/api/admin/nodes/allocations/deleteAllocation.ts

@@ -0,0 +1,9 @@
+import http from '@/api/http';
+
+export default (nodeId: number, allocationId: number): Promise<void> => {
+    return new Promise((resolve, reject) => {
+        http.delete(`/api/application/nodes/${nodeId}/allocations/${allocationId}`)
+            .then(() => resolve())
+            .catch(reject);
+    });
+};

resources/scripts/api/admin/nodes/allocations/getAllocations.ts

@@ -0,0 +1,39 @@
+import { Allocation, rawDataToAllocation } from '@/api/admin/nodes/getAllocations';
+import http, { getPaginationSet, PaginatedResult } from '@/api/http';
+import { useContext } from 'react';
+import useSWR from 'swr';
+import { createContext } from '@/api/admin';
+
+export interface Filters {
+    id?: string;
+    ip?: string;
+    port?: string;
+}
+
+export const Context = createContext<Filters>();
+
+export default (id: number, include: string[] = []) => {
+    const { page, filters, sort, sortDirection } = useContext(Context);
+
+    const params = {};
+    if (filters !== null) {
+        Object.keys(filters).forEach(key => {
+            // @ts-ignore
+            params['filter[' + key + ']'] = filters[key];
+        });
+    }
+
+    if (sort !== null) {
+        // @ts-ignore
+        params.sort = (sortDirection ? '-' : '') + sort;
+    }
+
+    return useSWR<PaginatedResult<Allocation>>([ 'allocations', page, filters, sort, sortDirection ], async () => {
+        const { data } = await http.get(`/api/application/nodes/${id}/allocations`, { params: { include: include.join(','), page, ...params } });
+
+        return ({
+            items: (data.data || []).map(rawDataToAllocation),
+            pagination: getPaginationSet(data.meta.pagination),
+        });
+    });
+};

resources/scripts/api/admin/nodes/createNode.ts

@@ -0,0 +1,42 @@
+import http from '@/api/http';
+import { Node, rawDataToNode } from '@/api/admin/nodes/getNodes';
+
+export interface Values {
+    name: string;
+    locationId: number;
+    databaseHostId: number | null;
+    fqdn: string;
+    scheme: string;
+    behindProxy: boolean;
+    public: boolean;
+    daemonBase: string;
+
+    memory: number;
+    memoryOverallocate: number;
+    disk: number;
+    diskOverallocate: number;
+
+    listenPortHTTP: number;
+    publicPortHTTP: number;
+    listenPortSFTP: number;
+    publicPortSFTP: number;
+}
+
+export default (values: Values, include: string[] = []): Promise<Node> => {
+    const data = {};
+
+    Object.keys(values).forEach((key) => {
+        const key2 = key
+            .replace('HTTP', 'Http')
+            .replace('SFTP', 'Sftp')
+            .replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
+        // @ts-ignore
+        data[key2] = values[key];
+    });
+
+    return new Promise((resolve, reject) => {
+        http.post('/api/application/nodes', data, { params: { include: include.join(',') } })
+            .then(({ data }) => resolve(rawDataToNode(data)))
+            .catch(reject);
+    });
+};

resources/scripts/api/admin/nodes/deleteNode.ts

@@ -0,0 +1,9 @@
+import http from '@/api/http';
+
+export default (id: number): Promise<void> => {
+    return new Promise((resolve, reject) => {
+        http.delete(`/api/application/nodes/${id}`)
+            .then(() => resolve())
+            .catch(reject);
+    });
+};

resources/scripts/api/admin/nodes/getAllocations.ts

@@ -0,0 +1,61 @@
+import http, { FractalResponseData } from '@/api/http';
+import { rawDataToServer, Server } from '@/api/admin/servers/getServers';
+
+export interface Allocation {
+    id: number;
+    ip: string;
+    port: number;
+    alias: string | null;
+    serverId: number | null;
+    assigned: boolean;
+
+    relations: {
+        server?: Server;
+    }
+
+    getDisplayText (): string;
+}
+
+export const rawDataToAllocation = ({ attributes }: FractalResponseData): Allocation => ({
+    id: attributes.id,
+    ip: attributes.ip,
+    port: attributes.port,
+    alias: attributes.alias || null,
+    serverId: attributes.server_id,
+    assigned: attributes.assigned,
+
+    relations: {
+        server: attributes.relationships?.server?.object === 'server' ? rawDataToServer(attributes.relationships.server as FractalResponseData) : undefined,
+    },
+
+    // TODO: If IP is an IPv6, wrap IP in [].
+    getDisplayText (): string {
+        if (attributes.alias !== null) {
+            return `${attributes.ip}:${attributes.port} (${attributes.alias})`;
+        }
+        return `${attributes.ip}:${attributes.port}`;
+    },
+});
+
+export interface Filters {
+    ip?: string
+    /* eslint-disable camelcase */
+    server_id?: string;
+    /* eslint-enable camelcase */
+}
+
+export default (id: string | number, filters: Filters = {}, include: string[] = []): Promise<Allocation[]> => {
+    const params = {};
+    if (filters !== null) {
+        Object.keys(filters).forEach(key => {
+            // @ts-ignore
+            params['filter[' + key + ']'] = filters[key];
+        });
+    }
+
+    return new Promise((resolve, reject) => {
+        http.get(`/api/application/nodes/${id}/allocations`, { params: { include: include.join(','), ...params } })
+            .then(({ data }) => resolve((data.data || []).map(rawDataToAllocation)))
+            .catch(reject);
+    });
+};

resources/scripts/api/admin/nodes/getNode.ts

@@ -0,0 +1,10 @@
+import http from '@/api/http';
+import { Node, rawDataToNode } from '@/api/admin/nodes/getNodes';
+
+export default (id: number, include: string[] = []): Promise<Node> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/application/nodes/${id}`, { params: { include: include.join(',') } })
+            .then(({ data }) => resolve(rawDataToNode(data)))
+            .catch(reject);
+    });
+};

resources/scripts/api/admin/nodes/getNodeConfiguration.ts

@@ -0,0 +1,9 @@
+import http from '@/api/http';
+
+export default (id: number): Promise<string> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/application/nodes/${id}/configuration?format=yaml`)
+            .then(({ data }) => resolve(data))
+            .catch(reject);
+    });
+};

resources/scripts/api/admin/nodes/getNodeInformation.ts

@@ -0,0 +1,19 @@
+import http from '@/api/http';
+
+export interface NodeInformation {
+    version: string;
+    system: {
+        type: string;
+        arch: string;
+        release: string;
+        cpus: number;
+    };
+}
+
+export default (id: number): Promise<NodeInformation> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/application/nodes/${id}/information`)
+            .then(({ data }) => resolve(data))
+            .catch(reject);
+    });
+};

resources/scripts/api/admin/nodes/getNodes.ts

@@ -0,0 +1,107 @@
+import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
+import { useContext } from 'react';
+import useSWR from 'swr';
+import { createContext } from '@/api/admin';
+import { Database, rawDataToDatabase } from '@/api/admin/databases/getDatabases';
+import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations';
+
+export interface Node {
+    id: number;
+    uuid: string;
+    public: boolean;
+    name: string;
+    description: string | null;
+    locationId: number;
+    databaseHostId: number | null;
+    fqdn: string;
+    listenPortHTTP: number;
+    publicPortHTTP: number;
+    listenPortSFTP: number;
+    publicPortSFTP: number;
+    scheme: string;
+    behindProxy: boolean;
+    maintenanceMode: boolean;
+    memory: number;
+    memoryOverallocate: number;
+    disk: number;
+    diskOverallocate: number;
+    uploadSize: number;
+    daemonBase: string;
+    createdAt: Date;
+    updatedAt: Date;
+
+    relations: {
+        databaseHost: Database | undefined;
+        location: Location | undefined;
+    }
+}
+
+export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
+    id: attributes.id,
+    uuid: attributes.uuid,
+    public: attributes.public,
+    name: attributes.name,
+    description: attributes.description,
+    locationId: attributes.location_id,
+    databaseHostId: attributes.database_host_id,
+    fqdn: attributes.fqdn,
+    listenPortHTTP: attributes.listen_port_http,
+    publicPortHTTP: attributes.public_port_http,
+    listenPortSFTP: attributes.listen_port_sftp,
+    publicPortSFTP: attributes.public_port_sftp,
+    scheme: attributes.scheme,
+    behindProxy: attributes.behind_proxy,
+    maintenanceMode: attributes.maintenance_mode,
+    memory: attributes.memory,
+    memoryOverallocate: attributes.memory_overallocate,
+    disk: attributes.disk,
+    diskOverallocate: attributes.disk_overallocate,
+    uploadSize: attributes.upload_size,
+    daemonBase: attributes.daemon_base,
+    createdAt: new Date(attributes.created_at),
+    updatedAt: new Date(attributes.updated_at),
+
+    relations: {
+        // eslint-disable-next-line camelcase
+        databaseHost: attributes.relationships?.database_host !== undefined && attributes.relationships?.database_host.object !== 'null_resource' ? rawDataToDatabase(attributes.relationships.database_host as FractalResponseData) : undefined,
+        location: attributes.relationships?.location !== undefined ? rawDataToLocation(attributes.relationships.location as FractalResponseData) : undefined,
+    },
+});
+
+export interface Filters {
+    id?: string;
+    uuid?: string;
+    name?: string;
+    image?: string;
+    /* eslint-disable camelcase */
+    external_id?: string;
+    /* eslint-enable camelcase */
+}
+
+export const Context = createContext<Filters>();
+
+export default (include: string[] = []) => {
+    const { page, filters, sort, sortDirection } = useContext(Context);
+
+    const params = {};
+    if (filters !== null) {
+        Object.keys(filters).forEach(key => {
+            // @ts-ignore
+            params['filter[' + key + ']'] = filters[key];
+        });
+    }
+
+    if (sort !== null) {
+        // @ts-ignore
+        params.sort = (sortDirection ? '-' : '') + sort;
+    }
+
+    return useSWR<PaginatedResult<Node>>([ 'nodes', page, filters, sort, sortDirection ], async () => {
+        const { data } = await http.get('/api/application/nodes', { params: { include: include.join(','), page, ...params } });
+
+        return ({
+            items: (data.data || []).map(rawDataToNode),
+            pagination: getPaginationSet(data.meta.pagination),
+        });
+    });
+};

resources/scripts/api/admin/nodes/updateNode.ts

@@ -0,0 +1,21 @@
+import http from '@/api/http';
+import { Node, rawDataToNode } from '@/api/admin/nodes/getNodes';
+
+export default (id: number, node: Partial<Node>, include: string[] = []): Promise<Node> => {
+    const data = {};
+
+    Object.keys(node).forEach((key) => {
+        const key2 = key
+            .replace('HTTP', 'Http')
+            .replace('SFTP', 'Sftp')
+            .replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
+        // @ts-ignore
+        data[key2] = node[key];
+    });
+
+    return new Promise((resolve, reject) => {
+        http.patch(`/api/application/nodes/${id}`, data, { params: { include: include.join(',') } })
+            .then(({ data }) => resolve(rawDataToNode(data)))
+            .catch(reject);
+    });
+};