Implement back end API calls to get this dashboard pulling real data from Pelorus through pelorus-api

.github/workflows/build-image.yaml

@@ -0,0 +1,46 @@
+---
+
+name: CD
+
+on: [push, pull_request]
+
+
+jobs:
+
+  build_image:
+
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+# This workflow builds a container image of a java
+# application using the source to image build strategy,
+# and pushes the image to quay.io.
+    env:
+      IMAGE_NAME: pelorus-dashboard
+      TAGS: dev ${{ github.sha }}
+
+    steps:
+
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      # Setup S2i and Build container image
+      - name: Setup and Build
+        id: build_image
+        uses: redhat-actions/s2i-build@v2
+        with:
+          path_context: '.'
+          # Builder image for a java project
+          builder_image: 'registry.access.redhat.com/ubi9/nodejs-18:1'
+          image: ${{ env.IMAGE_NAME }}
+          tags: ${{ env.TAGS }}
+
+      # Push Image to Quay registry
+      - name: Push To Quay Action
+        uses: redhat-actions/push-to-registry@v2
+        with:
+          image: ${{ steps.build_image.outputs.image }}
+          tags: ${{ steps.build_image.outputs.tags }}
+          registry: quay.io/${{ vars.QUAY_NAMESPACE }}
+          username: ${{ secrets.QUAY_USERNAME }}
+          password: ${{ secrets.QUAY_PASSWORD }}

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+package-lock.json
 
 # testing
 /coverage

app/api/auth/[...nextauth]/options.js

@@ -1,9 +1,34 @@
 import NextAuth from "next-auth"
 import GithubProvider from "next-auth/providers/github"
 import GoogleProvider from "next-auth/providers/google"
+import KeycloakProvider from "next-auth/providers/keycloak";
 
 export const options = {
   providers: [
+    {
+      id: "openshift",
+      name: "OpenShift",
+      type: "oauth",
+      issuer: process.env.OPENSHIFT_OAUTH_ISSUER_URL,
+      authorization: {
+        url: process.env.OPENSHIFT_OAUTH_AUTH_URL,
+        params: { scope: "user:info"}
+      },
+      token: process.env.OPENSHIFT_OAUTH_TOKEN_URL,
+      userinfo: process.env.OPENSHIFT_OAUTH_USERINFO_URL,
+      async profile(profile) {
+        return {
+          id: profile.metadata.name,
+          name: profile.metadata.name
+        }},
+      clientId: process.env.OPENSHIFT_ID,
+      clientSecret: process.env.OPENSHIFT_SECRET
+    },
+    KeycloakProvider({
+      clientId: process.env.KEYCLOAK_ID,
+      clientSecret: process.env.KEYCLOAK_SECRET,
+      issuer: process.env.KEYCLOAK_ISSUER,
+    }),
     GithubProvider({
       clientId: process.env.GITHUB_ID,
       clientSecret: process.env.GITHUB_SECRET,

app/api/old-api.jsx

@@ -0,0 +1,15 @@
+export async function getData() {
+    const response = await fetch('https://api.npoint.io/ee46484033b5d4d4658e')
+    if (!response.ok) {
+      throw new Error('Failed to fetch data')
+    }
+    return response.json()
+  }
+
+export async function getApps() {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_PELORUS_API_URL}/sdp/apps?range=1w`)
+    if (!response.ok) {
+      throw new Error('Failed to fetch list of Apps from Pelorus')
+    }
+    return response.json()
+  }

app/api/pelorus-api.jsx

@@ -0,0 +1,65 @@
+'use client'
+import { useState, useEffect } from "react"
+
+export async function getApps() {
+  const response = await fetch(`${process.env.NEXT_PUBLIC_PELORUS_API_URL}/sdp/apps?range=1w`)
+  if (!response.ok) {
+    throw new Error('Failed to fetch list of Apps from Pelorus')
+  }
+  return response.json()
+}
+
+export function getLTFC(appName) {
+
+  // const [response, setResponse] = useState('')
+  // useEffect(() => {
+  // fetch(`${process.env.NEXT_PUBLIC_PELORUS_API_URL}/sdp/lead_time_for_change/${appName}?range=1w`).then((test) => test.json()).then((data) => {setResponse(data)}).catch((error) => { console.log(error) })
+  // }, []);
+  // return response
+  const response = fetch(`${process.env.NEXT_PUBLIC_PELORUS_API_URL}/sdp/lead_time_for_change/${appName}?range=1w`).then((test) => test.json()).catch((error) => { console.log(error) })
+  return response
+}
+
+export function getDF(appName) {
+
+  // const [response, setResponse] = useState('')
+  // useEffect(() => {
+  // fetch(`${process.env.NEXT_PUBLIC_PELORUS_API_URL}/sdp/deployment_frequency/${appName}?range=1w`).then((test) => test.json()).then((data) => {setResponse(data)}).catch((error) => { console.log(error) })
+  // }, []);
+  // return response
+  const response = fetch(`${process.env.NEXT_PUBLIC_PELORUS_API_URL}/sdp/deployment_frequency/${appName}?range=1w`).then((test) => test.json()).catch((error) => { console.log(error) })
+  return response
+}
+
+export function getMTTR(appName) {
+  // const [response, setResponse] = useState('')
+  // useEffect(() => {
+  // fetch(`${process.env.NEXT_PUBLIC_PELORUS_API_URL}/sdp/mean_time_to_restore/${appName}?range=1w`).then((test) => test.json()).then((data) => {setResponse(data)}).catch((error) => { console.log(error) })
+  // }, []);
+  const response = fetch(`${process.env.NEXT_PUBLIC_PELORUS_API_URL}/sdp/mean_time_to_restore/${appName}?range=1w`).then((test) => test.json()).catch((error) => { console.log(error) })
+  return response
+}
+
+export function getCFR(appName) {
+  // const [response, setResponse] = useState('')
+  // useEffect(() => {
+  // fetch(`${process.env.NEXT_PUBLIC_PELORUS_API_URL}/sdp/change_failure_rate/${appName}?range=1w`).then((test) => test.json()).then((data) => {setResponse(data)}).catch((error) => { console.log(error) })
+  // }, []);
+
+  const response = fetch(`${process.env.NEXT_PUBLIC_PELORUS_API_URL}/sdp/change_failure_rate/${appName}?range=1w`).then((test) => test.json()).catch((error) => { console.log(error) })
+  return response
+}
+
+export function getDORA(appName) {
+
+  const dora = {mttr: 0, cfr: 0, df: 0, ltfc: 0}
+  const cfr = getCFR(appName)
+  dora.cfr = cfr.cfr
+  const df = getDF(appName)
+  dora.df = df.df
+  const mttr = getMTTR(appName)
+  dora.mttr = mttr.mttr
+  const ltfc = getLTFC(appName)
+  dora.ltfc = ltfc.ltfc
+  return dora
+}

app/dashboard/page.js

@@ -6,28 +6,20 @@ import { getServerSession } from 'next-auth'
 import { options } from '../api/auth/[...nextauth]/options'
 import { redirect } from 'next/navigation'
 import { AppIcon } from '@/components/app-icon'
-import { Dashboard } from '@/components/dashboard-alternate'
+import { Dashboard } from '@/components/dashboard'
 import { Cog, FileText, LayoutGrid, Users, Search, Bell, GitBranch } from 'lucide-react'
 import { Button } from '@/components/ui/button'
+import { getApps, getData } from '../api/old-api'
 
 export const metadata = {
   title: 'Dashboard - Red Hat Developer Intelligence'
 }
 
-async function getData() {
-  const response = await fetch('https://api.npoint.io/ee46484033b5d4d4658e')
-
-  if (!response.ok) {
-    throw new Error('Failed to fetch data')
-  }
-
-  return response.json()
-}
-
 export default async function Page() {
 
   const session = await getServerSession(options)
   const data = await getData()
+  const appList = await getApps()
 
   if (!session) {
     redirect('/')
@@ -62,7 +54,7 @@ export default async function Page() {
         </div>
       </header>
       <div className="flex flex-col h-full ml-20">
-        <Dashboard data={data} />
+        <Dashboard data={data} appList={appList} />
       </div>
     </>
   )

app/page.js

@@ -1,6 +1,8 @@
 import Link from 'next/link'
 import ButtonSignInGithub from '@/components/button-signin-github'
 import ButtonSignInGoogle from '@/components/button-signin-google'
+import ButtonSignInKeyCloak from '@/components/button-signin-keycloak'
+import ButtonSignInOpenShift from '@/components/button-signin-openshift'
 import SignInPhoto from '@/public/images/image--sign-in.jpg'
 import BlurImage from '@/components/blur-image'
 import { AppLogo } from '@/components/app-logo'
@@ -68,6 +70,8 @@ export default async function AuthenticationPage() {
                   </div>
                 </div>
                 <ButtonSignInGoogle />
+                <ButtonSignInKeyCloak />
+                <ButtonSignInOpenShift />
                 <p className="px-8 text-center text-sm text-muted-foreground">By signing in, you agree to our <Link href="https://www.redhat.com/en/about/terms-use">terms of service</Link> and <Link href="https://www.redhat.com/en/about/privacy-policy">privacy policy</Link>.</p>
               </>
             )}

components/app-selector.jsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { useState, useContext } from 'react'
+import { Check, ChevronsUpDown, Github, Gitlab, Box } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, } from "@/components/ui/command"
+import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"
+
+export function AppSelector({ appList, activeApp, setActiveApp }) {
+
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="w-80 justify-between rounded-full">
+          <div className="flex items-center">
+            <Box className="mr-2 w-4 h-4" />
+            {activeApp && appList.find((application) => application.app === activeApp)?.app}
+            {!activeApp && 'Select application...'}
+          </div>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align={'left'} className="w-[320px] p-0 rounded-2xl overflow-hidden">
+        <Command>
+          <CommandInput placeholder="Search application..." />
+          <CommandEmpty>No application found.</CommandEmpty>
+          <CommandGroup>
+            {appList.map((application) => (
+              <CommandItem className="flex items-center justify-between" key={application.app} onSelect={(currentValue) => {
+                setActiveApp(currentValue)
+                setOpen(false)
+              }}>
+                <div className="flex items-center">
+                  <Box className={cn("mr-2 w-4 h-4", application.app === activeApp ? "opacity-100" : "opacity-40")} />
+                  <span className={`${activeApp === application.app ? 'font-semibold' : 'font-base'}`}>{application.app}</span>
+                </div>
+                <Check className={cn("mr-2 h-4 w-4", activeApp === application.app ? "opacity-100" : "opacity-0")} />
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+        <div className="p-2">
+          <Button variant="secondary" className="w-full rounded-full" disabled>Customize</Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

components/application-selector.jsx

@@ -62,4 +62,4 @@ export function ApplicationSelector({ applications, activeApplication, changeAct
       </PopoverContent>
     </Popover>
   )
-}
+}

components/button-signin-keycloak.jsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { useState } from 'react'
+import { signIn } from 'next-auth/react'
+import { Button } from '@/components/ui/button'
+import LogoKeyCloak from '@/public/logos/keycloak_icon_512px.svg'
+import { Loader2 } from "lucide-react"
+
+export default function ButtonSignInKeyCloak() {
+
+  const [loading, setLoading] = useState(false)
+
+  function handleClick() {
+    setLoading(loading => !loading)
+    signIn('keycloak', { callbackUrl: '/dashboard' })
+  }
+
+  return (
+    <Button className="w-full" variant="outline" size="lg" type="button" onClick={handleClick}>
+      {loading && <Loader2 className="mr-2 h-6 w-6 animate-spin" />}
+      {!loading && (
+        <>
+          <span className="mr-2 w-4 h-4">
+            <LogoKeyCloak />
+          </span>
+          <span>Sign in with KeyCloak</span>
+        </>
+      )}
+    </Button>
+  )
+}