diff --git a/resources/scripts/api/server/getServer.ts b/resources/scripts/api/server/getServer.ts index 0badbd363..5ed92a427 100644 --- a/resources/scripts/api/server/getServer.ts +++ b/resources/scripts/api/server/getServer.ts @@ -39,7 +39,6 @@ export interface Server { allocations: number; backups: number; }; - isInstalling: boolean; isTransferring: boolean; variables: ServerEggVariable[]; allocations: Allocation[]; @@ -62,7 +61,6 @@ export const rawDataToServerObject = ({ attributes: data }: FractalResponseData) limits: { ...data.limits }, eggFeatures: data.egg_features || [], featureLimits: { ...data.feature_limits }, - isInstalling: data.status === 'installing' || data.status === 'install_failed', isTransferring: data.is_transferring, variables: ((data.relationships?.variables as FractalResponseList | undefined)?.data || []).map( rawDataToServerEggVariable diff --git a/resources/scripts/components/elements/alert/Alert.tsx b/resources/scripts/components/elements/alert/Alert.tsx new file mode 100644 index 000000000..9d58b096a --- /dev/null +++ b/resources/scripts/components/elements/alert/Alert.tsx @@ -0,0 +1,23 @@ +import { ExclamationIcon } from '@heroicons/react/outline'; +import React from 'react'; +import classNames from 'classnames'; + +interface AlertProps { + type: 'warning'; + className?: string; + children: React.ReactNode; +} + +export default ({ className, children }: AlertProps) => { + return ( +
+ + {children} +
+ ); +}; diff --git a/resources/scripts/components/elements/alert/index.ts b/resources/scripts/components/elements/alert/index.ts new file mode 100644 index 000000000..e105af02f --- /dev/null +++ b/resources/scripts/components/elements/alert/index.ts @@ -0,0 +1 @@ +export { default as Alert } from './Alert'; diff --git a/resources/scripts/components/server/console/ServerConsoleContainer.tsx b/resources/scripts/components/server/console/ServerConsoleContainer.tsx index b2265d385..3eeaba63e 100644 --- a/resources/scripts/components/server/console/ServerConsoleContainer.tsx +++ b/resources/scripts/components/server/console/ServerConsoleContainer.tsx @@ -1,8 +1,6 @@ import React, { memo } from 'react'; import { ServerContext } from '@/state/server'; import Can from '@/components/elements/Can'; -import ContentContainer from '@/components/elements/ContentContainer'; -import tw from 'twin.macro'; import ServerContentBlock from '@/components/elements/ServerContentBlock'; import isEqual from 'react-fast-compare'; import Spinner from '@/components/elements/Spinner'; @@ -11,18 +9,26 @@ import Console from '@/components/server/console/Console'; import StatGraphs from '@/components/server/console/StatGraphs'; import PowerButtons from '@/components/server/console/PowerButtons'; import ServerDetailsBlock from '@/components/server/console/ServerDetailsBlock'; +import { Alert } from '@/components/elements/alert'; export type PowerAction = 'start' | 'stop' | 'restart' | 'kill'; const ServerConsoleContainer = () => { const name = ServerContext.useStoreState((state) => state.server.data!.name); const description = ServerContext.useStoreState((state) => state.server.data!.description); - const isInstalling = ServerContext.useStoreState((state) => state.server.data!.isInstalling); + const isInstalling = ServerContext.useStoreState((state) => state.server.isInstalling); const isTransferring = ServerContext.useStoreState((state) => state.server.data!.isTransferring); const eggFeatures = ServerContext.useStoreState((state) => state.server.data!.eggFeatures, isEqual); return ( + {(isInstalling || isTransferring) && ( + + {isInstalling + ? 'This server is currently running its installation process and most actions are unavailable.' + : 'This server is currently being transferred to another node and all actions are unavailable.'} + + )}

{name}

@@ -41,25 +47,6 @@ const ServerConsoleContainer = () => {
- {isInstalling ? ( -
- -

- This server is currently running its installation process and most actions are - unavailable. -

-
-
- ) : isTransferring ? ( -
- -

- This server is currently being transferred to another node and all actions are - unavailable. -

-
-
- ) : null}
diff --git a/resources/scripts/state/server/index.ts b/resources/scripts/state/server/index.ts index 08c9a372b..ab0102a3b 100644 --- a/resources/scripts/state/server/index.ts +++ b/resources/scripts/state/server/index.ts @@ -13,6 +13,8 @@ export type ServerStatus = 'offline' | 'starting' | 'stopping' | 'running' | nul interface ServerDataStore { data?: Server; inConflictState: Computed; + isInstalling: Computed; + isTransferring: Computed; permissions: string[]; getServer: Thunk, ServerStore, Promise>; @@ -32,6 +34,10 @@ const server: ServerDataStore = { return state.data.status !== null || state.data.isTransferring; }), + isInstalling: computed((state) => { + return state.data?.status === 'installing' || state.data?.status === 'install_failed'; + }), + getServer: thunk(async (actions, payload) => { const [server, permissions] = await getServer(payload);