From e85e51e57499b5a0bd0ad2179fe1596a9f38577b Mon Sep 17 00:00:00 2001
From: Jacob Kozol <jacobdkozol@gmail.com>
Date: Wed, 28 Apr 2021 12:03:20 +0200
Subject: [PATCH] ImagesTable: display date created

The date an image was created at should be displayed in the format:
Month Day, Year. i.e. Apr 28, 2021.
---
 src/Components/ImagesTable/ImagesTable.js      | 18 ++++++++++++++++++
 .../Components/ImagesTable/ImagesTable.test.js | 13 +++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/src/Components/ImagesTable/ImagesTable.js b/src/Components/ImagesTable/ImagesTable.js
index 4ea854d2..dbe70e76 100644
--- a/src/Components/ImagesTable/ImagesTable.js
+++ b/src/Components/ImagesTable/ImagesTable.js
@@ -24,6 +24,7 @@ class ImagesTable extends Component {
         this.pollComposeStatuses = this.pollComposeStatuses.bind(this);
         this.onSetPage = this.onSetPage.bind(this);
         this.onPerPageSelect = this.onPerPageSelect.bind(this);
+        this.timestampToDisplayString = this.timestampToDisplayString.bind(this);
     }
 
     componentDidMount() {
@@ -70,11 +71,27 @@ class ImagesTable extends Component {
         this.setState({ perPage, page: 1 });
     }
 
+    timestampToDisplayString(ts) {
+        // timestamp has format 2021-04-27 12:31:12.794809 +0000 UTC
+        // must be converted to ms timestamp and then reformatted to Apr 27, 2021
+        if (!ts) {
+            return '';
+        }
+
+        // get YYYY-MM-DD format
+        const date = ts.slice(0, 10);
+        const ms = Date.parse(date);
+        const options = { month: 'short', day: 'numeric', year: 'numeric' };
+        const tsDisplay = new Intl.DateTimeFormat('en-US', options).format(ms);
+        return tsDisplay;
+    }
+
     render() {
         let { composes } = this.props;
 
         const columns = [
             'Image',
+            'Created',
             'Release',
             'Target',
             'Status',
@@ -89,6 +106,7 @@ class ImagesTable extends Component {
             return {
                 cells: [
                     id,
+                    this.timestampToDisplayString(compose.created_at),
                     { title: <Release release={ compose.request.distribution } /> },
                     { title: <Upload uploadType={ compose.request.image_requests[0].upload_request.type } /> },
                     { title: <ImageBuildStatus status={ compose.image_status ? compose.image_status.status : '' } /> },
diff --git a/src/test/Components/ImagesTable/ImagesTable.test.js b/src/test/Components/ImagesTable/ImagesTable.test.js
index 9d2f8816..f26bcfd0 100644
--- a/src/test/Components/ImagesTable/ImagesTable.test.js
+++ b/src/test/Components/ImagesTable/ImagesTable.test.js
@@ -25,6 +25,7 @@ const store = {
             // kept "running" for backward compatibility
             'c1cfa347-4c37-49b5-8e73-6aa1d1746cfa': {
                 id: 'c1cfa347-4c37-49b5-8e73-6aa1d1746cfa',
+                created_at: '2021-04-27 12:31:12.794809 +0000 UTC',
                 request: {
                     distribution: 'rhel-8',
                     image_requests: [
@@ -44,6 +45,7 @@ const store = {
             },
             'edbae1c2-62bc-42c1-ae0c-3110ab718f58': {
                 id: 'edbae1c2-62bc-42c1-ae0c-3110ab718f58',
+                created_at: '2021-04-27 12:31:12.794809 +0000 UTC',
                 request: {
                     distribution: 'rhel-8',
                     image_requests: [
@@ -63,6 +65,7 @@ const store = {
             },
             '42ad0826-30b5-4f64-a24e-957df26fd564': {
                 id: '42ad0826-30b5-4f64-a24e-957df26fd564',
+                created_at: '2021-04-27 12:31:12.794809 +0000 UTC',
                 request: {
                     distribution: 'rhel-8',
                     image_requests: [
@@ -82,6 +85,7 @@ const store = {
             },
             '955944a2-e149-4058-8ac1-35b514cb5a16': {
                 id: '955944a2-e149-4058-8ac1-35b514cb5a16',
+                created_at: '2021-04-27 12:31:12.794809 +0000 UTC',
                 request: {
                     distribution: 'rhel-8',
                     image_requests: [
@@ -101,6 +105,7 @@ const store = {
             },
             'f7a60094-b376-4b58-a102-5c8c82dfd18b': {
                 id: 'f7a60094-b376-4b58-a102-5c8c82dfd18b',
+                created_at: '2021-04-27 12:31:12.794809 +0000 UTC',
                 request: {
                     distribution: 'rhel-8',
                     image_requests: [
@@ -120,6 +125,7 @@ const store = {
             },
             '1579d95b-8f1d-4982-8c53-8c2afa4ab04c': {
                 id: '1579d95b-8f1d-4982-8c53-8c2afa4ab04c',
+                created_at: '2021-04-27 12:31:12.794809 +0000 UTC',
                 request: {
                     distribution: 'rhel-8',
                     image_requests: [
@@ -147,6 +153,7 @@ const store = {
             },
             '61b0effa-c901-4ee5-86b9-2010b47f1b22': {
                 id: '61b0effa-c901-4ee5-86b9-2010b47f1b22',
+                created_at: '2021-04-27 12:31:12.794809 +0000 UTC',
                 request: {
                     distribution: 'rhel-8',
                     image_requests: [
@@ -166,6 +173,7 @@ const store = {
             },
             'ca03f120-9840-4959-871e-94a5cb49d1f2': {
                 id: 'ca03f120-9840-4959-871e-94a5cb49d1f2',
+                created_at: '2021-04-27 12:31:12.794809 +0000 UTC',
                 request: {
                     distribution: 'rhel-8',
                     image_requests: [
@@ -193,6 +201,7 @@ const store = {
             },
             '551de6f6-1533-4b46-a69f-7924051f9bc6': {
                 id: '551de6f6-1533-4b46-a69f-7924051f9bc6',
+                created_at: '2021-04-27 12:31:12.794809 +0000 UTC',
                 request: {
                     distribution: 'rhel-8',
                     image_requests: [
@@ -212,6 +221,7 @@ const store = {
             },
             '77fa8b03-7efb-4120-9a20-da66d68c4494': {
                 id: '77fa8b03-7efb-4120-9a20-da66d68c4494',
+                created_at: '2021-04-27 12:31:12.794809 +0000 UTC',
                 request: {
                     distribution: 'rhel-8',
                     image_requests: [
@@ -261,6 +271,9 @@ describe('Images Table', () => {
             const compose = store.composes.byId[col1];
             expect(compose).toBeTruthy();
 
+            // date should match the month day and year of the timestamp.
+            expect(row.cells[1]).toHaveTextContent('Apr 27, 2021');
+
             // render the expected <ImageBuildStatus /> and compare the text content
             let testElement = document.createElement('testElement');
             render(<Upload uploadType={ compose.request.image_requests[0].upload_request.type } />, { container: testElement });