Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: run prettier

Browse source
This commit is contained in:
Matthew Penner 2023-01-12 12:31:47 -07:00
parent 9cdbbc3a00
commit 155d7bb876
No known key found for this signature in database
76 changed files with 788 additions and 550 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
resources/scripts/api/admin/databases/createDatabase.ts
View file

@ -1,11 +1,26 @@
import http from '@/api/http';
import { Database, rawDataToDatabase } from '@/api/admin/databases/getDatabases';
export default (name: string, host: string, port: number, username: string, password: string, include: string[] = []): Promise<Database> => {
export default (
name: string,
host: string,
port: number,
username: string,
password: string,
include: string[] = [],
): Promise<Database> => {
return new Promise((resolve, reject) => {
http.post('/api/application/databases', {
name, host, port, username, password,
}, { params: { include: include.join(',') } })
http.post(
'/api/application/databases',
{
name,
host,
port,
username,
password,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToDatabase(data)))
.catch(reject);
});

12
resources/scripts/api/admin/databases/getDatabases.ts
View file

@ -13,7 +13,7 @@ export interface Database {
createdAt: Date;
updatedAt: Date;
getAddress (): string;
getAddress(): string;
}
export const rawDataToDatabase = ({ attributes }: FractalResponseData): Database => ({
@ -53,12 +53,14 @@ export default (include: string[] = []) => {
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 useSWR<PaginatedResult<Database>>(['databases', page, filters, sort, sortDirection], async () => {
const { data } = await http.get('/api/application/databases', {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(rawDataToDatabase),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

4
resources/scripts/api/admin/databases/searchDatabases.ts
View file

@ -17,9 +17,7 @@ export default (filters?: Filters): Promise<Database[]> => {
return new Promise((resolve, reject) => {
http.get('/api/application/databases', { params })
.then(response => resolve(
(response.data.data || []).map(rawDataToDatabase)
))
.then(response => resolve((response.data.data || []).map(rawDataToDatabase)))
.catch(reject);
});
};

24
resources/scripts/api/admin/databases/updateDatabase.ts
View file

@ -1,11 +1,27 @@
import http from '@/api/http';
import { Database, rawDataToDatabase } from '@/api/admin/databases/getDatabases';
export default (id: number, name: string, host: string, port: number, username: string, password: string | undefined, include: string[] = []): Promise<Database> => {
export default (
id: number,
name: string,
host: string,
port: number,
username: string,
password: string | undefined,
include: string[] = [],
): Promise<Database> => {
return new Promise((resolve, reject) => {
http.patch(`/api/application/databases/${id}`, {
name, host, port, username, password,
}, { params: { include: include.join(',') } })
http.patch(
`/api/application/databases/${id}`,
{
name,
host,
port,
username,
password,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToDatabase(data)))
.catch(reject);
});

39
resources/scripts/api/admin/eggs/createEgg.ts
View file

@ -1,30 +1,27 @@
import http from '@/api/http';
import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
type Egg2 = Omit<Omit<Partial<Egg>, 'configFiles'>, 'configStartup'> & { configFiles: string, configStartup: string };
type Egg2 = Omit<Omit<Partial<Egg>, 'configFiles'>, 'configStartup'> & { configFiles: string; configStartup: string };
export default (egg: Partial<Egg2>): Promise<Egg> => {
return new Promise((resolve, reject) => {
http.post(
'/api/application/eggs',
{
nest_id: egg.nestId,
name: egg.name,
description: egg.description,
features: egg.features,
docker_images: egg.dockerImages,
config_files: egg.configFiles,
config_startup: egg.configStartup,
config_stop: egg.configStop,
config_from: egg.configFrom,
startup: egg.startup,
script_container: egg.scriptContainer,
copy_script_from: egg.copyScriptFrom,
script_entry: egg.scriptEntry,
script_is_privileged: egg.scriptIsPrivileged,
script_install: egg.scriptInstall,
},
)
http.post('/api/application/eggs', {
nest_id: egg.nestId,
name: egg.name,
description: egg.description,
features: egg.features,
docker_images: egg.dockerImages,
config_files: egg.configFiles,
config_startup: egg.configStartup,
config_stop: egg.configStop,
config_from: egg.configFrom,
startup: egg.startup,
script_container: egg.scriptContainer,
copy_script_from: egg.copyScriptFrom,
script_entry: egg.scriptEntry,
script_is_privileged: egg.scriptIsPrivileged,
script_install: egg.scriptInstall,
})
.then(({ data }) => resolve(rawDataToEgg(data)))
.catch(reject);
});

21
resources/scripts/api/admin/eggs/createEggVariable.ts
View file

@ -5,18 +5,15 @@ import { Transformers } from '@definitions/admin';
export type CreateEggVariable = Omit<EggVariable, 'id' | 'eggId' | 'createdAt' | 'updatedAt' | 'relationships'>;
export default async (eggId: number, variable: CreateEggVariable): Promise<EggVariable> => {
const { data } = await http.post(
`/api/application/eggs/${eggId}/variables`,
{
name: variable.name,
description: variable.description,
env_variable: variable.environmentVariable,
default_value: variable.defaultValue,
user_viewable: variable.isUserViewable,
user_editable: variable.isUserEditable,
rules: variable.rules,
},
);
const { data } = await http.post(`/api/application/eggs/${eggId}/variables`, {
name: variable.name,
description: variable.description,
env_variable: variable.environmentVariable,
default_value: variable.defaultValue,
user_viewable: variable.isUserViewable,
user_editable: variable.isUserEditable,
rules: variable.rules,
});
return Transformers.toEggVariable(data);
};

39
resources/scripts/api/admin/eggs/updateEgg.ts
View file

@ -1,30 +1,27 @@
import http from '@/api/http';
import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
type Egg2 = Omit<Omit<Partial<Egg>, 'configFiles'>, 'configStartup'> & { configFiles?: string, configStartup?: string };
type Egg2 = Omit<Omit<Partial<Egg>, 'configFiles'>, 'configStartup'> & { configFiles?: string; configStartup?: string };
export default (id: number, egg: Partial<Egg2>): Promise<Egg> => {
return new Promise((resolve, reject) => {
http.patch(
`/api/application/eggs/${id}`,
{
nest_id: egg.nestId,
name: egg.name,
description: egg.description,
features: egg.features,
docker_images: egg.dockerImages,
config_files: egg.configFiles,
config_startup: egg.configStartup,
config_stop: egg.configStop,
config_from: egg.configFrom,
startup: egg.startup,
script_container: egg.scriptContainer,
copy_script_from: egg.copyScriptFrom,
script_entry: egg.scriptEntry,
script_is_privileged: egg.scriptIsPrivileged,
script_install: egg.scriptInstall,
},
)
http.patch(`/api/application/eggs/${id}`, {
nest_id: egg.nestId,
name: egg.name,
description: egg.description,
features: egg.features,
docker_images: egg.dockerImages,
config_files: egg.configFiles,
config_startup: egg.configStartup,
config_stop: egg.configStop,
config_from: egg.configFrom,
startup: egg.startup,
script_container: egg.scriptContainer,
copy_script_from: egg.copyScriptFrom,
script_entry: egg.scriptEntry,
script_is_privileged: egg.scriptIsPrivileged,
script_install: egg.scriptInstall,
})
.then(({ data }) => resolve(rawDataToEgg(data)))
.catch(reject);
});

5
resources/scripts/api/admin/eggs/updateEggVariables.ts
View file

@ -2,7 +2,10 @@ import http from '@/api/http';
import { EggVariable } from '@/api/admin/egg';
import { Transformers } from '@definitions/admin';
export default async (eggId: number, variables: Omit<EggVariable, 'eggId' | 'createdAt' | 'updatedAt'>[]): Promise<EggVariable[]> => {
export default async (
eggId: number,
variables: Omit<EggVariable, 'eggId' | 'createdAt' | 'updatedAt'>[],
): Promise<EggVariable[]> => {
const { data } = await http.patch(
`/api/application/eggs/${eggId}/variables`,
variables.map(variable => ({

4
resources/scripts/api/admin/getVersion.ts
View file

@ -4,11 +4,11 @@ export interface VersionData {
panel: {
current: string;
latest: string;
}
};
wings: {
latest: string;
}
};
git: string | null;
}

8
resources/scripts/api/admin/index.ts
View file

@ -13,8 +13,8 @@ export type UUID = string;
export type WithRelationships<M extends Model, R extends string> = Omit<M, 'relationships'> & {
relationships: Omit<M['relationships'], keyof R> & {
[K in R]: NonNullable<M['relationships'][K]>;
}
}
};
};
/**
* Helper type that allows you to infer the type of an object by giving
@ -29,7 +29,7 @@ export type InferModel<T extends (...args: any) => any> = ReturnType<T> extends
* such that TypeScript understands the relationships on it. This is just to help
* reduce the amount of duplicated type casting all over the codebase.
*/
export const withRelationships = <M extends Model, R extends string> (model: M, ..._keys: R[]) => {
export const withRelationships = <M extends Model, R extends string>(model: M, ..._keys: R[]) => {
return model as unknown as WithRelationships<M, R>;
};
@ -47,7 +47,7 @@ export interface ListContext<T> {
setSortDirection: (direction: ((p: boolean) => boolean) | boolean) => void;
}
function create<T> () {
function create<T>() {
return createContext<ListContext<T>>({
page: 1,
setPage: () => 1,

11
resources/scripts/api/admin/locations/createLocation.ts
View file

@ -3,9 +3,14 @@ import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations'
export default (short: string, long: string | null, include: string[] = []): Promise<Location> => {
return new Promise((resolve, reject) => {
http.post('/api/application/locations', {
short, long,
}, { params: { include: include.join(',') } })
http.post(
'/api/application/locations',
{
short,
long,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToLocation(data)))
.catch(reject);
});

10
resources/scripts/api/admin/locations/getLocations.ts
View file

@ -43,12 +43,14 @@ export default (include: string[] = []) => {
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 useSWR<PaginatedResult<Location>>(['locations', page, filters, sort, sortDirection], async () => {
const { data } = await http.get('/api/application/locations', {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(rawDataToLocation),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

4
resources/scripts/api/admin/locations/searchLocations.ts
View file

@ -17,9 +17,7 @@ export default (filters?: Filters): Promise<Location[]> => {
return new Promise((resolve, reject) => {
http.get('/api/application/locations', { params })
.then(response => resolve(
(response.data.data || []).map(rawDataToLocation)
))
.then(response => resolve((response.data.data || []).map(rawDataToLocation)))
.catch(reject);
});
};

11
resources/scripts/api/admin/locations/updateLocation.ts
View file

@ -3,9 +3,14 @@ import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations'
export default (id: number, short: string, long: string | null, include: string[] = []): Promise<Location> => {
return new Promise((resolve, reject) => {
http.patch(`/api/application/locations/${id}`, {
short, long,
}, { params: { include: include.join(',') } })
http.patch(
`/api/application/locations/${id}`,
{
short,
long,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToLocation(data)))
.catch(reject);
});

25
resources/scripts/api/admin/mounts/createMount.ts
View file

@ -1,11 +1,28 @@
import http from '@/api/http';
import { Mount, rawDataToMount } from '@/api/admin/mounts/getMounts';
export default (name: string, description: string, source: string, target: string, readOnly: boolean, userMountable: boolean, include: string[] = []): Promise<Mount> => {
export default (
name: string,
description: string,
source: string,
target: string,
readOnly: boolean,
userMountable: boolean,
include: string[] = [],
): Promise<Mount> => {
return new Promise((resolve, reject) => {
http.post('/api/application/mounts', {
name, description, source, target, read_only: readOnly, user_mountable: userMountable,
}, { params: { include: include.join(',') } })
http.post(
'/api/application/mounts',
{
name,
description,
source,
target,
read_only: readOnly,
user_mountable: userMountable,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToMount(data)))
.catch(reject);
});

14
resources/scripts/api/admin/mounts/getMounts.ts
View file

@ -40,7 +40,9 @@ export const rawDataToMount = ({ attributes }: FractalResponseData): Mount => ({
relations: {
eggs: ((attributes.relationships?.eggs as FractalResponseList | undefined)?.data || []).map(rawDataToEgg),
nodes: ((attributes.relationships?.nodes as FractalResponseList | undefined)?.data || []).map(rawDataToNode),
servers: ((attributes.relationships?.servers as FractalResponseList | undefined)?.data || []).map(rawDataToServer),
servers: ((attributes.relationships?.servers as FractalResponseList | undefined)?.data || []).map(
rawDataToServer,
),
},
});
@ -69,12 +71,14 @@ export default (include: string[] = []) => {
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 useSWR<PaginatedResult<Mount>>(['mounts', page, filters, sort, sortDirection], async () => {
const { data } = await http.get('/api/application/mounts', {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(rawDataToMount),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

26
resources/scripts/api/admin/mounts/updateMount.ts
View file

@ -1,11 +1,29 @@
import http from '@/api/http';
import { Mount, rawDataToMount } from '@/api/admin/mounts/getMounts';
export default (id: number, name: string, description: string | null, source: string, target: string, readOnly: boolean, userMountable: boolean, include: string[] = []): Promise<Mount> => {
export default (
id: number,
name: string,
description: string | null,
source: string,
target: string,
readOnly: boolean,
userMountable: boolean,
include: string[] = [],
): Promise<Mount> => {
return new Promise((resolve, reject) => {
http.patch(`/api/application/mounts/${id}`, {
name, description, source, target, read_only: readOnly, user_mountable: userMountable,
}, { params: { include: include.join(',') } })
http.patch(
`/api/application/mounts/${id}`,
{
name,
description,
source,
target,
read_only: readOnly,
user_mountable: userMountable,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToMount(data)))
.catch(reject);
});

11
resources/scripts/api/admin/nests/createNest.ts
View file

@ -3,9 +3,14 @@ import { Nest, rawDataToNest } from '@/api/admin/nests/getNests';
export default (name: string, description: string | null, include: string[] = []): Promise<Nest> => {
return new Promise((resolve, reject) => {
http.post('/api/application/nests', {
name, description,
}, { params: { include: include.join(',') } })
http.post(
'/api/application/nests',
{
name,
description,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToNest(data)))
.catch(reject);
});

10
resources/scripts/api/admin/nests/getEggs.ts
View file

@ -27,12 +27,14 @@ export default (nestId: number, include: string[] = []) => {
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 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 ({
return {
items: (data.data || []).map(rawDataToEgg),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

12
resources/scripts/api/admin/nests/getNests.ts
View file

@ -15,7 +15,7 @@ export interface Nest {
relations: {
eggs: Egg[] | undefined;
},
};
}
export const rawDataToNest = ({ attributes }: FractalResponseData): Nest => ({
@ -55,12 +55,14 @@ export default (include: string[] = []) => {
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 useSWR<PaginatedResult<Nest>>(['nests', page, filters, sort, sortDirection], async () => {
const { data } = await http.get('/api/application/nests', {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(rawDataToNest),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

11
resources/scripts/api/admin/nests/updateNest.ts
View file

@ -3,9 +3,14 @@ import { Nest, rawDataToNest } from '@/api/admin/nests/getNests';
export default (id: number, name: string, description: string | null, include: string[] = []): Promise<Nest> => {
return new Promise((resolve, reject) => {
http.patch(`/api/application/nests/${id}`, {
name, description,
}, { params: { include: include.join(',') } })
http.patch(
`/api/application/nests/${id}`,
{
name,
description,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToNest(data)))
.catch(reject);
});

7
resources/scripts/api/admin/node.ts
View file

@ -60,7 +60,7 @@ export interface Node extends Model {
export const getNode = async (id: string | number): Promise<WithRelationships<Node, 'location'>> => {
const { data } = await http.get(`/api/application/nodes/${id}`, {
params: {
include: [ 'location' ],
include: ['location'],
},
});
@ -75,7 +75,10 @@ export const searchNodes = async (params: QueryBuilderParams<'name'>): Promise<N
return data.data.map(Transformers.toNode);
};
export const getAllocations = async (id: string | number, params?: QueryBuilderParams<'ip' | 'server_id'>): Promise<Allocation[]> => {
export const getAllocations = async (
id: string | number,
params?: QueryBuilderParams<'ip' | 'server_id'>,
): Promise<Allocation[]> => {
const { data } = await http.get(`/api/application/nodes/${id}/allocations`, {
params: withQueryBuilderParams(params),
});

10
resources/scripts/api/admin/nodes/allocations/getAllocations.ts
View file

@ -28,12 +28,14 @@ export default (id: number, include: string[] = []) => {
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 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 ({
return {
items: (data.data || []).map(rawDataToAllocation),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

2
resources/scripts/api/admin/nodes/createNode.ts
View file

@ -25,7 +25,7 @@ export interface Values {
export default (values: Values, include: string[] = []): Promise<Node> => {
const data = {};
Object.keys(values).forEach((key) => {
Object.keys(values).forEach(key => {
const key2 = key
.replace('HTTP', 'Http')
.replace('SFTP', 'Sftp')

13
resources/scripts/api/admin/nodes/getAllocations.ts
View file

@ -11,9 +11,9 @@ export interface Allocation {
relations: {
server?: Server;
}
};
getDisplayText (): string;
getDisplayText(): string;
}
export const rawDataToAllocation = ({ attributes }: FractalResponseData): Allocation => ({
@ -25,11 +25,14 @@ export const rawDataToAllocation = ({ attributes }: FractalResponseData): Alloca
assigned: attributes.assigned,
relations: {
server: attributes.relationships?.server?.object === 'server' ? rawDataToServer(attributes.relationships.server as FractalResponseData) : undefined,
server:
attributes.relationships?.server?.object === 'server'
? rawDataToServer(attributes.relationships.server as FractalResponseData)
: undefined,
},
// TODO: If IP is an IPv6, wrap IP in [].
getDisplayText (): string {
getDisplayText(): string {
if (attributes.alias !== null) {
return `${attributes.ip}:${attributes.port} (${attributes.alias})`;
}
@ -38,7 +41,7 @@ export const rawDataToAllocation = ({ attributes }: FractalResponseData): Alloca
});
export interface Filters {
ip?: string
ip?: string;
/* eslint-disable camelcase */
server_id?: string;
/* eslint-enable camelcase */

23
resources/scripts/api/admin/nodes/getNodes.ts
View file

@ -33,7 +33,7 @@ export interface Node {
relations: {
databaseHost: Database | undefined;
location: Location | undefined;
}
};
}
export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
@ -63,8 +63,15 @@ export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
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,
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,
},
});
@ -96,12 +103,14 @@ export default (include: string[] = []) => {
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 useSWR<PaginatedResult<Node>>(['nodes', page, filters, sort, sortDirection], async () => {
const { data } = await http.get('/api/application/nodes', {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(rawDataToNode),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

2
resources/scripts/api/admin/nodes/updateNode.ts
View file

@ -4,7 +4,7 @@ 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) => {
Object.keys(node).forEach(key => {
const key2 = key
.replace('HTTP', 'Http')
.replace('SFTP', 'Sftp')

52
resources/scripts/api/admin/roles.ts
View file

@ -13,9 +13,14 @@ export const Context = createContext<Filters>();
const createRole = (name: string, description: string | null, include: string[] = []): Promise<UserRole> => {
return new Promise((resolve, reject) => {
http.post('/api/application/roles', {
name, description,
}, { params: { include: include.join(',') } })
http.post(
'/api/application/roles',
{
name,
description,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(Transformers.toUserRole(data)))
.catch(reject);
});
@ -48,18 +53,26 @@ const searchRoles = (filters?: { name?: string }): Promise<UserRole[]> => {
return new Promise((resolve, reject) => {
http.get('/api/application/roles', { params })
.then(response => resolve(
(response.data.data || []).map(Transformers.toUserRole)
))
.then(response => resolve((response.data.data || []).map(Transformers.toUserRole)))
.catch(reject);
});
};
const updateRole = (id: number, name: string, description: string | null, include: string[] = []): Promise<UserRole> => {
const updateRole = (
id: number,
name: string,
description: string | null,
include: string[] = [],
): Promise<UserRole> => {
return new Promise((resolve, reject) => {
http.patch(`/api/application/roles/${id}`, {
name, description,
}, { params: { include: include.join(',') } })
http.patch(
`/api/application/roles/${id}`,
{
name,
description,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(Transformers.toUserRole(data)))
.catch(reject);
});
@ -83,21 +96,16 @@ const getRoles = (include: string[] = []) => {
}
// eslint-disable-next-line react-hooks/rules-of-hooks
return useSWR<PaginatedResult<UserRole>>([ 'roles', page, filters, sort, sortDirection ], async () => {
const { data } = await http.get('/api/application/roles', { params: { include: include.join(','), page, ...params } });
return useSWR<PaginatedResult<UserRole>>(['roles', page, filters, sort, sortDirection], async () => {
const { data } = await http.get('/api/application/roles', {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(Transformers.toUserRole),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};
export {
createRole,
deleteRole,
getRole,
searchRoles,
updateRole,
getRoles,
};
export { createRole, deleteRole, getRole, searchRoles, updateRole, getRoles };

72
resources/scripts/api/admin/servers/createServer.ts
View file

@ -16,7 +16,7 @@ export interface CreateServerRequest {
cpu: number;
threads: string;
oomDisabled: boolean;
}
};
featureLimits: {
allocations: number;
@ -39,41 +39,45 @@ export interface CreateServerRequest {
export default (r: CreateServerRequest, include: string[] = []): Promise<Server> => {
return new Promise((resolve, reject) => {
http.post('/api/application/servers', {
externalId: r.externalId,
name: r.name,
description: r.description,
owner_id: r.ownerId,
node_id: r.nodeId,
http.post(
'/api/application/servers',
{
externalId: r.externalId,
name: r.name,
description: r.description,
owner_id: r.ownerId,
node_id: r.nodeId,
limits: {
cpu: r.limits.cpu,
disk: r.limits.disk,
io: r.limits.io,
memory: r.limits.memory,
swap: r.limits.swap,
threads: r.limits.threads,
oom_killer: r.limits.oomDisabled,
limits: {
cpu: r.limits.cpu,
disk: r.limits.disk,
io: r.limits.io,
memory: r.limits.memory,
swap: r.limits.swap,
threads: r.limits.threads,
oom_killer: r.limits.oomDisabled,
},
feature_limits: {
allocations: r.featureLimits.allocations,
backups: r.featureLimits.backups,
databases: r.featureLimits.databases,
},
allocation: {
default: r.allocation.default,
additional: r.allocation.additional,
},
startup: r.startup,
environment: r.environment,
egg_id: r.eggId,
image: r.image,
skip_scripts: r.skipScripts,
start_on_completion: r.startOnCompletion,
},
feature_limits: {
allocations: r.featureLimits.allocations,
backups: r.featureLimits.backups,
databases: r.featureLimits.databases,
},
allocation: {
default: r.allocation.default,
additional: r.allocation.additional,
},
startup: r.startup,
environment: r.environment,
egg_id: r.eggId,
image: r.image,
skip_scripts: r.skipScripts,
start_on_completion: r.startOnCompletion,
}, { params: { include: include.join(',') } })
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToServer(data)))
.catch(reject);
});

118
resources/scripts/api/admin/servers/getServers.ts
View file

@ -41,7 +41,7 @@ export const rawDataToServerVariable = ({ attributes }: FractalResponseData): Se
export interface Server {
id: number;
externalId: string | null
externalId: string | null;
uuid: string;
identifier: string;
name: string;
@ -56,13 +56,13 @@ export interface Server {
cpu: number;
threads: string | null;
oomDisabled: boolean;
}
};
featureLimits: {
databases: number;
allocations: number;
backups: number;
}
};
ownerId: number;
nodeId: number;
@ -74,7 +74,7 @@ export interface Server {
startup: string;
image: string;
environment: Map<string, string>;
}
};
createdAt: Date;
updatedAt: Date;
@ -85,57 +85,71 @@ export interface Server {
node?: Node;
user?: User;
variables: ServerVariable[];
}
};
}
export const rawDataToServer = ({ attributes }: FractalResponseData): Server => ({
id: attributes.id,
externalId: attributes.external_id,
uuid: attributes.uuid,
identifier: attributes.identifier,
name: attributes.name,
description: attributes.description,
status: attributes.status,
export const rawDataToServer = ({ attributes }: FractalResponseData): Server =>
({
id: attributes.id,
externalId: attributes.external_id,
uuid: attributes.uuid,
identifier: attributes.identifier,
name: attributes.name,
description: attributes.description,
status: attributes.status,
limits: {
memory: attributes.limits.memory,
swap: attributes.limits.swap,
disk: attributes.limits.disk,
io: attributes.limits.io,
cpu: attributes.limits.cpu,
threads: attributes.limits.threads,
oomDisabled: attributes.limits.oom_disabled,
},
limits: {
memory: attributes.limits.memory,
swap: attributes.limits.swap,
disk: attributes.limits.disk,
io: attributes.limits.io,
cpu: attributes.limits.cpu,
threads: attributes.limits.threads,
oomDisabled: attributes.limits.oom_disabled,
},
featureLimits: {
databases: attributes.feature_limits.databases,
allocations: attributes.feature_limits.allocations,
backups: attributes.feature_limits.backups,
},
featureLimits: {
databases: attributes.feature_limits.databases,
allocations: attributes.feature_limits.allocations,
backups: attributes.feature_limits.backups,
},
ownerId: attributes.owner_id,
nodeId: attributes.node_id,
allocationId: attributes.allocation_id,
nestId: attributes.nest_id,
eggId: attributes.egg_id,
ownerId: attributes.owner_id,
nodeId: attributes.node_id,
allocationId: attributes.allocation_id,
nestId: attributes.nest_id,
eggId: attributes.egg_id,
container: {
startup: attributes.container.startup,
image: attributes.container.image,
environment: attributes.container.environment,
},
container: {
startup: attributes.container.startup,
image: attributes.container.image,
environment: attributes.container.environment,
},
createdAt: new Date(attributes.created_at),
updatedAt: new Date(attributes.updated_at),
createdAt: new Date(attributes.created_at),
updatedAt: new Date(attributes.updated_at),
relations: {
allocations: ((attributes.relationships?.allocations as FractalResponseList | undefined)?.data || []).map(rawDataToAllocation),
egg: attributes.relationships?.egg?.object === 'egg' ? rawDataToEgg(attributes.relationships.egg as FractalResponseData) : undefined,
node: attributes.relationships?.node?.object === 'node' ? rawDataToNode(attributes.relationships.node as FractalResponseData) : undefined,
user: attributes.relationships?.user?.object === 'user' ? Transformers.toUser(attributes.relationships.user as FractalResponseData) : undefined,
variables: ((attributes.relationships?.variables as FractalResponseList | undefined)?.data || []).map(rawDataToServerVariable),
},
}) as Server;
relations: {
allocations: ((attributes.relationships?.allocations as FractalResponseList | undefined)?.data || []).map(
rawDataToAllocation,
),
egg:
attributes.relationships?.egg?.object === 'egg'
? rawDataToEgg(attributes.relationships.egg as FractalResponseData)
: undefined,
node:
attributes.relationships?.node?.object === 'node'
? rawDataToNode(attributes.relationships.node as FractalResponseData)
: undefined,
user:
attributes.relationships?.user?.object === 'user'
? Transformers.toUser(attributes.relationships.user as FractalResponseData)
: undefined,
variables: ((attributes.relationships?.variables as FractalResponseList | undefined)?.data || []).map(
rawDataToServerVariable,
),
},
} as Server);
export interface Filters {
id?: string;
@ -166,12 +180,14 @@ export default (include: string[] = []) => {
params.sort = (sortDirection ? '-' : '') + sort;
}
return useSWR<PaginatedResult<Server>>([ 'servers', page, filters, sort, sortDirection ], async () => {
const { data } = await http.get('/api/application/servers', { params: { include: include.join(','), page, ...params } });
return useSWR<PaginatedResult<Server>>(['servers', page, filters, sort, sortDirection], async () => {
const { data } = await http.get('/api/application/servers', {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(rawDataToServer),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

6
resources/scripts/api/admin/servers/updateServer.ts
View file

@ -14,13 +14,13 @@ export interface Values {
cpu: number;
threads: string;
oomDisabled: boolean;
}
};
featureLimits: {
allocations: number;
backups: number;
databases: number;
}
};
allocationId: number;
addAllocations: number[];
@ -56,7 +56,7 @@ export default (id: number, server: Partial<Values>, include: string[] = []): Pr
add_allocations: server.addAllocations,
remove_allocations: server.removeAllocations,
},
{ params: { include: include.join(',') } }
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToServer(data)))
.catch(reject);

2
resources/scripts/api/admin/servers/updateServerStartup.ts
View file

@ -20,7 +20,7 @@ export default (id: number, values: Partial<Values>, include: string[] = []): Pr
image: values.image,
skip_scripts: values.skipScripts,
},
{ params: { include: include.join(',') } }
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToServer(data)))
.catch(reject);

8
resources/scripts/components/NavigationBar.tsx
View file

@ -46,13 +46,13 @@ export default () => {
};
return (
<div className="w-full bg-neutral-900 shadow-md overflow-x-auto">
<div className="w-full overflow-x-auto bg-neutral-900 shadow-md">
<SpinnerOverlay visible={isLoggingOut} />
<div className="mx-auto w-full flex items-center h-[3.5rem] max-w-[1200px]">
<div className="mx-auto flex h-[3.5rem] w-full max-w-[1200px] items-center">
<div id="logo" className="flex-1">
<Link
to="/"
className="text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150"
className="px-4 font-header text-2xl text-neutral-200 no-underline transition-colors duration-150 hover:text-neutral-100"
>
{name}
</Link>
@ -69,7 +69,7 @@ export default () => {
<Tooltip placement="bottom" content="Account Settings">
<NavLink to="/account">
<span className="flex items-center w-5 h-5">
<span className="flex h-5 w-5 items-center">
<Avatar.User />
</span>
</NavLink>

2
resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx
View file

@ -197,8 +197,6 @@ export default function EggSettingsContainer() {
dockerImages[alias] = image;
}
console.log(dockerImages);
updateEgg(egg.id, {
...values,
dockerImages,

1
resources/scripts/components/admin/servers/OwnerSelect.tsx
View file

@ -16,7 +16,6 @@ export default ({ selected }: { selected?: User }) => {
};
const onSelect = (user: User | null) => {
console.log(user);
setUser(user);
setFieldValue('ownerId', user?.id || null);
};

2
resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
View file

@ -27,8 +27,6 @@ export default () => {
// OOM Killer is enabled, rather than when disabled.
values.limits.oomDisabled = !values.limits.oomDisabled;
console.log(values);
updateServer(server.id, values)
.then(() => {
// setServer({ ...server, ...s });

1
resources/scripts/components/admin/servers/ServerStartupContainer.tsx
View file

@ -33,7 +33,6 @@ function ServerStartupLineContainer({ egg, server }: { egg: Egg | null; server:
}
if (server.eggId === egg.id) {
console.log(server.container);
setFieldValue('image', server.container.image);
setFieldValue('startup', server.container.startup || '');
return;

14
resources/scripts/components/admin/users/UserTableRow.tsx
View file

@ -30,14 +30,14 @@ const UserTableRow = ({ user, selected, onRowChange }: Props) => {
<tr>
<td className={'whitespace-nowrap'}>
<div className={'flex justify-end items-center w-8'}>
<div className={'flex w-8 items-center justify-end'}>
<Checkbox checked={selected} onChange={e => onRowChange(user, e.currentTarget.checked)} />
</div>
</td>
<td className={'pl-6 py-4 whitespace-nowrap'}>
<td className={'whitespace-nowrap py-4 pl-6'}>
<div className={'flex items-center'}>
<div className={'w-10 h-10'}>
<img src={user.avatarUrl} className={'w-10 h-10 rounded-full'} alt={'User avatar'} />
<div className={'h-10 w-10'}>
<img src={user.avatarUrl} className={'h-10 w-10 rounded-full'} alt={'User avatar'} />
</div>
<div className={'ml-4'}>
<p className={'font-medium'}>{user.email}</p>
@ -45,18 +45,18 @@ const UserTableRow = ({ user, selected, onRowChange }: Props) => {
</div>
</div>
</td>
<td className={'pl-2 py-4 whitespace-nowrap'}>
<td className={'whitespace-nowrap py-4 pl-2'}>
{user.isUsingTwoFactor && (
<span
className={
'bg-green-100 uppercase text-green-700 font-semibold text-xs px-2 py-0.5 rounded'
'rounded bg-green-100 px-2 py-0.5 text-xs font-semibold uppercase text-green-700'
}
>
2-FA Enabled
</span>
)}
</td>
<td className={'px-6 py-4 whitespace-nowrap'}>
<td className={'whitespace-nowrap px-6 py-4'}>
<Dropdown>
<Dropdown.Button className={'px-2'}>
<DotsVerticalIcon />

14
resources/scripts/components/admin/users/UsersContainer.tsx
View file

@ -42,9 +42,9 @@ const UsersContainer = () => {
return (
<div>
<div className={'flex justify-end mb-4'}>
<div className={'mb-4 flex justify-end'}>
<Button className={'shadow focus:ring-offset-2 focus:ring-offset-neutral-800'}>
Add User <PlusIcon className={'ml-2 w-5 h-5'} />
Add User <PlusIcon className={'ml-2 h-5 w-5'} />
</Button>
</div>
<div className={'relative flex items-center rounded-t bg-neutral-700 px-4 py-2'}>
@ -68,7 +68,7 @@ const UsersContainer = () => {
<Transition.Fade as={Fragment} show={selected.length > 0} duration={'duration-75'}>
<div
className={
'absolute rounded-t bg-neutral-700 w-full h-full top-0 left-0 flex items-center justify-end space-x-4 px-4'
'absolute top-0 left-0 flex h-full w-full items-center justify-end space-x-4 rounded-t bg-neutral-700 px-4'
}
>
<div className={'flex-1'}>
@ -79,13 +79,13 @@ const UsersContainer = () => {
/>
</div>
<Button.Text shape={Shape.IconSquare}>
<SupportIcon className={'w-4 h-4'} />
<SupportIcon className={'h-4 w-4'} />
</Button.Text>
<Button.Text shape={Shape.IconSquare}>
<LockOpenIcon className={'w-4 h-4'} />
<LockOpenIcon className={'h-4 w-4'} />
</Button.Text>
<Button.Text shape={Shape.IconSquare}>
<TrashIcon className={'w-4 h-4'} />
<TrashIcon className={'h-4 w-4'} />
</Button.Text>
</div>
</Transition.Fade>
@ -94,7 +94,7 @@ const UsersContainer = () => {
<thead className={'bg-neutral-900'}>
<tr>
<th scope={'col'} className={'w-8'} />
<th scope={'col'} className={'text-left px-6 py-2 w-full'}>
<th scope={'col'} className={'w-full px-6 py-2 text-left'}>
Email
</th>
<th scope={'col'} />

4
resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx
View file

@ -34,13 +34,13 @@ export default () => {
<PageContentBlock title={'Account Activity Log'}>
<FlashMessageRender byKey={'account'} />
{(filters.filters?.event || filters.filters?.ip) && (
<div className={'flex justify-end mb-2'}>
<div className={'mb-2 flex justify-end'}>
<Link
to={'#'}
className={classNames(btnStyles.button, btnStyles.text, 'w-full sm:w-auto')}
onClick={() => setFilters(value => ({ ...value, filters: {} }))}
>
Clear Filters <XCircleIcon className={'w-4 h-4 ml-2'} />
Clear Filters <XCircleIcon className={'ml-2 h-4 w-4'} />
</Link>
</div>
)}

2
resources/scripts/components/dashboard/forms/RecoveryTokensDialog.tsx
View file

@ -28,7 +28,7 @@ export default ({ tokens, open, onClose }: RecoveryTokenDialogProps) => {
>
<Dialog.Icon position={'container'} type={'success'} />
<CopyOnClick text={tokens.join('\n')} showInNotification={false}>
<pre className={'bg-slate-800 rounded p-2 mt-6'}>
<pre className={'mt-6 rounded bg-slate-800 p-2'}>
{grouped.map(value => (
<span key={value.join('_')} className={'block'}>
{value[0]}

6
resources/scripts/components/dashboard/forms/SetupTOTPDialog.tsx
View file

@ -62,7 +62,7 @@ const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
return (
<form id={'enable-totp-form'} onSubmit={submit}>
<FlashMessageRender byKey={'account:two-step'} className={'mt-4'} />
<div className={'flex items-center justify-center w-56 h-56 p-2 bg-slate-50 shadow mx-auto mt-6'}>
<div className={'mx-auto mt-6 flex h-56 w-56 items-center justify-center bg-slate-50 p-2 shadow'}>
{!token ? (
<Spinner />
) : (
@ -70,7 +70,7 @@ const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
)}
</div>
<CopyOnClick text={token?.secret}>
<p className={'font-mono text-sm text-slate-100 text-center mt-2'}>
<p className={'mt-2 text-center font-mono text-sm text-slate-100'}>
{token?.secret.match(/.{1,4}/g)!.join(' ') || 'Loading...'}
</p>
</CopyOnClick>
@ -90,7 +90,7 @@ const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
autoComplete={'one-time-code'}
pattern={'\\d{6}'}
/>
<label htmlFor={'totp-password'} className={'block mt-3'}>
<label htmlFor={'totp-password'} className={'mt-3 block'}>
Account Password
</label>
<Input.Text

2
resources/scripts/components/elements/Code.tsx
View file

@ -9,7 +9,7 @@ interface CodeProps {
export default ({ dark, className, children }: CodeProps) => (
<code
className={classNames('font-mono text-sm px-2 py-1 inline-block rounded', className, {
className={classNames('inline-block rounded px-2 py-1 font-mono text-sm', className, {
'bg-neutral-700': !dark,
'bg-neutral-900 text-slate-100': dark,
})}

4
resources/scripts/components/elements/CopyOnClick.tsx
View file

@ -50,8 +50,8 @@ const CopyOnClick = ({ text, showInNotification = true, children }: CopyOnClickP
{copied && (
<Portal>
<FadeTransition show duration="duration-250" key={copied ? 'visible' : 'invisible'}>
<div className="fixed z-50 bottom-0 right-0 m-4">
<div className="rounded-md py-3 px-4 text-slate-200 bg-neutral-600/95 shadow">
<div className="fixed bottom-0 right-0 z-50 m-4">
<div className="rounded-md bg-neutral-600/95 py-3 px-4 text-slate-200 shadow">
<p>
{showInNotification
? `Copied "${String(text)}" to clipboard.`

148
resources/scripts/components/elements/SearchableSelect.tsx
View file

@ -26,7 +26,15 @@ interface IdObj {
id: number;
}
export const Option = <T extends IdObj>({ selectId, id, item, active, isHighlighted, onClick, children }: OptionProps<T>) => {
export const Option = <T extends IdObj>({
selectId,
id,
item,
active,
isHighlighted,
onClick,
children,
}: OptionProps<T>) => {
if (isHighlighted === undefined) {
isHighlighted = false;
}
@ -39,16 +47,32 @@ export const Option = <T extends IdObj>({ selectId, id, item, active, isHighligh
if (active) {
return (
<li id={selectId + '-select-item-' + id} role="option" css={[ tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`, isHighlighted ? tw`bg-neutral-700` : null ]} onClick={onClick(item)}>
<li
id={selectId + '-select-item-' + id}
role="option"
css={[
tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`,
isHighlighted ? tw`bg-neutral-700` : null,
]}
onClick={onClick(item)}
>
<div css={tw`flex items-center`}>
<span css={tw`block font-medium truncate`}>
{children}
</span>
<span css={tw`block font-medium truncate`}>{children}</span>
</div>
<span css={tw`absolute inset-y-0 right-0 flex items-center pr-4`}>
<svg css={tw`w-5 h-5 text-primary-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path clipRule="evenodd" fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
<svg
css={tw`w-5 h-5 text-primary-400`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
clipRule="evenodd"
fillRule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
/>
</svg>
</span>
</li>
@ -56,11 +80,17 @@ export const Option = <T extends IdObj>({ selectId, id, item, active, isHighligh
}
return (
<li id={selectId + 'select-item-' + id} role="option" css={[ tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`, isHighlighted ? tw`bg-neutral-700` : null ]} onClick={onClick(item)}>
<li
id={selectId + 'select-item-' + id}
role="option"
css={[
tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`,
isHighlighted ? tw`bg-neutral-700` : null,
]}
onClick={onClick(item)}
>
<div css={tw`flex items-center`}>
<span css={tw`block font-normal truncate`}>
{children}
</span>
<span css={tw`block font-normal truncate`}>{children}</span>
</div>
</li>
);
@ -88,13 +118,27 @@ interface SearchableSelectProps<T> {
className?: string;
}
export const SearchableSelect = <T extends IdObj>({ id, name, label, placeholder, selected, setSelected, items, setItems, onSearch, onSelect, getSelectedText, children, className }: SearchableSelectProps<T>) => {
const [ loading, setLoading ] = useState(false);
const [ expanded, setExpanded ] = useState(false);
export const SearchableSelect = <T extends IdObj>({
id,
name,
label,
placeholder,
selected,
setSelected,
items,
setItems,
onSearch,
onSelect,
getSelectedText,
children,
className,
}: SearchableSelectProps<T>) => {
const [loading, setLoading] = useState(false);
const [expanded, setExpanded] = useState(false);
const [ inputText, setInputText ] = useState('');
const [inputText, setInputText] = useState('');
const [ highlighted, setHighlighted ] = useState<number | null>(null);
const [highlighted, setHighlighted] = useState<number | null>(null);
const searchInput = createRef<HTMLInputElement>();
const itemsList = createRef<HTMLDivElement>();
@ -220,7 +264,7 @@ export const SearchableSelect = <T extends IdObj>({ id, name, label, placeholder
window.removeEventListener('mousedown', clickHandler);
window.removeEventListener('contextmenu', contextmenuHandler);
};
}, [ expanded ]);
}, [expanded]);
const onClick = (item: T) => () => {
onSelect(item);
@ -235,13 +279,15 @@ export const SearchableSelect = <T extends IdObj>({ id, name, label, placeholder
}
setInputText(getSelectedText(selected) || '');
}, [ selected ]);
}, [selected]);
// This shit is really stupid but works, so is it really stupid?
const c = React.Children.map(children, child => React.cloneElement(child as ReactElement, {
isHighlighted: ((child as ReactElement).props as OptionProps<T>).id === highlighted,
onClick: onClick.bind(child),
}));
const c = React.Children.map(children, child =>
React.cloneElement(child as ReactElement, {
isHighlighted: ((child as ReactElement).props as OptionProps<T>).id === highlighted,
onClick: onClick.bind(child),
}),
);
return (
<div className={className}>
@ -269,33 +315,57 @@ export const SearchableSelect = <T extends IdObj>({ id, name, label, placeholder
/>
</InputSpinner>
<div css={[ tw`absolute inset-y-0 right-0 flex items-center pr-2 ml-3`, !expanded && tw`pointer-events-none` ]}>
{inputText !== '' && expanded &&
<svg css={tw`w-5 h-5 text-neutral-400 cursor-pointer`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
onMouseDown={e => {
e.preventDefault();
setInputText('');
}}
<div
css={[
tw`absolute inset-y-0 right-0 flex items-center pr-2 ml-3`,
!expanded && tw`pointer-events-none`,
]}
>
{inputText !== '' && expanded && (
<svg
css={tw`w-5 h-5 text-neutral-400 cursor-pointer`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
onMouseDown={e => {
e.preventDefault();
setInputText('');
}}
>
<path
clipRule="evenodd"
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
/>
</svg>
)}
<svg
css={tw`w-5 h-5 text-neutral-400 pointer-events-none`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path clipRule="evenodd" fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
</svg>
}
<svg css={tw`w-5 h-5 text-neutral-400 pointer-events-none`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path clipRule="evenodd" fillRule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"/>
<path
clipRule="evenodd"
fillRule="evenodd"
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
/>
</svg>
</div>
<Dropdown ref={itemsList} expanded={expanded}>
{items === null || items.length < 1 ?
items === null || inputText.length < 2 ?
{items === null || items.length < 1 ? (
items === null || inputText.length < 2 ? (
<div css={tw`flex flex-row items-center h-10 px-3`}>
<p css={tw`text-sm`}>Please type 2 or more characters.</p>
</div>
:
) : (
<div css={tw`flex flex-row items-center h-10 px-3`}>
<p css={tw`text-sm`}>No results found.</p>
</div>
:
)
) : (
<ul
tabIndex={-1}
role={id + '-select'}
@ -305,7 +375,7 @@ export const SearchableSelect = <T extends IdObj>({ id, name, label, placeholder
>
{c}
</ul>
}
)}
</Dropdown>
</div>
</div>

218
resources/scripts/components/elements/SelectField.tsx
View file

@ -1,7 +1,22 @@
import { CSSObject } from '@emotion/serialize';
import { Field as FormikField, FieldProps } from 'formik';
import React, { forwardRef } from 'react';
import Select, { ContainerProps, ControlProps, GroupProps, IndicatorContainerProps, IndicatorProps, InputProps, MenuListComponentProps, MenuProps, MultiValueProps, OptionProps, PlaceholderProps, SingleValueProps, StylesConfig, ValueContainerProps } from 'react-select';
import Select, {
ContainerProps,
ControlProps,
GroupProps,
IndicatorContainerProps,
IndicatorProps,
InputProps,
MenuListComponentProps,
MenuProps,
MultiValueProps,
OptionProps,
PlaceholderProps,
SingleValueProps,
StylesConfig,
ValueContainerProps,
} from 'react-select';
import Async from 'react-select/async';
import Creatable from 'react-select/creatable';
import tw, { theme } from 'twin.macro';
@ -42,10 +57,9 @@ export const SelectStyle: StylesConfig<T, any, any> = {
borderWidth: '2px',
color: theme`colors.neutral.200`,
cursor: 'pointer',
boxShadow: props.isFocused ?
'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(36, 135, 235, 0.5) 0px 0px 0px 2px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px'
:
undefined,
boxShadow: props.isFocused
? 'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(36, 135, 235, 0.5) 0px 0px 0px 2px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px'
: undefined,
':hover': {
borderColor: !props.isFocused ? theme`colors.neutral.400` : theme`colors.primary.300`,
@ -228,67 +242,74 @@ interface SelectFieldProps {
isSearchable?: boolean;
isCreatable?: boolean;
isValidNewOption?: ((
inputValue: string,
value: ValueType<any, boolean>,
options: ReadonlyArray<any>,
) => boolean) | undefined;
isValidNewOption?:
| ((inputValue: string, value: ValueType<any, boolean>, options: ReadonlyArray<any>) => boolean)
| undefined;
className?: string;
}
const SelectField = forwardRef<HTMLElement, SelectFieldProps>(
function Select2 ({ id, name, label, description, validate, className, isMulti, isCreatable, ...props }, ref) {
const { options } = props;
const SelectField = forwardRef<HTMLElement, SelectFieldProps>(function Select2(
{ id, name, label, description, validate, className, isMulti, isCreatable, ...props },
ref,
) {
const { options } = props;
const onChange = (options: Option | Option[], name: string, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void) => {
if (isMulti) {
setFieldValue(name, (options as Option[]).map(o => o.value));
return;
}
const onChange = (
options: Option | Option[],
name: string,
setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void,
) => {
if (isMulti) {
setFieldValue(
name,
(options as Option[]).map(o => o.value),
);
return;
}
setFieldValue(name, (options as Option).value);
};
setFieldValue(name, (options as Option).value);
};
return (
<FormikField innerRef={ref} name={name} validate={validate}>
{({ field, form: { errors, touched, setFieldValue } }: FieldProps) => (
<div className={className}>
{label && <Label htmlFor={id}>{label}</Label>}
{isCreatable ?
<Creatable
{...field}
{...props}
styles={SelectStyle}
options={options}
value={(options ? options.find(o => o.value === field.value) : '') as any}
onChange={o => onChange(o, name, setFieldValue)}
isMulti={isMulti}
/>
:
<Select
{...field}
{...props}
styles={SelectStyle}
options={options}
value={(options ? options.find(o => o.value === field.value) : '') as any}
onChange={o => onChange(o, name, setFieldValue)}
isMulti={isMulti}
/>
}
{touched[field.name] && errors[field.name] ?
<p css={tw`text-red-200 text-xs mt-1`}>
{(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
</p>
:
description ? <p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p> : null
}
</div>
)}
</FormikField>
);
}
);
return (
<FormikField innerRef={ref} name={name} validate={validate}>
{({ field, form: { errors, touched, setFieldValue } }: FieldProps) => (
<div className={className}>
{label && <Label htmlFor={id}>{label}</Label>}
{isCreatable ? (
<Creatable
{...field}
{...props}
styles={SelectStyle}
options={options}
value={(options ? options.find(o => o.value === field.value) : '') as any}
onChange={o => onChange(o, name, setFieldValue)}
isMulti={isMulti}
/>
) : (
<Select
{...field}
{...props}
styles={SelectStyle}
options={options}
value={(options ? options.find(o => o.value === field.value) : '') as any}
onChange={o => onChange(o, name, setFieldValue)}
isMulti={isMulti}
/>
)}
{touched[field.name] && errors[field.name] ? (
<p css={tw`text-red-200 text-xs mt-1`}>
{(errors[field.name] as string).charAt(0).toUpperCase() +
(errors[field.name] as string).slice(1)}
</p>
) : description ? (
<p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p>
) : null}
</div>
)}
</FormikField>
);
});
interface AsyncSelectFieldProps {
id?: string;
@ -305,43 +326,52 @@ interface AsyncSelectFieldProps {
loadOptions(inputValue: string, callback: (options: Array<Option>) => void): void;
}
const AsyncSelectField = forwardRef<HTMLElement, AsyncSelectFieldProps>(
function AsyncSelect2 ({ id, name, label, description, validate, className, isMulti, ...props }, ref) {
const onChange = (options: Option | Option[], name: string, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void) => {
if (isMulti) {
setFieldValue(name, (options as Option[]).map(o => Number(o.value)));
return;
}
const AsyncSelectField = forwardRef<HTMLElement, AsyncSelectFieldProps>(function AsyncSelect2(
{ id, name, label, description, validate, className, isMulti, ...props },
ref,
) {
const onChange = (
options: Option | Option[],
name: string,
setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void,
) => {
if (isMulti) {
setFieldValue(
name,
(options as Option[]).map(o => Number(o.value)),
);
return;
}
setFieldValue(name, Number((options as Option).value));
};
setFieldValue(name, Number((options as Option).value));
};
return (
<FormikField innerRef={ref} name={name} validate={validate}>
{({ field, form: { errors, touched, setFieldValue } }: FieldProps) => (
<div className={className}>
{label && <Label htmlFor={id}>{label}</Label>}
<Async
{...props}
id={id}
name={name}
styles={SelectStyle}
onChange={o => onChange(o, name, setFieldValue)}
isMulti={isMulti}
/>
{touched[field.name] && errors[field.name] ?
<p css={tw`text-red-200 text-xs mt-1`}>
{(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
</p>
:
description ? <p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p> : null
}
</div>
)}
</FormikField>
);
}
);
return (
<FormikField innerRef={ref} name={name} validate={validate}>
{({ field, form: { errors, touched, setFieldValue } }: FieldProps) => (
<div className={className}>
{label && <Label htmlFor={id}>{label}</Label>}
<Async
{...props}
id={id}
name={name}
styles={SelectStyle}
onChange={o => onChange(o, name, setFieldValue)}
isMulti={isMulti}
/>
{touched[field.name] && errors[field.name] ? (
<p css={tw`text-red-200 text-xs mt-1`}>
{(errors[field.name] as string).charAt(0).toUpperCase() +
(errors[field.name] as string).slice(1)}
</p>
) : description ? (
<p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p>
) : null}
</div>
)}
</FormikField>
);
});
export default SelectField;
export { AsyncSelectField };

10
resources/scripts/components/elements/activity/ActivityLogEntry.tsx
View file

@ -44,13 +44,13 @@ export default ({ activity, children }: Props) => {
const properties = wrapProperties(activity.properties);
return (
<div className={'grid grid-cols-10 py-4 border-b-2 border-slate-800 last:rounded-b last:border-0 group'}>
<div className={'hidden sm:flex sm:col-span-1 items-center justify-center select-none'}>
<div className={'flex items-center w-10 h-10 rounded-full bg-slate-600 overflow-hidden'}>
<div className={'group grid grid-cols-10 border-b-2 border-slate-800 py-4 last:rounded-b last:border-0'}>
<div className={'hidden select-none items-center justify-center sm:col-span-1 sm:flex'}>
<div className={'flex h-10 w-10 items-center overflow-hidden rounded-full bg-slate-600'}>
<Avatar name={actor?.uuid || 'system'} />
</div>
</div>
<div className={'col-span-10 sm:col-span-9 flex'}>
<div className={'col-span-10 flex sm:col-span-9'}>
<div className={'flex-1 px-4 sm:px-0'}>
<div className={'flex items-center text-slate-50'}>
<Tooltip placement={'top'} content={actor?.email || 'System User'}>
@ -59,7 +59,7 @@ export default ({ activity, children }: Props) => {
<span className={'text-slate-400'}>&nbsp;&mdash;&nbsp;</span>
<Link
to={`#${pathTo({ event: activity.event })}`}
className={'transition-colors duration-75 active:text-cyan-400 hover:text-cyan-400'}
className={'transition-colors duration-75 hover:text-cyan-400 active:text-cyan-400'}
>
{activity.event}
</Link>

6
resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx
View file

@ -11,7 +11,7 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
<Dialog open={open} onClose={() => setOpen(false)} hideCloseIcon title={'Metadata'}>
<pre
className={
'bg-slate-900 rounded p-2 font-mono text-sm leading-relaxed overflow-x-scroll whitespace-pre-wrap'
'overflow-x-scroll whitespace-pre-wrap rounded bg-slate-900 p-2 font-mono text-sm leading-relaxed'
}
>
{JSON.stringify(meta, null, 2)}
@ -23,11 +23,11 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
<button
aria-describedby={'View additional event metadata'}
className={
'p-2 transition-colors duration-100 text-slate-400 group-hover:text-slate-300 group-hover:hover:text-slate-50'
'p-2 text-slate-400 transition-colors duration-100 group-hover:text-slate-300 group-hover:hover:text-slate-50'
}
onClick={() => setOpen(true)}
>
<ClipboardListIcon className={'w-5 h-5'} />
<ClipboardListIcon className={'h-5 w-5'} />
</button>
</div>
);

6
resources/scripts/components/elements/alert/Alert.tsx
View file

@ -12,7 +12,7 @@ export default ({ type, className, children }: AlertProps) => {
return (
<div
className={classNames(
'flex items-center border-l-8 text-slate-50 rounded-md shadow px-4 py-3',
'flex items-center rounded-md border-l-8 px-4 py-3 text-slate-50 shadow',
{
['border-red-500 bg-red-500/25']: type === 'danger',
['border-yellow-500 bg-yellow-500/25']: type === 'warning',
@ -21,9 +21,9 @@ export default ({ type, className, children }: AlertProps) => {
)}
>
{type === 'danger' ? (
<ShieldExclamationIcon className={'w-6 h-6 text-red-400 mr-2'} />
<ShieldExclamationIcon className={'mr-2 h-6 w-6 text-red-400'} />
) : (
<ExclamationIcon className={'w-6 h-6 text-yellow-500 mr-2'} />
<ExclamationIcon className={'mr-2 h-6 w-6 text-yellow-500'} />
)}
{children}
</div>

8
resources/scripts/components/elements/dialog/Dialog.tsx
View file

@ -73,8 +73,8 @@ export default ({
open={open}
onClose={onDialogClose}
>
<div className={'fixed inset-0 bg-slate-900/50 z-40'} />
<div className={'fixed inset-0 overflow-y-auto z-50'}>
<div className={'fixed inset-0 z-40 bg-slate-900/50'} />
<div className={'fixed inset-0 z-50 overflow-y-auto'}>
<div
ref={container}
className={styles.container}
@ -89,9 +89,9 @@ export default ({
variants={variants}
className={styles.panel}
>
<div className={'flex p-6 pb-0 overflow-y-auto'}>
<div className={'flex overflow-y-auto p-6 pb-0'}>
{iconPosition === 'container' && icon}
<div className={'flex-1 max-h-[70vh] min-w-0'}>
<div className={'max-h-[70vh] min-w-0 flex-1'}>
<div className={'flex items-center'}>
{iconPosition !== 'container' && icon}
<div>

2
resources/scripts/components/elements/dialog/DialogFooter.tsx
View file

@ -8,7 +8,7 @@ export default ({ children }: { children: React.ReactNode }) => {
useDeepCompareEffect(() => {
setFooter(
<div className={'px-6 py-3 bg-slate-700 flex items-center justify-end space-x-3 rounded-b'}>
<div className={'flex items-center justify-end space-x-3 rounded-b bg-slate-700 px-6 py-3'}>
{children}
</div>,
);

2
resources/scripts/components/elements/dialog/DialogIcon.tsx
View file

@ -18,7 +18,7 @@ export default ({ type, position, className }: DialogIconProps) => {
setIcon(
<div className={classNames(styles.dialog_icon, styles[type], className)}>
<Icon className={'w-6 h-6'} />
<Icon className={'h-6 w-6'} />
</div>,
);
}, [type, className]);

2
resources/scripts/components/elements/dropdown/Dropdown.tsx
View file

@ -12,7 +12,7 @@ interface Props {
}
const DropdownGap = ({ invisible }: { invisible?: boolean }) => (
<div className={classNames('border m-2', { 'border-neutral-700': !invisible, 'border-transparent': invisible })} />
<div className={classNames('m-2 border', { 'border-neutral-700': !invisible, 'border-transparent': invisible })} />
);
type TypedChild = (React.ReactChild | React.ReactFragment | React.ReactPortal) & {

6
resources/scripts/components/elements/table/PaginationFooter.tsx
View file

@ -37,7 +37,7 @@ const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
});
return (
<div className={classNames('flex items-center justify-between my-2', className)}>
<div className={classNames('my-2 flex items-center justify-between', className)}>
<p className={'text-sm text-neutral-500'}>
Showing&nbsp;
<span className={'font-semibold text-neutral-400'}>
@ -50,7 +50,7 @@ const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
{pagination.totalPages > 1 && (
<div className={'flex space-x-1'}>
<Button.Text {...buttonProps(1)} disabled={pages.previous.length !== 2}>
<ChevronDoubleLeftIcon className={'w-3 h-3'} />
<ChevronDoubleLeftIcon className={'h-3 w-3'} />
</Button.Text>
{pages.previous.reverse().map(value => (
<Button.Text key={`previous-${value}`} {...buttonProps(value)}>
@ -66,7 +66,7 @@ const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
</Button.Text>
))}
<Button.Text {...buttonProps(total)} disabled={pages.next.length !== 2}>
<ChevronDoubleRightIcon className={'w-3 h-3'} />
<ChevronDoubleRightIcon className={'h-3 w-3'} />
</Button.Text>
</div>
)}

8
resources/scripts/components/elements/table/TFootPaginated.tsx
View file

@ -3,14 +3,18 @@ import { PaginationDataSet } from '@/api/http';
const TFootPaginated = ({ pagination, span }: { span: number; pagination: PaginationDataSet }) => {
const start = (pagination.currentPage - 1) * pagination.perPage;
const end = ((pagination.currentPage - 1) * pagination.perPage) + pagination.count;
const end = (pagination.currentPage - 1) * pagination.perPage + pagination.count;
return (
<tfoot>
<tr className={'bg-neutral-800'}>
<td scope={'col'} colSpan={span} className={'px-4 py-2'}>
<p className={'text-sm text-neutral-500'}>
Showing <span className={'font-semibold text-neutral-400'}>{Math.max(start, Math.min(pagination.total, 1))}</span> to&nbsp;
Showing{' '}
<span className={'font-semibold text-neutral-400'}>
{Math.max(start, Math.min(pagination.total, 1))}
</span>{' '}
to&nbsp;
<span className={'font-semibold text-neutral-400'}>{end}</span> of&nbsp;
<span className={'font-semibold text-neutral-400'}>{pagination.total}</span> results.
</p>

2
resources/scripts/components/elements/tooltip/Tooltip.tsx
View file

@ -108,7 +108,7 @@ export default ({ children, ...props }: Props) => {
ay || 0,
)}px) rotate(45deg)`,
}}
className={classNames('absolute bg-slate-900 w-3 h-3', side)}
className={classNames('absolute h-3 w-3 bg-slate-900', side)}
/>
)}
</motion.div>

6
resources/scripts/components/server/ServerActivityLogContainer.tsx
View file

@ -35,20 +35,20 @@ export default () => {
<ServerContentBlock title={'Activity Log'}>
<FlashMessageRender byKey={'server:activity'} />
{(filters.filters?.event || filters.filters?.ip) && (
<div className={'flex justify-end mb-2'}>
<div className={'mb-2 flex justify-end'}>
<Link
to={'#'}
className={classNames(btnStyles.button, btnStyles.text, 'w-full sm:w-auto')}
onClick={() => setFilters(value => ({ ...value, filters: {} }))}
>
Clear Filters <XCircleIcon className={'w-4 h-4 ml-2'} />
Clear Filters <XCircleIcon className={'ml-2 h-4 w-4'} />
</Link>
</div>
)}
{!data && isValidating ? (
<Spinner centered />
) : !data?.items.length ? (
<p className={'text-sm text-center text-slate-400'}>No activity logs available for this server.</p>
<p className={'text-center text-sm text-slate-400'}>No activity logs available for this server.</p>
) : (
<div className={'bg-slate-700'}>
{data?.items.map(activity => (

2
resources/scripts/components/server/console/ChartBlock.tsx
View file

@ -12,7 +12,7 @@ export default ({ title, legend, children }: ChartBlockProps) => (
<div className={classNames(styles.chart_container, 'group')}>
<div className={'flex items-center justify-between px-4 py-2'}>
<h3 className={'font-header transition-colors duration-100 group-hover:text-slate-50'}>{title}</h3>
{legend && <p className={'text-sm flex items-center'}>{legend}</p>}
{legend && <p className={'flex items-center text-sm'}>{legend}</p>}
</div>
<div className={'z-10 ml-2'}>{children}</div>
</div>

4
resources/scripts/components/server/console/Console.tsx
View file

@ -232,11 +232,11 @@ export default () => {
/>
<div
className={classNames(
'text-slate-100 peer-focus:text-slate-50 peer-focus:animate-pulse',
'text-slate-100 peer-focus:animate-pulse peer-focus:text-slate-50',
styles.command_icon,
)}
>
<ChevronDoubleRightIcon className={'w-4 h-4'} />
<ChevronDoubleRightIcon className={'h-4 w-4'} />
</div>
</div>
)}

18
resources/scripts/components/server/console/ServerConsoleContainer.tsx
View file

@ -33,26 +33,26 @@ function ServerConsoleContainer() {
: 'This server is currently being transferred to another node and all actions are unavailable.'}
</Alert>
)}
<div className={'grid grid-cols-4 gap-4 mb-4'}>
<div className={'hidden sm:block sm:col-span-2 lg:col-span-3 pr-4'}>
<h1 className={'font-header text-2xl text-slate-50 leading-relaxed line-clamp-1'}>{name}</h1>
<div className={'mb-4 grid grid-cols-4 gap-4'}>
<div className={'hidden pr-4 sm:col-span-2 sm:block lg:col-span-3'}>
<h1 className={'font-header text-2xl leading-relaxed text-slate-50 line-clamp-1'}>{name}</h1>
<p className={'text-sm line-clamp-2'}>{description}</p>
</div>
<div className={'col-span-4 sm:col-span-2 lg:col-span-1 self-end'}>
<div className={'col-span-4 self-end sm:col-span-2 lg:col-span-1'}>
<Can action={['control.start', 'control.stop', 'control.restart']} matchAny>
<PowerButtons className={'flex sm:justify-end space-x-2'} />
<PowerButtons className={'flex space-x-2 sm:justify-end'} />
</Can>
</div>
</div>
<div className={'grid grid-cols-4 gap-2 sm:gap-4 mb-4'}>
<div className={'flex col-span-4 lg:col-span-3'}>
<div className={'mb-4 grid grid-cols-4 gap-2 sm:gap-4'}>
<div className={'col-span-4 flex lg:col-span-3'}>
<Spinner.Suspense>
<Console />
</Spinner.Suspense>
</div>
<ServerDetailsBlock className={'col-span-4 lg:col-span-1 order-last lg:order-none'} />
<ServerDetailsBlock className={'order-last col-span-4 lg:order-none lg:col-span-1'} />
</div>
<div className={'grid grid-cols-1 md:grid-cols-3 gap-2 sm:gap-4'}>
<div className={'grid grid-cols-1 gap-2 sm:gap-4 md:grid-cols-3'}>
<Spinner.Suspense>
<StatGraphs />
</Spinner.Suspense>

2
resources/scripts/components/server/console/ServerDetailsBlock.tsx
View file

@ -38,7 +38,7 @@ function Limit({ limit, children }: { limit: string | null; children: ReactNode
return (
<>
{children}
<span className={'ml-1 text-slate-300 text-[70%] select-none'}>/ {limit || <>&infin;</>}</span>
<span className={'ml-1 select-none text-[70%] text-slate-300'}>/ {limit || <>&infin;</>}</span>
</>
);
}

6
resources/scripts/components/server/console/StatBlock.tsx
View file

@ -33,11 +33,11 @@ function StatBlock({ title, copyOnClick, icon, color, className, children }: Sta
})}
/>
</div>
<div className={'flex flex-col justify-center overflow-hidden w-full'}>
<p className={'font-header leading-tight text-xs md:text-sm text-slate-200'}>{title}</p>
<div className={'flex w-full flex-col justify-center overflow-hidden'}>
<p className={'font-header text-xs leading-tight text-slate-200 md:text-sm'}>{title}</p>
<div
ref={ref}
className={'h-[1.75rem] w-full font-semibold text-slate-50 truncate'}
className={'h-[1.75rem] w-full truncate font-semibold text-slate-50'}
style={{ fontSize }}
>
{children}

4
resources/scripts/components/server/console/StatGraphs.tsx
View file

@ -79,10 +79,10 @@ export default () => {
legend={
<>
<Tooltip arrow content={'Inbound'}>
<CloudDownloadIcon className={'mr-2 w-4 h-4 text-yellow-400'} />
<CloudDownloadIcon className={'mr-2 h-4 w-4 text-yellow-400'} />
</Tooltip>
<Tooltip arrow content={'Outbound'}>
<CloudUploadIcon className={'w-4 h-4 text-cyan-400'} />
<CloudUploadIcon className={'h-4 w-4 text-cyan-400'} />
</Tooltip>
</>
}

2
resources/scripts/components/server/files/FileManagerContainer.tsx
View file

@ -64,7 +64,7 @@ export default () => {
return (
<ServerContentBlock title={'File Manager'} showFlashKey={'files'}>
<ErrorBoundary>
<div className={'flex flex-wrap-reverse md:flex-nowrap mb-4'}>
<div className={'mb-4 flex flex-wrap-reverse md:flex-nowrap'}>
<FileManagerBreadcrumbs
renderLeft={
<FileActionCheckbox

18
resources/scripts/components/server/files/FileManagerStatus.tsx
View file

@ -25,7 +25,7 @@ const Spinner = ({ progress, className }: { progress: number; className?: string
{...svgProps}
stroke={'white'}
strokeDasharray={28 * Math.PI}
className={'rotate-[-90deg] origin-[50%_50%] transition-[stroke-dashoffset] duration-300'}
className={'origin-[50%_50%] rotate-[-90deg] transition-[stroke-dashoffset] duration-300'}
style={{ strokeDashoffset: ((100 - progress) / 100) * 28 * Math.PI }}
/>
</svg>
@ -40,20 +40,20 @@ const FileUploadList = () => {
);
return (
<div className={'space-y-2 mt-6'}>
<div className={'mt-6 space-y-2'}>
{uploads.map(([name, file]) => (
<div key={name} className={'flex items-center space-x-3 bg-slate-700 p-3 rounded'}>
<div key={name} className={'flex items-center space-x-3 rounded bg-slate-700 p-3'}>
<Tooltip content={`${Math.floor((file.loaded / file.total) * 100)}%`} placement={'left'}>
<div className={'flex-shrink-0'}>
<Spinner progress={(file.loaded / file.total) * 100} className={'w-6 h-6'} />
<Spinner progress={(file.loaded / file.total) * 100} className={'h-6 w-6'} />
</div>
</Tooltip>
<Code className={'flex-1 truncate'}>{name}</Code>
<button
onClick={cancelFileUpload.bind(this, name)}
className={'text-slate-500 hover:text-slate-200 transition-colors duration-75'}
className={'text-slate-500 transition-colors duration-75 hover:text-slate-200'}
>
<XIcon className={'w-5 h-5'} />
<XIcon className={'h-5 w-5'} />
</button>
</div>
))}
@ -92,11 +92,11 @@ export default () => {
{count > 0 && (
<Tooltip content={`${count} files are uploading, click to view`}>
<button
className={'flex items-center justify-center w-10 h-10'}
className={'flex h-10 w-10 items-center justify-center'}
onClick={() => (open.value = true)}
>
<Spinner progress={(progress.uploaded / progress.total) * 100} className={'w-8 h-8'} />
<CloudUploadIcon className={'h-3 absolute mx-auto animate-pulse'} />
<Spinner progress={(progress.uploaded / progress.total) * 100} className={'h-8 w-8'} />
<CloudUploadIcon className={'absolute mx-auto h-3 animate-pulse'} />
</button>
</Tooltip>
)}

6
resources/scripts/components/server/files/MassActionsBar.tsx
View file

@ -62,7 +62,7 @@ const MassActionsBar = () => {
return (
<>
<div className="pointer-events-none fixed bottom-0 z-20 left-0 right-0 flex justify-center">
<div className="pointer-events-none fixed bottom-0 left-0 right-0 z-20 flex justify-center">
<SpinnerOverlay visible={loading} size={'large'} fixed>
{loadingMessage}
</SpinnerOverlay>
@ -93,9 +93,9 @@ const MassActionsBar = () => {
/>
)}
<Portal>
<div className="fixed bottom-0 mb-6 flex justify-center w-full z-50">
<div className="fixed bottom-0 z-50 mb-6 flex w-full justify-center">
<FadeTransition duration="duration-75" show={selectedFiles.length > 0} appear unmount>
<div className="flex items-center space-x-4 pointer-events-auto rounded p-4 bg-black/50">
<div className="pointer-events-auto flex items-center space-x-4 rounded bg-black/50 p-4">
<Button onClick={() => setShowMove(true)}>Move</Button>
<Button onClick={onClickCompress}>Archive</Button>
<Button.Danger variant={Button.Variants.Secondary} onClick={() => setShowConfirm(true)}>

8
resources/scripts/components/server/files/UploadButton.tsx
View file

@ -120,14 +120,14 @@ export default ({ className }: WithClassname) => {
onFileSubmission(e.dataTransfer.files);
}}
>
<div className={'w-full flex items-center justify-center pointer-events-none'}>
<div className={'pointer-events-none flex w-full items-center justify-center'}>
<div
className={
'flex items-center space-x-4 bg-black w-full ring-4 ring-blue-200 ring-opacity-60 rounded p-6 mx-10 max-w-sm'
'mx-10 flex w-full max-w-sm items-center space-x-4 rounded bg-black p-6 ring-4 ring-blue-200 ring-opacity-60'
}
>
<CloudUploadIcon className={'w-10 h-10 flex-shrink-0'} />
<p className={'font-header flex-1 text-lg text-neutral-100 text-center'}>
<CloudUploadIcon className={'h-10 w-10 flex-shrink-0'} />
<p className={'flex-1 text-center font-header text-lg text-neutral-100'}>
Drag and drop files to upload.
</p>
</div>

14
resources/scripts/components/server/network/AllocationRow.tsx
View file

@ -60,8 +60,8 @@ const AllocationRow = ({ allocation }: Props) => {
};
return (
<GreyRowBox $hoverable={false} className={'flex-wrap md:flex-nowrap mt-2'}>
<div className={'flex items-center w-full md:w-auto'}>
<GreyRowBox $hoverable={false} className={'mt-2 flex-wrap md:flex-nowrap'}>
<div className={'flex w-full items-center md:w-auto'}>
<div className={'pl-4 pr-6 text-neutral-400'}>
<FontAwesomeIcon icon={faNetworkWired} />
</div>
@ -79,24 +79,24 @@ const AllocationRow = ({ allocation }: Props) => {
)}
<Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label>
</div>
<div className={'w-16 md:w-24 overflow-hidden'}>
<div className={'w-16 overflow-hidden md:w-24'}>
<Code dark>{allocation.port}</Code>
<Label>Port</Label>
</div>
</div>
<div className={'mt-4 w-full md:mt-0 md:flex-1 md:w-auto'}>
<div className={'mt-4 w-full md:mt-0 md:w-auto md:flex-1'}>
<InputSpinner visible={loading}>
<Textarea
className={'bg-neutral-800 hover:border-neutral-600 border-transparent'}
className={'border-transparent bg-neutral-800 hover:border-neutral-600'}
placeholder={'Notes'}
defaultValue={allocation.notes || undefined}
onChange={e => setAllocationNotes(e.currentTarget.value)}
/>
</InputSpinner>
</div>
<div className={'flex justify-end space-x-4 mt-4 w-full md:mt-0 md:w-48'}>
<div className={'mt-4 flex w-full justify-end space-x-4 md:mt-0 md:w-48'}>
{allocation.isDefault ? (
<Button size={Button.Sizes.Small} className={'!text-slate-50 !bg-blue-600'} disabled>
<Button size={Button.Sizes.Small} className={'!bg-blue-600 !text-slate-50'} disabled>
Primary
</Button>
) : (

2
resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
View file

@ -50,7 +50,7 @@ export default ({ scheduleId, onDeleted }: Props) => {
</Dialog.Confirm>
<Button.Danger
variant={Button.Variants.Secondary}
className={'flex-1 sm:flex-none mr-4 border-transparent'}
className={'mr-4 flex-1 border-transparent sm:flex-none'}
onClick={() => setVisible(true)}
>
Delete

20
resources/scripts/components/server/schedules/ScheduleCronRow.tsx
View file

@ -8,25 +8,25 @@ interface Props {
const ScheduleCronRow = ({ cron, className }: Props) => (
<div className={classNames('flex', className)}>
<div className={'w-1/5 sm:w-auto text-center'}>
<div className={'w-1/5 text-center sm:w-auto'}>
<p className={'font-medium'}>{cron.minute}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Minute</p>
<p className={'text-2xs uppercase text-neutral-500'}>Minute</p>
</div>
<div className={'w-1/5 sm:w-auto text-center ml-4'}>
<div className={'ml-4 w-1/5 text-center sm:w-auto'}>
<p className={'font-medium'}>{cron.hour}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Hour</p>
<p className={'text-2xs uppercase text-neutral-500'}>Hour</p>
</div>
<div className={'w-1/5 sm:w-auto text-center ml-4'}>
<div className={'ml-4 w-1/5 text-center sm:w-auto'}>
<p className={'font-medium'}>{cron.dayOfMonth}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Day (Month)</p>
<p className={'text-2xs uppercase text-neutral-500'}>Day (Month)</p>
</div>
<div className={'w-1/5 sm:w-auto text-center ml-4'}>
<div className={'ml-4 w-1/5 text-center sm:w-auto'}>
<p className={'font-medium'}>{cron.month}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Month</p>
<p className={'text-2xs uppercase text-neutral-500'}>Month</p>
</div>
<div className={'w-1/5 sm:w-auto text-center ml-4'}>
<div className={'ml-4 w-1/5 text-center sm:w-auto'}>
<p className={'font-medium'}>{cron.dayOfWeek}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Day (Week)</p>
<p className={'text-2xs uppercase text-neutral-500'}>Day (Week)</p>
</div>
</div>
);

2
resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
View file

@ -118,7 +118,7 @@ export default () => {
</div>
<div css={tw`flex sm:block mt-3 sm:mt-0`}>
<Can action={'schedule.update'}>
<Button.Text className={'flex-1 mr-4'} onClick={toggleEditModal}>
<Button.Text className={'mr-4 flex-1'} onClick={toggleEditModal}>
Edit
</Button.Text>
<NewTaskButton schedule={schedule} />

81
resources/scripts/helpers/extractSearchFilters.spec.ts
View file

@ -1,79 +1,86 @@
import extractSearchFilters from '@/helpers/extractSearchFilters';
type TestCase = [ string, 0 | Record<string, string[]> ];
type TestCase = [string, 0 | Record<string, string[]>];
describe('@/helpers/extractSearchFilters.ts', function () {
const cases: TestCase[] = [
[ '', {} ],
[ 'hello world', {} ],
[ 'bar:xyz foo:abc', { bar: [ 'xyz' ], foo: [ 'abc' ] } ],
[ 'hello foo:abc', { foo: [ 'abc' ] } ],
[ 'hello foo:abc world another bar:xyz hodor', { foo: [ 'abc' ], bar: [ 'xyz' ] } ],
[ 'foo:1 foo:2 foo: 3 foo:4', { foo: [ '1', '2', '4' ] } ],
[ ' foo:123 foo:bar:123 foo: foo:string', { foo: [ '123', 'bar:123', 'string' ] } ],
[ 'foo:1 bar:2 baz:3', { foo: [ '1' ], bar: [ '2' ] } ],
[ 'hello "world this" is quoted', {} ],
[ 'hello "world foo:123 is" quoted', {} ],
[ 'hello foo:"this is quoted" bar:"this \\"is deeply\\" quoted" world foo:another', {
foo: [ 'this is quoted', 'another' ],
bar: [ 'this "is deeply" quoted' ],
} ],
['', {}],
['hello world', {}],
['bar:xyz foo:abc', { bar: ['xyz'], foo: ['abc'] }],
['hello foo:abc', { foo: ['abc'] }],
['hello foo:abc world another bar:xyz hodor', { foo: ['abc'], bar: ['xyz'] }],
['foo:1 foo:2 foo: 3 foo:4', { foo: ['1', '2', '4'] }],
[' foo:123 foo:bar:123 foo: foo:string', { foo: ['123', 'bar:123', 'string'] }],
['foo:1 bar:2 baz:3', { foo: ['1'], bar: ['2'] }],
['hello "world this" is quoted', {}],
['hello "world foo:123 is" quoted', {}],
[
'hello foo:"this is quoted" bar:"this \\"is deeply\\" quoted" world foo:another',
{
foo: ['this is quoted', 'another'],
bar: ['this "is deeply" quoted'],
},
],
];
it.each(cases)('should return expected filters: [%s]', function (input, output) {
expect(extractSearchFilters(input, [ 'foo', 'bar' ])).toStrictEqual({
expect(extractSearchFilters(input, ['foo', 'bar'])).toStrictEqual({
filters: output,
});
});
it('should allow modification of the default parameter', function () {
expect(extractSearchFilters('hello world', [ 'foo' ], { defaultFilter: 'default_param', returnUnmatched: true })).toStrictEqual({
expect(
extractSearchFilters('hello world', ['foo'], { defaultFilter: 'default_param', returnUnmatched: true }),
).toStrictEqual({
filters: {
default_param: [ 'hello world' ],
default_param: ['hello world'],
},
});
expect(extractSearchFilters('foo:123 bar', [ 'foo' ], { defaultFilter: 'default_param' })).toStrictEqual({
expect(extractSearchFilters('foo:123 bar', ['foo'], { defaultFilter: 'default_param' })).toStrictEqual({
filters: {
foo: [ '123' ],
foo: ['123'],
},
});
});
it.each([
[ '', {} ],
[ 'hello world', { '*': [ 'hello world' ] } ],
[ 'hello world foo:123 bar:456', { foo: [ '123' ], bar: [ '456' ], '*': [ 'hello world' ] } ],
[ 'hello world foo:123 another string', { foo: [ '123' ], '*': [ 'hello world another string' ] } ],
['', {}],
['hello world', { '*': ['hello world'] }],
['hello world foo:123 bar:456', { foo: ['123'], bar: ['456'], '*': ['hello world'] }],
['hello world foo:123 another string', { foo: ['123'], '*': ['hello world another string'] }],
])('should return unmatched parameters: %s', function (input, output) {
expect(extractSearchFilters(input, [ 'foo', 'bar' ], { returnUnmatched: true })).toStrictEqual({
expect(extractSearchFilters(input, ['foo', 'bar'], { returnUnmatched: true })).toStrictEqual({
filters: output,
});
});
it.each([
[ '', {} ],
[ 'hello world', { '*': [ 'hello', 'world' ] } ],
[ 'hello world foo:123 bar:456', { foo: [ '123' ], bar: [ '456' ], '*': [ 'hello', 'world' ] } ],
[ 'hello world foo:123 another string', { foo: [ '123' ], '*': [ 'hello', 'world', 'another', 'string' ] } ],
['', {}],
['hello world', { '*': ['hello', 'world'] }],
['hello world foo:123 bar:456', { foo: ['123'], bar: ['456'], '*': ['hello', 'world'] }],
['hello world foo:123 another string', { foo: ['123'], '*': ['hello', 'world', 'another', 'string'] }],
])('should split unmatched parameters: %s', function (input, output) {
expect(extractSearchFilters(input, [ 'foo', 'bar' ], {
returnUnmatched: true,
splitUnmatched: true,
})).toStrictEqual({
expect(
extractSearchFilters(input, ['foo', 'bar'], {
returnUnmatched: true,
splitUnmatched: true,
}),
).toStrictEqual({
filters: output,
});
});
it.each([ true, false ])('should return the unsplit value (splitting: %s)', function (split) {
const extracted = extractSearchFilters('hello foo:123 bar:123 world', [ 'foo' ], {
it.each([true, false])('should return the unsplit value (splitting: %s)', function (split) {
const extracted = extractSearchFilters('hello foo:123 bar:123 world', ['foo'], {
returnUnmatched: true,
splitUnmatched: split,
});
expect(extracted).toStrictEqual({
filters: {
foo: [ '123' ],
'*': split ? [ 'hello', 'bar:123', 'world' ] : [ 'hello bar:123 world' ],
foo: ['123'],
'*': split ? ['hello', 'bar:123', 'world'] : ['hello bar:123 world'],
},
});
});

8
resources/scripts/helpers/extractSearchFilters.ts
View file

@ -7,13 +7,13 @@ interface Options<D extends string = string> {
returnUnmatched?: boolean;
}
const extractSearchFilters = <T extends string, D extends string = '*'> (
const extractSearchFilters = <T extends string, D extends string = '*'>(
str: string,
params: Readonly<T[]>,
options?: Options<D>,
): QueryBuilderParams<T> | QueryBuilderParams<D> | QueryBuilderParams<T & D> => {
const opts: Required<Options<D>> = {
defaultFilter: options?.defaultFilter || '*' as D,
defaultFilter: options?.defaultFilter || ('*' as D),
splitUnmatched: options?.splitUnmatched || false,
returnUnmatched: options?.returnUnmatched || false,
};
@ -30,12 +30,12 @@ const extractSearchFilters = <T extends string, D extends string = '*'> (
} else if (!params.includes(filter)) {
unmatched.push(segment);
} else {
filters.set(filter, [ ...(filters.get(filter) || []), value ]);
filters.set(filter, [...(filters.get(filter) || []), value]);
}
}
if (opts.returnUnmatched && str.trim().length > 0) {
filters.set(opts.defaultFilter as any, opts.splitUnmatched ? unmatched : [ unmatched.join(' ') ]);
filters.set(opts.defaultFilter as any, opts.splitUnmatched ? unmatched : [unmatched.join(' ')]);
}
if (filters.size === 0) {

16
resources/scripts/helpers/splitStringWhitespace.spec.ts
View file

@ -2,14 +2,14 @@ import splitStringWhitespace from '@/helpers/splitStringWhitespace';
describe('@/helpers/splitStringWhitespace.ts', function () {
it.each([
[ '', [] ],
[ 'hello world', [ 'hello', 'world' ] ],
[ ' hello world ', [ 'hello', 'world' ] ],
[ 'hello123 world 123 $$ s ', [ 'hello123', 'world', '123', '$$', 's' ] ],
[ 'hello world! how are you?', [ 'hello', 'world!', 'how', 'are', 'you?' ] ],
[ 'hello "foo bar baz" world', [ 'hello', 'foo bar baz', 'world' ] ],
[ 'hello "foo \\"bar bar \\" baz" world', [ 'hello', 'foo "bar bar " baz', 'world' ] ],
[ 'hello "foo "bar baz" baz" world', [ 'hello', 'foo bar', 'baz baz', 'world' ] ],
['', []],
['hello world', ['hello', 'world']],
[' hello world ', ['hello', 'world']],
['hello123 world 123 $$ s ', ['hello123', 'world', '123', '$$', 's']],
['hello world! how are you?', ['hello', 'world!', 'how', 'are', 'you?']],
['hello "foo bar baz" world', ['hello', 'foo bar baz', 'world']],
['hello "foo \\"bar bar \\" baz" world', ['hello', 'foo "bar bar " baz', 'world']],
['hello "foo "bar baz" baz" world', ['hello', 'foo bar', 'baz baz', 'world']],
])('should handle string: %s', function (input, output) {
expect(splitStringWhitespace(input)).toStrictEqual(output);
});

4
resources/scripts/helpers/splitStringWhitespace.ts
View file

@ -7,9 +7,9 @@
*/
export default (str: string): string[] => {
let quoted = false;
const parts = [ '' ] as string[];
const parts = [''] as string[];
for (const char of (str.trim().match(/\\?.|^$/g) || [])) {
for (const char of str.trim().match(/\\?.|^$/g) || []) {
if (char === '"') {
quoted = !quoted;
} else if (!quoted && char === ' ') {

6
resources/scripts/plugins/useDebouncedState.ts
View file

@ -3,10 +3,10 @@ import { debounce } from 'debounce';
type DebounceFn<V> = ((value: V) => void) & { clear: () => void };
export default <S> (initial: S, interval?: number, immediate?: boolean): [ S, DebounceFn<S> ] => {
const [ state, setState ] = useState<S>(initial);
export default <S>(initial: S, interval?: number, immediate?: boolean): [S, DebounceFn<S>] => {
const [state, setState] = useState<S>(initial);
const debouncedSetState = debounce((v: S) => setState(v), interval, immediate);
return [ state, debouncedSetState ];
return [state, debouncedSetState];
};