Merge branch 'master' into 'master'

Add device-mgt react app notification feature

See merge request entgra/carbon-device-mgt!469

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js

@@ -32,6 +32,16 @@ import AppNotInstalledDevicesReport from './scenes/Home/scenes/Reports/scenes/Ap
 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';
+import Notifications from './scenes/Home/scenes/Notifications';
+import DeviceEnroll from './scenes/Home/scenes/Devices/scenes/Enroll';
+import Groups from './scenes/Home/scenes/Groups';
+import Users from './scenes/Home/scenes/Users';
+import Policies from './scenes/Home/scenes/Policies';
+import AddNewPolicy from './scenes/Home/scenes/Policies/scenes/AddNewPolicy';
+import Roles from './scenes/Home/scenes/Roles';
+import DeviceTypes from './scenes/Home/scenes/DeviceTypes';
+import Certificates from './scenes/Home/scenes/Certificates';
+import Devices from './scenes/Home/scenes/Devices';
 
 const routes = [
   {
@@ -44,26 +54,16 @@ const routes = [
     exact: false,
     component: Home,
     routes: [
-      // {
+      {
-      //   path: '/entgra/devices',
+        path: '/entgra/devices',
-      //   component: Devices,
+        component: Devices,
-      //   exact: true,
+        exact: true,
-      // },
+      },
-      // {
+      {
-      //   path: '/entgra/devices/enroll',
+        path: '/entgra/devices/enroll',
-      //   component: DeviceEnroll,
+        component: DeviceEnroll,
-      //   exact: true,
+        exact: true,
-      // },
+      },
-      // {
-      //   path: '/entgra/devices',
-      //   component: Devices,
-      //   exact: true,
-      // },
-      // {
-      //   path: '/entgra/devices/enroll',
-      //   component: DeviceEnroll,
-      //   exact: true,
-      // },
       {
         path: '/entgra/geo',
         component: Geo,
@@ -74,41 +74,46 @@ const routes = [
         component: Reports,
         exact: true,
       },
-      // {
+      {
-      //   path: '/entgra/groups',
+        path: '/entgra/groups',
-      //   component: Groups,
+        component: Groups,
-      //   exact: true,
+        exact: true,
-      // },
+      },
-      // {
+      {
-      //   path: '/entgra/users',
+        path: '/entgra/users',
-      //   component: Users,
+        component: Users,
-      //   exact: true,
+        exact: true,
-      // },
+      },
-      // {
+      {
-      //   path: '/entgra/policies',
+        path: '/entgra/policies',
-      //   component: Policies,
+        component: Policies,
-      //   exact: true,
+        exact: true,
-      // },
+      },
-      // {
+      {
-      //   path: '/entgra/policy/add',
+        path: '/entgra/policy/add',
-      //   component: AddNewPolicy,
+        component: AddNewPolicy,
-      //   exact: true,
+        exact: true,
-      // },
+      },
-      // {
+      {
-      //   path: '/entgra/roles',
+        path: '/entgra/roles',
-      //   component: Roles,
+        component: Roles,
-      //   exact: true,
+        exact: true,
-      // },
+      },
-      // {
+      {
-      //   path: '/entgra/devicetypes',
+        path: '/entgra/devicetypes',
-      //   component: DeviceTypes,
+        component: DeviceTypes,
-      //   exact: true,
+        exact: true,
-      // },
+      },
-      // {
+      {
-      //   path: '/entgra/certificates',
+        path: '/entgra/certificates',
-      //   component: Certificates,
+        component: Certificates,
-      //   exact: true,
+        exact: true,
-      // },
+      },
+      {
+        path: '/entgra/notifications',
+        component: Notifications,
+        exact: true,
+      },
       {
         path: '/entgra/reports/enrollments',
         component: EnrollmentsVsUnenrollmentsReport,

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/components/NotificationsDrawer/index.js

@@ -0,0 +1,172 @@
+/*
+ * 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 { Drawer, message, notification, Card, Button } from 'antd';
+import { withConfigContext } from '../../../../components/ConfigContext';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+// eslint-disable-next-line no-unused-vars
+let config = null;
+
+class NotificationsDrawer extends React.Component {
+  routes;
+
+  constructor(props) {
+    super(props);
+    this.routes = props.routes;
+    config = this.props.context;
+    this.state = {
+      visible: false,
+      data: [],
+    };
+  }
+
+  showDrawer = () => {
+    this.setState({
+      visible: true,
+    });
+    this.fetchNotifications();
+  };
+
+  onClose = () => {
+    this.setState({
+      visible: false,
+    });
+  };
+
+  fetchNotifications = () => {
+    const config = this.props.context;
+    axios
+      .get(
+        window.location.origin +
+          config.serverConfig.invoker.uri +
+          config.serverConfig.invoker.deviceMgt +
+          '/notifications',
+      )
+      .then(res => {
+        if (res.status === 200) {
+          this.setState({ data: res.data.data.notifications });
+        }
+      })
+      .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 notifications list.',
+          });
+        }
+      });
+  };
+
+  clearNotifications = () => {
+    const config = this.props.context;
+    axios
+      .put(
+        window.location.origin +
+          config.serverConfig.invoker.uri +
+          config.serverConfig.invoker.deviceMgt +
+          '/notifications/clear-all',
+        { 'Content-Type': 'application/json; charset=utf-8' },
+      )
+      .then(res => {
+        if (res.status === 200) {
+          notification.success({
+            message: 'Done',
+            duration: 0,
+            description: 'All notifications are cleared.',
+          });
+        }
+      })
+      .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 clear notifications.',
+          });
+        }
+      });
+    this.setState({
+      visible: false,
+    });
+  };
+
+  render() {
+    const { data } = this.state;
+    const notificationItemList = data.map(data => (
+      <Card
+        key={data.id}
+        bordered={true}
+        hoverable={true}
+        style={{ width: 350 }}
+      >
+        <h3>{data.deviceType + ':' + data.deviceName}t</h3>
+        <p>{data.description}</p>
+      </Card>
+    ));
+    return (
+      <div>
+        <div onClick={this.showDrawer}>
+          <div>
+            <span>Notifications</span>
+          </div>
+        </div>
+        <Drawer
+          title="Notifications"
+          placement="right"
+          closable={false}
+          onClose={this.onClose}
+          visible={this.state.visible}
+          width={400}
+        >
+          <Link to="/entgra/notifications">
+            <Button
+              type="primary"
+              style={{ marginRight: 10, marginBottom: 10 }}
+              onClick={this.onClose}
+            >
+              Show All Notifications
+            </Button>
+          </Link>
+          <Button
+            type="primary"
+            style={{ marginRight: 10, marginBottom: 10 }}
+            onClick={this.clearNotifications}
+          >
+            Clear All Notifications
+          </Button>
+          {notificationItemList}
+        </Drawer>
+      </div>
+    );
+  }
+}
+
+export default withConfigContext(NotificationsDrawer);

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/index.js

@@ -23,6 +23,7 @@ import RouteWithSubRoutes from '../../components/RouteWithSubRoutes';
 import { Redirect } from 'react-router';
 import './styles.css';
 import { withConfigContext } from '../../components/ConfigContext';
+import NotificationsDrawer from './components/NotificationsDrawer';
 import Logout from './components/Logout';
 
 const { Header, Content, Footer } = Layout;
@@ -72,26 +73,26 @@ class Home extends React.Component {
                   marginRight: 110,
                 }}
               >
-                {/* <SubMenu*/}
+                <SubMenu
-                {/*  key="devices"*/}
+                  key="devices"
-                {/*  title={*/}
+                  title={
-                {/*    <span>*/}
+                    <span>
-                {/*      <Icon type="appstore" />*/}
+                      <Icon type="appstore" />
-                {/*      <span>Devices</span>*/}
+                      <span>Devices</span>
-                {/*    </span>*/}
+                    </span>
-                {/*  }*/}
+                  }
-                {/* >*/}
+                >
-                {/*  <Menu.Item key="devices">*/}
+                  <Menu.Item key="devices">
-                {/*    <Link to="/entgra/devices">*/}
+                    <Link to="/entgra/devices">
-                {/*      <span>View</span>*/}
+                      <span>View</span>
-                {/*    </Link>*/}
+                    </Link>
-                {/*  </Menu.Item>*/}
+                  </Menu.Item>
-                {/*  <Menu.Item key="deviceEnroll">*/}
+                  <Menu.Item key="deviceEnroll">
-                {/*    <Link to="/entgra/devices/enroll">*/}
+                    <Link to="/entgra/devices/enroll">
-                {/*      <span>Enroll</span>*/}
+                      <span>Enroll</span>
-                {/*    </Link>*/}
+                    </Link>
-                {/*  </Menu.Item>*/}
+                  </Menu.Item>
-                {/* </SubMenu>*/}
+                </SubMenu>
                 <SubMenu
                   key="geo"
                   title={
@@ -118,66 +119,68 @@ class Home extends React.Component {
                     <span>Reports</span>
                   </Link>
                 </Menu.Item>
-                {/* <Menu.Item key="groups">*/}
+                <Menu.Item key="groups">
-                {/*  <Link to="/entgra/groups">*/}
+                  <Link to="/entgra/groups">
-                {/*    <Icon type="deployment-unit" />*/}
+                    <Icon type="deployment-unit" />
-                {/*    <span>Groups</span>*/}
+                    <span>Groups</span>
-                {/*  </Link>*/}
+                  </Link>
-                {/* </Menu.Item>*/}
+                </Menu.Item>
-                {/* <Menu.Item key="users">*/}
+                <Menu.Item key="users">
-                {/*  <Link to="/entgra/users">*/}
+                  <Link to="/entgra/users">
-                {/*    <Icon type="user" />*/}
+                    <Icon type="user" />
-                {/*    <span>Users</span>*/}
+                    <span>Users</span>
-                {/*  </Link>*/}
+                  </Link>
-                {/* </Menu.Item>*/}
+                </Menu.Item>
-                {/* <SubMenu*/}
+                <SubMenu
-                {/*  key="policies"*/}
+                  key="policies"
-                {/*  title={*/}
+                  title={
-                {/*    <span>*/}
+                    <span>
-                {/*      <Icon type="audit" />*/}
+                      <Icon type="audit" />
-                {/*      <span>Policies</span>*/}
+                      <span>Policies</span>
-                {/*    </span>*/}
+                    </span>
-                {/*  }*/}
+                  }
-                {/* >*/}
+                >
-                {/*  <Menu.Item key="policiesList">*/}
+                  <Menu.Item key="policiesList">
-                {/*    <Link to="/entgra/policies">*/}
+                    <Link to="/entgra/policies">
-                {/*      <span>View</span>*/}
+                      <span>View</span>
-                {/*    </Link>*/}
+                    </Link>
-                {/*  </Menu.Item>*/}
+                  </Menu.Item>
-                {/*  <Menu.Item key="addPolicy">*/}
+                  <Menu.Item key="addPolicy">
-                {/*    <Link to="/entgra/policy/add">*/}
+                    <Link to="/entgra/policy/add">
-                {/*      <span>Add New Policy</span>*/}
+                      <span>Add New Policy</span>
-                {/*    </Link>*/}
+                    </Link>
-                {/*  </Menu.Item>*/}
+                  </Menu.Item>
-                {/* </SubMenu>*/}
+                </SubMenu>
-                {/* <Menu.Item key="roles">*/}
+                <Menu.Item key="roles">
-                {/*  <Link to="/entgra/roles">*/}
+                  <Link to="/entgra/roles">
-                {/*    <Icon type="book" />*/}
+                    <Icon type="book" />
-                {/*    <span>Roles</span>*/}
+                    <span>Roles</span>
-                {/*  </Link>*/}
+                  </Link>
-                {/* </Menu.Item>*/}
+                </Menu.Item>
-                {/* <Menu.Item key="devicetypes">*/}
+                <Menu.Item key="devicetypes">
-                {/*  <Link to="/entgra/devicetypes">*/}
+                  <Link to="/entgra/devicetypes">
-                {/*    <Icon type="desktop" />*/}
+                    <Icon type="desktop" />
-                {/*    <span>Device Types</span>*/}
+                    <span>Device Types</span>
-                {/*  </Link>*/}
+                  </Link>
-                {/* </Menu.Item>*/}
+                </Menu.Item>
-                {/* <SubMenu*/}
+                <SubMenu
-                {/*  key="configurations"*/}
+                  key="configurations"
-                {/*  title={*/}
+                  title={
-                {/*    <span>*/}
+                    <span>
-                {/*      <Icon type="setting" />*/}
+                      <Icon type="setting" />
-                {/*      <span>Configurations</span>*/}
+                      <span>Configurations</span>
-                {/*    </span>*/}
+                    </span>
-                {/*  }*/}
+                  }
-                {/* >*/}
+                >
-                {/*  <Menu.Item key="certificates">*/}
+                  <Menu.Item key="certificates">
-                {/*    <Link to="/entgra/certificates">*/}
+                    <Link to="/entgra/certificates">
-                {/*      <span>Certificates</span>*/}
+                      <span>Certificates</span>
-                {/*    </Link>*/}
+                    </Link>
-                {/*  </Menu.Item>*/}
+                  </Menu.Item>
-                {/* </SubMenu>*/}
+                </SubMenu>
-                <Menu.Item key="trigger"></Menu.Item>
+                <Menu.Item className="profile" key="Notifications">
+                  <NotificationsDrawer />
+                </Menu.Item>
                 <SubMenu
                   className="profile"
                   title={

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Notifications/Components/NotificationsTable/index.js

@@ -0,0 +1,198 @@
+/*
+ * 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 { Icon, Table } 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 '../../../../../../components/ConfigContext';
+import { handleApiError } from '../../../../../../services/utils/errorHandler';
+
+let config = null;
+
+const columns = [
+  {
+    title: 'Device',
+    dataIndex: 'deviceName',
+    width: 100,
+    sorter: (a, b) => a.deviceName.localeCompare(b.deviceName),
+  },
+  {
+    title: 'Type',
+    dataIndex: 'deviceType',
+    key: 'type',
+    // eslint-disable-next-line react/display-name
+    render: type => {
+      const defaultPlatformIcons = config.defaultPlatformIcons;
+      let icon = defaultPlatformIcons.default.icon;
+      let color = defaultPlatformIcons.default.color;
+      let theme = defaultPlatformIcons.default.theme;
+
+      if (defaultPlatformIcons.hasOwnProperty(type)) {
+        icon = defaultPlatformIcons[type].icon;
+        color = defaultPlatformIcons[type].color;
+        theme = defaultPlatformIcons[type].theme;
+      }
+
+      return (
+        <span style={{ fontSize: 20, color: color, textAlign: 'center' }}>
+          <Icon type={icon} theme={theme} />
+        </span>
+      );
+    },
+  },
+  {
+    title: 'Description',
+    dataIndex: 'description',
+    key: 'description',
+  },
+];
+
+class NotificationsTable extends React.Component {
+  constructor(props) {
+    super(props);
+    config = this.props.context;
+    TimeAgo.addLocale(en);
+    this.state = {
+      data: [],
+      pagination: {},
+      loading: false,
+      selectedRows: [],
+      paramsObj: {},
+    };
+  }
+
+  rowSelection = {
+    onChange: (selectedRowKeys, selectedRows) => {
+      this.setState({
+        selectedRows: selectedRows,
+      });
+    },
+  };
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  // Rerender component when parameters change
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (prevProps.notificationType !== this.props.notificationType) {
+      this.fetchData();
+    }
+  }
+
+  // fetch data from api
+  fetchData = (params = {}) => {
+    // const policyReportData = this.props;
+    this.setState({ loading: true });
+    // get current page
+    const currentPage = params.hasOwnProperty('page') ? params.page : 1;
+
+    let extraParams;
+
+    extraParams = {
+      offset: 10 * (currentPage - 1), // calculate the offset
+      limit: 10,
+    };
+
+    const encodedExtraParams = Object.keys(extraParams)
+      .map(key => key + '=' + extraParams[key])
+      .join('&');
+
+    let apiUrl;
+
+    if (this.props.notificationType === 'unread') {
+      apiUrl =
+        window.location.origin +
+        config.serverConfig.invoker.uri +
+        config.serverConfig.invoker.deviceMgt +
+        '/notifications?status=NEW&' +
+        encodedExtraParams;
+    } else {
+      apiUrl =
+        window.location.origin +
+        config.serverConfig.invoker.uri +
+        config.serverConfig.invoker.deviceMgt +
+        '/notifications?' +
+        encodedExtraParams;
+    }
+
+    // send request to the invoker
+    axios
+      .get(apiUrl)
+      .then(res => {
+        if (res.status === 200) {
+          const pagination = { ...this.state.pagination };
+          this.setState({
+            loading: false,
+            data: res.data.data,
+            pagination,
+          });
+        }
+      })
+      .catch(error => {
+        handleApiError(error, '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.fetchData({
+      results: pagination.pageSize,
+      page: pagination.current,
+      sortField: sorter.field,
+      sortOrder: sorter.order,
+      ...filters,
+    });
+  };
+
+  render() {
+    let { data, pagination, loading } = this.state;
+
+    return (
+      <div>
+        <Table
+          columns={columns}
+          rowKey={record => record.id}
+          dataSource={data.notifications}
+          pagination={{
+            ...pagination,
+            size: 'small',
+            // position: "top",
+            total: data.count,
+            showTotal: (total, range) =>
+              `showing ${range[0]}-${range[1]} of ${total} devices`,
+            // showQuickJumper: true
+          }}
+          loading={loading}
+          onChange={this.handleTableChange}
+          rowSelection={this.rowSelection}
+        />
+      </div>
+    );
+  }
+}
+
+export default withConfigContext(NotificationsTable);

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Notifications/index.js

@@ -0,0 +1,139 @@
+/*
+ * 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 {
+  message,
+  notification,
+  Button,
+  PageHeader,
+  Breadcrumb,
+  Icon,
+  Radio,
+} from 'antd';
+import { withConfigContext } from '../../../../components/ConfigContext';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+import NotificationsTable from './Components/NotificationsTable';
+
+// eslint-disable-next-line no-unused-vars
+let config = null;
+
+class Notifications extends React.Component {
+  routes;
+
+  constructor(props) {
+    super(props);
+    this.routes = props.routes;
+    config = this.props.context;
+    this.state = {
+      visible: false,
+      data: [],
+      notificationType: 'all',
+    };
+  }
+
+  handleModeChange = e => {
+    const notificationType = e.target.value;
+    this.setState({ notificationType });
+  };
+
+  clearNotifications = () => {
+    const config = this.props.context;
+    axios
+      .put(
+        window.location.origin +
+          config.serverConfig.invoker.uri +
+          config.serverConfig.invoker.deviceMgt +
+          '/notifications/clear-all',
+        { 'Content-Type': 'application/json; charset=utf-8' },
+      )
+      .then(res => {
+        if (res.status === 200) {
+          notification.success({
+            message: 'Done',
+            duration: 0,
+            description: 'All notifications are cleared.',
+          });
+        }
+      })
+      .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 clear notifications.',
+          });
+        }
+      });
+  };
+
+  render() {
+    const { notificationType } = 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>Notifications</Breadcrumb.Item>
+          </Breadcrumb>
+          <div className="wrap" style={{ marginBottom: '10px' }}>
+            <h3>DEVICE NOTIFICATIONS</h3>
+            <Radio.Group
+              onChange={this.handleModeChange}
+              defaultValue={'all'}
+              value={notificationType}
+              style={{ marginBottom: 8, marginRight: 5 }}
+            >
+              <Radio.Button value={'all'}>All Notifications</Radio.Button>
+              <Radio.Button value={'unread'}>Unread Notifications</Radio.Button>
+            </Radio.Group>
+            <Button
+              type="primary"
+              style={{
+                marginRight: 10,
+                marginBottom: 8,
+                display: notificationType === 'unread' ? 'inline' : 'none',
+              }}
+              onClick={this.clearNotifications}
+            >
+              Clear All Notifications
+            </Button>
+            <div style={{ backgroundColor: '#ffffff', borderRadius: 5 }}>
+              <NotificationsTable notificationType={notificationType} />
+            </div>
+          </div>
+        </PageHeader>
+        <div
+          style={{ background: '#f0f2f5', padding: 24, minHeight: 720 }}
+        ></div>
+      </div>
+    );
+  }
+}
+
+export default withConfigContext(Notifications);