feat: added cronstrue to have readable schedules (#329)

* feat: added cronstrue to have readable schedules

Signed-off-by: Marcel Bertagnini <[email protected]>

* fix: added cronstrue to dependencies list and handle error in catch

Signed-off-by: Marcel Bertagnini <[email protected]>

---------

Signed-off-by: Marcel Bertagnini <[email protected]>

Author: MarsKubeX

package.json

@@ -34,6 +34,7 @@
     "@vitest/eslint-plugin": "^1.3.14",
     "autoprefixer": "^10.4.21",
     "concurrently": "^9.1.2",
+    "cronstrue": "^3.3.0",
     "eslint": "^9.35.0",
     "eslint-import-resolver-custom-alias": "^1.3.2",
     "eslint-import-resolver-typescript": "^4.3.4",

packages/webview/package.json

@@ -16,6 +16,7 @@
     "watch": "vite --mode development build -w"
   },
   "dependencies": {
+    "cronstrue": "^3.3.0",
     "inversify": "^7.9.1",
     "moment": "^2.30.1",
     "svelte-preprocess": "^6.0.3",

packages/webview/src/component/cronjobs/CronJobsList.svelte

@@ -8,6 +8,7 @@ import { getContext } from 'svelte';
 import { DependencyAccessor } from '/@/inject/dependency-accessor';
 import KubernetesEmptyScreen from '/@/component/objects/KubernetesEmptyScreen.svelte';
 import ActionsColumn from '/@/component/cronjobs/columns/Actions.svelte';
+import ScheduleColumn from '/@/component/cronjobs/columns/Schedule.svelte';
 import { CronJobHelper } from './cronjob-helper';
 import type { CronJobUI } from './CronJobUI';
 import CronJobIcon from '../icons/CronJobIcon.svelte';
@@ -38,7 +39,7 @@ let ageColumn = new TableColumn<CronJobUI, Date | undefined>('Age', {
 
 let scheduleColumn = new TableColumn<CronJobUI, string>('Schedule', {
   renderMapping: (cronjob): string => cronjob.schedule,
-  renderer: TableSimpleColumn,
+  renderer: ScheduleColumn,
   comparator: (a, b): number => a.schedule.localeCompare(b.schedule),
 });
 

packages/webview/src/component/cronjobs/columns/Schedule.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import cronstrue from 'cronstrue';
+
+interface Props {
+  object: string;
+}
+
+let { object }: Props = $props();
+
+function getScheduleReadableText(schedule: string): string {
+  try {
+    return cronstrue.toString(schedule);
+  } catch (error) {
+    // If cronstrue cannot parse the schedule, return the original cron expression
+    console.warn(`Failed to parse cron expression: ${schedule}`, error);
+    return schedule;
+  }
+}
+</script>
+
+<div class="text-[var(--pd-table-body-text)] max-w-full text-wrap line-clamp-2">
+  <span>{getScheduleReadableText(object)}</span>
+</div>