Artifacts table columns: Name, Upload Date, Size

Fix the artifacts table columns. Serialize upload date instant as milliseconds
from epoch.

service/fling/src/main/java/net/friedl/fling/model/dto/ArtifactDto.java

@@ -2,6 +2,8 @@ package net.friedl.fling.model.dto;
 
 import java.time.Instant;
 
+import com.fasterxml.jackson.annotation.JsonProperty;
+
 import lombok.Data;
 
 @Data
@@ -21,4 +23,9 @@ public class ArtifactDto {
     private Instant uploadTime;
 
     private FlingDto fling;
+
+    @JsonProperty("uploadTime")
+    public Long getJsonUploadTime() {
+        return uploadTime.toEpochMilli();
+    }
 }

web/fling/src/components/admin/FlingArtifacts.jsx

@@ -15,6 +15,7 @@ function FlingArtifactControl(props) {
             .then(() => props.reloadArtifactsFn());
     }
 
+
     function handleDownload(ev) {
         artifactClient.downloadArtifact(props.artifact.id)
             .then(url => {
@@ -39,12 +40,25 @@ function FlingArtifactControl(props) {
 
 function FlingArtifactRow(props) {
     let [hovered, setHovered] = useState(false);
+    function readableBytes(bytes) {
+        if(bytes <= 0) return "0 KB";
+
+        var i = Math.floor(Math.log(bytes) / Math.log(1024)),
+            sizes = ['Byte', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+        return (bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + sizes[i];
+    }
+
+    function localizedUploadDate() {
+        let d = new Date(props.artifact.uploadTime);
+        return d.toLocaleDateString();
+    }
 
     return(
         <tr key={props.artifact.id} className="artifact-row" onMouseOver={() => setHovered(true)} onMouseOut={() => setHovered(false)}>
           <td>{props.artifact.name}</td>
-          <td>{props.artifact.version}</td>
+          <td>{localizedUploadDate()}</td>
-          <td/>
+          <td>{readableBytes(props.artifact.size)}</td>
           <td><FlingArtifactControl artifact={props.artifact} reloadArtifactsFn={props.reloadArtifactsFn} hidden={!hovered} /></td>
         </tr>
     );
@@ -59,7 +73,7 @@ export default function FlingArtifacts(props) {
             <thead>
               <tr>
                 <th>Name</th>
-                <th>Date</th>
+                <th>Uploaded</th>
                 <th>Size</th>
                 <th/>
               </tr>

web/fling/src/style/fling.scss

@@ -150,6 +150,7 @@ thead th {
         width:20%;
     }
     &:nth-child(3) {
+        text-align: right;
         width:20%;
     }
     // control box
@@ -160,6 +161,10 @@ thead th {
 }
 
 tbody td {
+    &:nth-child(3) {
+        text-align: right;
+    }
+    // control box
     &:nth-child(4) {
         text-align: right;
         width: 4*$control-size;