Skip to content

Commit

Permalink
update register server form and server list
Browse files Browse the repository at this point in the history 
Signed-off-by: MohammedAbdi <[email protected]>
  • Loading branch information
@mamy-CS
mamy-CS committed Oct 1, 2024
1 parent 3668ab9 commit 7b9a282
Show file tree
Hide file tree
Showing 8 changed files with 332 additions and 88 deletions.
2 changes: 1 addition & 1 deletion frontend/src/components/entry-create.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,7 @@ class CreateEntry extends Component<CreateEntryProp, CreateEntryState> {
//user prefered option
localAgentsIdList[0] = this.state.parentIdManualEntryOption;
//default option
localAgentsIdList[1] = prefix + this.props.globalDebugServerInfo.svid_chain[0].id.trust_domain + "/spire/server";
localAgentsIdList[1] = prefix + this.props.globalServerInfo.trustDomain + "/spire/server";

//agents
let agentEntriesDict: { [key: string]: EntriesList[]; } | undefined = this.SpiffeHelper.getAgentsEntries(this.props.globalAgentsList, this.props.globalEntriesList)
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/select-server.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import axios from 'axios';
import GetApiServerUri from './helpers';
import IsManager from './is_manager';
import TornjakApi from './tornjak-api-helpers';
import './style.css';

import {
serverSelectedFunc,
Expand Down Expand Up @@ -135,7 +136,7 @@ class SelectServer extends Component<SelectServerProp, SelectServerState> {

render() {
let managerServerSelector = (
<div id="server-dropdown-div">
<div className="server-select-dropdown">
<label id="server-dropdown">Choose a Server</label>
<div className="servers-drp-dwn">
<select name="servers" id="servers" onChange={this.onServerSelect}>
Expand Down
226 changes: 144 additions & 82 deletions frontend/src/components/server-management.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,15 @@ import {
import { showResponseToast } from './error-api';
import { ServersList } from './types'
import { RootState } from 'redux/reducers';
import { ToastContainer } from 'react-toastify';
import {
TextInput,
Accordion,
AccordionItem,
InlineNotification
} from 'carbon-components-react';
import Table from "tables/servers-list-table";
import './style.css';

type ServerManagementProp = {
// returns the list of available servers and their basic info
Expand All @@ -30,13 +39,15 @@ type ServerManagementState = {
certFileText?: string,
keyFileText?: string,
message: string,
statusOK: string,
}

const Server = (props: { server: ServersList }) => (
<tr>
<td>{props.server.name}</td>
<td>{props.server.address}</td>
<td>{(props.server.mtls && "mTLS") || (props.server.tls && "TLS") || "None"}</td>
<td>{(props.server.mtls && "mTLS") || "None"}</td>
<td>{(props.server.tls && "TLS") || "None"}</td>
</tr>
)

Expand All @@ -55,12 +66,15 @@ class ServerManagement extends Component<ServerManagementProp, ServerManagementS
certFileText: "",
keyFileText: "",
message: "",
statusOK: "",
};
this.onCertFileChange = this.onCertFileChange.bind(this);
this.onCAFileChange = this.onCAFileChange.bind(this);
this.onKeyFileChange = this.onKeyFileChange.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.onChangeServerName = this.onChangeServerName.bind(this);
this.onChangeServerAddress = this.onChangeServerAddress.bind(this);
}

componentDidMount() {
Expand Down Expand Up @@ -97,6 +111,25 @@ class ServerManagement extends Component<ServerManagementProp, ServerManagementS
}));
}

onChangeServerName(e: { target: { value: string; }; } | undefined): void {
if (e === undefined) {
return;
}
var sid = e.target.value;
this.setState({
formServerName: sid,
});
}

onChangeServerAddress(e: { target: { value: string; }; } | undefined): void {
if (e === undefined) {
return;
}
var sid = e.target.value;
this.setState({
formServerAddress: sid,
});
}

onCAFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const files = event.target.files;
Expand All @@ -105,7 +138,7 @@ class ServerManagement extends Component<ServerManagementProp, ServerManagementS
reader.onload = (e: ProgressEvent<FileReader>) => {
if (e.target && e.target.result) {
const result = e.target.result;

// Handle string and ArrayBuffer cases
if (typeof result === "string") {
this.setState({
Expand All @@ -123,15 +156,15 @@ class ServerManagement extends Component<ServerManagementProp, ServerManagementS
reader.readAsText(files[0]);
}
};

onCertFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const files = event.target.files;
if (files && files[0]) {
const reader = new FileReader();
reader.onload = (e: ProgressEvent<FileReader>) => {
if (e.target && e.target.result) {
const result = e.target.result;

// Handle string and ArrayBuffer cases
if (typeof result === "string") {
this.setState({
Expand All @@ -149,15 +182,15 @@ class ServerManagement extends Component<ServerManagementProp, ServerManagementS
reader.readAsText(files[0]);
}
};

onKeyFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const files = event.target.files;
if (files && files[0]) {
const reader = new FileReader();
reader.onload = (e: ProgressEvent<FileReader>) => {
if (e.target && e.target.result) {
const result = e.target.result;

// Handle string and ArrayBuffer cases
if (typeof result === "string") {
this.setState({
Expand All @@ -175,8 +208,8 @@ class ServerManagement extends Component<ServerManagementProp, ServerManagementS
reader.readAsText(files[0]);
}
};




onSubmit(e: { preventDefault: () => void; }) {
Expand All @@ -194,11 +227,20 @@ class ServerManagement extends Component<ServerManagementProp, ServerManagementS
};
axios.post(GetApiServerUri('/manager-api/server/register'), cjtData)
.then(res => {
this.setState({ message: "Requst:" + JSON.stringify(cjtData, null, ' ') + "\n\nSuccess:" + JSON.stringify(res.data, null, ' ') });
this.setState({
message: "Requst:" + JSON.stringify(cjtData, null, ' ') + "\n\nSuccess:" + JSON.stringify(res.data, null, ' '),
statusOK: "OK",
});
this.refreshServerState();
}
)
.catch(err => this.setState({ message: "ERROR:" + err + (typeof (err.response) !== "undefined" ? err.response.data : "") }))
.catch(err => {
showResponseToast(err)
this.setState({
message: "ERROR:" + err + (typeof (err.response) !== "undefined" ? err.response.data : ''),
statusOK: "ERROR",
})
})

}

Expand Down Expand Up @@ -231,80 +273,100 @@ class ServerManagement extends Component<ServerManagementProp, ServerManagementS

return (
<div>
<h3> Register New Server </h3>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>Server Name (Unique)</label>
<input type="text"
name="formServerName"
required
className="form-control"
value={this.state.formServerName}
onChange={this.handleInputChange}
/>
</div>


<div className="form-group">
<label>Address (i.e. http://localhost:5000/) </label>
<input type="text"
name="formServerAddress"
required
className="form-control"
value={this.state.formServerAddress}
onChange={this.handleInputChange}
/>
</div>

<div>
<input
name="formTLS"
type="checkbox"
checked={this.state.formTLS}
onChange={this.handleInputChange}
/>
TLS Enabled
</div>
{this.state.formTLS && tlsFormOptions}

<div>
<input
name="formMTLS"
type="checkbox"
checked={this.state.formMTLS}
onChange={this.handleInputChange}
/>
mTLS Enabled
</div>
{this.state.formMTLS && mtlsFormOptions}

<div className="form-group">
<br></br>
<input type="submit" value="Register Server" className="btn btn-primary" />
</div>
</form>

<div className="alert-primary" role="alert">
<pre>
{this.state.message}
</pre>
</div>

<Accordion className="accordion-entry-form">
<AccordionItem
title={<h3> Register New Server </h3>} open>
<form onSubmit={this.onSubmit}>
<div className="server-form">
<div className="dnsnames-input-field">
<TextInput
helperText="e.g. Server1"
id="dnsnames-input-field"
invalidText="A valid value is required - refer to helper text below"
labelText="Server Name (Unique)"
placeholder="Enter the Server name - Must be unique name"
onChange={this.onChangeServerName}
/>
</div>
<div className="dnsnames-input-field">
<TextInput
helperText="e.g. http://localhost:5000/"
id="dnsnames-input-field"
invalidText="A valid value is required - refer to helper text below"
labelText="Server Address (Url)"
placeholder="Enter the Server address"
onChange={this.onChangeServerAddress}
/>
</div>
<div className="tls-mtls-enabled">
<input
name="formTLS"
type="checkbox"
checked={this.state.formTLS}
onChange={this.handleInputChange}
/>
TLS Enabled
</div>
{this.state.formTLS && tlsFormOptions}

<h3>Server List</h3>
<table className="table" style={{ width: "100%" }}>
<thead className="thead-light">
<tr>
<th>Server Name</th>
<th>Address</th>
<th>TLS?</th>
</tr>
</thead>
<tbody>
{this.serverList()}
</tbody>
</table>
<div className="tls-mtls-enabled">
<input
name="formMTLS"
type="checkbox"
checked={this.state.formMTLS}
onChange={this.handleInputChange}
/>
mTLS Enabled
</div>
{this.state.formMTLS && mtlsFormOptions}

<div className="form-group">
<br></br>
<input type="submit" value="Register Server" className="btn btn-primary" />
</div>
</div>
</form>
<div>
{this.state.statusOK === "OK" &&
<InlineNotification
kind="success"
hideCloseButton
title="SERVER SUCCESSFULLY CREATED"
subtitle={
<div className="toast-messege" data-test="alert-primary">
<pre className="toast-messege-color">
{this.state.message}
</pre>
</div>
}
/>
}
{(this.state.statusOK === "ERROR") &&
<InlineNotification
kind="error"
hideCloseButton
title="SERVER CREATION FAILED"
subtitle={
<div className="toast-messege" data-test="alert-primary">
<pre className="toast-messege-color">
{this.state.message}
</pre>
</div>
}
/>
}
</div>
</AccordionItem>
<AccordionItem
title={<h3>Servers List</h3>} open>
<Table data={this.serverList()} id="table-1" />
</AccordionItem>
</Accordion>
<ToastContainer
className="carbon-toast"
containerId="notifications"
draggable={false}
/>
</div>
)
}
Expand Down
20 changes: 20 additions & 0 deletions frontend/src/components/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -434,3 +434,23 @@
display: inline;
float: right; /* Float to the right */
}

.tls-mtls-enabled input {
margin-right: 10px;
margin-bottom: 10px;
}

.server-form {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
width: 1000px;
border-width: 1px;
border-style: solid;
border-color: rgb(180, 178, 178);
padding: 30px 30px 30px 30px;
}

.server-select-dropdown {
margin-top: 20px;
}
2 changes: 1 addition & 1 deletion frontend/src/components/tornjak-server-info.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const TornjakServerInfoDisplay = (props: { tornjakServerInfo: TornjakServInfo, t
<Accordion>
<AccordionItem title="Trust Domain" open>
<p>
{props.tornjakDebugInfo.svid_chain[0].id.trust_domain}
{props.tornjakServerInfo.trustDomain}
</p>
</AccordionItem>
<AccordionItem title="Plugins" open>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/tables/list-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const {
type DataTableRenderProp = {
listTableData: DataTableRow<string>[],
headerData: DataTableHeader<string>[],
deleteEntity: (selectedRows: readonly DenormalizedRow[]) => string | void,
deleteEntity: ((selectedRows: readonly DenormalizedRow[]) => string | void) | undefined,
banEntity: ((selectedRows: readonly DenormalizedRow[]) => string | void) | undefined,
downloadEntity: ((selectedRows: readonly DenormalizedRow[]) => string | undefined | void) | undefined,
entityType: string,
Expand Down
Loading

0 comments on commit 7b9a282

Please sign in to comment.