refactor: update sveltekit to 1.0.0-next.449

web/.nvmrc

@@ -1 +1 @@
-v16.10.0
+v16.17.0

web/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "Jenkins X UI",
+  "name": "jenkins-x-ui",
   "version": "0.0.1",
   "scripts": {
     "dev": "ROUTE_FOLDER=admin vite dev",
@@ -23,7 +23,7 @@
     "@storybook/addon-svelte-csf": "^2.0.3",
     "@storybook/svelte": "^6.4.22",
     "@sveltejs/adapter-static": "1.0.0-next.38",
-    "@sveltejs/kit": "1.0.0-next.405",
+    "@sveltejs/kit": "1.0.0-next.449",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/line-clamp": "^0.3.1",
     "@tailwindcss/typography": "^0.5.2",

web/src/lib/Components/Pipelines/StopPipeline.ts

@@ -0,0 +1,18 @@
+export const stopPipelineHandler = async (params) => {
+    const { owner, repository, branch, build } = params
+    const res = await fetch(
+      `http://localhost:9200/api/v1/pipelines/${owner}/${repository}/${branch}/${build}`,
+      {
+        method: 'PUT',
+      }
+    )
+    const result = await res.json()
+
+    // TODO: improve error handling (@rajatgupta24)
+    if (result) {
+      console.log('pipeline has successfully stopped')
+    } else {
+      console.log('some error occured, pipeline is not stopped')
+    }
+  }
+

web/src/lib/Components/Pipelines/StreamingLog.svelte

@@ -25,7 +25,6 @@
     }
     eventSource.onerror = (e) => {
       console.log('Connection error')
-      console.log(e)
     }
   })
 </script>

web/src/routes/admin/pipelines/index.svelte → web/src/routes/admin/pipelines/+page.svelte

@@ -1,31 +1,11 @@
-<script context="module">
-  // Todo: move it to endpoints
-  export async function load({ fetch }) {
-    // ToDo: Use Axios
-    const res = await fetch('http://localhost:9200/api/v1/pipelines')
-    const pipelines = await res.json()
-    if (res.ok) {
-      return {
-        props: {
-          pipelines,
-        },
-      }
-    }
-    return {
-      status: res.status,
-      // ToDo: use new Error()
-      error: 'Could not fetch pipelines',
-    }
-  }
-</script>
-
 <script lang="ts">
   import { diffTimes, displayTime } from '$lib/formatDate'
   import Table from '$lib/Components/Table.svelte'
   import type { GridOptions } from 'ag-grid-community'
   import { BTNInColumnCell, HTMLInColumnCell } from '$lib/cellRenderer'
-  import { stopPipelineHandler } from './[org]/[repo]/[branch]/[build].svelte'
-  export let pipelines
+  import { stopPipelineHandler } from '$lib/Components/Pipelines/StopPipeline'
+  
+  export let data
 
   let gridOptions: GridOptions = {
     defaultColDef: {
@@ -79,7 +59,7 @@
         },
       },
     ],
-    rowData: pipelines,
+    rowData: data.pipelines,
     pagination: true,
     paginationAutoPageSize: true,
   }

web/src/routes/admin/pipelines/+page.ts

@@ -0,0 +1,15 @@
+import { error } from '@sveltejs/kit'
+
+// Todo: move it to endpoints
+export const load = async({ fetch }) => {
+  // ToDo: Use Axios
+  const res = await fetch('http://localhost:9200/api/v1/pipelines')
+  const pipelines = await res.json()
+
+  if (res.ok) {
+    return {
+      pipelines,
+    }
+  }
+  throw error(500, 'Could not fetch pipelines')
+}

web/src/routes/admin/pipelines/[org]/[repo]/[branch]/[build].svelte → web/src/routes/admin/pipelines/[org]/[repo]/[branch]/[build]/+page.svelte

@@ -1,63 +1,14 @@
-<script context="module">
-  import { onMount } from 'svelte'
-  // Todo: move it to endpoints
-  export async function load({ fetch, params }) {
-    // ToDo: Use Axios
-
-    const { org, repo, branch, build } = params
-    const res = await fetch(
-      `http://localhost:9200/api/v1/pipelines/${org}/${repo}/${branch}/${build}`
-    )
-
-    const pipeline = await res.json()
-    if (res.ok) {
-      return {
-        props: {
-          pipeline,
-          org,
-          repo,
-          branch,
-          build,
-        },
-      }
-    }
-    return {
-      status: res.status,
-      // ToDo: use new Error()
-      error: 'Could not fetch pipelines',
-    }
-  }
-
-  export const stopPipelineHandler = async (params) => {
-    const { owner, repository, branch, build } = params
-    const res = await fetch(
-      `http://localhost:9200/api/v1/pipelines/${owner}/${repository}/${branch}/${build}`,
-      {
-        method: 'PUT',
-      }
-    )
-
-    const result = await res.json()
-
-    // TODO: improve error handling (@rajatgupta24)
-    if (result) {
-      console.log('pipeline has successfully stopped')
-    } else {
-      console.log('some error occured, pipeline is not stopped')
-    }
-  }
-</script>
-
 <script lang="ts">
   import Flowchart from '$src/lib/Components/Flowchart.svelte'
   import Modal from '$src/lib/Components/Modal.svelte'
   import ArchivedLog from '$src/lib/Components/Pipelines/ArchivedLog.svelte'
   import StreamingLog from '$src/lib/Components/Pipelines/StreamingLog.svelte'
+  import { stopPipelineHandler } from '$src/lib/Components/Pipelines/StopPipeline'
 
   import { diffTimes, displayTime } from '$src/lib/formatDate'
   import { fromUnixTime } from 'date-fns'
 
-  export let pipeline
+  export let data
 
   let {
     spec: {
@@ -72,7 +23,7 @@
       status,
     },
     metadata: { name, namespace },
-  } = pipeline
+  } = data.pipeline
 
   let show = false
   let title = ''
@@ -117,7 +68,7 @@
   <title>{'Pipeline build'}</title>
 </svelte:head>
 
-{#if pipeline}
+{#if data.pipeline}
   <main class="h-full pb-16 overflow-y-auto">
     <div class="container px-6 mx-auto grid">
       <div class="flex justify-between align-baseline">
@@ -163,7 +114,7 @@
             <ul class="list-none">
               <li class="px-4 py-2">Context: {context}</li>
               <li class="px-4 py-2">
-                Namespace: {pipeline.metadata.namespace} (Should this be shown?)
+                Namespace: {data.pipeline.metadata.namespace} (Should this be shown?)
               </li>
               <li class="px-4 py-2">Author: release</li>
               <li class="px-4 py-2">Commit: release</li>
@@ -188,7 +139,7 @@
             </ul>
           </div>
         </div>
-        <Flowchart data={pipeline} />
+        <Flowchart data={data.pipeline} />
       </div>
       <!-- Repeat this block for all stages -->
       {#if status == 'Running' || status == 'pending'}

web/src/routes/admin/pipelines/[org]/[repo]/[branch]/[build]/+page.ts

@@ -0,0 +1,22 @@
+import { error } from '@sveltejs/kit'
+// Todo: move it to endpoints
+export async function load({ fetch, params }) {
+  // ToDo: Use Axios
+
+  const { org, repo, branch, build } = params
+  const res = await fetch(
+    `http://localhost:9200/api/v1/pipelines/${org}/${repo}/${branch}/${build}`
+  )
+
+  const pipeline = await res.json()
+  if (res.ok) {
+    return {
+      pipeline,
+      org,
+      repo,
+      branch,
+      build,
+    }
+  }
+  throw error(500, 'Could not fetch pipelines')
+}

web/src/routes/admin/repositories/index.svelte → web/src/routes/admin/repositories/+page.svelte

@@ -1,30 +1,9 @@
-<script context="module">
-  // Todo: move it to endpoints
-  export async function load({ fetch }) {
-    // ToDo: Use Axios
-    const res = await fetch('http://localhost:9200/api/v1/repositories')
-    const repositories = await res.json()
-    if (res.ok) {
-      const repositoriesProcessed = repositories.map((k) => k.spec)
-      return {
-        props: {
-          repositoriesProcessed,
-        },
-      }
-    }
-    return {
-      status: res.status,
-      // ToDo: use new Error()
-      error: 'Could not fetch repositories',
-    }
-  }
-</script>
-
 <script lang="ts">
   import type { GridOptions } from 'ag-grid-community'
   import Table from '$lib/Components/Table.svelte'
   import { HTMLInColumnCell } from '$lib/cellRenderer'
-  export let repositoriesProcessed
+
+  export let data
 
   let gridOptions: GridOptions = {
     defaultColDef: {
@@ -46,7 +25,7 @@
         },
       },
     ],
-    rowData: repositoriesProcessed,
+    rowData: data.repositoriesProcessed,
     pagination: true,
     paginationAutoPageSize: true,
   }

web/src/routes/admin/repositories/+page.ts

@@ -0,0 +1,15 @@
+import { error } from '@sveltejs/kit'
+
+// Todo: move it to endpoints
+export async function load({ fetch }) {
+  // ToDo: Use Axios
+  const res = await fetch('http://localhost:9200/api/v1/repositories')
+  const repositories = await res.json()
+  if (res.ok) {
+    const repositoriesProcessed = repositories.map((k) => k.spec)
+    return {
+      repositoriesProcessed,
+    }
+  }
+  throw error(500, 'Could not fetch repositories')
+}