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

-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