[Frontend] Created Extractor section

.gitignore

@@ -104,4 +104,7 @@ ENV/
 .vscode/
 
 # SQLite data
-flask-backend/api/db.sqlite3
+flask-backend/api/db.sqlite3
+
+# Extracted data
+data/

React-frontend/src/App.js

@@ -5,21 +5,23 @@ import { Route, Switch } from 'react-router-dom';
 import LoginPage from './pages/LoginPage';
 import HomePage from './pages/HomePage';
 import AboutPage from './pages/AboutPage';
-import ContactPage from './pages/ContactPage'
-import Alert from './components/core/Alert'
+import ContactPage from './pages/ContactPage';
+import Alert from './components/core/Alert';
 
 import store from './store/store';
+import ExtractionPage from './pages/ExtractionPage';
 
 function App() {
   return (
     <Provider store={store}>
-      <div className="containerBI">
+      <div className='containerBI'>
         <Alert />
         <Switch>
-          <Route path="/login" exact component={LoginPage} />
+          <Route path='/login' exact component={LoginPage} />
           <Route path='/' exact component={HomePage} />
           <Route path='/about' exact component={AboutPage} />
           <Route path='/contact' exact component={ContactPage} />
+          <Route path='/extraction' exact component={ExtractionPage} />
         </Switch>
       </div>
     </Provider>

React-frontend/src/components/Extractor/DeviceItem.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import DeviceImage from '../../images/Dashboard/device.png';
+
+const DeviceItem = ({ device, onClick }) => {
+  return (
+    <div className='col-lg-2 m-3' align='center'>
+      <img src={DeviceImage} alt='Device' height='100px' />
+      <p className='lead'>{device.device_codename}</p>
+      <button className='btn btn-success btn-sm' onClick={onClick}>
+        Extract Data
+      </button>
+    </div>
+  );
+};
+
+export default DeviceItem;

React-frontend/src/components/Extractor/ExtractDataModal.js

@@ -0,0 +1,82 @@
+import React, { useReducer } from 'react';
+import {
+  MDBBtn,
+  MDBModal,
+  MDBModalBody,
+  MDBModalHeader,
+  MDBModalFooter,
+  MDBInput,
+} from 'mdbreact';
+import { useDispatch, useSelector } from 'react-redux';
+import { extractData } from '../../store/actions/extraction';
+import Dropdown from '../core/Dropdown';
+import formReducer from '../../utils/formReducer';
+import { setAlert } from '../../store/actions/alerts';
+
+const ExtractDataModal = ({ isOpen, onToggle }) => {
+  const dispatch = useDispatch();
+  const options = ['all', 'facebook', 'whatsapp', 'phone', 'report'];
+  const initialFormData = {
+    case_name: '',
+    data: options[0],
+  };
+
+  const [formData, setFormData] = useReducer(formReducer, initialFormData);
+  const { isLoading, currentDevice } = useSelector(state => state.extraction);
+
+  const extractDataHandler = () => {
+    if (!formData.case_name) {
+      dispatch(setAlert('Please enter case name', 'warning'));
+      return;
+    }
+    const config = {
+      device_id: currentDevice.transpot_id,
+      ...formData,
+    };
+    dispatch(extractData(config, () => onToggle(false)));
+  };
+
+  return (
+    <MDBModal isOpen={isOpen}>
+      <MDBModalHeader>Extract Data</MDBModalHeader>
+      <MDBModalBody>
+        {isLoading ? (
+          <p className='lead'>Extracting data</p>
+        ) : (
+          <div className='col' align='center'>
+            <MDBInput
+              name='case_name'
+              label='Enter Case Name'
+              value={formData.case_name}
+              required
+              onChange={event => setFormData(event.target)}
+            />
+            <Dropdown
+              name='data'
+              value={formData.data}
+              label='Select type of data'
+              options={options}
+              onChange={event => setFormData(event.target)}
+            />
+          </div>
+        )}
+      </MDBModalBody>
+      <MDBModalFooter>
+        <MDBBtn
+          disabled={isLoading}
+          color='secondary'
+          onClick={() => onToggle(false)}>
+          Cancel
+        </MDBBtn>
+        <MDBBtn
+          disabled={isLoading}
+          color='primary'
+          onClick={extractDataHandler}>
+          Extract Data
+        </MDBBtn>
+      </MDBModalFooter>
+    </MDBModal>
+  );
+};
+
+export default ExtractDataModal;

React-frontend/src/components/Sidebar.js

@@ -3,16 +3,19 @@ import { Link } from 'react-router-dom';
 
 const Sidebar = () => {
   return (
-    <div className="sidebar-container">
-      <div className="sidebar">
-        <Link className="myLink" to="/">
-          <div className="sidebar-link">Home</div>
+    <div className='sidebar-container'>
+      <div className='sidebar'>
+        <Link className='myLink' to='/'>
+          <div className='sidebar-link'>Home</div>
         </Link>
-        <Link className="myLink" to="/about">
-          <div className="sidebar-link">About</div>
+        <Link className='myLink' to='/about'>
+          <div className='sidebar-link'>About</div>
         </Link>
-        <Link className="myLink" to="/contact">
-          <div className="sidebar-link">Contact</div>
+        <Link className='myLink' to='/contact'>
+          <div className='sidebar-link'>Contact</div>
+        </Link>
+        <Link className='myLink' to='/extraction'>
+          <div className='sidebar-link'>Extraction</div>
         </Link>
       </div>
     </div>

React-frontend/src/components/core/Dropdown.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { InputGroup, FormControl } from 'react-bootstrap';
+
+const Dropdown = ({ name, label, options = [], onChange }) => {
+  return (
+    <InputGroup className='my-3'>
+      <InputGroup.Prepend>
+        <p className='lead mr-3'>{label}</p>
+      </InputGroup.Prepend>
+      <FormControl name={name} as='select' onChange={onChange}>
+        {options.map(element => (
+          <option key={element} value={element}>
+            {element}
+          </option>
+        ))}
+      </FormControl>
+    </InputGroup>
+  );
+};
+
+export default Dropdown;

React-frontend/src/pages/ExtractionPage.js

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import Layout from '../components/core/Layout';
+import DeviceItem from '../components/Extractor/DeviceItem';
+import ExtractDataModal from '../components/Extractor/ExtractDataModal';
+import { fetchLiveDevices, selectDevice } from '../store/actions/extraction';
+
+const ExtractionPage = () => {
+  const dispatch = useDispatch();
+  const [showModal, toggleShowModal] = useState(false);
+  const { isLoading, devices } = useSelector(state => state.extraction);
+
+  useEffect(() => {
+    dispatch(fetchLiveDevices());
+  }, [dispatch]);
+
+  const selectDeviceHandler = device => {
+    toggleShowModal(true);
+    dispatch(selectDevice(device));
+  };
+
+  return (
+    <Layout>
+      <div className='mt-4'>
+        <h1>Live Devices</h1>
+        {isLoading ? (
+          <h1>Loading</h1>
+        ) : (
+          <div className='row'>
+            {devices.map(device => (
+              <DeviceItem
+                device={device}
+                onClick={() => selectDeviceHandler(device)}
+              />
+            ))}
+          </div>
+        )}
+        <ExtractDataModal onToggle={toggleShowModal} isOpen={showModal} />
+      </div>
+    </Layout>
+  );
+};
+
+export default ExtractionPage;

React-frontend/src/store/actions/extraction.js

@@ -0,0 +1,38 @@
+import axios from '../../axios';
+import { setAlert } from './alerts';
+
+export const EXTRACT_DATA = 'EXTRACT_DATA';
+export const SELECT_DEVICE = 'SELECT_DEVICE';
+export const FETCH_DEVICES = 'FETCH_DEVICES';
+export const TOGGLE_EXTRACTION_LOADING = 'TOGGLE_EXTRACTION_LOADING';
+
+export const selectDevice = device => dispatch => {
+  dispatch({ type: SELECT_DEVICE, payload: device });
+};
+
+export const fetchLiveDevices = () => async dispatch => {
+  try {
+    dispatch({ type: TOGGLE_EXTRACTION_LOADING, payload: true });
+    const res = await axios.get('/extraction/list_devices');
+    const devices = res.data;
+    dispatch({ type: FETCH_DEVICES, payload: devices });
+  } catch (error) {
+    dispatch({ type: TOGGLE_EXTRACTION_LOADING, payload: false });
+    dispatch(setAlert(error.response, 'danger'));
+  }
+};
+
+export const extractData = (config, callback) => async dispatch => {
+  try {
+    dispatch({ type: TOGGLE_EXTRACTION_LOADING, payload: true });
+    const res = await axios.post('/extraction/extract_data', config);
+    const message = res.data.message;
+    dispatch({ type: EXTRACT_DATA });
+    dispatch(setAlert(message, 'success'));
+    callback();
+  } catch (error) {
+    dispatch({ type: TOGGLE_EXTRACTION_LOADING, payload: false });
+    dispatch(setAlert(error.response, 'danger'));
+    callback();
+  }
+};

React-frontend/src/store/reducers/extraction.js

@@ -0,0 +1,43 @@
+import {
+  EXTRACT_DATA,
+  SELECT_DEVICE,
+  FETCH_DEVICES,
+  TOGGLE_EXTRACTION_LOADING,
+} from '../actions/extraction';
+
+const initialState = {
+  devices: [],
+  isLoading: false,
+  currentDevice: null,
+};
+
+const reducer = (state = initialState, action) => {
+  const { type, payload } = action;
+  switch (type) {
+    case EXTRACT_DATA:
+      return {
+        ...state,
+        isLoading: false,
+      };
+    case FETCH_DEVICES:
+      return {
+        ...state,
+        devices: payload,
+        isLoading: false,
+      };
+    case SELECT_DEVICE:
+      return {
+        ...state,
+        currentDevice: payload,
+      };
+    case TOGGLE_EXTRACTION_LOADING:
+      return {
+        ...state,
+        isLoading: payload,
+      };
+    default:
+      return state;
+  }
+};
+
+export default reducer;

React-frontend/src/store/store.js

@@ -4,11 +4,13 @@ import { createStore, combineReducers, applyMiddleware } from 'redux';
 
 import auth from './reducers/auth';
 import alerts from './reducers/alerts';
+import extraction from './reducers/extraction';
 
 // Combine each reducer here
 const rootReducer = combineReducers({
   auth,
   alerts,
+  extraction,
 });
 
 const initialState = {};

apiUtility/apiUtils.py

@@ -1,6 +1,5 @@
 import sys
-sys.path.append('/home/cobalt/osp/OpenMF/')
-sys.path.append('/home/cobalt/osp/OpenMF/')
+sys.path.append('../')
 from data_store.report_helper import generate_pdf_report
 from scripts.extract_all import extract_all_data_toTsv
 from scripts.fb_reader import store_fb_data

flask-backend/api/routes/extraction.py

@@ -13,6 +13,7 @@
 case_schema = CaseSchema()
 cases_schema = CaseSchema(many=True)
 dirname = os.path.dirname(__file__)
+extract_data_path = os.path.join(dirname, '../../../apiUtility')
 adb_path=os.path.join(dirname, '../../../ExtraResources/adbLinux')
 extraction = Blueprint('extraction', __name__, url_prefix='/extraction')
 
@@ -60,7 +61,7 @@ def extract():
     except KeyError as err:
         return f'please provide {str(err)}', 400
 
-    sys.path.append('/home/cobalt/osp/OpenMF/apiUtility')
+    sys.path.append(extract_data_path)
     from apiUtils import apiExtactAll, apiExtractFb, apiExtractWa, apiExtractPhone, apiReport
     if(data == 'all'):
         apiExtactAll(case_name)