Update views to support a more logical container
This commit is contained in:
Dane Everitt
parent
e044e8db1c
commit
e6a61fbe9b
20 changed files with 85 additions and 39 deletions
|
|
@ -11,6 +11,7 @@ import { bytesToHuman } from '@/helpers';
|
|||
import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
|
||||
import TitledGreyBox from '@/components/elements/TitledGreyBox';
|
||||
import Can from '@/components/elements/Can';
|
||||
import PageContentBlock from '@/components/elements/PageContentBlock';
|
||||
|
||||
type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
|
||||
|
||||
|
|
@ -80,7 +81,7 @@ export default () => {
|
|||
}, [ instance, connected ]);
|
||||
|
||||
return (
|
||||
<div className={'my-10 flex'}>
|
||||
<PageContentBlock className={'flex'}>
|
||||
<div className={'w-1/4'}>
|
||||
<TitledGreyBox title={server.name} icon={faServer}>
|
||||
<p className={'text-xs uppercase'}>
|
||||
|
|
@ -159,6 +160,6 @@ export default () => {
|
|||
<ChunkedStatGraphs/>
|
||||
</SuspenseSpinner>
|
||||
</div>
|
||||
</div>
|
||||
</PageContentBlock>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import CreateBackupButton from '@/components/server/backups/CreateBackupButton';
|
|||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import BackupRow from '@/components/server/backups/BackupRow';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import PageContentBlock from '@/components/elements/PageContentBlock';
|
||||
|
||||
export default () => {
|
||||
const { uuid } = useServer();
|
||||
|
|
@ -34,7 +35,7 @@ export default () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={'mt-10 mb-6'}>
|
||||
<PageContentBlock>
|
||||
<FlashMessageRender byKey={'backups'} className={'mb-4'}/>
|
||||
{!backups.length ?
|
||||
<p className="text-center text-sm text-neutral-400">
|
||||
|
|
@ -54,6 +55,6 @@ export default () => {
|
|||
<CreateBackupButton/>
|
||||
</div>
|
||||
</Can>
|
||||
</div>
|
||||
</PageContentBlock>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import CreateDatabaseButton from '@/components/server/databases/CreateDatabaseBu
|
|||
import Can from '@/components/elements/Can';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import useServer from '@/plugins/useServer';
|
||||
import PageContentBlock from '@/components/elements/PageContentBlock';
|
||||
|
||||
export default () => {
|
||||
const { uuid, featureLimits } = useServer();
|
||||
|
|
@ -33,7 +34,7 @@ export default () => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div className={'my-10 mb-6'}>
|
||||
<PageContentBlock>
|
||||
<FlashMessageRender byKey={'databases'} className={'mb-4'}/>
|
||||
{(!databases.length && loading) ?
|
||||
<Spinner size={'large'} centered={true}/>
|
||||
|
|
@ -67,6 +68,6 @@ export default () => {
|
|||
</>
|
||||
</CSSTransition>
|
||||
}
|
||||
</div>
|
||||
</PageContentBlock>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { useParams } from 'react-router';
|
|||
import FileNameModal from '@/components/server/files/FileNameModal';
|
||||
import Can from '@/components/elements/Can';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import PageContentBlock from '@/components/elements/PageContentBlock';
|
||||
|
||||
const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor'));
|
||||
|
||||
|
|
@ -67,7 +68,7 @@ export default () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className={'mt-10 mb-4'}>
|
||||
<PageContentBlock>
|
||||
<FlashMessageRender byKey={'files:view'} className={'mb-4'}/>
|
||||
<FileManagerBreadcrumbs withinFileEditor={true} isNewFile={action !== 'edit'}/>
|
||||
<FileNameModal
|
||||
|
|
@ -104,6 +105,6 @@ export default () => {
|
|||
</Can>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</PageContentBlock>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { FileObject } from '@/api/server/files/loadDirectory';
|
|||
import NewDirectoryButton from '@/components/server/files/NewDirectoryButton';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Can from '@/components/elements/Can';
|
||||
import PageContentBlock from '@/components/elements/PageContentBlock';
|
||||
|
||||
const sortFiles = (files: FileObject[]): FileObject[] => {
|
||||
return files.sort((a, b) => a.name.localeCompare(b.name))
|
||||
|
|
@ -38,7 +39,7 @@ export default () => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div className={'my-10 mb-6'}>
|
||||
<PageContentBlock>
|
||||
<FlashMessageRender byKey={'files'} className={'mb-4'}/>
|
||||
<React.Fragment>
|
||||
<FileManagerBreadcrumbs/>
|
||||
|
|
@ -92,6 +93,6 @@ export default () => {
|
|||
</React.Fragment>
|
||||
}
|
||||
</React.Fragment>
|
||||
</div>
|
||||
</PageContentBlock>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import EditScheduleModal from '@/components/server/schedules/EditScheduleModal';
|
|||
import Can from '@/components/elements/Can';
|
||||
import useServer from '@/plugins/useServer';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import PageContentBlock from '@/components/elements/PageContentBlock';
|
||||
|
||||
export default ({ match, history }: RouteComponentProps) => {
|
||||
const { uuid } = useServer();
|
||||
|
|
@ -32,7 +33,7 @@ export default ({ match, history }: RouteComponentProps) => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div className={'my-10 mb-6'}>
|
||||
<PageContentBlock>
|
||||
<FlashMessageRender byKey={'schedules'} className={'mb-4'}/>
|
||||
{(!schedules.length && loading) ?
|
||||
<Spinner size={'large'} centered={true}/>
|
||||
|
|
@ -76,6 +77,6 @@ export default ({ match, history }: RouteComponentProps) => {
|
|||
</Can>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</PageContentBlock>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import Can from '@/components/elements/Can';
|
|||
import useServer from '@/plugins/useServer';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import PageContentBlock from '@/components/elements/PageContentBlock';
|
||||
|
||||
interface Params {
|
||||
id: string;
|
||||
|
|
@ -49,7 +50,7 @@ export default ({ match, history, location: { state } }: RouteComponentProps<Par
|
|||
}, [ match ]);
|
||||
|
||||
return (
|
||||
<div className={'my-10 mb-6'}>
|
||||
<PageContentBlock>
|
||||
<FlashMessageRender byKey={'schedules'} className={'mb-4'}/>
|
||||
{!schedule || isLoading ?
|
||||
<Spinner size={'large'} centered={true}/>
|
||||
|
|
@ -104,6 +105,6 @@ export default ({ match, history, location: { state } }: RouteComponentProps<Par
|
|||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</PageContentBlock>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,13 +8,14 @@ import RenameServerBox from '@/components/server/settings/RenameServerBox';
|
|||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import Can from '@/components/elements/Can';
|
||||
import ReinstallServerBox from '@/components/server/settings/ReinstallServerBox';
|
||||
import PageContentBlock from '@/components/elements/PageContentBlock';
|
||||
|
||||
export default () => {
|
||||
const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
|
||||
const server = ServerContext.useStoreState(state => state.server.data!);
|
||||
|
||||
return (
|
||||
<div className={'my-10 mb-6'}>
|
||||
<PageContentBlock>
|
||||
<FlashMessageRender byKey={'settings'} className={'mb-4'}/>
|
||||
<div className={'md:flex'}>
|
||||
<Can action={'file.sftp'}>
|
||||
|
|
@ -69,6 +70,6 @@ export default () => {
|
|||
</Can>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageContentBlock>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import FlashMessageRender from '@/components/FlashMessageRender';
|
|||
import getServerSubusers from '@/api/server/users/getServerSubusers';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
import Can from '@/components/elements/Can';
|
||||
import PageContentBlock from '@/components/elements/PageContentBlock';
|
||||
|
||||
export default () => {
|
||||
const [ loading, setLoading ] = useState(true);
|
||||
|
|
@ -46,7 +47,7 @@ export default () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={'mt-10 mb-6'}>
|
||||
<PageContentBlock>
|
||||
<FlashMessageRender byKey={'users'} className={'mb-4'}/>
|
||||
{!subusers.length ?
|
||||
<p className={'text-center text-sm text-neutral-400'}>
|
||||
|
|
@ -62,6 +63,6 @@ export default () => {
|
|||
<AddSubuserButton/>
|
||||
</div>
|
||||
</Can>
|
||||
</div>
|
||||
</PageContentBlock>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue