arangodb · ewoutp · Jul 10, 2018 · Jul 10, 2018 · Jul 10, 2018 · Jul 10, 2018
diff --git a/dashboard/assets.go b/dashboard/assets.go
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -16,7 +16,7 @@
   "devDependencies": {
     "react-scripts": "1.1.4"
   },
-  "proxy": "https://192.168.140.211:8528",
+  "proxy": "https://192.168.140.212:8528",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

diff --git a/dashboard/src/App.js b/dashboard/src/App.js
@@ -1,12 +1,14 @@
+import { Container, Segment, Message } from 'semantic-ui-react';
 import React, { Component } from 'react';
 import ReactTimeout from 'react-timeout';
-import DeploymentOperator from './deployment/DeploymentOperator.js';
-import StorageOperator from './storage/StorageOperator.js';
-import NoOperator from './NoOperator.js';
-import Loading from './util/Loading.js';
-import api, { isUnauthorized } from './api/api.js';
-import { Container, Segment, Message } from 'semantic-ui-react';
-import { withAuth } from './auth/Auth.js';
+
+import { withAuth } from './auth/Auth';
+import api, { isUnauthorized } from './api/api';
+import DeploymentOperator from './deployment/DeploymentOperator';
+import DeploymentReplicationOperator from './replication/DeploymentReplicationOperator';
+import Loading from './util/Loading';
+import NoOperator from './NoOperator';
+import StorageOperator from './storage/StorageOperator';
 
 const PodInfoView = ({pod, namespace}) => (
   <Segment basic>
@@ -17,10 +19,12 @@ const PodInfoView = ({pod, namespace}) => (
   </Segment>
 );
 
-const OperatorsView = ({error, deployment, storage, pod, namespace}) => {
+const OperatorsView = ({error, deployment, deploymentReplication, storage, pod, namespace}) => {
   let Operator = NoOperator;
   if (deployment)
     Operator = DeploymentOperator;
+  else if (deploymentReplication) 
+    Operator = DeploymentReplicationOperator;
   else if (storage)
     Operator = StorageOperator;
   return (
@@ -70,6 +74,7 @@ class App extends Component {
       return <OperatorsView
         error={this.state.error}
         deployment={this.state.operators.deployment}
+        deploymentReplication={this.state.operators.deployment_replication}
         storage={this.state.operators.storage}
         pod={this.state.operators.pod}
         namespace={this.state.operators.namespace}

diff --git a/dashboard/src/NoOperator.js b/dashboard/src/NoOperator.js
@@ -1,25 +1,21 @@
-import React, { Component } from 'react';
 import { Container, Message, Modal, Segment } from 'semantic-ui-react';
+import React from 'react';
 
-class NoOperator extends Component {
-  render() {
-    return (
-        <Container>
-          <Modal open>
-            <Modal.Header>Welcome to Kube-ArangoDB</Modal.Header>
-            <Modal.Content>
-              <Segment basic>
-                <Message color="orange">
-                  There are no operators available yet.
-                </Message>
-              </Segment>
-              {this.props.podInfoView}
-              {(this.props.error) ? <Message error content={this.props.error}/> : null}
-            </Modal.Content>
-          </Modal>
-        </Container>
-    );
-  }
-}
+const NoOperator = () => (
+  <Container>
+    <Modal open>
+      <Modal.Header>Welcome to Kube-ArangoDB</Modal.Header>
+      <Modal.Content>
+        <Segment basic>
+          <Message color="orange">
+            There are no operators available yet.
+          </Message>
+        </Segment>
+        {this.props.podInfoView}
+        {(this.props.error) ? <Message error content={this.props.error}/> : null}
+      </Modal.Content>
+    </Modal>
+  </Container>
+);
 
 export default NoOperator;
diff --git a/dashboard/src/auth/Auth.js b/dashboard/src/auth/Auth.js
@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
-import api from '../api/api.js';
-import Login from './Login.js';
-import Loading from '../util/Loading.js';
-import LogoutContext from './LogoutContext.js';
-import { getSessionItem, setSessionItem } from "../util/Storage.js";
 
-const tokenSessionKey = "auth-token";
+import { getSessionItem, setSessionItem } from '../util/Storage';
+import api from '../api/api';
+import Loading from '../util/Loading';
+import Login from './Login';
+import LogoutContext from './LogoutContext';
 
+const tokenSessionKey = "auth-token";
 
 // withAuth adds a doLogout property to the given component.
 export function withAuth(WrappedComponent) {

diff --git a/dashboard/src/auth/Login.js b/dashboard/src/auth/Login.js
@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
 import { Button, Container, Form, Icon, Message, Modal } from 'semantic-ui-react';
 import { css } from 'react-emotion';
+import React, { Component } from 'react';
 
 const LoginView = ({username, password, onUsernameChanged, onPasswordChanged, doLogin, error}) => (
   <Container>

diff --git a/dashboard/src/deployment/DeploymentDetails.js b/dashboard/src/deployment/DeploymentDetails.js
@@ -1,11 +1,12 @@
-import ReactTimeout from 'react-timeout';
+import { Loader } from 'semantic-ui-react';
 import React, { Component } from 'react';
-import api, { isUnauthorized } from '../api/api.js';
-import Loading from '../util/Loading.js';
-import MemberList from './MemberList.js';
+import ReactTimeout from 'react-timeout';
 import styled from 'react-emotion';
-import { Loader } from 'semantic-ui-react';
+
 import { withAuth } from '../auth/Auth.js';
+import api, { isUnauthorized } from '../api/api';
+import Loading from '../util/Loading';
+import MemberList from './MemberList';
 
 const LoaderBox = styled('span')`
   float: right;

diff --git a/dashboard/src/deployment/DeploymentList.js b/dashboard/src/deployment/DeploymentList.js
@@ -1,12 +1,13 @@
 import { Icon, Loader, Popup, Table } from 'semantic-ui-react';
 import { Link } from "react-router-dom";
-import api, { isUnauthorized } from '../api/api.js';
-import CommandInstruction from '../util/CommandInstruction.js';
-import Loading from '../util/Loading.js';
 import React, { Component } from 'react';
 import ReactTimeout from 'react-timeout';
 import styled from 'react-emotion';
-import { withAuth } from '../auth/Auth.js';
+
+import { withAuth } from '../auth/Auth';
+import api, { isUnauthorized } from '../api/api';
+import CommandInstruction from '../util/CommandInstruction';
+import Loading from '../util/Loading';
 
 const LoaderBox = styled('span')`
   float: right;

diff --git a/dashboard/src/deployment/DeploymentOperator.js b/dashboard/src/deployment/DeploymentOperator.js
@@ -1,11 +1,12 @@
-import React, { Component } from 'react';
-import LogoutContext from '../auth/LogoutContext.js';
-import DeploymentDetails from './DeploymentDetails.js';
-import DeploymentList from './DeploymentList.js';
-import { Header, Menu, Message, Segment } from 'semantic-ui-react';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import { Header, Menu, Message, Segment } from 'semantic-ui-react';
+import React, { Component } from 'react';
 import styled from 'react-emotion';
 
+import DeploymentDetails from './DeploymentDetails';
+import DeploymentList from './DeploymentList';
+import LogoutContext from '../auth/LogoutContext';
+
 const StyledMenu = styled(Menu)`
   width: 15rem !important;
   @media (max-width: 768px) {

diff --git a/dashboard/src/deployment/MemberList.js b/dashboard/src/deployment/MemberList.js
@@ -1,21 +1,8 @@
-import React, { Component } from 'react';
-import styled from 'react-emotion';
 import { Accordion, Header, Icon, List, Segment } from 'semantic-ui-react';
-import CommandInstruction from '../util/CommandInstruction.js';
-
-const Field = styled('div')`
-  padding-top: 0.3em;
-  padding-bottom: 0.3em;
-`;
-
-const FieldLabel = styled('span')`
-  width: 9rem;
-  display: inline-block;
-`;
+import React, { Component } from 'react';
 
-const FieldIcons = styled('div')`
-  float: right;
-`;
+import { Field, FieldLabel, FieldIcons } from '../style/style';
+import CommandInstruction from '../util/CommandInstruction';
 
 const MemberListView = ({group, activeMemberID, onClick, members, namespace}) => (
   <Segment>

diff --git a/dashboard/src/replication/DeploymentReplicationDetails.js b/dashboard/src/replication/DeploymentReplicationDetails.js
@@ -0,0 +1,119 @@
+import { Header, Loader, Segment } from 'semantic-ui-react';
+import React, { Component } from 'react';
+import ReactTimeout from 'react-timeout';
+import styled from 'react-emotion';
+
+import { Field, FieldContent as FC, FieldLabel as FL } from '../style/style';
+import { withAuth } from '../auth/Auth';
+import api, { isUnauthorized } from '../api/api';
+import Loading from '../util/Loading';
+
+const LoaderBox = styled('span')`
+  float: right;
+  width: 0;
+  padding-right: 1em;
+  margin-right: 1em;
+  margin-top: 1em;
+  max-width: 0;
+  display: inline-block;
+`;
+
+const EndpointView = ({title, deploymentName, masterEndpoint, authKeyfileSecretName, authUserSecretName, tlsCACert, tlsCACertSecretName}) => (
+  <Segment>
+    <Header>{title}</Header>
+    <Field>
+      <FL>Deployment</FL>
+      <FC>{deploymentName || "-"}</FC>
+    </Field>
+    <Field>
+      <FL>Master endpoint</FL>
+      <FC>{masterEndpoint || "-"}</FC>
+    </Field>
+    <Field>
+      <FL>TLS CA Certificate</FL>
+      <FC><code>{tlsCACert}</code></FC>
+    </Field>
+    <Header sub>Secret names</Header>
+    <Field>
+      <FL>Authentication keyfile</FL>
+      <FC><code>{authKeyfileSecretName || "-"}</code></FC>
+    </Field>
+    <Field>
+      <FL>Authentication user</FL>
+      <FC><code>{authUserSecretName || "-"}</code></FC>
+    </Field>
+    <Field>
+      <FL>TLS CA Certificate</FL>
+      <FC><code>{tlsCACertSecretName || "-"}</code></FC>
+    </Field>
+  </Segment>
+);
+
+const DetailsView = ({replication, loading}) => (
+  <div>
+    <LoaderBox><Loader size="mini" active={loading} inline/></LoaderBox>
+    <EndpointView
+      title="Source"
+      deploymentName={replication.source.deployment_name}
+      masterEndpoint={replication.source.master_endpoint}
+      authKeyfileSecretName={replication.source.auth_keyfile_secret_name}
+      authUserSecretName={replication.source.auth_user_secret_name}
+      tlsCACert={replication.source.tls_ca_cert}
+      tlsCACertSecretName={replication.source.tls_ca_cert_secret_name}
+    />
+    <EndpointView
+      title="Destination"
+      deploymentName={replication.destination.deployment_name}
+      masterEndpoint={replication.destination.master_endpoint}
+      authKeyfileSecretName={replication.destination.auth_keyfile_secret_name}
+      authUserSecretName={replication.destination.auth_user_secret_name}
+      tlsCACert={replication.destination.tls_ca_cert}
+      tlsCACertSecretName={replication.destination.tls_ca_cert_secret_name}
+    />
+  </div>
+);
+
+class DeploymentReplicationDetails extends Component {
+  state = {
+    loading: true,
+    error: undefined
+  };
+
+  componentDidMount() {
+    this.reloadDeploymentReplications();
+  }
+
+  reloadDeploymentReplications = async() => {
+    try {
+      this.setState({
+        loading: true
+      });
+      const result = await api.get(`/api/deployment-replication/${this.props.name}`);
+      this.setState({
+        replication: result,
+        loading: false,
+        error: undefined
+      });
+    } catch (e) {
+      this.setState({
+        loading: false,
+        error: e.message
+      });
+      if (isUnauthorized(e)) {
+        this.props.doLogout();
+        return;
+      }
+    }
+    this.props.setTimeout(this.reloadDeploymentReplications, 5000);
+  }
+
+  render() {
+    const dr = this.state.replication;
+    if (!dr) {
+      return (<Loading/>);
+    }
+    return (<DetailsView replication={dr} loading={this.state.loading}/>);
+  }
+}
+
+export default ReactTimeout(withAuth(DeploymentReplicationDetails));