StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix install warning display and make it reactive

Browse source
This commit is contained in:
DaneEveritt 2022-06-27 20:36:24 -04:00
parent 2dda151a49
commit bd278b2688
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 39 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

23
resources/scripts/components/elements/alert/Alert.tsx Normal file
View file

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

1
resources/scripts/components/elements/alert/index.ts Normal file
View file

@ -0,0 +1 @@
export { default as Alert } from './Alert';

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

@ -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 (
<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={'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>
@ -41,25 +47,6 @@ const ServerConsoleContainer = () => {
</Spinner.Suspense>
</div>
<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 className={'grid grid-cols-1 md:grid-cols-3 gap-2 sm:gap-4'}>
<Spinner.Suspense>