Skip to content

Commit 8379c10

Browse files
petar-cvitpetar-cvit
committed
comparison
1 parent 814dbe6 commit 8379c10

File tree

4 files changed

+210
-1
lines changed

4 files changed

+210
-1
lines changed

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,13 @@
1717
"@docusaurus/core": "2.4.0",
1818
"@docusaurus/preset-classic": "2.4.0",
1919
"@mdx-js/react": "^1.6.22",
20+
"antd": "^5.5.0",
2021
"clsx": "^1.2.1",
2122
"prism-react-renderer": "^1.3.5",
2223
"react": "^17.0.2",
23-
"react-dom": "^17.0.2"
24+
"react-code-blocks": "^0.0.9-0",
25+
"react-dom": "^17.0.2",
26+
"react-syntax-highlighter": "^15.5.0"
2427
},
2528
"devDependencies": {
2629
"@docusaurus/module-type-aliases": "2.4.0"

‎src/components/Comparison/index.js‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
import React from 'react';
2+
import styles from './styles.module.css';
3+
import CodeBlock from '@theme/CodeBlock'
4+
import {Form, Input, InputNumber, Switch} from "antd";
5+
6+
class Comparison extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
10+
this.state = {
11+
name: "nginx",
12+
replicas: "3",
13+
version: "1.14.2",
14+
port: "80",
15+
service: false,
16+
};
17+
}
18+
19+
render() {
20+
const k8sDplString = 'apiVersion: apps/v1\n' +
21+
'kind: Deployment\n' +
22+
'metadata:\n' +
23+
' name: ' + this.state.name + '\n' +
24+
' labels:\n' +
25+
' app: ' + this.state.name + '\n' +
26+
'spec:\n' +
27+
' replicas: ' + this.state.replicas + '\n' +
28+
' selector:\n' +
29+
' matchLabels:\n' +
30+
' app: ' + this.state.name + '\n' +
31+
' template:\n' +
32+
' metadata:\n' +
33+
' labels:\n' +
34+
' app: ' + this.state.name + '\n' +
35+
' spec:\n' +
36+
' containers:\n' +
37+
' - name: ' + this.state.name + '\n' +
38+
' image: ' + this.state.name + ':' + this.state.version + '\n' +
39+
' ports:\n' +
40+
' - containerPort: ' + this.state.port
41+
42+
const k8sSvcString = '---\n' +
43+
'apiVersion: v1\n' +
44+
'kind: Service\n' +
45+
'metadata:\n' +
46+
' name: ' + this.state.name + '\n' +
47+
'spec:\n' +
48+
' ports:\n' +
49+
' - protocol: TCP\n' +
50+
' port: ' + this.state.port + '\n' +
51+
' targetPort: 9376'
52+
53+
const onNameChange = (event) => {
54+
this.setState({
55+
name: event.target.value,
56+
replicas: this.state.replicas,
57+
version: this.state.version,
58+
port: this.state.port,
59+
service: this.state.service,
60+
})
61+
}
62+
63+
const onReplicasChange = (replicas) => {
64+
this.setState({
65+
name: this.state.name,
66+
replicas: replicas,
67+
version: this.state.version,
68+
port: this.state.port,
69+
service: this.state.service,
70+
})
71+
}
72+
73+
const onVersionChange = (event) => {
74+
this.setState({
75+
name: this.state.name,
76+
replicas: this.state.replicas,
77+
version: event.target.value,
78+
port: this.state.port,
79+
service: this.state.service,
80+
})
81+
}
82+
83+
const onPortChange = (port) => {
84+
this.setState({
85+
name: this.state.name,
86+
replicas: this.state.replicas,
87+
version: this.state.version,
88+
port: port,
89+
service: this.state.service,
90+
})
91+
}
92+
93+
const onNeedService = (service) => {
94+
this.setState({
95+
name: this.state.name,
96+
replicas: this.state.replicas,
97+
version: this.state.version,
98+
port: this.state.port,
99+
service: service,
100+
})
101+
}
102+
103+
const getManifest = () => {
104+
var manifest = k8sDplString;
105+
106+
if (this.state.service) {
107+
manifest += '\n' + k8sSvcString;
108+
}
109+
110+
return manifest
111+
}
112+
113+
return (
114+
<div className={styles.all}>
115+
<div className={styles.yaml}>
116+
<CodeBlock
117+
language={'yaml'}
118+
showLineNumbers={true}
119+
>
120+
{getManifest()}
121+
</CodeBlock>
122+
</div>
123+
<div className={styles.ui}>
124+
<h1 className="hero__title">Simple deployment</h1>
125+
<p className="hero__subtitle">Cyclops gives you a UI containing fields you define yourself to manage your
126+
K8s workloads</p>
127+
<Form labelAlign={"left"}>
128+
<Form.Item
129+
label="Name"
130+
style={{display: 'block'}}
131+
>
132+
<Input defaultValue={'nginx'} onChange={onNameChange}/>
133+
</Form.Item>
134+
<Form.Item
135+
label="Replicas"
136+
style={{display: 'block'}}
137+
>
138+
<InputNumber defaultValue={'3'} onChange={onReplicasChange}/>
139+
</Form.Item>
140+
<Form.Item
141+
label="Version"
142+
style={{display: 'block'}}
143+
>
144+
<Input defaultValue={'1.14.2'} onChange={onVersionChange}/>
145+
</Form.Item>
146+
<Form.Item
147+
label="Port"
148+
style={{display: 'block'}}
149+
>
150+
<InputNumber defaultValue={'80'} onChange={onPortChange}/>
151+
</Form.Item>
152+
<Form.Item
153+
label="Need service"
154+
style={{display: 'block'}}
155+
>
156+
<Switch defaultValue={'false'} onChange={onNeedService}/>
157+
</Form.Item>
158+
</Form>
159+
</div>
160+
</div>
161+
);
162+
}
163+
}
164+
165+
export default Comparison;

‎src/components/Comparison/styles.module.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@media screen and (max-width: 950px) {
2+
.all {
3+
flex-direction: column;
4+
width: 100%;
5+
}
6+
}
7+
8+
.all {
9+
display: flex;
10+
justify-content: center;
11+
background-color: white;
12+
}
13+
14+
.yaml {
15+
float: right;
16+
width: 50%;
17+
padding-right: 10%;
18+
padding-top: 10px;
19+
}
20+
21+
.ui {
22+
float: left;
23+
width: 30%;
24+
}
25+
26+
@media screen and (max-width: 600px) {
27+
.yaml {
28+
width: 100%;
29+
padding-right: 5px;
30+
padding-left: 5px;
31+
}
32+
33+
.ui {
34+
width: 100%;
35+
padding-right: 5px;
36+
padding-left: 5px;
37+
}
38+
}
39+

‎src/pages/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import helmsman from '/static/img/cyclops_helmsman.png';
99
import nuqleus from '/static/img/nuqleus_logo.png';
1010

1111
import styles from './index.module.css';
12+
import Comparison from "../components/Comparison";
1213

1314
function HomepageHeader() {
1415
const {siteConfig} = useDocusaurusContext();
@@ -46,6 +47,7 @@ export default function Home() {
4647
<HomepageHeader />
4748
<main>
4849
<HomepageFeatures />
50+
<Comparison />
4951
</main>
5052
</Layout>
5153
);

0 commit comments

Comments
 (0)