From e3ef99c258f3ecf8b9b2947aa9d4af7aac0274c1 Mon Sep 17 00:00:00 2001
From: Amanda Randombage <74random.amanda@gmail.com>
Date: Thu, 5 Mar 2020 11:27:03 +0000
Subject: [PATCH] UI to filter devices from their main OS version

---
 .../react-app/src/App.js                      |   6 +
 .../react-app/src/index.js                    |   6 +
 .../Reports/components/DevicesTable/index.js  |   6 +
 .../src/scenes/Home/scenes/Reports/index.js   |  29 +++
 .../Reports/scenes/OutdatedOSVersion/index.js | 179 ++++++++++++++++++
 5 files changed, 226 insertions(+)
 create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Reports/scenes/OutdatedOSVersion/index.js

diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/App.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/App.js
index 50c9ae7e7f..12074a611e 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/App.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/App.js
@@ -123,6 +123,12 @@ class App extends React.Component {
       )
       .then(res => {
         config.deviceTypes = JSON.parse(res.data.data);
+        config.supportedOStypes = [];
+        config.deviceTypes.forEach(type => {
+          if (['ios', 'android'].includes(type.name)) {
+            config.supportedOStypes.push(type);
+          }
+        });
         this.setState({
           config: config,
           loading: false,
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 94b2c91c00..07b2222a9c 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
@@ -31,6 +31,7 @@ import DeviceStatusReport from './scenes/Home/scenes/Reports/scenes/DeviceStatus
 import AppNotInstalledDevicesReport from './scenes/Home/scenes/Reports/scenes/AppNotInstalledDevices';
 import Geo from './scenes/Home/scenes/Geo';
 import EncryptionStatus from './scenes/Home/scenes/Reports/scenes/EncryptionStatus';
+import OutdatedOSversionReport from './scenes/Home/scenes/Reports/scenes/OutdatedOSVersion';
 
 const routes = [
   {
@@ -113,6 +114,11 @@ const routes = [
         component: EnrollmentsVsUnenrollmentsReport,
         exact: true,
       },
+      {
+        path: '/entgra/reports/expired-devices',
+        component: OutdatedOSversionReport,
+        exact: true,
+      },
       {
         path: '/entgra/reports/enrollment-type',
         component: EnrollmentTypeReport,
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Reports/components/DevicesTable/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Reports/components/DevicesTable/index.js
index ecd3956fa7..8be97a11b1 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Reports/components/DevicesTable/index.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Reports/components/DevicesTable/index.js
@@ -116,6 +116,12 @@ const columns = [
     },
     // todo add filtering options
   },
+  {
+    title: 'OS Version',
+    dataIndex: 'deviceInfo',
+    key: 'osVersion',
+    render: deviceInfo => deviceInfo.osVersion,
+  },
 ];
 
 const getTimeAgo = time => {
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Reports/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Reports/index.js
index d2d80bc52e..2963289c4f 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Reports/index.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Reports/index.js
@@ -157,6 +157,35 @@ class Reports extends React.Component {
                   </Link>
                 </Col>
 
+                <Col span={8}>
+                  <Link
+                    to={{
+                      // Path to respective report page
+                      pathname: '/entgra/reports/expired-devices',
+                      data: {
+                        name: 'expired_devices_report',
+                      },
+                    }}
+                  >
+                    <Card
+                      bordered={true}
+                      hoverable={true}
+                      style={{ borderRadius: 10, marginBottom: 16 }}
+                    >
+                      <div align="center">
+                        <Icon
+                          type="desktop"
+                          style={{ fontSize: '25px', color: '#08c' }}
+                        />
+                        <h2>
+                          <b>Expired Devices Report</b>
+                        </h2>
+                        <p>Report based on device OS version</p>
+                      </div>
+                    </Card>
+                  </Link>
+                </Col>
+
                 <Col span={8}>
                   <Link
                     to={{
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Reports/scenes/OutdatedOSVersion/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Reports/scenes/OutdatedOSVersion/index.js
new file mode 100644
index 0000000000..a5955f4472
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Reports/scenes/OutdatedOSVersion/index.js
@@ -0,0 +1,179 @@
+/*
+ * 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 axios from 'axios';
+import {
+  PageHeader,
+  Breadcrumb,
+  Icon,
+  Button,
+  Select,
+  message,
+  notification,
+} from 'antd';
+
+import { Link } from 'react-router-dom';
+import { withConfigContext } from '../../../../../../components/ConfigContext';
+import DeviceTable from '../../components/DevicesTable';
+
+let config = null;
+const { Option } = Select;
+let { typeSelected, versionSelected } = false;
+
+class OutdatedOSversionReport extends React.Component {
+  routes;
+
+  constructor(props) {
+    super(props);
+    this.routes = props.routes;
+    config = this.props.context;
+
+    this.state = {
+      deviceType: null,
+      osVersion: null,
+      apiURL: null,
+      visible: false,
+      supportedOsVersions: [],
+    };
+  }
+
+  onDeviceTypeChange = value => {
+    typeSelected = true;
+    this.setState({ deviceType: value });
+    this.getSupportedOsVersions(value);
+  };
+
+  onOSVersionChange = value => {
+    versionSelected = true;
+    this.setState({ osVersion: value });
+  };
+
+  onClickGenerateButton = () => {
+    const { osVersion, deviceType } = this.state;
+    if (osVersion && deviceType != null) {
+      let apiURL =
+        window.location.origin +
+        config.serverConfig.invoker.uri +
+        config.serverConfig.invoker.deviceMgt +
+        `/reports/expired-devices/${deviceType}?osVersion=${osVersion}&`;
+      this.setState({ apiURL });
+    }
+  };
+
+  getSupportedOsVersions = deviceType => {
+    const config = this.props.context;
+    axios
+      .get(
+        window.location.origin +
+          config.serverConfig.invoker.uri +
+          config.serverConfig.invoker.deviceMgt +
+          `/admin/device-types/${deviceType}/versions`,
+      )
+      .then(res => {
+        if (res.status === 200) {
+          let supportedOsVersions = JSON.parse(res.data.data);
+          this.setState({
+            supportedOsVersions,
+          });
+        }
+      })
+      .catch(error => {
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
+          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 OS Versions.',
+          });
+        }
+      });
+  };
+
+  render() {
+    const { apiURL, supportedOsVersions } = this.state;
+    return (
+      <div>
+        <PageHeader style={{ paddingTop: 0 }}>
+          <Breadcrumb style={{ paddingBottom: 16 }}>
+            <Breadcrumb.Item>
+              <Link to="/entgra">
+                <Icon type="home" /> Home
+              </Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Item>
+              <Link to="/entgra/reports">Reports</Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Item>Expired Devices</Breadcrumb.Item>
+          </Breadcrumb>
+          <div className="wrap" style={{ marginBottom: '10px' }}>
+            <h3>Expired Devices Report</h3>
+            <div className="wrap" style={{ marginBottom: '10px' }}>
+              <Select
+                showSearch
+                style={{ width: 200, marginLeft: '10px' }}
+                placeholder="Select a Device type"
+                onChange={this.onDeviceTypeChange}
+              >
+                {config.supportedOStypes.map(data => (
+                  <Option value={data.name} key={data.id}>
+                    {data.name}
+                  </Option>
+                ))}
+              </Select>
+              <Select
+                style={{ width: 200, marginLeft: '10px' }}
+                placeholder="
+                Select an OS Version"
+                onChange={this.onOSVersionChange}
+              >
+                {supportedOsVersions.map(data => {
+                  return (
+                    <Option key={data.versionName}>{data.versionName}</Option>
+                  );
+                })}
+              </Select>
+              {typeSelected && versionSelected ? (
+                <Button
+                  type="primary"
+                  onClick={this.onClickGenerateButton}
+                  style={{ marginLeft: '10px' }}
+                >
+                  Generate Report
+                </Button>
+              ) : null}
+            </div>
+            <div
+              id="table"
+              style={{ backgroundColor: '#ffffff', borderRadius: 5 }}
+            >
+              <DeviceTable apiUrl={apiURL} />
+            </div>
+          </div>
+        </PageHeader>
+        <div
+          style={{ background: '#f0f2f5', padding: 24, minHeight: 720 }}
+        ></div>
+      </div>
+    );
+  }
+}
+
+export default withConfigContext(OutdatedOSversionReport);