beenull/Cosmos-Server
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[release] v0.4.0-unstable7

Browse source
This commit is contained in:
Yann Stepienik 2023-05-08 14:15:53 +01:00
parent 08d7dbbe4e
commit b4080e14f8
10 changed files with 78 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
client/src/components/responseiveButton.jsx Normal file
View file

@ -0,0 +1,19 @@
import { Button, useMediaQuery, IconButton } from "@mui/material";
const ResponsiveButton = ({ children, startIcon, size, style, ...props }) => {
const isMobile = useMediaQuery((theme) => theme.breakpoints.down('sm'));
let newStyle = style || {};
if (isMobile) {
newStyle.minHeight = '40px';
newStyle.fontSize = '145%'
}
return (
<Button className="responsive-button" size={isMobile ? 'large' : size} startIcon={isMobile ? null : startIcon} {...props} style={newStyle}>
{isMobile ? startIcon : children}
</Button>
);
}
export default ResponsiveButton;

7
client/src/components/tabbedView/tabbedView.jsx
View file

@ -8,6 +8,7 @@ const StyledTabs = styled(Tabs)`
const TabPanel = (props) => {
const { children, value, index, ...other } = props;
const isMobile = useMediaQuery((theme) => theme.breakpoints.down('md'));
return (
<div
@ -21,7 +22,7 @@ const TabPanel = (props) => {
{...other}
>
{value === index && (
<Box p={3}>
<Box p={isMobile ? 1 : 3}>
<Typography>{children}</Typography>
</Box>
)}
@ -38,7 +39,7 @@ const a11yProps = (index) => {
const PrettyTabbedView = ({ tabs, isLoading }) => {
const [value, setValue] = useState(0);
const isMobile = useMediaQuery((theme) => theme.breakpoints.down('sm'));
const isMobile = useMediaQuery((theme) => theme.breakpoints.down('md'));
const handleChange = (event, newValue) => {
setValue(newValue);
@ -51,7 +52,7 @@ const PrettyTabbedView = ({ tabs, isLoading }) => {
return (
<Box display="flex" height="100%" flexDirection={isMobile ? 'column' : 'row'}>
{isMobile ? (
<Select value={value} onChange={handleSelectChange} sx={{ minWidth: 120 }}>
<Select value={value} onChange={handleSelectChange} sx={{ minWidth: 120, marginBottom: '15px' }}>
{tabs.map((tab, index) => (
<MenuItem key={index} value={index}>
{tab.title}

20
client/src/pages/servapps/actionBar.jsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { IconButton, Tooltip } from '@mui/material';
import { IconButton, Tooltip, useMediaQuery } from '@mui/material';
import { CheckCircleOutlined, CloseSquareOutlined, DeleteOutlined, PauseCircleOutlined, PlaySquareOutlined, ReloadOutlined, RollbackOutlined, StopOutlined, UpCircleOutlined } from '@ant-design/icons';
import * as API from '../../api';
@ -10,6 +10,8 @@ const GetActions = ({
setIsUpdatingId
}) => {
const [confirmDelete, setConfirmDelete] = React.useState(false);
const isMiniMobile = useMediaQuery((theme) => theme.breakpoints.down('xsm'));
console.log(isMiniMobile)
const doTo = (action) => {
setIsUpdatingId(Id, true);
@ -22,56 +24,56 @@ const GetActions = ({
{
t: 'Update Available',
if: ['update_available'],
e: <IconButton className="shinyButton" color='primary' onClick={() => {doTo('update')}} size='large'>
e: <IconButton className="shinyButton" color='primary' onClick={() => {doTo('update')}} size={isMiniMobile ? 'medium' : 'large'}>
<UpCircleOutlined />
</IconButton>
},
{
t: 'Start',
if: ['exited', 'created'],
e: <IconButton onClick={() => {doTo('start')}} size='large'>
e: <IconButton onClick={() => {doTo('start')}} size={isMiniMobile ? 'medium' : 'large'}>
<PlaySquareOutlined />
</IconButton>
},
{
t: 'Unpause',
if: ['paused'],
e: <IconButton onClick={() => {doTo('unpause')}} size='large'>
e: <IconButton onClick={() => {doTo('unpause')}} size={isMiniMobile ? 'medium' : 'large'}>
<PlaySquareOutlined />
</IconButton>
},
{
t: 'Pause',
if: ['running'],
e: <IconButton onClick={() => {doTo('pause')}} size='large'>
e: <IconButton onClick={() => {doTo('pause')}} size={isMiniMobile ? 'medium' : 'large'}>
<PauseCircleOutlined />
</IconButton>
},
{
t: 'Stop',
if: ['paused', 'restarting', 'running'],
e: <IconButton onClick={() => {doTo('stop')}} size='large' variant="outlined">
e: <IconButton onClick={() => {doTo('stop')}} size={isMiniMobile ? 'medium' : 'large'} variant="outlined">
<StopOutlined />
</IconButton>
},
{
t: 'Restart',
if: ['exited', 'running', 'paused', 'created', 'restarting'],
e: <IconButton onClick={() => doTo('restart')} size='large'>
e: <IconButton onClick={() => doTo('restart')} size={isMiniMobile ? 'medium' : 'large'}>
<ReloadOutlined />
</IconButton>
},
{
t: 'Re-create',
if: ['exited', 'running', 'paused', 'created', 'restarting'],
e: <IconButton onClick={() => doTo('recreate')} color="error" size='large'>
e: <IconButton onClick={() => doTo('recreate')} color="error" size={isMiniMobile ? 'medium' : 'large'}>
<RollbackOutlined />
</IconButton>
},
{
t: 'Kill',
if: ['running', 'paused', 'created', 'restarting'],
e: <IconButton onClick={() => doTo('kill')} color="error" size='large'>
e: <IconButton onClick={() => doTo('kill')} color="error" size={isMiniMobile ? 'medium' : 'large'}>
<CloseSquareOutlined />
</IconButton>
},

24
client/src/pages/servapps/containers/network.jsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import { Formik } from 'formik';
import { Button, Stack, Grid, MenuItem, TextField, IconButton, FormHelperText, CircularProgress, useTheme, Alert } from '@mui/material';
import { Button, Stack, Grid, MenuItem, TextField, IconButton, FormHelperText, CircularProgress, useTheme, Alert, useMediaQuery } from '@mui/material';
import MainCard from '../../../components/MainCard';
import { CosmosCheckbox, CosmosFormDivider, CosmosInputText, CosmosSelect }
from '../../config/users/formShortcuts';
@ -15,6 +15,8 @@ const NetworkContainerSetup = ({ config, containerInfo, refresh }) => {
const [networks, setNetworks] = React.useState([]);
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const padding = isMobile ? '15px 4px' : '20px 10px';
React.useEffect(() => {
API.docker.networkList().then((res) => {
@ -101,11 +103,11 @@ const NetworkContainerSetup = ({ config, containerInfo, refresh }) => {
<form noValidate onSubmit={formik.handleSubmit}>
<Stack spacing={2}>
<MainCard title={'Ports'}>
<Grid container spacing={4}>
<Grid item xs={12}>
<Stack spacing={4}>
<div>
{formik.values.ports.map((port, idx) => (
<Grid container spacing={2} key={idx}>
<Grid item xs={4} style={{ padding: '20px 10px' }}>
<Grid item xs={4} style={{ padding }}>
<TextField
label="Container Port"
fullWidth
@ -117,7 +119,7 @@ const NetworkContainerSetup = ({ config, containerInfo, refresh }) => {
}}
/>
</Grid>
<Grid item xs={4} style={{ padding: '20px 10px' }}>
<Grid item xs={4} style={{ padding }}>
<TextField
fullWidth
label="Host port"
@ -129,7 +131,7 @@ const NetworkContainerSetup = ({ config, containerInfo, refresh }) => {
}}
/>
</Grid>
<Grid item xs={3} style={{ padding: '20px 10px' }}>
<Grid item xs={3} style={{ padding }}>
<TextField
className="px-2 my-2"
variant="outlined"
@ -147,7 +149,7 @@ const NetworkContainerSetup = ({ config, containerInfo, refresh }) => {
<MenuItem value="udp">UDP</MenuItem>
</TextField>
</Grid>
<Grid item xs={1} style={{ padding: '20px 10px' }}>
<Grid item xs={1} style={{ padding }}>
<IconButton
fullWidth
variant="outlined"
@ -180,8 +182,8 @@ const NetworkContainerSetup = ({ config, containerInfo, refresh }) => {
>
<PlusCircleOutlined />
</IconButton>
</Grid>
<Grid item xs={12}>
</div>
<div>
<Stack direction="column" spacing={2}>
{formik.errors.submit && (
<Grid item xs={12}>
@ -201,8 +203,8 @@ const NetworkContainerSetup = ({ config, containerInfo, refresh }) => {
Update Ports
</LoadingButton>
</Stack>
</Grid>
</Grid>
</div>
</Stack>
</MainCard>
<MainCard title={'Networks'}>
<Stack spacing={2}>

17
client/src/pages/servapps/containers/setup.jsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import { Formik } from 'formik';
import { Button, Stack, Grid, MenuItem, TextField, IconButton, FormHelperText } from '@mui/material';
import { Button, Stack, Grid, MenuItem, TextField, IconButton, FormHelperText, useMediaQuery, useTheme } from '@mui/material';
import MainCard from '../../../components/MainCard';
import { CosmosCheckbox, CosmosFormDivider, CosmosInputText, CosmosSelect }
from '../../config/users/formShortcuts';
@ -15,6 +15,9 @@ const DockerContainerSetup = ({config, containerInfo, refresh}) => {
['on-failure', 'Restart On Failure'],
['unless-stopped', 'Restart Unless Stopped'],
];
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const padding = isMobile ? '15px 4px' : '20px 10px';
return (
<div style={{ maxWidth: '1000px', width: '100%', margin: '', position: 'relative' }}>
@ -97,7 +100,7 @@ const DockerContainerSetup = ({config, containerInfo, refresh}) => {
<Grid item xs={12}>
{formik.values.envVars.map((envVar, idx) => (
<Grid container spacing={2} key={idx}>
<Grid item xs={5} style={{padding: '20px 10px'}}>
<Grid item xs={5} style={{padding}}>
<TextField
label="Key"
fullWidth
@ -109,7 +112,7 @@ const DockerContainerSetup = ({config, containerInfo, refresh}) => {
}}
/>
</Grid>
<Grid item xs={6} style={{padding: '20px 10px'}}>
<Grid item xs={6} style={{padding}}>
<TextField
fullWidth
label="Value"
@ -121,7 +124,7 @@ const DockerContainerSetup = ({config, containerInfo, refresh}) => {
}}
/>
</Grid>
<Grid item xs={1} style={{padding: '20px 10px'}}>
<Grid item xs={1} style={{padding}}>
<IconButton
fullWidth
variant="outlined"
@ -155,7 +158,7 @@ const DockerContainerSetup = ({config, containerInfo, refresh}) => {
<Grid item xs={12}>
{formik.values.labels.map((label, idx) => (
<Grid container spacing={2} key={idx}>
<Grid item xs={5} style={{padding: '20px 10px'}}>
<Grid item xs={5} style={{padding}}>
<TextField
fullWidth
label="Key"
@ -167,7 +170,7 @@ const DockerContainerSetup = ({config, containerInfo, refresh}) => {
}}
/>
</Grid>
<Grid item xs={6} style={{padding: '20px 10px'}}>
<Grid item xs={6} style={{padding}}>
<TextField
label="Value"
fullWidth
@ -179,7 +182,7 @@ const DockerContainerSetup = ({config, containerInfo, refresh}) => {
}}
/>
</Grid>
<Grid item xs={1} style={{padding: '20px 10px'}}>
<Grid item xs={1} style={{padding}}>
<IconButton
fullWidth
variant="outlined"

7
client/src/pages/servapps/containers/volumes.jsx
View file

@ -4,12 +4,13 @@ import { Button, Stack, Grid, MenuItem, TextField, IconButton, FormHelperText, C
import MainCard from '../../../components/MainCard';
import { CosmosCheckbox, CosmosFormDivider, CosmosInputText, CosmosSelect }
from '../../config/users/formShortcuts';
import { ApiOutlined, CheckCircleOutlined, CloseCircleOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { ApiOutlined, CheckCircleOutlined, CloseCircleOutlined, DeleteOutlined, PlayCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import * as API from '../../../api';
import { LoadingButton } from '@mui/lab';
import PrettyTableView from '../../../components/tableView/prettyTableView';
import { NetworksColumns } from '../networks';
import NewNetworkButton from '../createNetwork';
import ResponsiveButton from '../../../components/responseiveButton';
const VolumeContainerSetup = ({ config, containerInfo, refresh }) => {
const restartPolicies = [
@ -96,7 +97,7 @@ const VolumeContainerSetup = ({ config, containerInfo, refresh }) => {
getKey={(r) => r.Id}
fullWidth
buttons={[
<Button variant="outlined" color="primary" onClick={() => {
<ResponsiveButton startIcon={<PlusCircleOutlined />} variant="outlined" color="primary" onClick={() => {
formik.setFieldValue('volumes', [...formik.values.volumes, {
Type: 'volume',
Name: '',
@ -107,7 +108,7 @@ const VolumeContainerSetup = ({ config, containerInfo, refresh }) => {
}]);
}}>
New Mount Point
</Button>
</ResponsiveButton>
]}
columns={[
{

5
client/src/pages/servapps/createNetwork.jsx
View file

@ -15,6 +15,7 @@ import * as Yup from 'yup';
import * as API from '../../api';
import { CosmosCheckbox } from '../config/users/formShortcuts';
import ResponsiveButton from '../../components/responseiveButton';
const NewNetworkButton = ({ fullWidth, refresh }) => {
const [isOpened, setIsOpened] = useState(false);
@ -112,13 +113,13 @@ const NewNetworkButton = ({ fullWidth, refresh }) => {
</DialogActions>}
</FormikProvider>
</Dialog>
<Button
<ResponsiveButton
fullWidth={fullWidth}
onClick={() => setIsOpened(true)}
startIcon={<PlusCircleOutlined />}
>
New Network
</Button>
</ResponsiveButton>
</>;
};

20
client/src/pages/servapps/servapps.jsx
View file

@ -16,6 +16,7 @@ import HostChip from '../../components/hostChip';
import { Link } from 'react-router-dom';
import ExposeModal from './exposeModal';
import GetActions from './actionBar';
import ResponsiveButton from '../../components/responseiveButton';
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
@ -127,7 +128,7 @@ const ServeApps = () => {
}
/>
<Stack spacing={2}>
<Stack spacing={{xs: 1, sm: 1, md: 2 }}>
<Stack direction="row" spacing={2}>
<Input placeholder="Search"
value={search}
@ -140,23 +141,26 @@ const ServeApps = () => {
setSearch(e.target.value);
}}
/>
<Button variant="contained" startIcon={<ReloadOutlined />} onClick={() => {
<ResponsiveButton variant="contained" startIcon={<ReloadOutlined />} onClick={() => {
refreshServeApps();
}}>Refresh</Button>
}}>Refresh</ResponsiveButton>
<Tooltip title="This is not implemented yet.">
<span style={{ cursor: 'not-allowed' }}>
<Button variant="contained" startIcon={<AppstoreAddOutlined />} disabled>Start ServApp</Button>
<ResponsiveButton
variant="contained"
startIcon={<AppstoreAddOutlined />}
disabled >Start ServApp</ResponsiveButton>
</span>
</Tooltip>
</Stack>
<Grid2 container spacing={2}>
<Grid2 container spacing={{xs: 1, sm: 1, md: 2 }}>
{serveApps && serveApps.filter(app => search.length < 2 || app.Names[0].toLowerCase().includes(search.toLowerCase())).map((app) => {
return <Grid2 style={gridAnim} xs={12} sm={6} md={6} lg={6} xl={4} key={app.Id} item>
<Item>
<Stack justifyContent='space-around' direction="column" spacing={2} padding={2} divider={<Divider orientation="horizontal" flexItem />}>
<Stack direction="column" spacing={0} alignItems="flex-start">
<Stack style={{position: 'relative', overflowX: 'hidden'}} direction="row" spacing={2} alignItems="center">
<Stack style={{position: 'relative', overflowX: 'hidden', width: '100%'}} direction="row" spacing={2} alignItems="center">
<Typography variant="body2" color="text.secondary">
{
({
@ -172,11 +176,11 @@ const ServeApps = () => {
</Typography>
<Stack direction="row" spacing={2} alignItems="center">
<img src={getFirstRouteFavIcon(app)} width="40px" />
<Stack direction="column" spacing={0} alignItems="flex-start" style={{height: '40px'}}>
<Stack direction="column" spacing={0} alignItems="flex-start" style={{height: '40px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'no-wrap'}}>
<Typography variant="h5" color="text.secondary">
{app.Names[0].replace('/', '')}&nbsp;
</Typography>
<Typography style={{ fontSize: '80%' }} color="text.secondary">
<Typography color="text.secondary" style={{fontSize: '80%', whiteSpace: 'nowrap', overflow: 'hidden', maxWidth: '100%', textOverflow: 'ellipsis'}}>
{app.Image}
</Typography>
</Stack>

1
client/src/themes/index.jsx
View file

@ -28,6 +28,7 @@ export default function ThemeCustomization({ children }) {
breakpoints: {
values: {
xs: 0,
xsm: 420,
sm: 768,
md: 1024,
lg: 1266,

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "cosmos-server",
"version": "0.4.0-unstable6",
"version": "0.4.0-unstable7",
"description": "",
"main": "test-server.js",
"bugs": {