consistent headings for coverage and sunburst

kubernetes-sigs · Apr 7, 2020 · eb7edba · eb7edba
1 parent f7f6b36
commit eb7edba
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 53 deletions.
diff --git a/apps/webapp/app/src/components/Sunburst/Prologue.svelte b/apps/webapp/app/src/components/Sunburst/Prologue.svelte
@@ -1,34 +1,29 @@
 <script>
  import dayjs from 'dayjs';
  import { goto } from '@sapper/app';
- import { activeBucketAndJob } from '../../stores';
+ import SectionHeader from '../SectionHeader.svelte';
+ import { activeRelease } from '../../stores/coverage-over-time.js';
 
- $: bucket = $activeBucketAndJob.bucket;
- $: job = $activeBucketAndJob.job;
- $: timestamp = dayjs($activeBucketAndJob.timestamp)
-   .format('DD MMMM, YYYY');
-</script>
+ const SPYGLASS_URL = 'https://prow.k8s.io/view/gcs/kubernetes-jenkins/logs'
 
-<header>
-  <h2>{bucket}</h2>
-  <p>{timestamp}</p>
-</header>
+ $: ({
+   bucket,
+   job,
+   release,
+   date,
+   test_hits_increase,
+   conf_hits_increase,
+   total_endpoints
+ } = $activeRelease);
 
-<style>
- header {
-   margin-bottom: 1.5em;
-   grid-column: 1;
- }
+ $: link = `${SPYGLASS_URL}/${bucket}/${job}`
 
- h2 {
-   padding: 0;
-   font-variant-caps: small-caps;
-   margin-bottom: 0;
- }
+  </script>
+  {#if release}
+  <SectionHeader title='{release} In Depth'>
+    <em>Data from <a href="{link}" title="spyglass link" target="_blank_" rel="noreferrer noopener">an e2e test suite run</a>, from {date}</em>
+  </SectionHeader>
+  {/if}
 
- p {
-   margin-top: 0;
-   font-variant-caps: small-caps;
-   padding-left: 0.25em;
- }
+<style>
 </style>
diff --git a/apps/webapp/app/src/stores/coverage-over-time.js b/apps/webapp/app/src/stores/coverage-over-time.js
@@ -8,7 +8,8 @@ import {
 import {
   bucketsAndJobs,
   defaultBucketAndJob,
-  stableEndpointStats
+  stableEndpointStats,
+  activeFilters
 } from './index.js';
 
 
@@ -52,3 +53,14 @@ export const coverage = derived(
     }
   }
 );
+
+export const activeRelease = derived(
+  [activeFilters, coverage],
+  ([$af, $c], set) => {
+    if ($af.bucket && $c.length >0) {
+      let active = $c.find(cov => cov.bucket === $af.bucket && cov.job === $af.job)
+      set(active)
+    } else {
+      set({})
+    }
+  });
diff --git a/apps/webapp/index.org b/apps/webapp/index.org
@@ -904,36 +904,31 @@
        <script>
         import dayjs from 'dayjs';
         import { goto } from '@sapper/app';
-        import { activeBucketAndJob } from '../../stores';
+        import SectionHeader from '../SectionHeader.svelte';
+        import { activeRelease } from '../../stores/coverage-over-time.js';
 
-        $: bucket = $activeBucketAndJob.bucket;
-        $: job = $activeBucketAndJob.job;
-        $: timestamp = dayjs($activeBucketAndJob.timestamp)
-          .format('DD MMMM, YYYY');
-       </script>
+        const SPYGLASS_URL = 'https://prow.k8s.io/view/gcs/kubernetes-jenkins/logs'
 
-       <header>
-         <h2>{bucket}</h2>
-         <p>{timestamp}</p>
-       </header>
+        $: ({
+          bucket,
+          job,
+          release,
+          date,
+          test_hits_increase,
+          conf_hits_increase,
+          total_endpoints
+        } = $activeRelease);
 
-       <style>
-        header {
-          margin-bottom: 1.5em;
-          grid-column: 1;
-        }
+        $: link = `${SPYGLASS_URL}/${bucket}/${job}`
 
-        h2 {
-          padding: 0;
-          font-variant-caps: small-caps;
-          margin-bottom: 0;
-        }
+         </script>
+         {#if release}
+         <SectionHeader title='{release} In Depth'>
+           <em>Data from <a href="{link}" title="spyglass link" target="_blank_" rel="noreferrer noopener">an e2e test suite run</a>, from {date}</em>
+         </SectionHeader>
+         {/if}
 
-        p {
-          margin-top: 0;
-          font-variant-caps: small-caps;
-          padding-left: 0.25em;
-        }
+       <style>
        </style>
 
 
@@ -1667,6 +1662,52 @@
       </style>
     #+end_src
 
+*** Filters
+    in progress
+    #+NAME: Filters
+    #+begin_src web
+
+      <script>
+       import {
+         activeFilters,
+         filteredEndpoints
+       } from '../stores';
+       $: filtersVisible = false;
+
+       function visToggle () {
+         filtersVisible = !filtersVisible;
+       };
+      </script>
+
+      {#if !filtersVisible}
+      <div class='filters off'>
+        <button on:click={visToggle}>Set Filters</button>
+      </div>
+      {:else}
+      <div class='filters on'>
+        <button on:click={visToggle} class='close'>Close Filters</button>
+        <h2>Set Filters</h2>
+        <label>
+          <input type='checkbox' bind:checked={$activeFilters.hide_tested} on:click={() => console.log('af', $activeFilters, $filteredEndpoints.length)}/>
+          hide tested
+        </label>
+      </div>
+      {/if}
+
+
+      <style>
+       div.filters.on {
+         position: absolute;
+         width: 350px;
+         top: 0;
+         right: 0;
+         min-height: 100vh;
+         background: blanchedalmond;
+       }
+
+      </style>
+
+    #+end_src
 ** Queries
    :PROPERTIES:
    :header-args: :tangle ./app/src/queries/index.js
@@ -2177,7 +2218,8 @@
       import {
         bucketsAndJobs,
         defaultBucketAndJob,
-        stableEndpointStats
+        stableEndpointStats,
+        activeFilters
       } from './index.js';
 
 
@@ -2222,9 +2264,19 @@
         }
       );
 
+      export const activeRelease = derived(
+      [activeFilters, coverage],
+      ([$af, $c], set) => {
+      if ($af.bucket && $c.length >0) {
+      let active = $c.find(cov => cov.bucket === $af.bucket && cov.job === $af.job)
+      set(active)
+      } else {
+      set({})
+      }
+      }
 
 
-    #+end_src
+      #+end_src);
 ** Utility Functions (/lib/)
 *** helpers
     :PROPERTIES:
@@ -2487,3 +2539,5 @@
        (2 rows)
 
    #+end_src
+
+