From f17ff792a82d57a6449112d58d2cdba57ee88b7d Mon Sep 17 00:00:00 2001
From: Chaitanya <bchaitanya15@gmail.com>
Date: Mon, 30 Sep 2019 00:07:42 +0530
Subject: [PATCH] Solve issues with progress modal.

---
 src/scss/_custom.scss                     |  6 ++++++
 src/utils/API/endpoint.js                 | 20 ++++++++---------
 src/views/Base/RunningJobs/RunningJobs.js | 26 ++++++++++++++++++-----
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
index c92de2aaf..ff21ca679 100644
--- a/src/scss/_custom.scss
+++ b/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%);
 }
+
diff --git a/src/utils/API/endpoint.js b/src/utils/API/endpoint.js
index 36baf0bfc..106038688 100644
--- a/src/utils/API/endpoint.js
+++ b/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;
\ No newline at end of file
diff --git a/src/views/Base/RunningJobs/RunningJobs.js b/src/views/Base/RunningJobs/RunningJobs.js
index 787ed1432..26bca721e 100644
--- a/src/views/Base/RunningJobs/RunningJobs.js
+++ b/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>