diff --git a/resources/scripts/api/admin/egg.ts b/resources/scripts/api/admin/egg.ts index 3449eb2c7..0f43814d0 100644 --- a/resources/scripts/api/admin/egg.ts +++ b/resources/scripts/api/admin/egg.ts @@ -1,8 +1,9 @@ import { Model, UUID } from '@/api/admin/index'; export interface Egg extends Model { - id: string; + id: number; uuid: UUID; + startup: string; relationships: { variables?: EggVariable[]; }; diff --git a/resources/scripts/api/admin/node.ts b/resources/scripts/api/admin/node.ts index 9bc333541..9ae6678a3 100644 --- a/resources/scripts/api/admin/node.ts +++ b/resources/scripts/api/admin/node.ts @@ -25,6 +25,7 @@ export interface Allocation extends Model { node?: Node; server?: Server | null; }; + getDisplayText(): string; } export interface Node extends Model { diff --git a/resources/scripts/api/admin/transformers.ts b/resources/scripts/api/admin/transformers.ts index 795a0f441..a279d1c3a 100644 --- a/resources/scripts/api/admin/transformers.ts +++ b/resources/scripts/api/admin/transformers.ts @@ -168,5 +168,10 @@ export class AdminTransformers { node: transform(attributes.relationships?.node as FractalResponseData, this.toNode), server: transform(attributes.relationships?.server as FractalResponseData, this.toServer), }, + getDisplayText (): string { + const raw = `${this.ip}:${this.port}`; + + return !this.alias ? raw : `${this.alias} (${raw})`; + }, }); } diff --git a/resources/scripts/components/admin/SubNavigation.tsx b/resources/scripts/components/admin/SubNavigation.tsx index e0dfe7091..857ed3093 100644 --- a/resources/scripts/components/admin/SubNavigation.tsx +++ b/resources/scripts/components/admin/SubNavigation.tsx @@ -3,37 +3,31 @@ import { NavLink } from 'react-router-dom'; import tw, { styled } from 'twin.macro'; export const SubNavigation = styled.div` - ${tw`flex flex-row items-center flex-shrink-0 h-12 mb-4 border-b border-neutral-700`}; + ${tw`flex flex-row items-center flex-shrink-0 h-12 mb-4 border-b border-neutral-700`}; - & > div { - ${tw`flex flex-col justify-center flex-shrink-0 h-full`}; + & > a { + ${tw`flex flex-row items-center h-full px-4 border-b text-neutral-300 text-base whitespace-nowrap border-transparent`}; - & > a { - ${tw`flex flex-row items-center h-full px-4 border-t text-neutral-300`}; - border-top-color: transparent !important; - - & > svg { - ${tw`w-6 h-6 mr-2`}; - } - - & > span { - ${tw`text-base whitespace-nowrap`}; - } - - &:active, &.active { - ${tw`border-b text-primary-300 border-primary-300`}; - } - } + & > svg { + ${tw`w-6 h-6 mr-2`}; } + + &:active, &.active { + ${tw`text-primary-300 border-primary-300`}; + } + } `; -export const SubNavigationLink = ({ to, name, children }: { to: string, name: string, children: React.ReactNode }) => { +interface Props { + to: string; + name: string; + icon: React.ComponentType; +} + +export const SubNavigationLink = ({ to, name, icon: IconComponent }: Props) => { return ( -
- - {children} - {name} - -
+ + {name} + ); }; diff --git a/resources/scripts/components/admin/servers/ServerDeleteButton.tsx b/resources/scripts/components/admin/servers/ServerDeleteButton.tsx index 4cbd3295e..1d2d0db35 100644 --- a/resources/scripts/components/admin/servers/ServerDeleteButton.tsx +++ b/resources/scripts/components/admin/servers/ServerDeleteButton.tsx @@ -5,27 +5,29 @@ import tw from 'twin.macro'; import Button from '@/components/elements/Button'; import ConfirmationModal from '@/components/elements/ConfirmationModal'; import deleteServer from '@/api/admin/servers/deleteServer'; +import { TrashIcon } from '@heroicons/react/outline'; +import { useServerFromRoute } from '@/api/admin/server'; +import { useHistory } from 'react-router-dom'; -interface Props { - serverId: number; - onDeleted: () => void; -} - -export default ({ serverId, onDeleted }: Props) => { +export default () => { + const history = useHistory(); const [ visible, setVisible ] = useState(false); const [ loading, setLoading ] = useState(false); + const { data: server } = useServerFromRoute(); - const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => actions.flashes); + const { + clearFlashes, + clearAndAddHttpError, + } = useStoreActions((actions: Actions) => actions.flashes); const onDelete = () => { + if (!server) return; + setLoading(true); clearFlashes('server'); - deleteServer(serverId) - .then(() => { - setLoading(false); - onDeleted(); - }) + deleteServer(server.id) + .then(() => history.push('/admin/servers')) .catch(error => { console.error(error); clearAndAddHttpError({ key: 'server', error }); @@ -35,6 +37,8 @@ export default ({ serverId, onDeleted }: Props) => { }); }; + if (!server) return null; + return ( <> { > Are you sure you want to delete this server? - - ); diff --git a/resources/scripts/components/admin/servers/ServerManageContainer.tsx b/resources/scripts/components/admin/servers/ServerManageContainer.tsx index 56c82b289..fba2f6d49 100644 --- a/resources/scripts/components/admin/servers/ServerManageContainer.tsx +++ b/resources/scripts/components/admin/servers/ServerManageContainer.tsx @@ -1,17 +1,13 @@ import React from 'react'; import AdminBox from '@/components/admin/AdminBox'; import tw from 'twin.macro'; -import { Context } from '@/components/admin/servers/ServerRouter'; import Button from '@/components/elements/Button'; +import { useServerFromRoute } from '@/api/admin/server'; -const ServerManageContainer = () => { - const server = Context.useStoreState(state => state.server); +export default () => { + const { data: server } = useServerFromRoute(); - if (server === undefined) { - return ( - <> - ); - } + if (!server) return null; return (
@@ -52,17 +48,3 @@ const ServerManageContainer = () => {
); }; - -export default () => { - const server = Context.useStoreState(state => state.server); - - if (server === undefined) { - return ( - <> - ); - } - - return ( - - ); -}; diff --git a/resources/scripts/components/admin/servers/ServerRouter.tsx b/resources/scripts/components/admin/servers/ServerRouter.tsx index 2e08bc4eb..9988b28c0 100644 --- a/resources/scripts/components/admin/servers/ServerRouter.tsx +++ b/resources/scripts/components/admin/servers/ServerRouter.tsx @@ -4,8 +4,6 @@ import React, { useEffect } from 'react'; import { useLocation } from 'react-router'; import tw from 'twin.macro'; import { Route, Switch, useRouteMatch } from 'react-router-dom'; -import { action, Action, createContextStore } from 'easy-peasy'; -import { Server } from '@/api/admin/servers/getServers'; import AdminContentBlock from '@/components/admin/AdminContentBlock'; import Spinner from '@/components/elements/Spinner'; import FlashMessageRender from '@/components/FlashMessageRender'; @@ -13,23 +11,9 @@ import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigati import ServerSettingsContainer from '@/components/admin/servers/ServerSettingsContainer'; import useFlash from '@/plugins/useFlash'; import { useServerFromRoute } from '@/api/admin/server'; +import { AdjustmentsIcon, CogIcon, DatabaseIcon, FolderIcon, ShieldExclamationIcon } from '@heroicons/react/outline'; -export const ServerIncludes = [ 'allocations', 'user', 'variables' ]; - -interface ctx { - server: Server | undefined; - setServer: Action; -} - -export const Context = createContextStore({ - server: undefined, - - setServer: action((state, payload) => { - state.server = payload; - }), -}); - -const ServerRouter = () => { +export default () => { const location = useLocation(); const match = useRouteMatch<{ id?: string }>(); @@ -41,11 +25,8 @@ const ServerRouter = () => { }, []); useEffect(() => { - if (!error) { - clearFlashes('server'); - } else { - clearAndAddHttpError({ error, key: 'server' }); - } + if (!error) clearFlashes('server'); + if (error) clearAndAddHttpError({ error, key: 'server' }); }, [ error ]); if (!server || (error && isValidating)) { @@ -67,60 +48,18 @@ const ServerRouter = () => { - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + - + - + @@ -129,11 +68,3 @@ const ServerRouter = () => { ); }; - -export default () => { - return ( - - - - ); -}; diff --git a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx index 38f59693a..ff9e93423 100644 --- a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx +++ b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx @@ -1,118 +1,22 @@ -import { Server } from '@/api/admin/servers/getServers'; +import { useServerFromRoute } from '@/api/admin/server'; import ServerDeleteButton from '@/components/admin/servers/ServerDeleteButton'; -import { faBalanceScale } from '@fortawesome/free-solid-svg-icons'; import React from 'react'; -import AdminBox from '@/components/admin/AdminBox'; -import { useHistory } from 'react-router-dom'; import tw from 'twin.macro'; import { object } from 'yup'; import updateServer, { Values } from '@/api/admin/servers/updateServer'; -import Field from '@/components/elements/Field'; -import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; -import { Form, Formik, FormikHelpers, useFormikContext } from 'formik'; -import { Context, ServerIncludes } from '@/components/admin/servers/ServerRouter'; -import { ApplicationStore } from '@/state'; -import { Actions, useStoreActions } from 'easy-peasy'; +import { Form, Formik, FormikHelpers } from 'formik'; +import { useStoreActions } from 'easy-peasy'; import Button from '@/components/elements/Button'; -import FormikSwitch from '@/components/elements/FormikSwitch'; import BaseSettingsBox from '@/components/admin/servers/settings/BaseSettingsBox'; import FeatureLimitsBox from '@/components/admin/servers/settings/FeatureLimitsBox'; import NetworkingBox from '@/components/admin/servers/settings/NetworkingBox'; +import ServerResourceBox from '@/components/admin/servers/settings/ServerResourceBox'; -export function ServerResourceContainer () { - const { isSubmitting } = useFormikContext(); +export default () => { + const { data: server, mutate } = useServerFromRoute(); + const { clearFlashes, clearAndAddHttpError } = useStoreActions(actions => actions.flashes); - return ( - - - -
-
- -
- -
- -
-
- -
-
- -
- -
- -
-
- -
-
- -
- -
- -
-
- -
-
- -
-
- - ); -} - -export default function ServerSettingsContainer2 ({ server }: { server: Server }) { - const history = useHistory(); - - const { - clearFlashes, - clearAndAddHttpError, - } = useStoreActions((actions: Actions) => actions.flashes); - - const setServer = Context.useStoreActions(actions => actions.setServer); + if (!server) return null; const submit = (values: Values, { setSubmitting, setFieldValue }: FormikHelpers) => { clearFlashes('server'); @@ -121,9 +25,9 @@ export default function ServerSettingsContainer2 ({ server }: { server: Server } // OOM Killer is enabled, rather than when disabled. values.limits.oomDisabled = !values.limits.oomDisabled; - updateServer(server.id, values, ServerIncludes) + updateServer(server.id, values) .then(s => { - setServer({ ...server, ...s }); + // setServer({ ...server, ...s }); // TODO: Figure out how to properly clear react-selects for allocations. setFieldValue('addAllocations', []); @@ -142,8 +46,7 @@ export default function ServerSettingsContainer2 ({ server }: { server: Server } initialValues={{ externalId: server.externalId || '', name: server.name, - ownerId: server.ownerId, - + ownerId: server.userId, limits: { memory: server.limits.memory, swap: server.limits.swap, @@ -155,13 +58,11 @@ export default function ServerSettingsContainer2 ({ server }: { server: Server } // OOM Killer is enabled, rather than when disabled. oomDisabled: !server.limits.oomDisabled, }, - featureLimits: { allocations: server.featureLimits.allocations, backups: server.featureLimits.backups, databases: server.featureLimits.databases, }, - allocationId: server.allocationId, addAllocations: [] as number[], removeAllocations: [] as number[], @@ -177,14 +78,10 @@ export default function ServerSettingsContainer2 ({ server }: { server: Server }
- - -
+ +
- history.push('/admin/servers')} - /> +