Fix install warning display and make it reactive
This commit is contained in:
parent
2dda151a49
commit
bd278b2688
|
@ -39,7 +39,6 @@ export interface Server {
|
||||||
allocations: number;
|
allocations: number;
|
||||||
backups: number;
|
backups: number;
|
||||||
};
|
};
|
||||||
isInstalling: boolean;
|
|
||||||
isTransferring: boolean;
|
isTransferring: boolean;
|
||||||
variables: ServerEggVariable[];
|
variables: ServerEggVariable[];
|
||||||
allocations: Allocation[];
|
allocations: Allocation[];
|
||||||
|
@ -62,7 +61,6 @@ export const rawDataToServerObject = ({ attributes: data }: FractalResponseData)
|
||||||
limits: { ...data.limits },
|
limits: { ...data.limits },
|
||||||
eggFeatures: data.egg_features || [],
|
eggFeatures: data.egg_features || [],
|
||||||
featureLimits: { ...data.feature_limits },
|
featureLimits: { ...data.feature_limits },
|
||||||
isInstalling: data.status === 'installing' || data.status === 'install_failed',
|
|
||||||
isTransferring: data.is_transferring,
|
isTransferring: data.is_transferring,
|
||||||
variables: ((data.relationships?.variables as FractalResponseList | undefined)?.data || []).map(
|
variables: ((data.relationships?.variables as FractalResponseList | undefined)?.data || []).map(
|
||||||
rawDataToServerEggVariable
|
rawDataToServerEggVariable
|
||||||
|
|
|
@ -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 (
|
||||||
|
<div
|
||||||
|
className={classNames(
|
||||||
|
'flex items-center border-l-8 border-yellow-500 text-gray-50 bg-yellow-500/25 rounded-md shadow px-4 py-3',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<ExclamationIcon className={'w-6 h-6 text-yellow-500 mr-2'} />
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as Alert } from './Alert';
|
|
@ -1,8 +1,6 @@
|
||||||
import React, { memo } from 'react';
|
import React, { memo } from 'react';
|
||||||
import { ServerContext } from '@/state/server';
|
import { ServerContext } from '@/state/server';
|
||||||
import Can from '@/components/elements/Can';
|
import Can from '@/components/elements/Can';
|
||||||
import ContentContainer from '@/components/elements/ContentContainer';
|
|
||||||
import tw from 'twin.macro';
|
|
||||||
import ServerContentBlock from '@/components/elements/ServerContentBlock';
|
import ServerContentBlock from '@/components/elements/ServerContentBlock';
|
||||||
import isEqual from 'react-fast-compare';
|
import isEqual from 'react-fast-compare';
|
||||||
import Spinner from '@/components/elements/Spinner';
|
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 StatGraphs from '@/components/server/console/StatGraphs';
|
||||||
import PowerButtons from '@/components/server/console/PowerButtons';
|
import PowerButtons from '@/components/server/console/PowerButtons';
|
||||||
import ServerDetailsBlock from '@/components/server/console/ServerDetailsBlock';
|
import ServerDetailsBlock from '@/components/server/console/ServerDetailsBlock';
|
||||||
|
import { Alert } from '@/components/elements/alert';
|
||||||
|
|
||||||
export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
|
export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
|
||||||
|
|
||||||
const ServerConsoleContainer = () => {
|
const ServerConsoleContainer = () => {
|
||||||
const name = ServerContext.useStoreState((state) => state.server.data!.name);
|
const name = ServerContext.useStoreState((state) => state.server.data!.name);
|
||||||
const description = ServerContext.useStoreState((state) => state.server.data!.description);
|
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 isTransferring = ServerContext.useStoreState((state) => state.server.data!.isTransferring);
|
||||||
const eggFeatures = ServerContext.useStoreState((state) => state.server.data!.eggFeatures, isEqual);
|
const eggFeatures = ServerContext.useStoreState((state) => state.server.data!.eggFeatures, isEqual);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ServerContentBlock title={'Console'} className={'flex flex-col gap-2 sm:gap-4'}>
|
<ServerContentBlock title={'Console'} className={'flex flex-col gap-2 sm:gap-4'}>
|
||||||
|
{(isInstalling || isTransferring) && (
|
||||||
|
<Alert type={'warning'}>
|
||||||
|
{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.'}
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
<div className={'grid grid-cols-4 gap-4'}>
|
<div className={'grid grid-cols-4 gap-4'}>
|
||||||
<div className={'hidden sm:block sm:col-span-2 lg:col-span-3 pr-4'}>
|
<div className={'hidden sm:block sm:col-span-2 lg:col-span-3 pr-4'}>
|
||||||
<h1 className={'font-header text-2xl text-gray-50 leading-relaxed line-clamp-1'}>{name}</h1>
|
<h1 className={'font-header text-2xl text-gray-50 leading-relaxed line-clamp-1'}>{name}</h1>
|
||||||
|
@ -41,25 +47,6 @@ const ServerConsoleContainer = () => {
|
||||||
</Spinner.Suspense>
|
</Spinner.Suspense>
|
||||||
</div>
|
</div>
|
||||||
<ServerDetailsBlock className={'col-span-4 lg:col-span-1 order-last lg:order-none'} />
|
<ServerDetailsBlock className={'col-span-4 lg:col-span-1 order-last lg:order-none'} />
|
||||||
{isInstalling ? (
|
|
||||||
<div css={tw`mt-4 rounded bg-yellow-500 p-3`}>
|
|
||||||
<ContentContainer>
|
|
||||||
<p css={tw`text-sm text-yellow-900`}>
|
|
||||||
This server is currently running its installation process and most actions are
|
|
||||||
unavailable.
|
|
||||||
</p>
|
|
||||||
</ContentContainer>
|
|
||||||
</div>
|
|
||||||
) : isTransferring ? (
|
|
||||||
<div css={tw`mt-4 rounded bg-yellow-500 p-3`}>
|
|
||||||
<ContentContainer>
|
|
||||||
<p css={tw`text-sm text-yellow-900`}>
|
|
||||||
This server is currently being transferred to another node and all actions are
|
|
||||||
unavailable.
|
|
||||||
</p>
|
|
||||||
</ContentContainer>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
</div>
|
||||||
<div className={'grid grid-cols-1 md:grid-cols-3 gap-2 sm:gap-4'}>
|
<div className={'grid grid-cols-1 md:grid-cols-3 gap-2 sm:gap-4'}>
|
||||||
<Spinner.Suspense>
|
<Spinner.Suspense>
|
||||||
|
|
|
@ -13,6 +13,8 @@ export type ServerStatus = 'offline' | 'starting' | 'stopping' | 'running' | nul
|
||||||
interface ServerDataStore {
|
interface ServerDataStore {
|
||||||
data?: Server;
|
data?: Server;
|
||||||
inConflictState: Computed<ServerDataStore, boolean>;
|
inConflictState: Computed<ServerDataStore, boolean>;
|
||||||
|
isInstalling: Computed<ServerDataStore, boolean>;
|
||||||
|
isTransferring: Computed<ServerDataStore, boolean>;
|
||||||
permissions: string[];
|
permissions: string[];
|
||||||
|
|
||||||
getServer: Thunk<ServerDataStore, string, Record<string, unknown>, ServerStore, Promise<void>>;
|
getServer: Thunk<ServerDataStore, string, Record<string, unknown>, ServerStore, Promise<void>>;
|
||||||
|
@ -32,6 +34,10 @@ const server: ServerDataStore = {
|
||||||
return state.data.status !== null || state.data.isTransferring;
|
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) => {
|
getServer: thunk(async (actions, payload) => {
|
||||||
const [server, permissions] = await getServer(payload);
|
const [server, permissions] = await getServer(payload);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue