From 3b5e366b771202527412bad0866d2bc94497a05b Mon Sep 17 00:00:00 2001 From: Jayasanka Weerasinghe Date: Fri, 3 Jan 2020 16:06:57 +0530 Subject: [PATCH] Create cetificates view in devicemgt react app --- .../react-app/package.json | 2 +- .../Certificates/CertificateTable.js | 233 ++++++++++++++++++ .../src/components/Policies/configuration.js | 4 +- .../react-app/src/index.js | 6 + .../Certificates/Certificates.js | 67 +++++ .../src/pages/Dashboard/Dashboard.js | 14 ++ 6 files changed, 323 insertions(+), 3 deletions(-) create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Configurations/Certificates/CertificateTable.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Configurations/Certificates/Certificates.js diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/package.json b/components/device-mgt/io.entgra.device.mgt.ui/react-app/package.json index 2471a872d95..05bc6857319 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/package.json +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/package.json @@ -22,7 +22,7 @@ "react-image-viewer-zoom": "^1.0.36", "react-infinite-scroller": "^1.2.4", "react-leaflet": "^2.4.0", - "react-moment": "^0.9.2", + "react-moment": "^0.9.7", "react-router": "^5.0.1", "react-router-config": "^5.0.1", "react-router-dom": "^5.0.1", diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Configurations/Certificates/CertificateTable.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Configurations/Certificates/CertificateTable.js new file mode 100644 index 00000000000..97cbb331fab --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Configurations/Certificates/CertificateTable.js @@ -0,0 +1,233 @@ +/* + * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved. + * + * Entgra (pvt) Ltd. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from "react"; +import axios from "axios"; +import {Icon, message, Modal, notification, Popconfirm, Select, Table, Tag, Tooltip, Typography} from "antd"; +import TimeAgo from 'javascript-time-ago' +// Load locale-specific relative date/time formatting rules. +import en from 'javascript-time-ago/locale/en' +import {withConfigContext} from "../../../context/ConfigContext"; +import Moment from "react-moment"; + +const {Paragraph, Text} = Typography; + +let config = null; + +class CertificateTable extends React.Component { + constructor(props) { + super(props); + config = this.props.context; + TimeAgo.addLocale(en); + this.state = { + data: [], + pagination: {}, + loading: false, + }; + } + + componentDidMount() { + this.fetch(); + } + + //fetch data from api + fetch = (params = {}) => { + this.setState({loading: true}); + // get current page + const currentPage = (params.hasOwnProperty("page")) ? params.page : 1; + + const extraParams = { + offset: 10 * (currentPage - 1), //calculate the offset + limit: 10, + requireDeviceInfo: true, + }; + + const encodedExtraParams = Object.keys(extraParams) + .map(key => key + '=' + extraParams[key]).join('&'); + + //send request to the invoker + axios.get( + window.location.origin + config.serverConfig.invoker.uri + + '/certificate-mgt/v1.0/admin/certificates', + ).then(res => { + if (res.status === 200) { + const pagination = {...this.state.pagination}; + this.setState({ + loading: false, + data: res.data.data.certificates, + pagination + }); + } + + }).catch((error) => { + if (error.hasOwnProperty("response") && error.response.status === 401) { + //todo display a popop with error + message.error('You are not logged in'); + window.location.href = window.location.origin + '/entgra/login'; + } else { + notification["error"]({ + message: "There was a problem", + duration: 0, + description: + "Error occurred while trying to load devices.", + }); + } + + this.setState({loading: false}); + }); + }; + + handleTableChange = (pagination, filters, sorter) => { + const pager = {...this.state.pagination}; + pager.current = pagination.current; + this.setState({ + pagination: pager, + }); + this.fetch({ + results: pagination.pageSize, + page: pagination.current, + sortField: sorter.field, + sortOrder: sorter.order, + ...filters, + }); + }; + + deleteCertificate = (serialNumber) =>{ + axios.delete( + window.location.origin + config.serverConfig.invoker.uri + + '/certificate-mgt/v1.0/admin/certificates/'+ serialNumber, + {headers: {'Content-Type': 'application/json'}} + ).then(res => { + if (res.status === 200) { + notification["success"]({ + message: "Done", + duration: 4, + description: + "Successfully deleted the certificate.", + }); + } + }).catch((error) => { + if (error.hasOwnProperty("response") && error.response.status === 401) { + //todo display a popop with error + message.error('You are not logged in'); + window.location.href = window.location.origin + '/entgra/login'; + } else { + notification["error"]({ + message: "There was a problem", + duration: 0, + description: + "Error occurred while trying to delete the certificate.", + }); + } + }); + + }; + + columns = [ + { + title: 'Serial Number', + dataIndex: 'serialNumber' + }, + { + title: 'Username', + dataIndex: 'username' + }, + { + title: 'Certificate Version', + dataIndex: 'certificateVersion' + }, + { + title: 'Certificate Serial', + dataIndex: 'certificateserial' + }, + { + title: 'Not Before', + dataIndex: 'notBefore', + render: notBefore => ( + + ) + }, + { + title: 'Not After', + dataIndex: 'notAfter', + render: notAfter => ( + + ) + }, + { + title: 'Subject', + dataIndex: 'subject', + render: subject => ( + {subject} + ) + }, + { + title: 'Issuer', + dataIndex: 'issuer', + render: issuer => ( + {issuer} + ) + }, + { + title: 'Actions', + key: 'actions', + dataIndex: 'serialNumber', + render: (serialNumber) => ( + + {this.deleteCertificate(serialNumber)}} + okText="Ok" + cancelText="Cancel"> + + + + ) + } + ]; + + + + render() { + const {data, pagination, loading} = this.state; + + return ( +
+
+ record.serialNumber} + dataSource={data} + pagination={{ + ...pagination, + size: "small", + // position: "top", + showTotal: (total, range) => `showing ${range[0]}-${range[1]} of ${total} devices` + // showQuickJumper: true + }} + loading={loading} + onChange={this.handleTableChange} + /> + + + ); + } +} + +export default withConfigContext(CertificateTable); diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/configuration.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/configuration.js index 0ea8062b4ab..84a9dc87c88 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/configuration.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/configuration.js @@ -1077,7 +1077,7 @@ const jsonResponse = { "Name": "COSU Profile Configurations", "Panel": [{ "title": "COSU Profile Configurations", - "description": "This policy can be used to configure the profile of COSU Devices.", + "description": "This policy can be used to configure the profile of COSU Certificates.", "PanelItem": [ { "Label": "Restrict Device Operation Time", @@ -2081,4 +2081,4 @@ const jsonResponse = { } }; -export default jsonResponse; \ No newline at end of file +export default jsonResponse; diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js index cd69abfffff..32eb56672d4 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js @@ -33,6 +33,7 @@ import Roles from "./pages/Dashboard/Roles/Roles"; import DeviceTypes from "./pages/Dashboard/DeviceTypes/DeviceTypes"; import DeviceEnroll from "./pages/Dashboard/Devices/DeviceEnroll"; import AddNewPolicy from "./pages/Dashboard/Policies/AddNewPolicy"; +import Certificates from "./pages/Dashboard/Configurations/Certificates/Certificates"; const routes = [ { @@ -94,6 +95,11 @@ const routes = [ path: '/entgra/devicetypes', component: DeviceTypes, exact: true + }, + { + path: '/entgra/certificates', + component: Certificates, + exact: true } ] } diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Configurations/Certificates/Certificates.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Configurations/Certificates/Certificates.js new file mode 100644 index 00000000000..6b06ef7eb5a --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Configurations/Certificates/Certificates.js @@ -0,0 +1,67 @@ +/* + * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved. + * + * Entgra (pvt) Ltd. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from "react"; +import { + PageHeader, + Typography, + Breadcrumb, + Icon, +} from "antd"; +import {Link} from "react-router-dom"; +import DeviceTable from "../../../../components/Devices/DevicesTable"; +import CertificateTable from "../../../../components/Configurations/Certificates/CertificateTable"; + +const {Paragraph} = Typography; + +class Certificates extends React.Component { + routes; + + constructor(props) { + super(props); + this.routes = props.routes; + } + + render() { + return ( +
+ + + + Home + + Configurations + Certificates + +
+

Certificates

+ Certificate configurations +
+
+ +
+ +
+ +
+
+ ); + } +} + +export default Certificates; diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js index a9a0313e25a..96d7f01bc74 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js @@ -154,6 +154,20 @@ class Dashboard extends React.Component { Device Types + + + Configurations + } + > + + + Certificates + + +