+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withConfigContext(
+ Form.create({ name: 'add-device' })(AddDevice),
+);
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/Enroll-Device/DownloadAgent.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/Enroll-Device/DownloadAgent.js
new file mode 100644
index 00000000000..fa7148f1a8c
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/Enroll-Device/DownloadAgent.js
@@ -0,0 +1,173 @@
+/*
+ * Copyright (c) 2020, 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 { Button, Card, Divider, message, notification } from 'antd';
+import TimeAgo from 'javascript-time-ago/modules/JavascriptTimeAgo';
+import en from 'javascript-time-ago/locale/en';
+import axios from 'axios';
+import { withConfigContext } from '../../../context/ConfigContext';
+import QRCode from 'qrcode.react';
+
+class SelectEnrollmentType extends React.Component {
+ constructor(props) {
+ super(props);
+ this.config = this.props.context;
+ TimeAgo.addLocale(en);
+ this.state = {
+ pagination: {},
+ loading: false,
+ selectedRows: [],
+ buttonTitle: 'Download Agent',
+ skipButtonTitle: 'Skip',
+ };
+ }
+
+ onClickSkip = () => {
+ this.props.goNext();
+ };
+
+ onClickGoBack = () => {
+ this.props.goBack();
+ };
+
+ onClickDownloadAgent = () => {
+ this.downloadAgent();
+ };
+
+ // fetch data from api
+ downloadAgent = () => {
+ const { deviceType } = this.props;
+ this.setState({ loading: true, buttonTitle: 'Downloading..' });
+
+ const apiUrl =
+ window.location.origin +
+ '/api/application-mgt/v1.0/artifact/' +
+ deviceType +
+ '/agent/-1234';
+
+ // send request to the invokerss
+ axios
+ .get(apiUrl)
+ .then(res => {
+ if (res.status === 200) {
+ // Download file in same window
+ const url = window.URL.createObjectURL(new Blob([res.data]));
+ const link = document.createElement('a');
+ link.href = url;
+ link.setAttribute('download', 'android-agent.apk'); // or any other extension
+ document.body.appendChild(link);
+ link.click();
+ this.setState({
+ loading: false,
+ buttonTitle: 'Download Agent',
+ skipButtonTitle: 'Next',
+ });
+ }
+ })
+ .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 download Entgra Android Agent',
+ });
+ }
+
+ this.setState({ loading: false });
+ });
+ };
+
+ render() {
+ const { loading, buttonTitle, skipButtonTitle } = this.state;
+ const { deviceType } = this.props;
+
+ const apiUrl =
+ window.location.origin +
+ '/api/application-mgt/v1.0/artifact/' +
+ deviceType +
+ '/agent/-1234';
+ return (
+
+
+
+
+
+
+
+
+
+
+ Step 01 - Get your Android Agent.
+
+ );
+ }
+}
+
+export default withConfigContext(SelectEnrollmentType);
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/Enroll-Device/EnrollDevice.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/Enroll-Device/EnrollDevice.js
new file mode 100644
index 00000000000..add28e35337
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/Enroll-Device/EnrollDevice.js
@@ -0,0 +1,217 @@
+/*
+ * Copyright (c) 2020, 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 {
+ Divider,
+ message,
+ notification,
+ Select,
+ Card,
+ Spin,
+ Button,
+ Row,
+ Col,
+} from 'antd';
+import TimeAgo from 'javascript-time-ago/modules/JavascriptTimeAgo';
+import en from 'javascript-time-ago/locale/en';
+import { withConfigContext } from '../../../context/ConfigContext';
+import axios from 'axios';
+import QRCode from 'qrcode.react';
+import QRPlaceholder from '../../../../public/images/qr-code.png';
+import installAgent from '../../../../public/images/install_agent.png';
+import register from '../../../../public/images/register.png';
+import registration from '../../../../public/images/registration.png';
+import setProfile from '../../../../public/images/set_profile.png';
+
+const { Option } = Select;
+
+class EnrollDevice extends React.Component {
+ constructor(props) {
+ super(props);
+ this.config = this.props.context;
+ TimeAgo.addLocale(en);
+ this.state = {
+ isSelected: false,
+ loading: false,
+ payload: {},
+ };
+ }
+
+ // fetch data from api
+ generateQRCode = ownershipType => {
+ const { deviceType } = this.props;
+ this.setState({ loading: true });
+
+ let apiUrl =
+ window.location.origin +
+ this.config.serverConfig.invoker.uri +
+ '/device-mgt/' +
+ deviceType +
+ '/v1.0/configuration/enrollment-qr-config/' +
+ ownershipType;
+
+ // send request to the invokerss
+ axios
+ .get(apiUrl)
+ .then(res => {
+ if (res.status === 200) {
+ this.setState({
+ loading: false,
+ payload: res.data.data,
+ isSelected: true,
+ });
+ }
+ })
+ .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 get QR code payload.',
+ });
+ }
+
+ this.setState({ loading: false });
+ });
+ };
+
+ onChange = value => {
+ this.generateQRCode(value);
+ };
+
+ onClick = () => {
+ this.props.goBack();
+ };
+
+ render() {
+ const { payload, isSelected, loading } = this.state;
+ const { enrollmentType } = this.props;
+ return (
+
+
+ + The Android agent can be downloaded by using following QR. The + generated QR code can be scanned, and the agent APK downloaded from + the link, and transferred to the device and then installed. +
+
+ Scan to get the Android Agent.
+ OR
+
+
+
+
+
+
+
+
+ + Need help? Read + + Entgra IoT Server documentation. + +
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withConfigContext(EnrollDevice);
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/EnrollAgent.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/Enroll-Device/SelectEnrollmentType.js
similarity index 52%
rename from components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/EnrollAgent.js
rename to components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/Enroll-Device/SelectEnrollmentType.js
index 5707d9ccb63..34a0904afb4 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/EnrollAgent.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/Enroll-Device/SelectEnrollmentType.js
@@ -17,73 +17,38 @@
*/
import React from 'react';
-import { Button, Divider, message, notification } from 'antd';
+import { Button, Divider } from 'antd';
import TimeAgo from 'javascript-time-ago/modules/JavascriptTimeAgo';
import en from 'javascript-time-ago/locale/en';
-import axios from 'axios';
-import { withConfigContext } from '../../context/ConfigContext';
+import { withConfigContext } from '../../../context/ConfigContext';
-class EnrollAgent extends React.Component {
+class SelectEnrollmentType extends React.Component {
constructor(props) {
super(props);
this.config = this.props.context;
TimeAgo.addLocale(en);
this.state = {
- data: [],
pagination: {},
loading: false,
selectedRows: [],
- visibleSelector: { display: 'none' },
};
}
- componentDidMount() {
- this.getConfigData();
- }
- onGetEnrollmentQR = () => {
- this.setState({
- visibleSelector: { display: 'block' },
- });
+ onEnrollWithQR = () => {
+ this.props.getEnrollmentData('qr');
+ };
+
+ onEnrollManually = () => {
+ this.props.getEnrollmentData('manual');
};
- getConfigData = () => {
- axios
- .get(
- window.location.origin +
- this.config.serverConfig.invoker.uri +
- '/device-mgt/android/v1.0/configuration',
- )
- .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 retrieving device groups.',
- });
- }
- });
+ onClick = () => {
+ this.props.goBack();
};
render() {
return (
+
+ 
+
+ 
+
+ 
+
+ 
+
+
+
+
+ Step 1
++ {/* eslint-disable-next-line react/no-unescaped-entities */} + Let's start by installing the Android agent on your device. Open + the downloaded file, and tap INSTALL. +
+Step 2
+Tap Skip to proceed with the default enrollment process.
+Step 3
++ Enter the server address based on your environment, in the text + box provided. +
+Step 4
+Enter your:
+
+
+ Organization: carbon.super
+Username: admin
+Password: Your password
+
+ Generate QR code to QR based Provisioning.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
- Step 01 - Get your Android Agent.
-
Step 02 - Enroll the Android Agent.
@@ -102,14 +67,28 @@ class EnrollAgent extends React.Component {
+
+
+
+
-
- - The Android agent can be downloaded by using following QR. The - generated QR code can be scanned, and the agent APK downloaded from - the link, and transferred to the device and then installed. -
-
-
-
+
);
}
}
-export default withConfigContext(EnrollAgent);
+export default withConfigContext(SelectEnrollmentType);
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 acbd25f60e6..e37a4cc94f4 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
@@ -32,6 +32,8 @@ import DeviceStatusReport from './components/Reports/Templates/DeviceStatusRepor
import PolicyReportHome from './pages/Dashboard/Reports/PolicyReportHome';
import ReportDurationItemList from './pages/Dashboard/Reports/ReportDurationItemList';
import AppNotInstalledDevicesReport from './components/Reports/Templates/AppNotInstalledDevicesReport';
+import Devices from './pages/Dashboard/Devices/Devices';
+import DeviceEnroll from './pages/Dashboard/Devices/DeviceEnroll';
const routes = [
{
@@ -44,16 +46,16 @@ const routes = [
exact: false,
component: Dashboard,
routes: [
- // {
- // path: '/entgra/devices',
- // component: Devices,
- // exact: true,
- // },
- // {
- // path: '/entgra/devices/enroll',
- // component: DeviceEnroll,
- // exact: true,
- // },
+ {
+ path: '/entgra/devices',
+ component: Devices,
+ exact: true,
+ },
+ {
+ path: '/entgra/devices/enroll',
+ component: DeviceEnroll,
+ exact: true,
+ },
{
path: '/entgra/geo',
component: Geo,
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 da03b3126a0..697e3aec7cb 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
@@ -72,26 +72,26 @@ class Dashboard extends React.Component {
marginRight: 110,
}}
>
- {/*