Skip to content

Commit

Permalink
feat: klusterlet and dashboard fixes
Browse files Browse the repository at this point in the history
Signed-off-by: Ilan Pinto <[email protected]>
  • Loading branch information
ilan-pinto committed Jul 25, 2023
1 parent 4ef114e commit daac146
Show file tree
Hide file tree
Showing 9 changed files with 167 additions and 57 deletions.
8 changes: 3 additions & 5 deletions webview-ui/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import ShowSubscriptionStatuses from "./comp/SubscriptionStatuses";
import OcmHeader from "./comp/Header";
import { Page, PageSection } from "@patternfly/react-core";
import ClusterManagerPage from "./parent/clusterManagerParent";
import ManagedClusterPage from "./parent/managedClusterParent";



Expand All @@ -20,11 +21,8 @@ export default class App extends React.Component {
header= { <OcmHeader /> } >
<PageSection style={{ color: "black" }}>
<ShowSelectedContext/>
<ClusterManagerPage/>

<ShowKlusterlets/>
<ShowAppliedManifestWorks/>
<ShowSubscriptionStatuses/>
<ClusterManagerPage/>
<ManagedClusterPage/>
</PageSection>
</Page>
)
Expand Down
12 changes: 7 additions & 5 deletions webview-ui/src/common/Graph.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const resourceTranslationMap:ResourceObject = {
configmap: 'cm',
secret: 'secret',
ingress: 'ing',
serviceaccount: 'sa',
serviceaccount: 'sa',
cronjob: 'cronjob',
endpoint: 'ep',
limitrange: 'limits',
Expand Down Expand Up @@ -67,14 +67,16 @@ export const Graph: React.FC<GraphProps> = ({ data ,images }) => {
namespace: data.namespace,
children: data.children.map(mf => {
images.forEach( (image: kubeImage) => {
let field = mf.kind.toLowerCase()
let shortKind = resourceTranslationMap[field]
if (shortKind === image.name.toLowerCase()) {
if (resourceTranslationMap[mf.kind.toLowerCase()] === image.name.toLowerCase()) {
mf.icon = image.uri
return mf
}
else if (resourceTranslationMap[mf.kind.toLowerCase().slice(0, -1)] === image.name.toLowerCase()) {
mf.icon = image.uri
return mf
}
return mf
})
})
return mf
})
}
Expand Down
52 changes: 34 additions & 18 deletions webview-ui/src/comp/AppliedManifestWorks.tsx
Original file line number Diff line number Diff line change
@@ -1,45 +1,61 @@
import { useState, useEffect } from 'react';
import { OcmResource } from '../../../src/data/loader'
import { Gallery, Title } from '@patternfly/react-core';
import GalleryTableComponent from '../common/ConditionTable';
import {DateFormat} from '../common/common'
export default function ShowAppliedManifestWorks() {
let [appliedManifestWorks, setAppliedManifestWorks] = useState<OcmResource[]>([]);
import {DateFormat, kubeImage} from '../common/common'
import Graph from '../common/Graph';

useEffect(() => {
window.addEventListener("message", event => {
if ('crsDistribution' in event.data.msg && 'AppliedManifestWork' === event.data.msg.crsDistribution.kind) {
setAppliedManifestWorks(JSON.parse(event.data.msg.crsDistribution.crs));
}
});
});

const AppliedResourcesColumn: Object[] = [

type AppliedManifestWorksProps = {
appliedManifestWorks: OcmResource[],
kubeImages: kubeImage[]
}

export default function ShowAppliedManifestWorks(Props:AppliedManifestWorksProps) {


const AppliedResourcesColumn: Object[] = [
{title: "Resource Name",},
{title: "Resource"},
{title: "Group" , },
{title: "Namespace" }
]
return (
<section className="component-row">
{ appliedManifestWorks.length > 0 &&
<>
{ Props.appliedManifestWorks.length > 0 &&
<>

<Title headingLevel='h2' size='md' style={{ marginTop: '40px' }}>Applied ManifestWorks</Title>
<Gallery className='ocm-gallery' hasGutter={true} >
{appliedManifestWorks.map(appliedManifestWork => {
{Props.appliedManifestWorks.map(appliedManifestWork => {
console.log(`appliedManifestWork`)
console.log(appliedManifestWork)
const row = appliedManifestWork.kr.status.appliedResources.map( (resource:any) => {
return [ resource.name, resource.resource, resource.group, resource.namespace]
})

return <GalleryTableComponent
title={`ManifestWork Name: ${appliedManifestWork.kr.spec.manifestWorkName}`}
subtitle={`Creation TimeStamp: ${new Date(appliedManifestWork.kr.metadata.creationTimestamp).toLocaleString("en-US",DateFormat)}`}
rows={row}
cells={AppliedResourcesColumn}
sort={{index: 1, direction:"asc"}}
id={`${appliedManifestWork.kr.spec.manifestWorkName}`}
/>
>
<Graph data={{ name: appliedManifestWork.kr.spec.manifestWorkName,
namespace: appliedManifestWork.kr.metadata.namespace?appliedManifestWork.kr.metadata.namespace:'missing namespace',
children: appliedManifestWork.kr.status.appliedResources.map( (appliedResources:any) => {

return {
group: appliedResources.group,
name: appliedResources.name,
namespace: appliedResources.namespace,
kind: appliedResources.resource,
version: appliedResources.version
}
})
} } images={Props.kubeImages}
/>
</GalleryTableComponent>
}
)}
</Gallery>
Expand Down
37 changes: 30 additions & 7 deletions webview-ui/src/comp/ClusterManagerDashboard.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { Panel, PanelMain, PanelMainBody } from "@patternfly/react-core"
import { Divider, Flex, FlexItem, Icon, Panel, PanelMain, PanelMainBody } from "@patternfly/react-core"
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'
import TopologyIcon from '@patternfly/react-icons/dist/esm/icons/topology-icon'
import { OcmResource } from "../../../src/data/loader"
import { kubeImage } from "../common/common"

Expand All @@ -21,14 +23,35 @@ type ClusterManagerDashboardProps = {
export default function ClusterManagerDashboard( Props: ClusterManagerDashboardProps) {

return(
<Panel>
<Panel variant="raised">
{ (Props.data.clusterManagers && Props.data.clusterManagers.length > 0) &&
<PanelMain>
<PanelMainBody>
{ Props.data.clusterManagers?<p> Hub Clusters: {Props.data.clusterManagers.length} </p>:null}
{ Props.data.managedClusters?<p> Managed Clusters: {Props.data.managedClusters.length} </p>:null}
{ Props.data.managedClusterSets?<p> managedClusterSets: {Props.data.managedClusterSets.length} </p>:null}
{ Props.data.placements?<p> Placements: {Props.data.placements.length} </p>:null}
<PanelMainBody>
<Flex>
<FlexItem>
<Icon>
<CubeIcon/>
</Icon>
{ Props.data.clusterManagers?<p> Hub Clusters: {Props.data.clusterManagers.length} </p>:null}
{ Props.data.managedClusters?<p> Managed Clusters: {Props.data.managedClusters.length} </p>:null}

</FlexItem>
<Divider
component="div"
orientation={{
default: 'vertical'
}
}
/>
<FlexItem>
<Icon>
<TopologyIcon/>
</Icon>
{ Props.data.placements?<p> Placements: {Props.data.placements.length} </p>:null}
{ Props.data.managedClusterSets?<p> managedClusterSets: {Props.data.managedClusterSets.length} </p>:null}

</FlexItem>
</Flex>
</PanelMainBody>
</PanelMain>
}
Expand Down
22 changes: 9 additions & 13 deletions webview-ui/src/comp/Klusterlets.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import { useState, useEffect } from 'react';
import { OcmResource } from '../../../src/data/loader'
import { ConditionTableComponent } from '../common/ConditionTable';
import { DateFormat } from '../common/common';
import { OcmLabels } from '../common/Labels';

export default function ShowKlusterlets() {
let [klusterlets, setKlusterlets] = useState<OcmResource[]>([]);
type klusterletProps = {
klusterlets: OcmResource[]
}

export default function ShowKlusterlets(Props: klusterletProps) {


useEffect(() => {
window.addEventListener("message", event => {
if ('crsDistribution' in event.data.msg && 'Klusterlet' === event.data.msg.crsDistribution.kind) {
setKlusterlets(JSON.parse(event.data.msg.crsDistribution.crs));
}
});
});

const row = klusterlets.map(klusterlet => {
const row = Props.klusterlets.map(klusterlet => {
return klusterlet.kr.status.conditions.map( (condition:any) => {
return [new Date(condition.lastTransitionTime).toLocaleString("en-US",DateFormat),
condition.message,
Expand All @@ -28,9 +24,9 @@ export default function ShowKlusterlets() {
//TODO-Add panel
//TODO-add clusterlet dashboard
<section className="component-row">
{ klusterlets.length > 0 &&
{ Props.klusterlets.length > 0 &&
<>
{klusterlets.map(klusterlet => {
{Props.klusterlets.map(klusterlet => {
return <>
<ConditionTableComponent id='' title={`${klusterlet.kr.metadata.name}` } rows={ row[0]} />
{klusterlet.kr.metadata.labels?<OcmLabels labels={klusterlet.kr.metadata.labels} />:null }
Expand Down
2 changes: 0 additions & 2 deletions webview-ui/src/comp/ManagedClusterSets.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ export default function ShowManagedClusterSets(Props: managedClusterSetsProps) {
<Gallery className='ocm-gallery' hasGutter={true} >

{Props.managedClusterSets.map(managedClusterSet => {
console.log(`managedClusterSet`)
console.log(managedClusterSet)
const code = yaml.dump(managedClusterSet.kr.spec.clusterSelector)
const row = managedClusterSet.kr.status.conditions.map( (condition:any) => {
return [new Date(condition.lastTransitionTime).toLocaleString("en-US",DateFormat),
Expand Down
2 changes: 0 additions & 2 deletions webview-ui/src/comp/SubscriptionReports.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@ export default function ShowSubscriptionReports(Props: SubscriptionReportsProps)
subscriptionReport.kr.summary.propagationFailed
]]

console.log(rows)

return <GalleryItem>
<Card>
<CardHeader>
Expand Down
12 changes: 7 additions & 5 deletions webview-ui/src/parent/clusterManagerParent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,8 @@ export default function ClusterManagerPage(){
clusterManagersDataRef.current = newClusterManagersData
},[kubeImages]);

if(dataRequests.current > 15 ){
return (<> {console.log(dataRequests)}
if(dataRequests.current > 16 ){
return (<>
<ClusterManagerDashboard data={clusterManagersDataRef.current}/>
<ShowClusterManagers clusterManagers={clusterManagersRef.current} />
<ShowManagedClusters managedClusters={managedClustersRef.current} />
Expand All @@ -108,9 +108,11 @@ export default function ClusterManagerPage(){
)
}

else {
return(
<Spinner isSVG size='xl'/>
else if(clusterManagersRef.current.length === 0 ) {
return <></>
}
else {
return ( <Spinner isSVG size='xl'/>
)
}

Expand Down
77 changes: 77 additions & 0 deletions webview-ui/src/parent/managedClusterParent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { useState, useEffect, useRef} from 'react';
import { OcmResource } from '../../../src/data/loader'
import { kubeImage } from '../common/common';



import { Spinner } from '@patternfly/react-core';
import ShowSubscriptionStatuses from '../comp/SubscriptionStatuses';
import ShowAppliedManifestWorks from '../comp/AppliedManifestWorks';
import ShowKlusterlets from '../comp/Klusterlets';

export default function ManagedClusterPage(){
let [kubeImages, setKubeImages] = useState<kubeImage[]>([]);


let dataRequests = useRef(0);
let klusterletRef = useRef<OcmResource[]>([]);

let appliedManifestWorkRef = useRef<OcmResource[]>([]);
let managedClusterSetsRef = useRef<OcmResource[]>([]);
let kubeImagesRef = useRef<kubeImage[]>([]);

useEffect(() => {
dataRequests.current += 1

window.addEventListener("message", event => {
if ('crsDistribution' in event.data.msg) {
dataRequests.current += 1
let crsData = JSON.parse(event.data.msg.crsDistribution.crs)
switch (event.data.msg.crsDistribution.kind) {
case 'Klusterlet' :
klusterletRef.current = crsData;
break;
case 'AppliedManifestWork':
if (appliedManifestWorkRef.current.length !== crsData.length) {
appliedManifestWorkRef.current = crsData;
}
break;
case 'ManagedClusterSet':
if (managedClusterSetsRef.current.length !== crsData.length) {
managedClusterSetsRef.current = crsData ;
}
break;

}

if (event.data.images) {
if (event.data.images) {
//TODO move this logic to Graph
kubeImagesRef.current = event.data.images
//setting the image state re-renders the component
setKubeImages(kubeImagesRef.current)
}
}
}
});


},[kubeImages]);

if(dataRequests.current > 1 ){
return (<>
<ShowKlusterlets klusterlets={klusterletRef.current} />
<ShowAppliedManifestWorks appliedManifestWorks={appliedManifestWorkRef.current} kubeImages={kubeImagesRef.current} />
{/* <ShowSubscriptionStatuses/> */}

</>
)
}


else {
return ( <Spinner isSVG size='xl'/>
)
}

}

0 comments on commit daac146

Please sign in to comment.