Solve issues with progress modal.

Author: negative0

src/scss/_custom.scss

@@ -78,6 +78,11 @@
   margin-bottom: 5px;
   right: 0;
   font-size: small;
+  max-width: 25vw;
+}
+
+.progress-modal-body {
+  max-height: 30vh;
 }
 
 .task-modal {
@@ -127,3 +132,4 @@
   -webkit-transform: rotate(270deg) translateX(-100%);
   -ms-transform: rotate(270deg) translateX(-100%);
 }
+

src/utils/API/endpoint.js

@@ -6,11 +6,11 @@ const urls = {
     /**
      * Purge a directory.
      */
-    purge: "/operations/purge",
+    purge: "operations/purge",
     /**
      * Delete a file.
      */
-    deleteFile: "/operations/deletefile",
+    deleteFile: "operations/deletefile",
     /**
      * Create public link.
      */
@@ -26,19 +26,19 @@ const urls = {
     /**
      * Move a directory.
      */
-    moveDir: "/sync/move",
+    moveDir: "sync/move",
     /**
      * Move a file.
      */
-    moveFile: "/operations/movefile",
+    moveFile: "operations/movefile",
     /**
      * Copy Directory
      */
-    copyDir: "/sync/copy",
+    copyDir: "sync/copy",
     /**
      * Copy Files.
      */
-    copyFile: "/operations/copyfile",
+    copyFile: "operations/copyfile",
     /**
      * Cleanup the remote recycle bin(trash).
      */
@@ -64,11 +64,11 @@ const urls = {
     /**
      * Get providers configuration in the rclone backend.
      */
-    getProviders: "/config/providers",
+    getProviders: "config/providers",
     /**
      * Get entire remote configuration dump from backend.
      */
-    getConfigDump: "/config/dump",
+    getConfigDump: "config/dump",
     /**
      * List the currently running jobs.
      */
@@ -84,7 +84,7 @@ const urls = {
     /**
      * Create a new config with parameters.
      */
-    createConfig: "/config/create",
+    createConfig: "config/create",
     /**
      * Update an existing config with parameters.
      */
@@ -110,7 +110,7 @@ const urls = {
     /**
      * Delete a config with config name.
      */
-    deleteConfig: "/config/delete"
+    deleteConfig: "config/delete"
 
 };
 export default urls;

src/views/Base/RunningJobs/RunningJobs.js

@@ -46,12 +46,28 @@ function JobCard({job}) {
     return null;
 }
 
+function getCroppedName(name) {
+	const leftChars = 30;
+	const rightChars = 5;
+
+	if (name.length > leftChars) {
+		const croppedName = name.substr(0, leftChars) + " ... " + name.substr(-rightChars);
+		return croppedName;
+	}
+	return name;
+
+}
+
 function JobCardRow({job}) {
     const {name, percentage, speed, size} = job;
     return (
         <React.Fragment>
-            <Row>
-                {(size && speed) ? (<Col lg={12}>{name}({formatBytes(size)}) - {formatBytes(speed)}PS </Col>) : (
+			<Row className="runningJobs">
+				{(size && speed) ? (
+
+					<Col lg={12} className="itemName"> {getCroppedName(name)} {" "}
+						({formatBytes(size)}) - {formatBytes(speed)}PS </Col>
+				) : (
                     <Col lg={12}>Calculating</Col>)}
 
             </Row>
@@ -113,7 +129,7 @@ function GlobalStatus({stats}) {
 function TransferringJobs({transferring}) {
     if (transferring !== undefined) {
         return transferring.map((item, idx) => {
-            return (<JobCard key={idx} job={item}/>);
+			return (<JobCard key={item.name} job={item}/>);
         });
     }
     return null;
@@ -122,7 +138,7 @@ function TransferringJobs({transferring}) {
 function TransferringJobsRow({transferring}) {
     if (transferring !== undefined) {
         return transferring.map((item, idx) => {
-            return (<JobCardRow key={idx} job={item}/>);
+			return (<JobCardRow key={item.name} job={item}/>);
         });
     }
     return null;
@@ -202,7 +218,7 @@ class RunningJobs extends React.Component {
                                 </Button>
                             </div>
                         </CardHeader>
-                        <CardBody className={!this.state.isShowing ? "d-none" : ""}>
+						<CardBody className={!this.state.isShowing ? "d-none" : "progress-modal-body"}>
                             <TransferringJobsRow transferring={transferring}/>
 
                         </CardBody>