Improve styling for help message

Filter full path in object names in the UI
Fix a bug that put bucket stats take up entire columns

Author: dormant-user

src/squire/constant.rs

@@ -1,6 +1,7 @@
 use std::env;
 
 /// Struct to store the cargo information gathered at compile time using the `env!` macro.
+#[allow(dead_code)]
 #[derive(Debug, Clone)]
 pub struct MetaData {
     pub crate_name: String,

src/squire/parser.rs

@@ -27,16 +27,22 @@ pub fn arguments(
     while i < args.len() {
         match args[i].as_str() {
             "-h" | "--help" => {
-                let helper = "lists3 takes the following arguments\n\n\
-                --bucket/-b: Bucket name for which listing has to be created\tMANDATORY!!\n\
-                --region/-r: Region name where the bucket is present\t\tFallback: Default Region\n\
-                --filter/-f: S3 prefix to filter (eg: '[\"github/\"]')\tFallback: []\n\
-                --ignore/-i: Objects to be ignored (eg: '[\"github/.DS_Store\"]')\tFallback: []\n\
-                --object/-o: Object name to upload in s3 (eg: list.html)\tFallback: list\n\
-                --proxy/-p: Proxy server's path (eg: https://example.com/proxy)\tFallback: https://jarvis.vigneshrao.com/proxy\n\
-                --style/-s: Styling for the UI (eg: vanilla)\tFallback: bootstrap\n\
-                --version/-v/-V: Get the package version.\n".to_string();
-                println!("Usage: {} [OPTIONS]\n\n{}", args[0], helper);
+                let options: Vec<_> = vec![
+                    ("--bucket | -b", "Bucket name for which listing has to be created"),
+                    ("--region | -r", "Region name where the bucket is present"),
+                    ("--filter | -f", "S3 prefix to filter (eg: '[\"github/\"]')"),
+                    ("--ignore | -i", "Objects to be ignored (eg: '[\"github/.DS_Store\"]')"),
+                    ("--object | -o", "Object name to upload in s3 (eg: list.html)"),
+                    ("--proxy | -p", "Proxy server's path (eg: https://example.com/proxy)"),
+                    ("--style | -s", "Styling for the UI (eg: vanilla)"),
+                    ("--version | -v", "Get the package version.")
+                ].iter().cloned().collect();
+                let longest_key = options.iter().map(|(k, _)| k.len()).max().unwrap_or(0);
+                let pretext = "\n* ";
+                let choices: String = options.iter().map(|(k, v)| {
+                    format!("{}{} {}→ {}", pretext, k, "·".repeat(longest_key - k.len() + 8), v)
+                }).collect::<Vec<_>>().join("");
+                println!("Usage: {} [OPTIONS]\n\nlists3 takes the following arguments\n{}", args[0], choices);
                 exit(0)
             }
             "-V" | "-v" | "--version" => {

src/templates/list_bootstrap.rs

@@ -25,7 +25,7 @@ pub fn get_content() -> String {
             position: absolute;
             top: 3%;
             right: 1px;
-            bottom: 3%;
+            bottom: 97%;
             display: inline-flex;
         }
 
@@ -174,6 +174,22 @@ pub fn get_content() -> String {
         }
     </script>
     <script>
+        // Mask the full path in 'Object Name' column to improve readability
+        // This functionality is available only for objects filtered with `--filter` flag
+        function maskPath(objectName, folderNames) {
+            let stripped = objectName;
+            for (let folder of folderNames) {
+                if (objectName.startsWith(folder)) {
+                    stripped = objectName.slice(folder.length);
+                    break;
+                }
+            }
+            if (stripped.startsWith('/')) {
+                stripped = stripped.slice(1);
+            }
+            return stripped;
+        }
+
         function renderTable(bucketName, regionName, folderNames, ignoreObjects, proxyServer) {
             let pretext = document.getElementById('pretext');
             pretext.innerHTML = "Amazon S3 Bucket list v2";
@@ -194,7 +210,7 @@ pub fn get_content() -> String {
                 rowData.forEach(function (cellData, i) {
                     const td = jQuery('<td>');
                     if (i === 0) {
-                        td.html(`<a href="${cellData}">${cellData}</a>`);
+                        td.html(`<a href="${cellData}">${maskPath(cellData, folderNames)}</a>`);
                     } else if (i === 1) {
                         td.text(sizeConverter(cellData));
                     } else {

src/templates/list_vanilla.rs

@@ -18,7 +18,7 @@ pub fn get_content() -> String {
             position: absolute;
             top: 3%;
             right: 1px;
-            bottom: 3%;
+            bottom: 97%;
             display: inline-flex;
         }
 
@@ -152,6 +152,22 @@ pub fn get_content() -> String {
             return filteredFiles;
         }
 
+        // Mask the full path in 'Object Name' column to improve readability
+        // This functionality is available only for objects filtered with `--filter` flag
+        function maskPath(objectName, folderNames) {
+            let stripped = objectName;
+            for (let folder of folderNames) {
+                if (objectName.startsWith(folder)) {
+                    stripped = objectName.slice(folder.length);
+                    break;
+                }
+            }
+            if (stripped.startsWith('/')) {
+                stripped = stripped.slice(1);
+            }
+            return stripped;
+        }
+
         function handleList(folderNames, ignoreObjects) {
             if (http.readyState === 4) { // Finished loading the response
                 let response = http.responseXML;
@@ -189,7 +205,7 @@ pub fn get_content() -> String {
                     let storageCell = document.createElement('td');
                     storageCell.innerHTML = storage;
                     let nameCell = document.createElement('td');
-                    nameCell.innerHTML = "<a href=\"" + name + "\">" + name + "</a>";
+                    nameCell.innerHTML = "<a href=\"" + name + "\">" + maskPath(name, folderNames) + "</a>";
                     row.appendChild(sizeCell);
                     row.appendChild(lastmodCell);
                     row.appendChild(storageCell);
@@ -297,7 +313,6 @@ pub fn get_content() -> String {
             window.location.href = "?sort=storage&sortdir=" + getNextSortDir('storage');
         }
 
-
     </script>
     <style>
         table {