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);