Skip to content

Commit dfbc8b5

Browse files
typescreeptypescreep
committed
events: times in period; links; empty view
1 parent a416ee4 commit dfbc8b5

File tree

12 files changed

+262
-33
lines changed

12 files changed

+262
-33
lines changed

‎.env‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,9 @@ VITE_REMOVE_BACKLINK_TEXT=true
3333
VITE_DOCS_URL=https://in-cloud.io/docs/tech-docs/introduction/
3434

3535
VITE_SEARCH_TABLE_CUSTOMIZATION_PREFIX=stock-
36+
37+
VITE_BASE_FACTORY_NAMESPACED_API_KEY=base-factory-namespaced-api
38+
VITE_BASE_FACTORY_CLUSTERSCOPED_API_KEY=base-factory-clusterscoped-api
39+
VITE_BASE_FACTORY_NAMESPACED_BUILTIN_KEY=base-factory-namespaced-builtin
40+
VITE_BASE_FACTORY_CLUSTERSCOPED_BUILTIN_KEY=base-factory-clusterscoped-builtin
41+
VITE_BASE_NAMESPACE_FACTORY_KEY=base-factory-clusterscoped-builtin

‎.env.options.dist‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,9 @@ REMOVE_BACKLINK_TEXT=
3535
DOCS_URL=
3636

3737
SEARCH_TABLE_CUSTOMIZATION_PREFIX=
38+
39+
BASE_FACTORY_NAMESPACED_API_KEY=
40+
BASE_FACTORY_CLUSTERSCOPED_API_KEY=
41+
BASE_FACTORY_NAMESPACED_BUILTIN_KEY=
42+
BASE_FACTORY_CLUSTERSCOPED_BUILTIN_KEY=
43+
BASE_NAMESPACE_FACTORY_KEY=

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"@ant-design/icons": "5.6.0",
2121
"@monaco-editor/react": "4.6.0",
2222
"@originjs/vite-plugin-federation": "1.3.6",
23-
"@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.150",
23+
"@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.151",
2424
"@readme/openapi-parser": "4.0.0",
2525
"@reduxjs/toolkit": "2.2.5",
2626
"@tanstack/react-query": "5.62.2",

‎server/index.ts‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,23 @@ const SEARCH_TABLE_CUSTOMIZATION_PREFIX =
7373
? options?.SEARCH_TABLE_CUSTOMIZATION_PREFIX
7474
: process.env.SEARCH_TABLE_CUSTOMIZATION_PREFIX
7575

76+
const BASE_FACTORY_NAMESPACED_API_KEY =
77+
process.env.LOCAL === 'true' ? options?.BASE_FACTORY_NAMESPACED_API_KEY : process.env.BASE_FACTORY_NAMESPACED_API_KEY
78+
const BASE_FACTORY_CLUSTERSCOPED_API_KEY =
79+
process.env.LOCAL === 'true'
80+
? options?.BASE_FACTORY_CLUSTERSCOPED_API_KEY
81+
: process.env.BASE_FACTORY_CLUSTERSCOPED_API_KEY
82+
const BASE_FACTORY_NAMESPACED_BUILTIN_KEY =
83+
process.env.LOCAL === 'true'
84+
? options?.BASE_FACTORY_NAMESPACED_BUILTIN_KEY
85+
: process.env.BASE_FACTORY_NAMESPACED_BUILTIN_KEY
86+
const BASE_FACTORY_CLUSTERSCOPED_BUILTIN_KEY =
87+
process.env.LOCAL === 'true'
88+
? options?.BASE_FACTORY_CLUSTERSCOPED_BUILTIN_KEY
89+
: process.env.BASE_FACTORY_CLUSTERSCOPED_BUILTIN_KEY
90+
const BASE_NAMESPACE_FACTORY_KEY =
91+
process.env.LOCAL === 'true' ? options?.BASE_NAMESPACE_FACTORY_KEY : process.env.BASE_NAMESPACE_FACTORY_KEY
92+
7693
const healthcheck = require('express-healthcheck')
7794
const promBundle = require('express-prom-bundle')
7895

@@ -199,7 +216,14 @@ app.get(`${basePrefix ? basePrefix : ''}/env.js`, (_, res) => {
199216
DOCS_URL: ${JSON.stringify(DOCS_URL) || '"/docs"'},
200217
SEARCH_TABLE_CUSTOMIZATION_PREFIX: ${JSON.stringify(SEARCH_TABLE_CUSTOMIZATION_PREFIX) || '"search-"'},
201218
REMOVE_BACKLINK: ${!!REMOVE_BACKLINK ? JSON.stringify(REMOVE_BACKLINK).toLowerCase() : '"false"'},
202-
REMOVE_BACKLINK_TEXT: ${!!REMOVE_BACKLINK_TEXT ? JSON.stringify(REMOVE_BACKLINK_TEXT).toLowerCase() : '"false"'}
219+
REMOVE_BACKLINK_TEXT: ${!!REMOVE_BACKLINK_TEXT ? JSON.stringify(REMOVE_BACKLINK_TEXT).toLowerCase() : '"false"'},
220+
BASE_FACTORY_NAMESPACED_API_KEY: ${JSON.stringify(BASE_FACTORY_NAMESPACED_API_KEY) || '"check envs"'},
221+
BASE_FACTORY_CLUSTERSCOPED_API_KEY: ${JSON.stringify(BASE_FACTORY_CLUSTERSCOPED_API_KEY) || '"check envs"'},
222+
BASE_FACTORY_NAMESPACED_BUILTIN_KEY: ${JSON.stringify(BASE_FACTORY_NAMESPACED_BUILTIN_KEY) || '"check envs"'},
223+
BASE_FACTORY_CLUSTERSCOPED_BUILTIN_KEY: ${
224+
JSON.stringify(BASE_FACTORY_CLUSTERSCOPED_BUILTIN_KEY) || '"check envs"'
225+
},
226+
BASE_NAMESPACE_FACTORY_KEY: ${JSON.stringify(BASE_NAMESPACE_FACTORY_KEY) || '"check envs"'}
203227
}
204228
`,
205229
)

‎src/components/organisms/Events/Events.tsx‎

Lines changed: 50 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,61 @@
1010
// ------------------------------------------------------------
1111

1212
import React, { FC, useCallback, useEffect, useReducer, useRef, useState } from 'react'
13-
import { theme as antdtheme, Flex, Tooltip } from 'antd'
14-
import { ResumeCircleIcon, PauseCircleIcon, LockedIcon, UnlockedIcon } from '@prorobotech/openapi-k8s-toolkit'
13+
import { theme as antdtheme, Flex, Tooltip, Empty } from 'antd'
14+
import {
15+
// TRequestError,
16+
TKindIndex,
17+
TKindWithVersion,
18+
getKinds,
19+
getSortedKindsAll,
20+
pluralByKind,
21+
ResumeCircleIcon,
22+
PauseCircleIcon,
23+
LockedIcon,
24+
UnlockedIcon,
25+
} from '@prorobotech/openapi-k8s-toolkit'
1526
import { TScrollMsg, TServerFrame } from './types'
1627
import { eventKey, compareRV, getRV, getMaxRV } from './utils'
1728
import { reducer } from './reducer'
1829
import { EventRow } from './molecules'
1930
import { Styled } from './styled'
2031

2132
type TEventsProps = {
33+
baseprefix?: string
34+
cluster: string
2235
wsUrl: string // e.g. ws://localhost:3000/api/events?namespace=default&limit=40
2336
pageSize?: number // SCROLL page size (optional)
2437
height?: number // optional override
2538
title?: string
2639
}
2740

28-
export const Events: FC<TEventsProps> = ({ wsUrl, pageSize = 50, height }) => {
41+
export const Events: FC<TEventsProps> = ({ baseprefix, cluster, wsUrl, pageSize = 50, height }) => {
2942
const { token } = antdtheme.useToken()
3043

44+
// const [error, setError] = useState<TRequestError | undefined>()
45+
// const [isLoading, setIsLoading] = useState<boolean>(false)
46+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
47+
const [kindIndex, setKindIndex] = useState<TKindIndex>()
48+
const [kindsWithVersion, setKindWithVersion] = useState<TKindWithVersion[]>()
49+
50+
useEffect(() => {
51+
// setIsLoading(true)
52+
// setError(undefined)
53+
getKinds({ clusterName: cluster })
54+
.then(data => {
55+
setKindIndex(data)
56+
setKindWithVersion(getSortedKindsAll(data))
57+
// setIsLoading(false)
58+
// setError(undefined)
59+
})
60+
.catch(error => {
61+
// setIsLoading(false)
62+
// setError(error)
63+
// eslint-disable-next-line no-console
64+
console.error(error)
65+
})
66+
}, [cluster])
67+
3168
// pause behaviour
3269
const [isPaused, setIsPaused] = useState(false)
3370
const pausedRef = useRef(isPaused)
@@ -315,6 +352,8 @@ export const Events: FC<TEventsProps> = ({ wsUrl, pageSize = 50, height }) => {
315352

316353
const total = state.order.length
317354

355+
const getPlural = kindsWithVersion ? pluralByKind(kindsWithVersion) : undefined
356+
318357
return (
319358
<Styled.Root $maxHeight={height || 640}>
320359
<Styled.Header>
@@ -361,14 +400,18 @@ export const Events: FC<TEventsProps> = ({ wsUrl, pageSize = 50, height }) => {
361400

362401
{/* Scrollable list of event rows */}
363402
<Styled.List ref={listRef} onScroll={onScroll}>
364-
{state.order.map(k => (
365-
<EventRow key={k} e={state.byKey[k]} />
366-
))}
403+
{state.order.length > 0 ? (
404+
state.order.map(k => (
405+
<EventRow key={k} e={state.byKey[k]} baseprefix={baseprefix} cluster={cluster} getPlural={getPlural} />
406+
))
407+
) : (
408+
<Empty />
409+
)}
367410
{/* Infinite scroll sentinel */}
368411
<Styled.Sentinel ref={sentinelRef} />
369412
</Styled.List>
370413

371-
<Styled.Timeline $colorText={token.colorText} $maxHeight={height || 640} />
414+
{state.order.length > 0 && <Styled.Timeline $colorText={token.colorText} $maxHeight={height || 640} />}
372415
</Styled.Root>
373416
)
374417
}

‎src/components/organisms/Events/molecules/EventRow/EventRow.tsx‎

Lines changed: 71 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,49 @@
11
import React, { FC } from 'react'
2+
import { useNavigate } from 'react-router-dom'
23
import { theme as antdtheme, Flex, Typography } from 'antd'
34
import { EarthIcon, getUppercase, hslFromString, Spacer } from '@prorobotech/openapi-k8s-toolkit'
45
import { useSelector } from 'react-redux'
56
import { RootState } from 'store/store'
67
import { TEventsV1Event } from '../../types'
7-
import { eventText, timeAgo } from './utils'
8+
import { eventText, timeAgo, getResourceLink, getNamespaceLink, formatEventSummary } from './utils'
89
import { Styled } from './styled'
910

1011
type TEventRowProps = {
1112
e: TEventsV1Event
13+
baseprefix?: string
14+
cluster: string
15+
getPlural?: (kind: string, apiVersion?: string) => string | undefined
1216
}
1317

14-
export const EventRow: FC<TEventRowProps> = ({ e }) => {
18+
export const EventRow: FC<TEventRowProps> = ({ e, baseprefix, cluster, getPlural }) => {
1519
const { token } = antdtheme.useToken()
20+
const navigate = useNavigate()
1621
const theme = useSelector((state: RootState) => state.openapiTheme.theme)
1722

1823
const abbr = e.regarding?.kind ? getUppercase(e.regarding.kind) : undefined
1924
const bgColor = e.regarding?.kind && abbr ? hslFromString(e.regarding?.kind, theme) : 'initial'
2025
const bgColorNamespace = hslFromString('Namespace', theme)
2126

27+
const regardingKind: string | undefined = e.regarding?.kind
28+
const regardingApiVersion: string = e.regarding?.apiVersion || 'v1'
29+
const pluralName: string | undefined =
30+
regardingKind && regardingApiVersion ? getPlural?.(regardingKind, regardingApiVersion) : undefined
31+
const resourceLink: string | undefined = getResourceLink({
32+
baseprefix,
33+
cluster,
34+
namespace: e.regarding?.namespace,
35+
apiGroupVersion: regardingApiVersion,
36+
pluralName,
37+
name: e.regarding?.name,
38+
})
39+
const namespaceLink: string | undefined = getNamespaceLink({
40+
baseprefix,
41+
cluster,
42+
apiGroupVersion: 'v1',
43+
pluralName: 'namespaces',
44+
namespace: e.regarding?.namespace,
45+
})
46+
2247
return (
2348
<Styled.Card
2449
$bigBorder={e.type === 'Warning'}
@@ -28,12 +53,34 @@ export const EventRow: FC<TEventRowProps> = ({ e }) => {
2853
<Flex align="center" gap={16}>
2954
<Flex align="center" gap={8}>
3055
<Styled.Abbr $bgColor={bgColor}>{abbr}</Styled.Abbr>
31-
{e.regarding?.name}
56+
{resourceLink ? (
57+
<Typography.Link
58+
onClick={e => {
59+
e.preventDefault()
60+
navigate(resourceLink)
61+
}}
62+
>
63+
{e.regarding?.name}
64+
</Typography.Link>
65+
) : (
66+
<Typography.Text>{e.regarding?.name}</Typography.Text>
67+
)}
3268
</Flex>
33-
{e.metadata?.namespace && (
69+
{e.regarding?.namespace && (
3470
<Flex align="center" gap={8}>
3571
<Styled.Abbr $bgColor={bgColorNamespace}>NS</Styled.Abbr>
36-
{e.metadata?.namespace}
72+
{namespaceLink ? (
73+
<Typography.Link
74+
onClick={e => {
75+
e.preventDefault()
76+
navigate(namespaceLink)
77+
}}
78+
>
79+
{e.regarding?.namespace}
80+
</Typography.Link>
81+
) : (
82+
<Typography.Text>{e.regarding?.namespace}</Typography.Text>
83+
)}
3784
</Flex>
3885
)}
3986
</Flex>
@@ -47,21 +94,26 @@ export const EventRow: FC<TEventRowProps> = ({ e }) => {
4794
)}
4895
</Flex>
4996
<Spacer $space={16} $samespace />
50-
<Flex gap={8} align="center" wrap>
51-
<div>
52-
{e.deprecatedSource?.component && (
53-
<Flex gap={8} align="center" wrap>
54-
<Flex gap={6} align="center" wrap>
55-
<Typography.Text type="secondary">Generated by</Typography.Text>
56-
<Styled.Title>{e.deprecatedSource?.component}</Styled.Title>
97+
<Flex justify="space-between">
98+
<Flex gap={8} align="center" wrap>
99+
<div>
100+
{e.deprecatedSource?.component && (
101+
<Flex gap={8} align="center" wrap>
102+
<Flex gap={6} align="center" wrap>
103+
<Typography.Text type="secondary">Generated by</Typography.Text>
104+
<Styled.Title>{e.deprecatedSource?.component}</Styled.Title>
105+
</Flex>
106+
<div>
107+
<Typography.Text type="secondary">•</Typography.Text>
108+
</div>
57109
</Flex>
58-
<div>
59-
<Typography.Text type="secondary">•</Typography.Text>
60-
</div>
61-
</Flex>
62-
)}
63-
</div>
64-
<Styled.Title>{e.reason || e.action || 'Event'}</Styled.Title>
110+
)}
111+
</div>
112+
<Styled.Title>{e.reason || e.action || 'Event'}</Styled.Title>
113+
</Flex>
114+
<Styled.TimesInPeriod>
115+
<Typography.Text type="secondary">{formatEventSummary(e)}</Typography.Text>
116+
</Styled.TimesInPeriod>
65117
</Flex>
66118
<Spacer $space={16} $samespace />
67119
{eventText(e) && <div>{eventText(e)}</div>}

‎src/components/organisms/Events/molecules/EventRow/styled.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,14 @@ const Title = styled.div`
6060
font-weight: 700;
6161
`
6262

63+
const TimesInPeriod = styled.div`
64+
margin-top: -16px;
65+
`
66+
6367
export const Styled = {
6468
Card,
6569
Abbr,
6670
TimeStamp,
6771
Title,
72+
TimesInPeriod,
6873
}

0 commit comments

Comments
 (0)