ui(admin): make all tables searchable and sortable

resources/scripts/api/admin/databases/getDatabases.ts

@@ -28,18 +28,58 @@ export const rawDataToDatabase = ({ attributes }: FractalResponseData): Database
     getAddress: () => `${attributes.host}:${attributes.port}`,
 });
 
+export interface Filters {
+    id?: string;
+    name?: string;
+    host?: string;
+}
+
 interface ctx {
     page: number;
     setPage: (value: number | ((s: number) => number)) => void;
+
+    filters: Filters | null;
+    setFilters: (filters: Filters | null) => void;
+
+    sort: string | null;
+    setSort: (sort: string | null) => void;
+
+    sortDirection: boolean;
+    setSortDirection: (direction: boolean) => void;
 }
 
-export const Context = createContext<ctx>({ page: 1, setPage: () => 1 });
+export const Context = createContext<ctx>({
+    page: 1,
+    setPage: () => 1,
+
+    filters: null,
+    setFilters: () => null,
+
+    sort: null,
+    setSort: () => null,
+
+    sortDirection: false,
+    setSortDirection: () => false,
+});
 
 export default (include: string[] = []) => {
-    const { page } = useContext(Context);
+    const { page, filters, sort, sortDirection } = useContext(Context);
 
-    return useSWR<PaginatedResult<Database>>([ 'databases', page ], async () => {
-        const { data } = await http.get('/api/application/databases', { params: { include: include.join(','), page } });
+    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<Database>>([ 'databases', page, filters, sort, sortDirection ], async () => {
+        const { data } = await http.get('/api/application/databases', { params: { include: include.join(','), page, ...params } });
 
         return ({
             items: (data.data || []).map(rawDataToDatabase),

resources/scripts/api/admin/locations/getLocations.ts

@@ -18,18 +18,58 @@ export const rawDataToLocation = ({ attributes }: FractalResponseData): Location
     updatedAt: new Date(attributes.updated_at),
 });
 
+export interface Filters {
+    id?: string;
+    short?: string;
+    long?: string;
+}
+
 interface ctx {
     page: number;
     setPage: (value: number | ((s: number) => number)) => void;
+
+    filters: Filters | null;
+    setFilters: (filters: Filters | null) => void;
+
+    sort: string | null;
+    setSort: (sort: string | null) => void;
+
+    sortDirection: boolean;
+    setSortDirection: (direction: boolean) => void;
 }
 
-export const Context = createContext<ctx>({ page: 1, setPage: () => 1 });
+export const Context = createContext<ctx>({
+    page: 1,
+    setPage: () => 1,
+
+    filters: null,
+    setFilters: () => null,
+
+    sort: null,
+    setSort: () => null,
+
+    sortDirection: false,
+    setSortDirection: () => false,
+});
 
 export default (include: string[] = []) => {
-    const { page } = useContext(Context);
+    const { page, filters, sort, sortDirection } = useContext(Context);
 
-    return useSWR<PaginatedResult<Location>>([ 'locations', page ], async () => {
-        const { data } = await http.get('/api/application/locations', { params: { include: include.join(','), page } });
+    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<Location>>([ 'locations', page, filters, sort, sortDirection ], async () => {
+        const { data } = await http.get('/api/application/locations', { params: { include: include.join(','), page, ...params } });
 
         return ({
             items: (data.data || []).map(rawDataToLocation),

resources/scripts/api/admin/mounts/getMounts.ts

@@ -43,18 +43,59 @@ export const rawDataToMount = ({ attributes }: FractalResponseData): Mount => ({
     },
 });
 
+export interface Filters {
+    id?: string;
+    name?: string;
+    source?: string;
+    target?: string;
+}
+
 interface ctx {
     page: number;
     setPage: (value: number | ((s: number) => number)) => void;
+
+    filters: Filters | null;
+    setFilters: (filters: Filters | null) => void;
+
+    sort: string | null;
+    setSort: (sort: string | null) => void;
+
+    sortDirection: boolean;
+    setSortDirection: (direction: boolean) => void;
 }
 
-export const Context = createContext<ctx>({ page: 1, setPage: () => 1 });
+export const Context = createContext<ctx>({
+    page: 1,
+    setPage: () => 1,
+
+    filters: null,
+    setFilters: () => null,
+
+    sort: null,
+    setSort: () => null,
+
+    sortDirection: false,
+    setSortDirection: () => false,
+});
 
 export default (include: string[] = []) => {
-    const { page } = useContext(Context);
+    const { page, filters, sort, sortDirection } = useContext(Context);
 
-    return useSWR<PaginatedResult<Mount>>([ 'mounts', page ], async () => {
-        const { data } = await http.get('/api/application/mounts', { params: { include: include.join(','), page } });
+    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<Mount>>([ 'mounts', page, filters, sort, sortDirection ], async () => {
+        const { data } = await http.get('/api/application/mounts', { params: { include: include.join(','), page, ...params } });
 
         return ({
             items: (data.data || []).map(rawDataToMount),

resources/scripts/api/admin/nests/getEggs.ts

@@ -1,10 +1,63 @@
-import http from '@/api/http';
+import http, { getPaginationSet, PaginatedResult } from '@/api/http';
+import { createContext, useContext } from 'react';
+import useSWR from 'swr';
 import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
 
-export default (nestId: number): Promise<Egg[]> => {
-    return new Promise((resolve, reject) => {
-        http.get(`/api/application/nests/${nestId}/eggs`)
-            .then(({ data }) => resolve((data.data || []).map(rawDataToEgg)))
-            .catch(reject);
+export interface Filters {
+    id?: string;
+    name?: string;
+}
+
+interface ctx {
+    page: number;
+    setPage: (value: number | ((s: number) => number)) => void;
+
+    filters: Filters | null;
+    setFilters: (filters: Filters | null) => void;
+
+    sort: string | null;
+    setSort: (sort: string | null) => void;
+
+    sortDirection: boolean;
+    setSortDirection: (direction: boolean) => void;
+}
+
+export const Context = createContext<ctx>({
+    page: 1,
+    setPage: () => 1,
+
+    filters: null,
+    setFilters: () => null,
+
+    sort: null,
+    setSort: () => null,
+
+    sortDirection: false,
+    setSortDirection: () => false,
+});
+
+export default (nestId: 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<Egg>>([ nestId, 'eggs', page, filters, sort, sortDirection ], async () => {
+        const { data } = await http.get(`/api/application/nests/${nestId}/eggs`, { params: { include: include.join(','), page, ...params } });
+
+        return ({
+            items: (data.data || []).map(rawDataToEgg),
+            pagination: getPaginationSet(data.meta.pagination),
+        });
     });
 };

resources/scripts/api/admin/nests/getNests.ts

@@ -31,24 +31,57 @@ export const rawDataToNest = ({ attributes }: FractalResponseData): Nest => ({
     },
 });
 
+export interface Filters {
+    id?: string;
+    name?: string;
+}
+
 interface ctx {
     page: number;
     setPage: (value: number | ((s: number) => number)) => void;
+
+    filters: Filters | null;
+    setFilters: (filters: Filters | null) => void;
+
+    sort: string | null;
+    setSort: (sort: string | null) => void;
+
+    sortDirection: boolean;
+    setSortDirection: (direction: boolean) => void;
 }
 
-export const Context = createContext<ctx>({ page: 1, setPage: () => 1 });
+export const Context = createContext<ctx>({
+    page: 1,
+    setPage: () => 1,
+
+    filters: null,
+    setFilters: () => null,
+
+    sort: null,
+    setSort: () => null,
+
+    sortDirection: false,
+    setSortDirection: () => false,
+});
 
 export default (include: string[] = []) => {
-    const { page } = useContext(Context);
+    const { page, filters, sort, sortDirection } = useContext(Context);
 
-    return useSWR<PaginatedResult<Nest>>([ 'nests', page ], async () => {
-        const { data } = await http.get('/api/application/nests', {
-            params: {
-                include: include.join(','),
-                per_page: 10,
-                page,
-            },
+    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<Nest>>([ 'nests', page, filters, sort, sortDirection ], async () => {
+        const { data } = await http.get('/api/application/nests', { params: { include: include.join(','), page, ...params } });
 
         return ({
             items: (data.data || []).map(rawDataToNest),

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

@@ -1,5 +1,4 @@
-import http from '@/api/http';
-import { rawDataToServerAllocation } from '@/api/transformers';
+import http, { FractalResponseData } from '@/api/http';
 
 export interface Allocation {
     id: number;
@@ -7,17 +6,22 @@ export interface Allocation {
     alias: string | null;
     port: number;
     notes: string | null;
-    isDefault: boolean;
+    assigned: boolean;
 }
 
-export default (uuid: string): Promise<[ Allocation, string[] ]> => {
+export const rawDataToAllocation = (data: FractalResponseData): Allocation => ({
+    id: data.attributes.id,
+    ip: data.attributes.ip,
+    alias: data.attributes.ip_alias,
+    port: data.attributes.port,
+    notes: data.attributes.notes,
+    assigned: data.attributes.assigned,
+});
+
+export default (uuid: string): Promise<Allocation[]> => {
     return new Promise((resolve, reject) => {
-        http.get(`/api/application/allocations/${uuid}`)
-            .then(({ data }) => resolve([
-                rawDataToServerAllocation(data),
-                // eslint-disable-next-line camelcase
-                data.meta?.is_allocation_owner ? [ '*' ] : (data.meta?.user_permissions || []),
-            ]))
+        http.get(`/api/application/nodes/${uuid}/allocations`)
+            .then(({ data }) => resolve((data.data || []).map(rawDataToAllocation)))
             .catch(reject);
     });
 };

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

@@ -68,6 +68,7 @@ export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
 });
 
 export interface Filters {
+    id?: string;
     uuid?: string;
     name?: string;
     image?: string;

resources/scripts/api/admin/roles/getRoles.ts

@@ -1,4 +1,6 @@
-import http, { FractalResponseData } from '@/api/http';
+import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
+import { createContext, useContext } from 'react';
+import useSWR from 'swr';
 
 export interface Role {
     id: number;
@@ -12,10 +14,61 @@ export const rawDataToRole = ({ attributes }: FractalResponseData): Role => ({
     description: attributes.description,
 });
 
-export default (include: string[] = []): Promise<Role[]> => {
-    return new Promise((resolve, reject) => {
-        http.get('/api/application/roles', { params: { include: include.join(',') } })
-            .then(({ data }) => resolve((data.data || []).map(rawDataToRole)))
-            .catch(reject);
+export interface Filters {
+    id?: string;
+    name?: string;
+}
+
+interface ctx {
+    page: number;
+    setPage: (value: number | ((s: number) => number)) => void;
+
+    filters: Filters | null;
+    setFilters: (filters: Filters | null) => void;
+
+    sort: string | null;
+    setSort: (sort: string | null) => void;
+
+    sortDirection: boolean;
+    setSortDirection: (direction: boolean) => void;
+}
+
+export const Context = createContext<ctx>({
+    page: 1,
+    setPage: () => 1,
+
+    filters: null,
+    setFilters: () => null,
+
+    sort: null,
+    setSort: () => null,
+
+    sortDirection: false,
+    setSortDirection: () => false,
+});
+
+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<Role>>([ 'roles', page, filters, sort, sortDirection ], async () => {
+        const { data } = await http.get('/api/application/roles', { params: { include: include.join(','), page, ...params } });
+
+        return ({
+            items: (data.data || []).map(rawDataToRole),
+            pagination: getPaginationSet(data.meta.pagination),
+        });
     });
 };

resources/scripts/api/admin/servers/getServers.ts

@@ -100,6 +100,7 @@ export const rawDataToServer = ({ attributes }: FractalResponseData): Server =>
 });
 
 export interface Filters {
+    id?: string;
     uuid?: string;
     name?: string;
     image?: string;

resources/scripts/api/admin/users/getUsers.ts

@@ -36,18 +36,61 @@ export const rawDataToUser = ({ attributes }: FractalResponseData): User => ({
     updatedAt: new Date(attributes.updated_at),
 });
 
+export interface Filters {
+    id?: string;
+    uuid?: string;
+    username?: string;
+    email?: string;
+    firstName?: string;
+    lastName?: string;
+}
+
 interface ctx {
     page: number;
     setPage: (value: number | ((s: number) => number)) => void;
+
+    filters: Filters | null;
+    setFilters: (filters: Filters | null) => void;
+
+    sort: string | null;
+    setSort: (sort: string | null) => void;
+
+    sortDirection: boolean;
+    setSortDirection: (direction: boolean) => void;
 }
 
-export const Context = createContext<ctx>({ page: 1, setPage: () => 1 });
+export const Context = createContext<ctx>({
+    page: 1,
+    setPage: () => 1,
+
+    filters: null,
+    setFilters: () => null,
+
+    sort: null,
+    setSort: () => null,
+
+    sortDirection: false,
+    setSortDirection: () => false,
+});
 
 export default (include: string[] = []) => {
-    const { page } = useContext(Context);
+    const { page, filters, sort, sortDirection } = useContext(Context);
 
-    return useSWR<PaginatedResult<User>>([ 'users', page ], async () => {
-        const { data } = await http.get('/api/application/users', { params: { include: include.join(','), page } });
+    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<User>>([ 'users', page, filters, sort, sortDirection ], async () => {
+        const { data } = await http.get('/api/application/users', { params: { include: include.join(','), page, ...params } });
 
         return ({
             items: (data.data || []).map(rawDataToUser),