정민우

Merge branch 'frontend' into 'master'

[New] Docker Image 관련 화면 추가, Navigation 추가 등



See merge request !10
import React, { useEffect } from 'react'
import React, { useEffect, useState } from 'react'
import { BrowserRouter, Route, Redirect, Switch, Link } from 'react-router-dom'
import { ChakraProvider } from '@chakra-ui/react'
import Navigation from './components/Navigation'
import Index from './components/Index'
import SignIn from './components/SignIn'
import SignUp from './components/SignUp'
import DockerImageCreate from './components/DockerImageCreate'
import DockerImageList from './components/DockerImageList'
import DockerContainerCreate from './components/DockerContainerCreate'
import DockerContainerList from './components/DockerContainerList'
import 'semantic-ui-css/semantic.min.css'
......@@ -12,12 +15,17 @@ const App = () => {
return (
<ChakraProvider>
<BrowserRouter>
<Navigation/>
<Switch>
<Route exact path="/" component={Index}/>
<Route exact path="/sign-in" component={SignIn}/>
<Route exact path="/sign-up" component={SignUp}/>
<Route exact path="/docker/container/create" component={DockerContainerCreate}/>
<Route exact path="/docker/container/list" component={DockerContainerList}/>
<Route exact path="/docker/image/create" component={DockerImageCreate}/>
<Route exact path="/docker/image/list" component={DockerImageList}/>
<Route exact path="/docker/container/create"
component={DockerContainerCreate}/>
<Route exact path="/docker/container/list"
component={DockerContainerList}/>
<Redirect path="*" to="/"/>
</Switch>
</BrowserRouter>
......
......@@ -63,37 +63,6 @@ const DockerContainerList = () => {
</ListItem>
))}
</UnorderedList>
<Stack
divider={<StackDivider borderColor="gray.200"/>}
spacing={4}
align="stretch"
>
<FormControl id="container" isRequired>
<FormLabel>Container Name</FormLabel>
<Input
type="email"
placeholder="Container Name"
/>
</FormControl>
<FormControl id="image">
<FormLabel>Image</FormLabel>
<Select placeholder="생성할 컨테이너의 OS를 설정해주세요">
<option value="ubuntu 18.04">Ubuntu 18.04.5 LTS</option>
<option value="ubuntu 20.04">Ubuntu 20.04.2 LTS</option>
</Select>
</FormControl>
</Stack>
<Stack>
</Stack>
</Container>
)
}
......
import React, { useEffect, useState } from 'react'
import {
Container,
Heading,
Button,
Text,
Box, Alert, AlertIcon,
AlertDialog,
AlertDialogContent,
AlertDialogOverlay,
} from '@chakra-ui/react'
import {
Divider,
TextArea,
Header,
Grid,
Form,
} from 'semantic-ui-react'
import http from '../utils/http'
import { useHistory } from 'react-router-dom'
const DockerImageCreate = () => {
const [token, setToken] = useState('')
const [dockerfile, setDockerfile] = useState('')
const [isSuccess, setSuccess] = useState(false)
const history = useHistory()
const uploadDockerfile = () => {
http.post('/dockerfile/add', {
content: dockerfile,
}, {
headers: {
Authorization: `token ${token}`,
}
}).then(response => {
const {success, data, message} = response.data
if (success) {
setSuccess(success)
setTimeout(2000, () => {
history.push('/docker/image/list')
})
}
})
}
useEffect(() => {
const token = localStorage.getItem('token')
setToken(token)
}, [])
return (
<Container>
<Divider hidden/>
<Heading>Upload Your Dockerfile</Heading>
<Divider hidden />
<Form>
<span>dockerfile : </span>
<TextArea
value={dockerfile}
rows={dockerfile.split('\n').length + 2}
onChange={(e, {value}) => setDockerfile(value)}
/>
</Form>
<Divider hidden/>
<Grid>
<Grid.Column
width={3}
floated='right'
>
<Button
size='sm'
colorScheme='teal'
onClick={() => uploadDockerfile()}
>
Upload
</Button>
</Grid.Column>
</Grid>
<AlertDialog
isOpen={isSuccess}
onClose={() => setSuccess(false)}
>
<AlertDialogOverlay>
<AlertDialogContent>
<Alert status="success">
<AlertIcon />
Successfully uploaded !
</Alert>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
</Container>
)
}
export default DockerImageCreate
import React, { useEffect, useState } from 'react'
import {
Container,
Heading,
Button,
Text,
Box,
} from '@chakra-ui/react'
import {
Divider, Grid,
Header,
} from 'semantic-ui-react'
import http from '../utils/http'
import { useHistory } from 'react-router-dom'
const ImageBlock = ({ title, desc, ...rest }) => {
return (
<Box p={5} shadow="md" borderWidth="1px" {...rest}>
<Heading fontSize="xl">{title}</Heading>
<Text mt={4}>{desc}</Text>
</Box>
)
}
const DockerImageList = () => {
const [token, setToken] = useState('')
const [images, setImages] = useState([])
const history = useHistory()
const setTokenFromLocalStorage = () => {
const token = localStorage.getItem('token')
setToken(token)
}
const getImages = () => {
http.get('/image/list', {
headers: {
Authorization: `token ${token}`,
},
}).then(response => {
const { success, code, data, message } = response.data
if (success) {
const { count, data } = data
setImages(data)
}
})
}
useEffect(() => {
setTokenFromLocalStorage()
getImages()
}, [])
return (
<Container>
<Divider hidden />
<Heading>Image List</Heading>
<Divider hidden />
<Grid>
<Grid.Column
floated='right' width={3}
>
<Button
size='xs'
colorScheme='blue'
onClick={() => history.push('/docker/image/create')}
>
New Image
</Button>
</Grid.Column>
</Grid>
{images.map(image => (
<ImageBlock
title={image.name}
desc={image.name}
/>
))}
</Container>
)
}
export default DockerImageList
\ No newline at end of file
import React, { useEffect } from 'react'
import { BrowserRouter, Route, Redirect, Switch, Link, useHistory } from 'react-router-dom'
import React, { useEffect, useState } from 'react'
import {
BrowserRouter,
Route,
Redirect,
Switch,
Link,
useHistory,
} from 'react-router-dom'
import {
Container,
Heading,
......@@ -34,9 +41,10 @@ import {
Wrap,
} from '@chakra-ui/react'
import {
Tab,
Divider,
} from 'semantic-ui-react'
import http from '../utils/http'
const Feature = ({ title, desc, ...rest }) => {
return (
......@@ -47,59 +55,107 @@ const Feature = ({ title, desc, ...rest }) => {
)
}
const Index = () => {
const [token, setToken] = useState('')
const [currentTab, setCurrentTab] = useState('')
const [me, setMe] = useState({})
const history = useHistory()
const panes = [
{
menuItem: 'Tab 1',
render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,
},
{
menuItem: 'Tab 2',
render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,
},
{
menuItem: 'Tab 3',
render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
},
]
const whoAmI = () => {
http.get('/info/user', {
headers: {
Authorization: `token ${token}`,
},
}).then(response => {
const { success, code, data, message } = response.data
if (success) {
setMe(data)
}
})
}
useEffect(() => {
const token = localStorage.getItem('token')
setToken(token)
if (token) {
whoAmI()
}
})
return (
<Container>
<Divider hidden />
<Wrap justify="right">
<Button size="xs" colorScheme="blue" variant="outline"
onClick={() => history.push('/sign-in') }
>
SIGN IN
</Button>
<Button size="xs" colorScheme="blue"
onClick={() => history.push('/sign-up') }
>
SIGN UP
</Button>
</Wrap>
<Divider hidden/>
{me.name ? (
<Heading size="md">
Hi {me.name}
</Heading>
) : (
<Wrap justify="right">
<Button size="xs" colorScheme="blue" variant="outline"
onClick={() => history.push('/sign-in')}
>
SIGN IN
</Button>
<Button size="xs" colorScheme="blue"
onClick={() => history.push('/sign-up')}
>
SIGN UP
</Button>
</Wrap>
)}
<Heading>The Infrastructure Cloud</Heading>
<Text>Easily deploy cloud servers, bare metal, and storage worldwide!</Text>
<Text>Easily deploy cloud servers, bare metal, and storage
worldwide!</Text>
<Divider hidden />
<Divider hidden/>
<Stack spacing={8}>
<Stack spacing={8}>
<Feature
title='Cloud Compute'
desc='Powerful compute instances with Intel CPUs and 100% SSD storage.'
title="Cloud Compute"
desc="Powerful compute instances with Intel CPUs and 100% SSD storage."
/>
<Feature
title='Bare Metal'
desc='Fully automated dedicated servers with zero virtualization layer.'
title="Bare Metal"
desc="Fully automated dedicated servers with zero virtualization layer."
/>
</Stack >
</Stack>
<Divider hidden />
<Divider hidden/>
<Stack spacing={8}>
<Stack spacing={8}>
<Feature
title='Block Storage'
desc='Fast SSD-backed scalable and redundant storage with up to 10TB volumes.'
title="Block Storage"
desc="Fast SSD-backed scalable and redundant storage with up to 10TB volumes."
/>
<Feature
title='Dedicated Cloud'
desc='Dedicated cloud compute instances without the noisy neighbors.'
title="Dedicated Cloud"
desc="Dedicated cloud compute instances without the noisy neighbors."
/>
</Stack >
</Stack>
<Divider hidden />
<Divider hidden/>
</Container>
)
}
......
import {
Container,
} from '@chakra-ui/react'
import {
Tab,
Divider,
} from 'semantic-ui-react'
import React, { useState } from 'react'
import { Redirect } from 'react-router-dom'
const Navigation = () => {
const [activeIndex, setActiveIndex] = useState(0)
const panes = [
{
menuItem: 'Home',
render: () => <Redirect to="/"/>,
},
{
menuItem: 'Image',
render: () => <Redirect to="/docker/image/list"/>,
},
{
menuItem: 'Container',
render: () => <Redirect to="/docker/container/list"/>,
},
]
return (
<Container>
<Divider hidden/>
<Tab
panes={panes}
menu={{ secondary: true, pointing: true }}
onTabChange={(e, { activeIndex }) => setActiveIndex(activeIndex)}
/>
</Container>
)
}
export default Navigation