From 2c91d17805eb1ab083c2f288c59a70ba1e28cefa Mon Sep 17 00:00:00 2001
From: Philippe Martin <phmartin@redhat.com>
Date: Tue, 23 Jan 2024 14:27:14 +0100
Subject: [PATCH] frontend: display size and creation age of models

---
 packages/backend/src/studio-api-impl.ts       |  7 ++++---
 packages/frontend/package.json                |  4 ++++
 .../src/lib/progress/TasksProgress.svelte     |  2 +-
 .../table/model/ModelColumnCreation.svelte    | 11 ++++++++++
 .../src/lib/table/model/ModelColumnHW.svelte  |  2 +-
 .../lib/table/model/ModelColumnLicense.svelte |  2 +-
 .../lib/table/model/ModelColumnName.svelte    |  2 +-
 .../table/model/ModelColumnPopularity.svelte  |  2 +-
 .../table/model/ModelColumnRegistry.svelte    |  2 +-
 .../lib/table/model/ModelColumnSize.svelte    | 11 ++++++++++
 .../frontend/src/pages/ModelPlayground.svelte |  6 +++---
 packages/frontend/src/pages/Models.svelte     | 14 ++++++++-----
 packages/frontend/src/utils/dimensions.ts     |  9 +++++++++
 packages/shared/src/models/IModelInfo.ts      |  2 +-
 yarn.lock                                     | 20 +++++++++++++++++++
 15 files changed, 78 insertions(+), 18 deletions(-)
 create mode 100644 packages/frontend/src/lib/table/model/ModelColumnCreation.svelte
 create mode 100644 packages/frontend/src/lib/table/model/ModelColumnSize.svelte
 create mode 100644 packages/frontend/src/utils/dimensions.ts

diff --git a/packages/backend/src/studio-api-impl.ts b/packages/backend/src/studio-api-impl.ts
index 4aacdbdba..122a6a361 100644
--- a/packages/backend/src/studio-api-impl.ts
+++ b/packages/backend/src/studio-api-impl.ts
@@ -30,7 +30,7 @@ import type { CatalogManager } from './managers/catalogManager';
 import type { Catalog } from '@shared/src/models/ICatalog';
 import type { PlaygroundState } from '@shared/src/models/IPlaygroundState';
 import type { ModelsManager } from './managers/modelsManager';
-import { LocalModelInfo } from '@shared/src/models/ILocalModelInfo';
+import type { LocalModelInfo } from '@shared/src/models/ILocalModelInfo';
 
 export class StudioApiImpl implements StudioAPI {
   constructor(
@@ -40,7 +40,7 @@ export class StudioApiImpl implements StudioAPI {
     private playgroundManager: PlayGroundManager,
     private catalogManager: CatalogManager,
     private modelsManager: ModelsManager,
-  ) { }
+  ) {}
 
   async ping(): Promise<string> {
     return 'pong';
@@ -87,7 +87,8 @@ export class StudioApiImpl implements StudioAPI {
       localMap.set(l.id, l);
     }
     const localIds = local.map(l => l.id);
-    return this.catalogManager.getModels()
+    return this.catalogManager
+      .getModels()
       .filter(m => localIds.includes(m.id))
       .map(m => ({ ...m, file: localMap.get(m.id) }));
   }
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index e3b105746..2ca9ed9bc 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -27,8 +27,12 @@
     "@testing-library/svelte": "^4.0.5",
     "@testing-library/user-event": "^14.5.1",
     "@tsconfig/svelte": "^5.0.2",
+    "@types/humanize-duration": "^3.27.4",
     "@typescript-eslint/eslint-plugin": "6.15.0",
+    "filesize": "^10.1.0",
+    "humanize-duration": "^3.31.0",
     "jsdom": "^23.2.0",
+    "moment": "^2.30.1",
     "postcss": "^8.4.33",
     "postcss-load-config": "^5.0.2",
     "svelte": "4.2.8",
diff --git a/packages/frontend/src/lib/progress/TasksProgress.svelte b/packages/frontend/src/lib/progress/TasksProgress.svelte
index 4fb6cc636..c4aa2b2db 100644
--- a/packages/frontend/src/lib/progress/TasksProgress.svelte
+++ b/packages/frontend/src/lib/progress/TasksProgress.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { Task } from '@shared/models/ITask';
+import type { Task } from '@shared/src/models/ITask';
 
 export let tasks: Task[] = [];
 </script>
diff --git a/packages/frontend/src/lib/table/model/ModelColumnCreation.svelte b/packages/frontend/src/lib/table/model/ModelColumnCreation.svelte
new file mode 100644
index 000000000..12ffbc59a
--- /dev/null
+++ b/packages/frontend/src/lib/table/model/ModelColumnCreation.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { ModelInfo } from "@shared/src/models/IModelInfo";
+  import { humanizeAge } from "/@/utils/dimensions";
+  export let object: ModelInfo;
+</script>
+
+<div class="text-sm text-gray-700">
+  {#if (object.file?.creation)}
+    {humanizeAge(object.file.creation.getTime()/1000)}
+  {/if}
+</div>
diff --git a/packages/frontend/src/lib/table/model/ModelColumnHW.svelte b/packages/frontend/src/lib/table/model/ModelColumnHW.svelte
index a9d1a35ae..56033b778 100644
--- a/packages/frontend/src/lib/table/model/ModelColumnHW.svelte
+++ b/packages/frontend/src/lib/table/model/ModelColumnHW.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ModelInfo } from "@shared/models/IModelInfo";
+  import type { ModelInfo } from "@shared/src/models/IModelInfo";
   export let object: ModelInfo;
 </script>
 
diff --git a/packages/frontend/src/lib/table/model/ModelColumnLicense.svelte b/packages/frontend/src/lib/table/model/ModelColumnLicense.svelte
index ff8e02093..f326aa3b2 100644
--- a/packages/frontend/src/lib/table/model/ModelColumnLicense.svelte
+++ b/packages/frontend/src/lib/table/model/ModelColumnLicense.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ModelInfo } from "@shared/models/IModelInfo";
+  import type { ModelInfo } from "@shared/src/models/IModelInfo";
   export let object: ModelInfo;
 </script>
 
diff --git a/packages/frontend/src/lib/table/model/ModelColumnName.svelte b/packages/frontend/src/lib/table/model/ModelColumnName.svelte
index 0822bb7e2..1fbd6c011 100644
--- a/packages/frontend/src/lib/table/model/ModelColumnName.svelte
+++ b/packages/frontend/src/lib/table/model/ModelColumnName.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ModelInfo } from "@shared/models/IModelInfo";
+  import type { ModelInfo } from "@shared/src/models/IModelInfo";
   import { router } from "tinro";
   export let object: ModelInfo;
 
diff --git a/packages/frontend/src/lib/table/model/ModelColumnPopularity.svelte b/packages/frontend/src/lib/table/model/ModelColumnPopularity.svelte
index 16d127a55..f7ecfefa4 100644
--- a/packages/frontend/src/lib/table/model/ModelColumnPopularity.svelte
+++ b/packages/frontend/src/lib/table/model/ModelColumnPopularity.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ModelInfo } from "@shared/models/IModelInfo";
+  import type { ModelInfo } from "@shared/src/models/IModelInfo";
   export let object: ModelInfo;
 </script>
 
diff --git a/packages/frontend/src/lib/table/model/ModelColumnRegistry.svelte b/packages/frontend/src/lib/table/model/ModelColumnRegistry.svelte
index fb48caf85..0786bd415 100644
--- a/packages/frontend/src/lib/table/model/ModelColumnRegistry.svelte
+++ b/packages/frontend/src/lib/table/model/ModelColumnRegistry.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ModelInfo } from "@shared/models/IModelInfo";
+  import type { ModelInfo } from "@shared/src/models/IModelInfo";
   export let object: ModelInfo;
 </script>
 
diff --git a/packages/frontend/src/lib/table/model/ModelColumnSize.svelte b/packages/frontend/src/lib/table/model/ModelColumnSize.svelte
new file mode 100644
index 000000000..1453ae595
--- /dev/null
+++ b/packages/frontend/src/lib/table/model/ModelColumnSize.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { ModelInfo } from "@shared/src/models/IModelInfo";
+  import { filesize } from 'filesize';
+  export let object: ModelInfo;
+</script>
+
+<div class="text-sm text-gray-700">
+  {#if (object.file?.size)}
+    {filesize(object.file.size)}
+  {/if}
+</div>
diff --git a/packages/frontend/src/pages/ModelPlayground.svelte b/packages/frontend/src/pages/ModelPlayground.svelte
index 6331e74aa..7394256b9 100644
--- a/packages/frontend/src/pages/ModelPlayground.svelte
+++ b/packages/frontend/src/pages/ModelPlayground.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import type { ModelInfo } from '@shared/models/IModelInfo';
-  import type { ModelResponseChoice } from '@shared/models/IModelResponse';
+  import type { ModelInfo } from '@shared/src/models/IModelInfo';
+  import type { ModelResponseChoice } from '@shared/src/models/IModelResponse';
   import Button from '../lib/button/Button.svelte';
   import { onMount } from 'svelte';
   import { studioClient } from '../utils/client';
   import { playgroundQueries } from '../stores/playground-queries';
-  import type { QueryState } from '@shared/models/IPlaygroundQueryState';
+  import type { QueryState } from '@shared/src/models/IPlaygroundQueryState';
   import { playgroundStates } from '/@/stores/playground-states';
   import type { PlaygroundState } from '@shared/src/models/IPlaygroundState';
   import Card from '/@/lib/Card.svelte';
diff --git a/packages/frontend/src/pages/Models.svelte b/packages/frontend/src/pages/Models.svelte
index af6eca362..4420ec43b 100644
--- a/packages/frontend/src/pages/Models.svelte
+++ b/packages/frontend/src/pages/Models.svelte
@@ -12,15 +12,19 @@ import ModelColumnHw from '../lib/table/model/ModelColumnHW.svelte';
 import type { Task } from '@shared/src/models/ITask';
 import TasksProgress from '/@/lib/progress/TasksProgress.svelte';
 import Card from '/@/lib/Card.svelte';
-  import { modelsPulling } from '../stores/recipe';
-  import { onMount } from 'svelte';
+import { modelsPulling } from '../stores/recipe';
+import { onMount } from 'svelte';
+import ModelColumnSize from '../lib/table/model/ModelColumnSize.svelte';
+  import ModelColumnCreation from '../lib/table/model/ModelColumnCreation.svelte';
 
 const columns: Column<ModelInfo>[] = [
-  new Column<ModelInfo>('Name', { width: '4fr', renderer: ModelColumnName }),
+  new Column<ModelInfo>('Name', { width: '3fr', renderer: ModelColumnName }),
+  new Column<ModelInfo>('Size', { width: '1fr', renderer: ModelColumnSize }),
+  new Column<ModelInfo>('Creation', { width: '1fr', renderer: ModelColumnCreation }),
   new Column<ModelInfo>('HW Compat', { width: '1fr', renderer: ModelColumnHw }),
-  new Column<ModelInfo>('Registry', { width: '1fr', renderer: ModelColumnRegistry }),
+  new Column<ModelInfo>('Registry', { width: '2fr', renderer: ModelColumnRegistry }),
   new Column<ModelInfo>('Popularity', { width: '1fr', renderer: ModelColumnPopularity }),
-  new Column<ModelInfo>('License', { width: '1fr', renderer: ModelColumnLicense }),
+  new Column<ModelInfo>('License', { width: '2fr', renderer: ModelColumnLicense }),
 ];
 const row = new Row<ModelInfo>({});
 
diff --git a/packages/frontend/src/utils/dimensions.ts b/packages/frontend/src/utils/dimensions.ts
new file mode 100644
index 000000000..feb63aeb3
--- /dev/null
+++ b/packages/frontend/src/utils/dimensions.ts
@@ -0,0 +1,9 @@
+import moment from 'moment';
+import humanizeDuration from 'humanize-duration';
+
+export function humanizeAge(created: number): string {
+  // get start time in ms (using unix timestamp for the created)
+  const age = moment().diff(moment.unix(created));
+  // make it human friendly
+  return humanizeDuration(age, { round: true, largest: 1 });
+}
diff --git a/packages/shared/src/models/IModelInfo.ts b/packages/shared/src/models/IModelInfo.ts
index c1ada857c..422078fce 100644
--- a/packages/shared/src/models/IModelInfo.ts
+++ b/packages/shared/src/models/IModelInfo.ts
@@ -1,4 +1,4 @@
-import type { LocalModelInfo } from "./ILocalModelInfo";
+import type { LocalModelInfo } from './ILocalModelInfo';
 
 export interface ModelInfo {
   id: string;
diff --git a/yarn.lock b/yarn.lock
index ef695ab7a..cf72b528f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -570,6 +570,11 @@
   resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
+"@types/humanize-duration@^3.27.4":
+  version "3.27.4"
+  resolved "https://registry.yarnpkg.com/@types/humanize-duration/-/humanize-duration-3.27.4.tgz#51d6d278213374735440bc3749de920935e9127e"
+  integrity sha512-yaf7kan2Sq0goxpbcwTQ+8E9RP6HutFBPv74T/IA/ojcHKhuKVlk2YFYyHhWZeLvZPzzLE3aatuQB4h0iqyyUA==
+
 "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz"
@@ -1975,6 +1980,11 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+filesize@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-10.1.0.tgz#846f5cd8d16e073c5d6767651a8264f6149183cd"
+  integrity sha512-GTLKYyBSDz3nPhlLVPjPWZCnhkd9TrrRArNcy8Z+J2cqScB7h2McAzR6NBX6nYOoWafql0roY8hrocxnZBv9CQ==
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
@@ -2283,6 +2293,11 @@ human-signals@^5.0.0:
   resolved "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz"
   integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==
 
+humanize-duration@^3.31.0:
+  version "3.31.0"
+  resolved "https://registry.yarnpkg.com/humanize-duration/-/humanize-duration-3.31.0.tgz#a0384d22555024cd17e6e9f8561540d37756bf4c"
+  integrity sha512-fRrehgBG26NNZysRlTq1S+HPtDpp3u+Jzdc/d5A4cEzOD86YLAkDaJyJg8krSdCi7CJ+s7ht3fwRj8Dl+Btd0w==
+
 iconv-lite@0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
@@ -2865,6 +2880,11 @@ mlly@^1.2.0, mlly@^1.4.2:
     pkg-types "^1.0.3"
     ufo "^1.3.0"
 
+moment@^2.30.1:
+  version "2.30.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
+  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
+
 ms@2.1.2, ms@^2.1.1:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"