Add creation date

src/views/Repo.vue

@@ -9,10 +9,11 @@
             <ListHeader slot="header">
                 <span slot="title">Tag</span>
                 <span slot="detail">Pull Commmand</span>
+                <span slot="date">Created</span>
                 <span slot="size">Size</span>
             </ListHeader>
             <ListItem
-                v-for="tag in tags"
+                v-for="(tag, i) in tags"
                 :key="tag"
                 :to="{ name: 'tag', params: { tag, }}">
                 <span slot="title">
@@ -21,6 +22,9 @@
                 <span slot="detail">
                     <code>docker pull {{ registryHost }}/{{ $route.params.repo }}:{{ tag }}</code>
                 </span>
+                <time slot="date" :datetime="dates[i]">
+					{{ dates[i].toLocaleString() }}
+				</time>
                 <TagSize slot="size" :repo="$route.params.repo" :tag="tag" />
             </ListItem>
         </List>
@@ -30,7 +34,7 @@
 
 <script>
 import { registryHost } from '@/options';
-import { tags, repoCanDelete, repoDelete } from '@/api';
+import { tags, repoCanDelete, repoDelete, tag, configBlob } from '@/api';
 
 import Layout from '@/components/Layout.vue';
 import Error from '@/components/Error.vue';
@@ -59,6 +63,7 @@ export default {
 			error: '',
 			registryHost: '',
 			tags: [],
+			dates: [],
 			repoCanDelete: false,
 			nextLast: '',
 		};
@@ -83,6 +88,13 @@ export default {
 				this.tags = r.tags;
 				this.nextLast = r.nextLast;
 				this.repoCanDelete = await repoCanDelete(this.$route.params.repo);
+
+				// fetch tag dates
+				this.dates = await Promise.all(r.tags.map(async (tagName) => {
+					const t = await tag(this.$route.params.repo, tagName);
+					const config = await configBlob(this.$route.params.repo, t.config.digest);
+					return new Date(config.created);
+				}));
 			} catch (e) {
 				console.error(e);
 				this.error = `Unable to fetch tags (${e.message})`;

src/views/Tag.vue

@@ -16,7 +16,7 @@
             </ListItem>
             <ListItem>
 				<span slot="title">Date Created</span>
-                <span slot="detail">{{ config.created }}</span>
+                <span slot="date">{{ new Date(config.created).toLocaleString() }}</span>
             </ListItem>
             <ListItem>
 				<span slot="title">Platform</span>
@@ -24,23 +24,29 @@
             </ListItem>
             <ListItem>
 				<span slot="title">Entrypoint</span>
-				<span slot="detail"><pre>{{ config.config.Entrypoint.join(' ') }}</pre></span>
+				<span slot="detail"><code>{{ config.config.Entrypoint }}</code></span>
             </ListItem>
             <ListItem>
 				<span slot="title">Command</span>
-				<span slot="detail"><pre>{{ config.config.Cmd.join(' ') }}</pre></span>
+				<span slot="detail"><code>{{ config.config.Cmd }}</code></span>
             </ListItem>
             <ListItem>
 				<span slot="title">Labels</span>
-				<span slot="detail"><pre>{{ formatLabels(config.config.Labels) }}</pre></span>
+				<span slot="detail">
+					<ul style="text-align: left; list-style: none;">
+						<li v-for="(v, k) in config.config.Labels" :key="k">
+							<code>{{ k }}: {{ v }}</code>
+						</li>
+					</ul>
+				</span>
             </ListItem>
 			<ListItem>
                 <span slot="title">Layers</span>
-                <span slot="detail">{{ tag.layers.length }}</span>
+                <span slot="size">{{ tag.layers.length }}</span>
             </ListItem>
             <ListItem>
                 <span slot="title">Size</span>
-                <span slot="detail">
+                <span slot="size">
 					<TagSize :repo="$route.params.repo" :tag="$route.params.tag" />
 				</span>
             </ListItem>