diff --git a/frontend/src/components/entry-create.tsx b/frontend/src/components/entry-create.tsx index 5870eb3b..3f732242 100644 --- a/frontend/src/components/entry-create.tsx +++ b/frontend/src/components/entry-create.tsx @@ -256,7 +256,7 @@ class CreateEntry extends Component { //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) diff --git a/frontend/src/components/select-server.tsx b/frontend/src/components/select-server.tsx index 5a05c973..8bcdb201 100644 --- a/frontend/src/components/select-server.tsx +++ b/frontend/src/components/select-server.tsx @@ -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, @@ -135,7 +136,7 @@ class SelectServer extends Component { render() { let managerServerSelector = ( -
+
-
- - -
- - -
- -
- - TLS Enabled -
- {this.state.formTLS && tlsFormOptions} - -
- - mTLS Enabled -
- {this.state.formMTLS && mtlsFormOptions} - -
-

- -
- - -
- 
-            {this.state.message}
-
-
- + + Register New Server } open> +
+
+
+ +
+
+ +
+
+ + TLS Enabled +
+ {this.state.formTLS && tlsFormOptions} -

Server List

- - - - - - - - - - {this.serverList()} - -
Server NameAddressTLS?
+
+ + mTLS Enabled +
+ {this.state.formMTLS && mtlsFormOptions} +
+

+ +
+
+
+
+ {this.state.statusOK === "OK" && + + 
+                        {this.state.message}
+
+
+ } + /> + } + {(this.state.statusOK === "ERROR") && + + 
+                        {this.state.message}
+
+
+ } + /> + } +
+ + Servers List} open> + + + + ) } diff --git a/frontend/src/components/style.css b/frontend/src/components/style.css index c996de5b..2ed95249 100644 --- a/frontend/src/components/style.css +++ b/frontend/src/components/style.css @@ -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; +} \ No newline at end of file diff --git a/frontend/src/components/tornjak-server-info.tsx b/frontend/src/components/tornjak-server-info.tsx index 45ab2b61..47519b06 100644 --- a/frontend/src/components/tornjak-server-info.tsx +++ b/frontend/src/components/tornjak-server-info.tsx @@ -56,7 +56,7 @@ const TornjakServerInfoDisplay = (props: { tornjakServerInfo: TornjakServInfo, t

- {props.tornjakDebugInfo.svid_chain[0].id.trust_domain} + {props.tornjakServerInfo.trustDomain}

diff --git a/frontend/src/tables/list-table.tsx b/frontend/src/tables/list-table.tsx index aa698768..996d82cf 100644 --- a/frontend/src/tables/list-table.tsx +++ b/frontend/src/tables/list-table.tsx @@ -20,7 +20,7 @@ const { type DataTableRenderProp = { listTableData: DataTableRow[], headerData: DataTableHeader[], - 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, diff --git a/frontend/src/tables/servers-list-table.tsx b/frontend/src/tables/servers-list-table.tsx new file mode 100644 index 00000000..f559fea7 --- /dev/null +++ b/frontend/src/tables/servers-list-table.tsx @@ -0,0 +1,160 @@ +import React from "react"; +import { connect } from 'react-redux'; +// import IsManager from 'components/is_manager'; +import { + serversListUpdateFunc +} from 'redux/actions'; +import Table from './list-table'; +import { ServersList } from "components/types"; +// import { DenormalizedRow } from "carbon-components-react"; +import { RootState } from "redux/reducers"; +import TornjakApi from 'components/tornjak-api-helpers'; + +// ServersListTable takes in +// listTableData: servers data to be rendered on table +// returns servers data inside a carbon component table with specified functions + +type ServersListTableProp = { + // dispatches a payload for list of servers with their metadata info as an array of ServersList Type and has a return type of void + serversListUpdateFunc: (globalServersList: ServersList[]) => void, + // data provided to the servers table + data: { + key: string, + props: { server: ServersList } + }[] | string | JSX.Element[], + id: string, + // list of servers with their metadata info as an array of ServersList Type + globalServersList: ServersList[], + // the selected server for manager mode + globalServerSelected: string, +} + +type ServersListTableState = { + listData: { key: string, props: { server: ServersList } }[] | ServersList[] | string | JSX.Element[], + listTableData: { + id: string; + serverName: string; + serverAddress: string; + tls: string; + mtls: string; + }[] + +} +class ServersListTable extends React.Component { + TornjakApi: TornjakApi; + constructor(props: ServersListTableProp) { + super(props); + this.TornjakApi = new TornjakApi(props); + this.state = { + listData: props.data, + listTableData: [], + }; + this.prepareTableData = this.prepareTableData.bind(this); + // this.deleteServer = this.deleteServer.bind(this); + } + + componentDidMount() { + this.prepareTableData(); + } + componentDidUpdate(prevProps: ServersListTableProp) { + if (prevProps !== this.props) { + this.setState({ + listData: this.props.globalServersList + }) + this.prepareTableData(); + } + } + + prepareTableData() { + const { data } = this.props; + let listData: { props: { server: ServersList; }; }[] | ({ key: string; props: { server: ServersList; }; } | JSX.Element)[] = []; + if (typeof (data) === "string" || data === undefined) + return + data.forEach(val => listData.push(Object.assign({}, val))); + let listtabledata: { id: string; serverName: string; serverAddress: string; tls: string; mtls: string;}[] = []; + for (let i = 0; i < listData.length; i++) { + listtabledata[i] = { id: "", serverName: "", serverAddress: "", tls: "", mtls: ""}; + listtabledata[i]["id"] = (i + 1).toString(); + listtabledata[i]["serverName"] = listData[i].props.server.name; + listtabledata[i]["serverAddress"] = listData[i].props.server.address; + listtabledata[i]["tls"] = listData[i].props.server.tls ? listData[i].props.server.tls : "None"; + listtabledata[i]["mtls"] = listData[i].props.server.mtls ? listData[i].props.server.mtls : "None"; + } + this.setState({ + listTableData: listtabledata + }) + } + + //Note: future implementation - server delete function + // keep code + // deleteServer(selectedRows: readonly DenormalizedRow[]) { + // if (!selectedRows || selectedRows.length === 0) return ""; + // let server: { name: string }[] = [], successMessage + + // for (let i = 0; i < selectedRows.length; i++) { + // server[i] = { name: selectedRows[i].cells[1].value }; + // if (IsManager) { + // successMessage = this.TornjakApi.serverDelete(this.props.globalServerSelected, { server: server[i] }, this.props.serversListUpdateFunc, this.props.globalServersList); + // } else { + // successMessage = this.TornjakApi.localServerDelete({ server: server[i] }, this.props.serversListUpdateFunc, this.props.globalServersList); + // } + // successMessage.then(function (result) { + // if (result === "SUCCESS") { + // window.alert(`CLUSTER "${server[i].name}" DELETED SUCCESSFULLY!`); + // window.location.reload(); + // } else { + // window.alert(`Error deleting server "${server[i].name}": ` + result); + // } + // return; + // }) + // } + // } + + + render() { + const { listTableData } = this.state; + const headerData = [ + { + header: '#No', + key: 'id', + }, + { + header: 'Server Name', + key: 'serverName', + }, + { + header: 'Server Address', + key: 'serverAddress', + }, + { + header: 'TLS', + key: 'tls', + }, + { + header: 'mTLS', + key: 'mtls', + } + ]; + return ( +
+
+ + ); + } +} + +const mapStateToProps = (state: RootState) => ({ + globalServerSelected: state.servers.globalServerSelected, + globalServersList: state.servers.globalServersList, +}) + +export default connect( + mapStateToProps, + { serversListUpdateFunc } +)(ServersListTable) \ No newline at end of file diff --git a/frontend/src/tables/table-toolbar.tsx b/frontend/src/tables/table-toolbar.tsx index 8e4330c9..c4446ace 100644 --- a/frontend/src/tables/table-toolbar.tsx +++ b/frontend/src/tables/table-toolbar.tsx @@ -26,7 +26,7 @@ const Auth_Server_Uri = env.REACT_APP_AUTH_SERVER_URI; // selectedRows: selectedRows from DataTable // returns the toolbar of the table for the specified entity type TableToolBarProp = { - deleteEntity: (selectedRows: readonly DenormalizedRow[]) => string | void, + deleteEntity: ((selectedRows: readonly DenormalizedRow[]) => string | void) | undefined, banEntity: ((selectedRows: readonly DenormalizedRow[]) => string | void) | undefined, downloadEntity: ((selectedRows: readonly DenormalizedRow[]) => void) | undefined, onInputChange: (event: React.SyntheticEvent) => void, @@ -60,7 +60,8 @@ class TableToolBar extends React.Component renderIcon={IoTrashOutline} iconDescription="Delete" onClick={() => { - this.props.deleteEntity(this.props.selectedRows); + if(this.props.deleteEntity !== undefined) + this.props.deleteEntity(this.props.selectedRows); this.props.getBatchActionProps().onCancel(); }} >