More settings

sap1ens · Jul 7, 2023 · 8e8fb2f · 8e8fb2f
1 parent a319376
commit 8e8fb2f
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 18 deletions.
diff --git a/src/main/webui/src/lib/FlinkJobs.svelte b/src/main/webui/src/lib/FlinkJobs.svelte
@@ -16,7 +16,6 @@
 
     let activeSorting;
 
-    let displayMode = 'tabular';
     let showSettingsModal = false;
 
     $: visibleFlinkJobs = $flinkJobs.data.filter(job => {
@@ -102,14 +101,36 @@
 </script>
 
 <Modal bind:showModal={showSettingsModal}>
-    Refresh interval:
-    <select bind:value={$settings.refreshInterval} class="ml-2">
-        <option value="-1">No refresh</option>
-        <option value="10">10 sec</option>
-        <option value="30">30 sec</option>
-        <option value="60">60 sec</option>
-        <option value="300">5 min</option>
-    </select>
+    <div>
+        Refresh interval:
+        <select bind:value={$settings.refreshInterval} class="ml-2">
+            <option value="-1">No refresh</option>
+            <option value="10">10 sec</option>
+            <option value="30">30 sec</option>
+            <option value="60">60 sec</option>
+            <option value="300">5 min</option>
+        </select>
+    </div>
+    <div class="mt-2.5">
+        Display details:
+        <div class="mt-1">
+            <div>
+                <label>
+                    <input type="checkbox" bind:checked={$settings.showJobParallelism} /> Parallelism
+                </label>
+            </div>
+            <div>
+                <label>
+                    <input type="checkbox" bind:checked={$settings.showJobFlinkVersion} /> Flink version
+                </label>
+            </div>
+            <div>
+                <label>
+                    <input type="checkbox" bind:checked={$settings.showJobImage} /> Image
+                </label>
+            </div>
+        </div>
+    </div>
 </Modal>
 <div class="flex items-center justify-between py-6 text-base">
     <div>
@@ -125,13 +146,13 @@
         </select>
     </div>
     <div>
-        {#if displayMode === 'card'}
-        <span title="Table view" on:click={() => displayMode = 'tabular'} class="inline-block">
+        {#if $settings.displayMode === 'card'}
+        <span title="Table view" on:click={() => $settings.displayMode = 'tabular'} class="inline-block">
             <Fa fw icon={faTable} size="2x" class="text-gray-500 hover:cursor-pointer" />
         </span>
         {/if}
-        {#if displayMode === 'tabular'}
-        <span title="Card view" on:click={() => displayMode = 'card'} class="inline-block">
+        {#if $settings.displayMode === 'tabular'}
+        <span title="Card view" on:click={() => $settings.displayMode = 'card'} class="inline-block">
             <Fa fw icon={faIdCard} size="2x" class="text-gray-500 hover:cursor-pointer" />
         </span>
         {/if}
@@ -145,7 +166,7 @@
     <p class="text-xl text-center text-red-500 font-bold">Couldn't load data: {$flinkJobs.error}</p>
 {:else}
     {#if visibleFlinkJobs.length > 0 || jobNameFilter || statusFilter}
-        {#if displayMode === 'tabular'}
+        {#if $settings.displayMode === 'tabular'}
             <table class="table-auto w-full border">
                 <thead class="text-lg">
                 <tr class="bg-slate-50">
@@ -217,17 +238,21 @@
                             <div class="flex items-start justify-between text-lg">
                                 <div>
                                     <p>{displayName(flinkJob)}</p>
+                                    {#if $settings.showJobParallelism}
                                     <p class="text-sm text-gray-500">
                                         <Fa fw icon={faChartColumn} /> Parallelism: {flinkJob.parallelism || 'N/A' }
                                     </p>
-                                    {#if flinkJob.flinkVersion}
+                                    {/if}
+                                    {#if $settings.showJobFlinkVersion && flinkJob.flinkVersion}
                                     <p class="text-sm text-gray-500">
                                         <Fa fw icon={faInfo} /> Flink version: {flinkJob.flinkVersion}
                                     </p>
                                     {/if}
+                                    {#if $settings.showJobImage}
                                     <p class="text-sm text-gray-500">
                                         <Fa fw icon={faImagePortrait} /> Image: {flinkJob.shortImage || 'N/A'}
                                     </p>
+                                    {/if}
                                 </div>
                                 <div>
                                     <JobType type={flinkJob.type} />
@@ -276,20 +301,24 @@
                         {flinkJob.status}
                     </div>
                     <div class="pb-4">
+                        {#if $settings.showJobParallelism}
                         <p class="text-sm text-gray-500">
                             <Fa fw icon={faChartColumn} /> Parallelism: {flinkJob.parallelism || 'N/A' }
                         </p>
+                        {/if}
                         <p class="text-sm text-gray-500">
                             <Fa fw icon={faClock} /> Started at: {formatStartTime(flinkJob.startTime)}
                         </p>
-                        {#if flinkJob.flinkVersion}
+                        {#if $settings.showJobFlinkVersion && flinkJob.flinkVersion}
                             <p class="text-sm text-gray-500">
                                 <Fa fw icon={faInfo} /> Flink version: {flinkJob.flinkVersion}
                             </p>
                         {/if}
+                        {#if $settings.showJobImage}
                         <p class="text-sm text-gray-500">
                             <Fa fw icon={faImagePortrait} /> Image: {flinkJob.shortImage || 'N/A'}
                         </p>
+                        {/if}
                     </div>
                     <p>
                         <ExternalEndpoint type="flink-ui" title="Flink UI" jobName="{flinkJob.name}" />

diff --git a/src/main/webui/src/lib/Modal.svelte b/src/main/webui/src/lib/Modal.svelte
@@ -13,7 +13,7 @@
         bind:this={dialog}
         on:close={() => (showModal = false)}
         on:click|self={() => dialog.close()}
-        class="w-4/12 min-h-[25%] outline-none"
+        class="w-[500px] h-[200px] p-[25px] outline-none"
 >
     <div on:click|stopPropagation>
         <slot />

diff --git a/src/main/webui/src/lib/stores/settings.js b/src/main/webui/src/lib/stores/settings.js
@@ -1,7 +1,11 @@
 import { writable } from 'svelte/store'
 
 const defaults = {
-    'refreshInterval': '30' // FIXME
+    'refreshInterval': '30', // FIXME
+    'displayMode': 'tabular',
+    'showJobParallelism': true,
+    'showJobFlinkVersion': true,
+    'showJobImage': true
 };
 const stored = JSON.parse(localStorage.getItem('heimdall_settings'));