DockerContainerList.js
2.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import React, { useState, useEffect } from 'react'
import { useHistory, Redirect } from 'react-router-dom'
import {
Container,
Heading,
Button,
Segment,
Message,
Form,
Input,
Transition,
Select,
Checkbox,
FormControl,
FormLabel,
FormErrorMessage,
FormHelperText,
VStack,
Stack,
StackDivider,
Box,
Text,
List, ListItem, ListIcon, OrderedList, UnorderedList,
} from '@chakra-ui/react'
import {
Divider,
} from 'semantic-ui-react'
import http from '../utils/http'
const DockerContainerList = () => {
const [containers, setContainers] = useState([])
const [isError, setError] = useState(false)
const [message, setMessage] = useState('')
const getContainerList = () => {
http.get('/docker/container/list').then(response => {
const { status, data, message } = response.data
if (status) {
const { containers } = data
setContainers(containers)
} else {
setError(true)
setMessage(message)
}
})
}
useEffect(() => {
getContainerList()
}, [])
return (
<Container>
<Divider hidden/>
<Heading>Container List</Heading>
<Divider hidden/>
<UnorderedList>
{containers.map((container, key) => (
<ListItem key={key}>
{container.name}
</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>
)
}
export default DockerContainerList