Skip to content

Commit 81b9802

Browse files
ewoutpewoutp
committed
Extensing deployment list
1 parent 7c7849a commit 81b9802

File tree

10 files changed

+355
-75
lines changed

10 files changed

+355
-75
lines changed

‎dashboard/assets.go

+51-51
Large diffs are not rendered by default.

‎dashboard/package-lock.json

+59-8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dashboard/package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@
44
"private": true,
55
"dependencies": {
66
"react": "^16.4.1",
7+
"react-copy-to-clipboard": "^5.0.1",
78
"react-dom": "^16.4.1",
89
"semantic-ui-less": "^2.2.12",
9-
"semantic-ui-react": "^0.78.2"
10+
"semantic-ui-react": "^0.81.3"
1011
},
1112
"devDependencies": {
1213
"react-scripts": "1.1.4"
1314
},
14-
"proxy": "https://kube-arangodb-operator:8528",
15+
"proxy": "https://192.168.140.208:8528",
1516
"scripts": {
1617
"start": "react-scripts start",
1718
"build": "react-scripts build",

‎dashboard/public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5+
<!-- meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" -->
66
<meta name="theme-color" content="#000000">
77
<!--
88
manifest.json provides metadata used when your web app is added to the

‎dashboard/src/deployment/DeploymentList.js

+46-3
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,56 @@
11
import React, { Component } from 'react';
22
import { apiGet } from '../api/api.js';
3-
import { Icon, Table } from 'semantic-ui-react';
3+
import { Icon, Popup, Table } from 'semantic-ui-react';
44
import Loading from '../util/Loading.js';
5+
import CommandInstruction from '../util/CommandInstruction.js';
56

67
const HeaderView = () => (
78
<Table.Header>
89
<Table.Row>
910
<Table.HeaderCell>State</Table.HeaderCell>
1011
<Table.HeaderCell>Name</Table.HeaderCell>
1112
<Table.HeaderCell>Mode</Table.HeaderCell>
12-
<Table.HeaderCell>Pods</Table.HeaderCell>
13+
<Table.HeaderCell>Version</Table.HeaderCell>
14+
<Table.HeaderCell><Popup trigger={<span>Pods</span>}>Ready / Total</Popup></Table.HeaderCell>
15+
<Table.HeaderCell><Popup trigger={<span>Volumes</span>}>Bound / Total</Popup></Table.HeaderCell>
16+
<Table.HeaderCell>StorageClass</Table.HeaderCell>
17+
<Table.HeaderCell></Table.HeaderCell>
1318
</Table.Row>
1419
</Table.Header>
1520
);
1621

17-
const RowView = ({name, mode, ready_pod_count, pod_count}) => (
22+
const DatabaseLinkView = ({name, url}) => (
23+
<a href={url} target={name}>
24+
<Popup trigger={<Icon link name="database"/>}>
25+
Go the the web-UI of the database.
26+
</Popup>
27+
</a>
28+
);
29+
30+
const NoDatabaseLinkView = () => (
31+
<Popup trigger={<Icon link name="database"/>}>
32+
This deployment is not reachable outside the Kubernetes cluster.
33+
</Popup>
34+
);
35+
36+
const RowView = ({name, mode, version, license, ready_pod_count, pod_count, ready_volume_count, volume_count, storage_classes, database_url, delete_command}) => (
1837
<Table.Row>
1938
<Table.Cell><Icon name="bell" color="red"/></Table.Cell>
2039
<Table.Cell>{name}</Table.Cell>
2140
<Table.Cell>{mode}</Table.Cell>
41+
<Table.Cell>{version} {(license) ? `(${license})` : "" }</Table.Cell>
2242
<Table.Cell>{ready_pod_count} / {pod_count}</Table.Cell>
43+
<Table.Cell>{ready_volume_count} / {volume_count}</Table.Cell>
44+
<Table.Cell>{storage_classes.map((item) => (item === "") ? "<default>" : item)}</Table.Cell>
45+
<Table.Cell>
46+
{ database_url ? <DatabaseLinkView name={name} url={database_url}/> : <NoDatabaseLinkView/>}
47+
<CommandInstruction
48+
trigger={<Icon floated="right" name="trash alternate"/>}
49+
command={delete_command}
50+
title="Delete deployment"
51+
description="To delete this deployment, run:"
52+
/>
53+
</Table.Cell>
2354
</Table.Row>
2455
);
2556

@@ -32,9 +63,17 @@ const ListView = ({items}) => (
3263
<RowView
3364
key={item.name}
3465
name={item.name}
66+
namespace={item.namespace}
3567
mode={item.mode}
68+
version={item.database_version}
69+
license={item.database_license}
3670
ready_pod_count={item.ready_pod_count}
3771
pod_count={item.pod_count}
72+
ready_volume_count={item.ready_volume_count}
73+
volume_count={item.volume_count}
74+
storage_classes={item.storage_classes}
75+
database_url={item.database_url}
76+
delete_command={createDeleteCommand(item.name, item.namespace)}
3877
/>) : <p>No items</p>
3978
}
4079
</Table.Body>
@@ -43,6 +82,10 @@ const ListView = ({items}) => (
4382

4483
const EmptyView = () => (<div>No deployments</div>);
4584

85+
function createDeleteCommand(name, namespace) {
86+
return `kubectl delete ArangoDeployment -n ${namespace} ${name}`;
87+
}
88+
4689
class DeploymentList extends Component {
4790
state = {};
4891

‎dashboard/src/util/CommandInstruction.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { Component } from 'react';
2+
import { Button, Modal, Segment } from 'semantic-ui-react';
3+
import {CopyToClipboard} from 'react-copy-to-clipboard';
4+
5+
class CommandInstruction extends Component {
6+
state = {};
7+
8+
close = () => { this.setState({open:false}); }
9+
open = () => { this.setState({open:true}); }
10+
11+
render() {
12+
return (
13+
<Modal trigger={this.props.trigger} onClose={this.close} onOpen={this.open} open={this.state.open}>
14+
<Modal.Header>{this.props.title}</Modal.Header>
15+
<Modal.Content>
16+
<Modal.Description>
17+
<p>
18+
{this.props.description}
19+
</p>
20+
<Segment clearing>
21+
<code>{this.props.command}</code>
22+
</Segment>
23+
</Modal.Description>
24+
</Modal.Content>
25+
<Modal.Actions>
26+
<CopyToClipboard text={this.props.command} onCopy={this.close}>
27+
<Button
28+
positive
29+
icon='copy'
30+
labelPosition='right'
31+
content="Copy"
32+
/>
33+
</CopyToClipboard>
34+
</Modal.Actions>
35+
</Modal>
36+
);
37+
}
38+
}
39+
40+
export default CommandInstruction;

‎dashboard/src/util/Loading.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const Loading = ({message}) => (
66
<Dimmer inverted active>
77
<Loader inverted>{message || "Loading..."}</Loader>
88
</Dimmer>
9-
<div style={{"min-height":"3em"}}/>
9+
<div style={{minHeight:"3em"}}/>
1010
</Segment>
1111
);
1212

‎manifests/templates/storage/rbac.yaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ rules:
2929
verbs: ["*"]
3030
- apiGroups: [""]
3131
resources: ["pods"]
32-
verbs: ["get"]
32+
verbs: ["get", "update"]
3333
- apiGroups: ["apps"]
3434
resources: ["daemonsets"]
3535
verbs: ["*"]

0 commit comments

Comments
 (0)