Skip to content

Commit

Permalink
frontend: Render events correctly
Browse files Browse the repository at this point in the history 
Signed-off-by: ashu8912 <aghildiyal@microsoft.com>
  • Loading branch information
@ashu8912
ashu8912 committed Sep 30, 2024
1 parent e8bb153 commit 90f215c
Show file tree
Hide file tree
Showing 6 changed files with 158 additions and 216 deletions.
8 changes: 4 additions & 4 deletions flux-plugin/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

54 changes: 8 additions & 46 deletions flux-plugin/src/flux-applications/application.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,10 @@ import {
Link,
MainInfoSection,
SectionBox,
ShowHideLabel,
Table,
} from '@kinvolk/headlamp-plugin/lib/components/common';
import { useLocation } from 'react-router';
import Event from '@kinvolk/headlamp-plugin/lib/K8s/event';
import Event, { KubeEvent } from '@kinvolk/headlamp-plugin/lib/K8s/event';
import React from 'react';
import { K8s } from '@kinvolk/headlamp-plugin/lib';
import {
Expand All @@ -19,7 +18,7 @@ import {
} from '../actions/index';
import { KubeObject } from '@kinvolk/headlamp-plugin/lib/lib/k8s/cluster';
import YAML from 'yaml';
import { getSourceNameAndType } from '../helpers/index';
import { getSourceNameAndType, ObjectEvents } from '../helpers/index';
import Editor from '@monaco-editor/react';

const KUSTOMIZE_CRD = 'kustomizations.kustomize.toolkit.fluxcd.io';
Expand All @@ -38,7 +37,6 @@ function parseID(id: string) {
return { namespace, name, group, kind };
}


function getSourceOrAppCRD(kind: string) {
switch (kind) {
case 'Kustomization':
Expand Down Expand Up @@ -102,12 +100,11 @@ export default function FluxApplicationDetailView(props) {
const type = segments[segments.length - 2];
// The last segment is the name
const name = segments[segments.length - 1];


const [events, error] = Event?.default.objectEvents({
namespace: namespace,
kind: type === 'helmreleases' ? 'HelmRelease' : 'Kustomization',
name: name,
const [events, error] = Event?.default.useList({

Check failure on line 103 in flux-plugin/src/flux-applications/application.tsx

View workflow job for this annotation

GitHub Actions / build (18.x, ./flux-plugin) 

'error' is assigned a value but never used
namespace,
fieldSelector: `involvedObject.name=${name},involvedObject.kind=${
type === 'helmreleases' ? 'HelmRelease' : 'Kustomization'
}`,
});
const [resource] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
type === 'helmreleases' ? HELMRELEASE_CRD : KUSTOMIZE_CRD
Expand All @@ -118,33 +115,7 @@ export default function FluxApplicationDetailView(props) {
{resource && (
<CustomResourceDetails resource={resource} name={name} namespace={namespace} type={type} />
)}
<SectionBox title="Events">
<Table
data={events}
columns={[
{
header: 'Reason',
accessorFn: item => item.reason,
},
{
header: 'Message',
accessorFn: item => (
<ShowHideLabel labelId={item?.metadata?.uid || ''}>
{item.message || ''}
</ShowHideLabel>
),
},
{
header: 'From',
accessorFn: item => item.source.component,
},
{
header: 'Last Updated',
accessorFn: item => <DateLabel date={item.jsonData.lastTimestamp} />,
},
]}
/>
</SectionBox>
<ObjectEvents events={events?.map((event: KubeEvent) => new Event.default(event))} />
</>
);
}
Expand Down Expand Up @@ -313,15 +284,6 @@ function CustomResourceDetails(props) {
]}
/>
</SectionBox>
{/* <SectionBox title="Graph">
<GraphView
hideHeader
height="400px"
groupingOptions={{ disable: true }}
defaultSources={[mapsource, WorkloadsSource]}
defaultFilters={[{ type: 'related', id: cr?.metadata?.uid }]}
/>
</SectionBox> */}
<SectionBox title="Conditions">
<ConditionsTable resource={cr?.jsonData} />
</SectionBox>
Expand Down
60 changes: 13 additions & 47 deletions flux-plugin/src/flux-image-automation/image-automation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,33 @@ import React from 'react';
import { useLocation } from 'react-router';
import {
ConditionsTable,
DateLabel,
MainInfoSection,
SectionBox,
ShowHideLabel,
Table,
} from '@kinvolk/headlamp-plugin/lib/components/common';
import { SuspendAction, ResumeAction, SyncAction } from '../actions/index';
import YAML from 'yaml';
import Editor from '@monaco-editor/react';
import { ObjectEvents } from '../helpers/index';

const fluxImageInfo = {
imagerepositories: {
kind: 'ImageRepository',
type: 'imagerepositories.image.toolkit.fluxcd.io'
type: 'imagerepositories.image.toolkit.fluxcd.io',
},
imagepolicies: {
kind: 'ImagePolicy',
type: 'imagepolicies.image.toolkit.fluxcd.io'
type: 'imagepolicies.image.toolkit.fluxcd.io',
},
imageupdateautomations: {
kind: 'ImageUpdateAutomation',
type: 'imageupdateautomations.image.toolkit.fluxcd.io'
}
}
type: 'imageupdateautomations.image.toolkit.fluxcd.io',
},
};

export function FluxImageAutomationDetailView() {
const location = useLocation();
const segments = location.pathname.split('/');
const [namespace, type, name] = segments.slice(-3)
const [namespace, type, name] = segments.slice(-3);

function getType() {
return fluxImageInfo[type].type;
Expand All @@ -49,49 +47,17 @@ export function FluxImageAutomationDetailView() {
['apiextensions.k8s.io', 'v1beta1', 'customresourcedefinitions'],
['apiextensions.k8s.io', 'v1beta2', 'customresourcedefinitions']
);
const [events, error] = Event?.default.objectEvents({
namespace: namespace,
name: name,
kind: getKind(),
const [resource] = CRD.useGet(getType());

const [events, error] = Event?.default.useList({

Check failure on line 52 in flux-plugin/src/flux-image-automation/image-automation.tsx

View workflow job for this annotation

GitHub Actions / build (18.x, ./flux-plugin) 

'error' is assigned a value but never used
namespace,
fieldSelector: `involvedObject.name=${name},involvedObject.kind=${getKind()}`,
});

const [resource] = CRD.useGet(getType());
return (
<>
{resource && <CustomResourceDetails resource={resource} name={name} namespace={namespace} />}
<SectionBox title="Events">
<Table
data={events}
columns={[
{
header: 'Type',
accessorFn: item => item.type,
},
{
header: 'Reason',
accessorFn: item => item.reason,
},
{
header: 'Age',
accessorFn: item => (
<DateLabel date={new Date(item.jsonData.lastTimestamp).getTime()} />
),
},
{
header: 'From',
accessorFn: item => item.jsonData.reportingComponent || '-',
},
{
header: 'Message',
accessorFn: item => (
<ShowHideLabel labelId={item?.metadata?.uid || ''}>
{item.message || ''}
</ShowHideLabel>
),
},
]}
/>
</SectionBox>
<ObjectEvents events={events} />
</>
);
}
Expand Down
31 changes: 3 additions & 28 deletions flux-plugin/src/flux-notifications/notification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { Table } from '@kinvolk/headlamp-plugin/lib/components/common';
import React from 'react';
import Event from '@kinvolk/headlamp-plugin/lib/k8s/event';
import { SyncAction, SuspendAction, ResumeAction } from '../actions/index';
import { ObjectEvents } from '../helpers/index';

const ALERT = 'alerts.notification.toolkit.fluxcd.io';
const PROVIDER = 'providers.notification.toolkit.fluxcd.io';
Expand Down Expand Up @@ -54,7 +55,7 @@ export default function Notification() {
);

const [events, error] = Event?.default.useList({
namespace: namespace,
namespace,
fieldSelector: `involvedObject.name=${name},involvedObject.kind=${getKind()}`,
});

Expand All @@ -63,33 +64,7 @@ export default function Notification() {
<>
{resource && <CustomResourceDetails resource={resource} name={name} namespace={namespace} />}
<SectionBox title="Events">
<Table
data={events}
columns={[
{
header: 'Type',
accessorFn: item => item.type,
},
{
header: 'Reason',
accessorFn: item => item.reason,
},
{
header: 'Age',
accessorFn: item => (
<DateLabel date={new Date(item.jsonData.lastTimestamp).getTime()} />
),
},
{
header: 'From',
accessorFn: item => item.jsonData.reportingComponent || '-',
},
{
header: 'Message',
accessorFn: item => item.message,
},
]}
/>
<ObjectEvents events={events} />
</SectionBox>
</>
);
Expand Down
Loading

0 comments on commit 90f215c

Please sign in to comment.