mount: Add mount dashboard.

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@rclone/rclone-webui",
-  "version": "0.0.6",
+  "name": "@rclone/rclone-webui-react",
+  "version": "2.0.1",
   "description": "A web interface for r-clone",
   "author": "Chaitanya Bankanhal",
   "copyright": "",
@@ -23,12 +23,12 @@
     "core-js": "^3.6.5",
     "flag-icon-css": "^3.4.6",
     "font-awesome": "^4.7.0",
-    "jquery": "^3.4.1",
+    "jquery": "^3.5.1",
     "lodash": "^4.17.14",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.1",
     "package.json": "^2.0.1",
     "prop-types": "^15.7.2",
-    "rclone-api": "^1.0.0",
+    "rclone-api": "^1.0.7",
     "react": "^16.12.0",
     "react-app-polyfill": "^1.0.6",
     "react-autosuggest": "^10.0.0",
@@ -51,6 +51,7 @@
     "typescript": "^3.7.5"
   },
   "devDependencies": {
+    "@babel/core": "^7.10.2",
     "check-prop-types": "^1.1.2",
     "coveralls": "^3.0.9",
     "enzyme": "^3.11.0",

src/_nav.js

@@ -20,6 +20,11 @@ export default {
             url: '/rcloneBackend',
             icon: 'icon-star',
         },
+        {
+            name: 'Mounts',
+            url: '/mountDashboard',
+            icon: 'fa fa-hdd-o'
+        },
         {
             name: 'Log Out',
             url: '/login',

src/actions/mountActions.js

@@ -0,0 +1,107 @@
+import axiosInstance from "../utils/API/API";
+import urls from "../utils/API/endpoint";
+import {CREATE_MOUNT, GET_MOUNT_LIST, REMOVE_MOUNT, REQUEST_ERROR, REQUEST_SUCCESS} from "./types";
+
+/**
+ * Get the current mount lists and load into state
+ * @returns {function(...[*]=)}
+ */
+export const getMountList = () => {
+	return (dispatch) => {
+		axiosInstance.post(urls.listMounts).then(res => {
+			console.log(res);
+			dispatch({
+				type: GET_MOUNT_LIST,
+				status: REQUEST_SUCCESS,
+				payload: res.data
+			})
+		}, (error) => {
+			dispatch({
+				type: GET_MOUNT_LIST,
+				status: REQUEST_ERROR,
+				payload: error
+			})
+		})
+	}
+}
+
+/**
+ * Add a new mount location
+ * @param fs						{string}	Name of the remote eg mydrive:
+ * @param mountPoint				{string}	Path to mount on the local filesystem where rclone is running
+ * @param mountType					{string}	One of "cmount", "mount", "mount2": Specifies what mountType rclone should use
+ * @returns {function(...[*]=)}
+ */
+export const addMount = (fs, mountPoint, mountType) => {
+	if (!fs.endsWith(":")) fs = fs + ":";
+	const type = CREATE_MOUNT
+	return (dispatch) => {
+		axiosInstance.post(urls.createMount, {fs, mountPoint, mountType}).then(res => {
+			dispatch({
+				type,
+				status: REQUEST_SUCCESS,
+				payload: res.data
+			})
+		}, (error) => {
+			dispatch({
+				type,
+				status: REQUEST_ERROR,
+				payload: error
+			})
+		})
+		dispatch(getMountList());
+
+	}
+}
+
+/**
+ * unmount removes an mounted location "mountPoint"
+ * @param mountPoint                {string}    Path to location where the mount was created.
+ * @returns {function(...[*]=)}
+ */
+export const unmount = (mountPoint) => {
+	const type = REMOVE_MOUNT;
+	return (dispatch) => {
+		axiosInstance.post(urls.removeMount, {mountPoint}).then(res => {
+			dispatch({
+				type,
+				status: REQUEST_SUCCESS,
+				payload: res.data
+			})
+
+		}, (error) => {
+			dispatch({
+				type,
+				status: REQUEST_ERROR,
+				payload: error
+			})
+		})
+		dispatch(getMountList());
+	}
+}
+
+
+/**
+ * unmountAll removes all mounts created by mount/mount
+ * @returns {function(...[*]=)}
+ */
+export const unmountAll = () => {
+	const type = REMOVE_MOUNT;
+	return (dispatch) => {
+		axiosInstance.post(urls.unmountAll).then(res => {
+			dispatch({
+				type,
+				status: REQUEST_SUCCESS,
+				payload: res.data
+			})
+
+		}, (error) => {
+			dispatch({
+				type,
+				status: REQUEST_ERROR,
+				payload: error
+			})
+		})
+		dispatch(getMountList());
+	}
+}

src/actions/types.js

@@ -38,6 +38,10 @@ export const CHANGE_DISTRACTION_FREE_MODE = "CHANGE_DISTRACTION_FREE_MODE";
 export const CHANGE_SORT_FILTER = "CHANGE_SORT_FILTER";
 
 
+export const GET_MOUNT_LIST = "GET_MOUNT_LIST";
+export const REMOVE_MOUNT = "REMOVE_MOUNT";
+export const CREATE_MOUNT = "CREATE_MOUNT";
+
 export const REQUEST_ERROR = 'ERROR';
 export const REQUEST_SUCCESS = 'SUCCESS';
 export const REQUEST_LOADING = 'LOADING';

src/containers/DefaultLayout/__snapshots__/DefaultLayout.test.js.snap

@@ -76,6 +76,11 @@ exports[`Remote Explorer renders should match snapshot 1`] = `
                     "name": "Backend",
                     "url": "/rcloneBackend",
                   },
+                  Object {
+                    "icon": "fa fa-hdd-o",
+                    "name": "Mounts",
+                    "url": "/mountDashboard",
+                  },
                   Object {
                     "icon": "icon-logout",
                     "name": "Log Out",
@@ -199,6 +204,16 @@ exports[`Remote Explorer renders should match snapshot 1`] = `
                 "name": "Rclone Backend",
                 "path": "/rcloneBackend",
               },
+              Object {
+                "component": Object {
+                  "$$typeof": Symbol(react.lazy),
+                  "_ctor": [Function],
+                  "_result": null,
+                  "_status": -1,
+                },
+                "name": "Mount Dashboard",
+                "path": "/mountDashboard",
+              },
             ]
           }
           className=""
@@ -269,9 +284,15 @@ exports[`Remote Explorer renders should match snapshot 1`] = `
                 path="/rcloneBackend"
                 render={[Function]}
               />
+              <Route
+                key="9"
+                name="Mount Dashboard"
+                path="/mountDashboard"
+                render={[Function]}
+              />
               <Redirect
                 from="/"
-                to="/login"
+                to="/dashboard"
               />
             </Switch>
           </Suspense>

src/reducers/index.js

@@ -9,6 +9,7 @@ import providerStatusReducer from "./providerStatusReducer";
 import userActionsReducer from "./userActionsReducer";
 import imagesReducer from "./imagesReducer";
 import versionReducer from "./versionReducer";
+import mountReducer from "./mountReducer";
 
 /**
  * Configures the root reducer to be executed before any other reducers configured in the system.
@@ -38,8 +39,9 @@ const appReducer = combineReducers({
     providerStatus: providerStatusReducer,
     user: userActionsReducer,
     imageLoader: imagesReducer,
-    version: versionReducer
+    version: versionReducer,
+    mount: mountReducer,
     // remoteOps: remoteOpsReducer
 });
 
-export default rootReducer;
+export default rootReducer;

src/reducers/mountReducer.js

@@ -0,0 +1,43 @@
+import {CREATE_MOUNT, GET_MOUNT_LIST, REMOVE_MOUNT, REQUEST_ERROR, REQUEST_SUCCESS} from "../actions/types";
+import {toast} from "react-toastify";
+
+const initialState = {
+	currentMounts: [],
+	mountError: null
+};
+
+export default function (state = initialState, action) {
+	switch (action.type) {
+		case CREATE_MOUNT:
+			if (action.status === REQUEST_SUCCESS) {
+				toast.info('Mount Success');
+			} else if (action.status === REQUEST_ERROR) {
+				toast.error('Error creating mount ' + action.payload);
+			}
+			break;
+		case GET_MOUNT_LIST:
+			if (action.status === REQUEST_SUCCESS) {
+				return {
+					...state,
+					currentMounts: action.payload.mountPoints
+				}
+			} else if (action.status === REQUEST_ERROR) {
+				return {
+					...state,
+					currentMounts: [],
+					mountError: action.payload
+				}
+			}
+			break;
+		case REMOVE_MOUNT:
+			if (action.status === REQUEST_SUCCESS) {
+				toast.info('Unmount success');
+			} else if (action.status === REQUEST_ERROR) {
+				toast.error("Couldn't remove mount");
+			}
+			break;
+		default:
+			return state;
+	}
+	return state
+}

src/routes.js

@@ -6,6 +6,7 @@ const ShowConfig = React.lazy(() => import('./views/RemoteManagement/ShowConfig'
 const RemoteExplorerLayout = React.lazy(() => import("./views/Explorer/RemoteExplorerLayout"));
 const Login = React.lazy(() => import("./views/Pages/Login"));
 const RCloneDashboard = React.lazy(() => import("./views/RCloneDashboard"));
+const MountDashboard = React.lazy(() => import("./views/MountDashboard"));
 
 // https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
 // Define the routes as required
@@ -19,6 +20,7 @@ const routes = [
     {path: '/remoteExplorer/:remoteName/:remotePath', exact: true, name: 'Explorer', component: RemoteExplorerLayout},
     {path: '/remoteExplorer', name: 'Explorer', component: RemoteExplorerLayout},
     {path: '/rcloneBackend', name: 'Rclone Backend', component: RCloneDashboard},
+    {path: '/mountDashboard', name: 'Mount Dashboard', component: MountDashboard},
 
 ];
 

src/utils/API/endpoint.js

@@ -97,25 +97,46 @@ const urls = {
     /**
      * List the remote names of created remotes.
      */
-    listRemotes: "config/listremotes",
-    /**
-     * Get the files for given remoteName and path.
-     */
-    getFilesList: "operations/list",
+	listRemotes: "config/listremotes",
+	/**
+	 * Get the files for given remoteName and path.
+	 */
+	getFilesList: "operations/list",
+
+	/**
+	 * Get information about the rclone backend.
+	 */
+	getAbout: "operations/about",
+	/**
+	 * Delete a config with config name.
+	 */
+	deleteConfig: "config/delete",
+
+	/**
+	 * Stop a running job by job id
+	 */
+	stopJob: "job/stop",
+
+
+	/**
+	 * List all the current mounts
+	 */
+	listMounts: "mount/listmounts",
 
     /**
-     * Get information about the rclone backend.
+     * Create a new mount (mount)
      */
-    getAbout: "operations/about",
+    createMount: "mount/mount",
+
     /**
-     * Delete a config with config name.
+     * Delete a created mount(unmount)
      */
-    deleteConfig: "config/delete",
+    removeMount: "mount/unmount",
 
     /**
-     * Stop a running job by job id
+     * Delete all created mounts(unmount)
      */
-    stopJob: "job/stop",
+    unmountAll: "mount/unmountall",
 
 };
 export default urls;

src/utils/RclonePropTypes.js

@@ -37,4 +37,4 @@ export const PROP_BANDWIDTH = PropTypes.shape({
     // bytesPerSecond: PropTypes.number.isRequired,
     rate: PropTypes.string.isRequired
 
-});
+});

src/views/Base/BackendStatusCard/BackendStatusCard.js

@@ -140,11 +140,11 @@ const propTypes = {
      */
     checkStatus: PropTypes.bool.isRequired,
 
-
     /**
      * Function to enable or disable status check
      */
     enableCheckStatus: PropTypes.func.isRequired,
+
     /**
      * Get the current status
      */