Skip to content

Commit 02bb6a6

Browse files
svcAPLBotsvcAPLBot
committed
Merge remote-tracking branch 'origin/main' into APL-1335-3
2 parents bbc9867 + c19bb9c commit 02bb6a6

5 files changed

Lines changed: 69 additions & 41 deletions

File tree

‎src/components/Apps.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Box, Grid } from '@mui/material'
22
import { useSession } from 'providers/Session'
33
import React, { useState } from 'react'
4-
import { GetAppsApiResponse, GetSettingsApiResponse, GetTeamApiResponse } from 'redux/otomiApi'
4+
import { GetAplTeamApiResponse, GetAppsApiResponse, GetSettingsApiResponse } from 'redux/otomiApi'
55
import { makeStyles } from 'tss-react/mui'
66
import { get } from 'lodash'
77
import { getAppData } from 'utils/data'
@@ -54,6 +54,7 @@ function getComparator<Key extends keyof any>(
5454
? (a, b) => descendingComparator(a, b, orderBy)
5555
: (a, b) => -descendingComparator(a, b, orderBy)
5656
}
57+
5758
function sortArray(a, b) {
5859
// Treat undefined as true
5960
const aEnabled = a.enabled === undefined ? true : a.enabled
@@ -86,7 +87,7 @@ function getDeprecatedApps(apps, session, teamId) {
8687
interface Props {
8788
teamId: string
8889
apps: GetAppsApiResponse
89-
teamSettings: GetTeamApiResponse
90+
teamSettings: GetAplTeamApiResponse
9091
setAppState: CallableFunction
9192
objSettings: GetSettingsApiResponse
9293
}
@@ -121,7 +122,6 @@ export default function Apps({ teamId, apps, teamSettings, setAppState, objSetti
121122
const isObjStorageRequired = getObjStorageRequired(id)
122123
if (isObjStorageRequired && !ignoreObjStorage) setOpenObjAppModal(id)
123124
else {
124-
// we only allow turning on
125125
const { deps } = getAppData(session, teamId, id)
126126
setAppState([[id], true])
127127
if (deps) setAppState([(deps || []).concat([id]), true])
@@ -132,14 +132,12 @@ export default function Apps({ teamId, apps, teamSettings, setAppState, objSetti
132132
setFilterName(filterName)
133133
}
134134

135-
// END HOOKS
136-
// we visualize drag state for all app dependencies
137135
const isAdmin = teamId === 'admin'
138136
const dataFiltered = applySortFilter({
139137
tableData: apps,
140138
comparator: getComparator(order, orderBy),
141139
filterName,
142-
managedMonitoringApps: teamSettings?.managedMonitoring || undefined,
140+
managedMonitoringApps: teamSettings?.spec.managedMonitoring || undefined,
143141
isAdmin,
144142
})
145143

@@ -158,7 +156,7 @@ export default function Apps({ teamId, apps, teamSettings, setAppState, objSetti
158156
// alertmanager is an exception to the rule as it can be enabled on team level without being enabled on platform level
159157
enabled={
160158
enabled !== false ||
161-
(teamId !== 'admin' && teamSettings?.managedMonitoring?.alertmanager && id === 'alertmanager')
159+
(teamId !== 'admin' && teamSettings?.spec.managedMonitoring?.alertmanager && id === 'alertmanager')
162160
}
163161
id={id}
164162
img={`/logos/${logo}`}
@@ -288,6 +286,7 @@ function applySortFilter({
288286
)
289287
}
290288
}
289+
291290
if (!isAdmin) {
292291
tableData = tableData?.filter((item: Record<string, any>) => {
293292
const key = item.id.toLowerCase()

‎src/components/Dashboard.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { getDomain } from 'layouts/Shell'
66
import useSettings from 'hooks/useSettings'
77
import Link from '@mui/material/Link'
88
import { Link as RouterLink } from 'react-router-dom'
9-
import { GetTeamApiResponse } from 'redux/otomiApi'
9+
import { GetAplTeamApiResponse } from 'redux/otomiApi'
1010
import UpgradeVersion from './UpgradeVersion'
1111

1212
// styles -----------------------------------------------------------
@@ -92,7 +92,7 @@ const useStyles = makeStyles()((theme) => ({
9292

9393
// types -----------------------------------------------------------
9494
interface Props {
95-
team?: GetTeamApiResponse
95+
team?: GetAplTeamApiResponse
9696
inventory: any
9797
}
9898

@@ -212,22 +212,22 @@ export default function Dashboard({ team, inventory }: Props): React.ReactElemen
212212
const hostname = window.location.hostname
213213
const domain = getDomain(hostname)
214214
const [isCookiesLoaded, setCookiesLoaded] = React.useState(false)
215+
215216
const onLoad = () => {
216217
setTimeout(() => {
217218
setCookiesLoaded(true)
218219
}, 500)
219220
}
221+
220222
React.useEffect(() => {
221223
setCookiesLoaded(false)
222224
}, [themeView])
223225

224-
// platform view base iframe urls
225226
const clusterResourceUtilization = `https://grafana.${domain}/d-solo/efa86fd1d0c121a26444b636a3f509a8/kubernetes-compute-resources-cluster?orgId=1&refresh=30s&theme=${theme.palette.mode}&panelId=`
226-
const clusterCapacity = `https://grafana.${domain}/d-solo/iJiti6Lnkgg/kubernetes-cluster-status?orgId=1&refresh=30s&theme=${theme.palette.mode}&panelId=`
227-
// team view base iframe urls
228227
const resourceStatus = `https://grafana-${oboTeamId}.${domain}/d-solo/iJiti6Lnkgg/team-status?orgId=1&refresh=30s&theme=${theme.palette.mode}&panelId=`
229228
const resourceUtilization = `https://grafana-${oboTeamId}.${domain}/d-solo/JcVjFgdZz/kubernetes-deployment?orgId=1&theme=${theme.palette.mode}&panelId=`
230229
const vulnerabilities = `https://grafana-${oboTeamId}.${domain}/d-solo/trivy_operator/container-scan-results?orgId=1&refresh=30s&theme=${theme.palette.mode}&panelId=`
230+
231231
const views = {
232232
platform: [
233233
{
@@ -258,7 +258,7 @@ export default function Dashboard({ team, inventory }: Props): React.ReactElemen
258258
{ id: '7', src: `${resourceStatus}9` },
259259
{ id: '8', src: `${resourceStatus}10` },
260260
],
261-
show: team?.managedMonitoring?.grafana && oboTeamId !== 'admin',
261+
show: team?.spec.managedMonitoring?.grafana && oboTeamId !== 'admin',
262262
},
263263
{
264264
title: 'Resource Utilization',
@@ -267,7 +267,7 @@ export default function Dashboard({ team, inventory }: Props): React.ReactElemen
267267
{ id: '9', src: `${resourceUtilization}8` },
268268
{ id: '10', src: `${resourceUtilization}9` },
269269
],
270-
show: team?.managedMonitoring?.grafana && oboTeamId !== 'admin',
270+
show: team?.spec.managedMonitoring?.grafana && oboTeamId !== 'admin',
271271
},
272272
{
273273
title: 'Vulnerabilities',
@@ -278,7 +278,7 @@ export default function Dashboard({ team, inventory }: Props): React.ReactElemen
278278
{ id: '13', src: `${vulnerabilities}50` },
279279
{ id: '14', src: `${vulnerabilities}51` },
280280
],
281-
show: team?.managedMonitoring?.grafana && oboTeamId !== 'admin' && appsEnabled.trivy,
281+
show: team?.spec.managedMonitoring?.grafana && oboTeamId !== 'admin' && appsEnabled.trivy,
282282
},
283283
],
284284
}
@@ -295,7 +295,6 @@ export default function Dashboard({ team, inventory }: Props): React.ReactElemen
295295
title='Inventory'
296296
/>
297297

298-
{/* Cookies Hack: Hidden iframe to load cookies for grafana */}
299298
<iframe
300299
className={classes.hiddenIframe}
301300
title='Hidden iFrame'

‎src/components/Header.tsx‎

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import useOffSetTop from 'hooks/useOffSetTop'
55
import useResponsive from 'hooks/useResponsive'
66
import { useSession } from 'providers/Session'
77
import { useHistory, useLocation } from 'react-router-dom'
8-
import { useGetTeamsQuery } from 'redux/otomiApi'
8+
import { useGetAplTeamsQuery } from 'redux/otomiApi'
99
import useSettings from 'hooks/useSettings'
1010
import React from 'react'
1111
import { useLocalStorage } from 'hooks/useLocalStorage'
@@ -19,6 +19,11 @@ type Props = {
1919
verticalLayout?: boolean
2020
}
2121

22+
type TeamOption = {
23+
value: string
24+
label: string
25+
}
26+
2227
// ----------------------------------------------------------------------
2328

2429
type RootStyleProps = {
@@ -78,17 +83,29 @@ export default function Header({ onOpenSidebar, isCollapse = false, verticalLayo
7883
} = useSession()
7984
const [localOboTeamId] = useLocalStorage<string>('oboTeamId', undefined)
8085
const oboTeamId = sessionOboTeamId || localOboTeamId || undefined
81-
const { data: allTeams } = useGetTeamsQuery(!isPlatformAdmin && skipToken)
82-
// END HOOKs
83-
let teams: string[] = []
86+
87+
const { data: allTeams } = useGetAplTeamsQuery(isPlatformAdmin ? undefined : skipToken)
88+
89+
let teams: TeamOption[] = []
8490

8591
if (isPlatformAdmin) {
86-
teams = allTeams?.map((team) => team?.name) || []
87-
teams = [...new Set(teams)]
88-
teams = teams.filter((team) => team !== 'admin') // Remove "admin" from the list
89-
teams.sort()
90-
teams = ['admin', ...teams]
91-
} else teams = userTeams
92+
teams =
93+
allTeams?.map((team) => ({
94+
value: team.metadata.labels['apl.io/teamId'],
95+
label: team.metadata.name,
96+
})) || []
97+
98+
teams = teams.filter((team) => Boolean(team.value))
99+
teams = Array.from(new Map(teams.map((team) => [team.value, team])).values())
100+
teams = teams.filter((team) => team.value !== 'admin')
101+
teams.sort((a, b) => a.label.localeCompare(b.label))
102+
teams = [{ value: 'admin', label: 'admin' }, ...teams]
103+
} else {
104+
teams = (userTeams || []).map((team) => ({
105+
value: team,
106+
label: team,
107+
}))
108+
}
92109

93110
const handleChangeView = (event: React.ChangeEvent<HTMLInputElement>) => {
94111
onChangeView(event)
@@ -121,7 +138,8 @@ export default function Header({ onOpenSidebar, isCollapse = false, verticalLayo
121138
history.push(nextPathname)
122139
event.preventDefault()
123140
}
124-
if (!teams && oboTeamId) teams = [oboTeamId]
141+
142+
if (!teams.length && oboTeamId) teams = [{ value: oboTeamId, label: oboTeamId }]
125143

126144
return (
127145
<RootStyle
@@ -149,13 +167,13 @@ export default function Header({ onOpenSidebar, isCollapse = false, verticalLayo
149167
<StyledSelect
150168
size='small'
151169
color='secondary'
152-
value={(teams?.length && oboTeamId) || ''}
170+
value={oboTeamId || ''}
153171
onChange={handleChangeTeam}
154172
data-cy='select-oboteam'
155173
>
156-
{teams?.map((teamName) => (
157-
<MenuItem key={teamName} value={teamName} data-cy={`select-oboteam-${teamName}`}>
158-
{teamName}
174+
{teams.map((team) => (
175+
<MenuItem key={team.value} value={team.value} data-cy={`select-oboteam-${team.value}`}>
176+
{team.label}
159177
</MenuItem>
160178
))}
161179
</StyledSelect>

‎src/pages/Apps.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import PaperLayout from 'layouts/Paper'
55
import React, { useEffect, useState } from 'react'
66
import { RouteComponentProps } from 'react-router-dom'
77
import { useAppSelector } from 'redux/hooks'
8-
import { useGetSettingsQuery, useGetTeamAppsQuery, useGetTeamQuery, useToggleAppsMutation } from 'redux/otomiApi'
8+
import { useGetAplTeamQuery, useGetSettingsQuery, useGetTeamAppsQuery, useToggleAppsMutation } from 'redux/otomiApi'
99

1010
interface Params {
1111
teamId?: string
@@ -21,35 +21,41 @@ export default function ({
2121
const [appState, setAppState] = useState([])
2222
const [appIds, appEnabled] = appState
2323
const [toggle, { isSuccess: okToggle }] = useToggleAppsMutation()
24+
2425
const { data: apps, isLoading, isFetching, refetch } = useGetTeamAppsQuery({ teamId })
25-
const { data: teamSettings } = useGetTeamQuery({ teamId })
26+
const { data: teamSettings } = useGetAplTeamQuery({ teamId })
27+
2628
const {
2729
data: objSettings,
2830
isLoading: isLoadingSettings,
2931
isFetching: isFetchingSettings,
3032
refetch: refetchSettings,
3133
} = useGetSettingsQuery({ ids: ['obj'] }, { skip: themeView === 'team' })
34+
3235
useEffect(() => {
3336
if (appIds) {
3437
setAppState([])
35-
3638
toggle({ teamId, body: { ids: appIds, enabled: appEnabled } })
3739
}
40+
3841
if (okToggle) {
3942
// we wish to refetch settings kept in the session for the UI state
4043
// IMPORTANT: we have to use setTimeout to avoid concurrent state update
4144
refetch()
4245
setTimeout(refetchAppsEnabled)
4346
}
4447
}, [appIds, okToggle])
48+
4549
const isDirty = useAppSelector(({ global: { isDirty } }) => isDirty)
50+
4651
useEffect(() => {
4752
if (isDirty !== false) return
4853
if (!isFetching) refetch()
4954
if (!isFetchingSettings) refetchSettings()
5055
}, [isDirty])
51-
// END HOOKS
56+
5257
const loading = isLoading || isLoadingSettings
58+
5359
const comp = apps && (
5460
<Apps
5561
teamId={teamId}
@@ -59,5 +65,6 @@ export default function ({
5965
objSettings={objSettings}
6066
/>
6167
)
68+
6269
return <PaperLayout loading={loading} comp={comp} title={`Apps - ${teamId === 'admin' ? 'admin' : 'team'}`} />
6370
}

‎src/pages/Dashboard.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable no-prototype-builtins */
22
import { Box } from '@mui/material'
3-
import { skipToken } from '@reduxjs/toolkit/dist/query'
3+
import { skipToken } from '@reduxjs/toolkit/query/react'
44
import Dashboard from 'components/Dashboard'
55
import useSettings from 'hooks/useSettings'
66
import PaperLayout from 'layouts/Paper'
@@ -9,7 +9,7 @@ import { useSession } from 'providers/Session'
99
import React, { useEffect } from 'react'
1010
import { useTranslation } from 'react-i18next'
1111
import { useAppSelector } from 'redux/hooks'
12-
import { useGetDashboardQuery, useGetTeamQuery, useGetTeamsQuery } from 'redux/otomiApi'
12+
import { useGetAplTeamQuery, useGetAplTeamsQuery, useGetDashboardQuery } from 'redux/otomiApi'
1313

1414
export default function (): React.ReactElement {
1515
const { themeView } = useSettings()
@@ -24,8 +24,9 @@ export default function (): React.ReactElement {
2424
isLoading: isLoadingTeams,
2525
isFetching: isFetchingTeams,
2626
refetch: refetchTeams,
27-
} = useGetTeamsQuery(!isPlatformAdmin && skipToken)
28-
const { data: teamData } = useGetTeamQuery({ teamId: oboTeamId }, { skip: !oboTeamId || isPlatformAdmin })
27+
} = useGetAplTeamsQuery(isPlatformAdmin ? undefined : skipToken)
28+
29+
const { data: teamData } = useGetAplTeamQuery({ teamId: oboTeamId }, { skip: !oboTeamId || isPlatformAdmin })
2930

3031
const teamId = isPlatformView ? undefined : oboTeamId
3132

@@ -36,19 +37,23 @@ export default function (): React.ReactElement {
3637
} = useGetDashboardQuery({ teamId }, { skip: !isPlatformAdmin && !teamId })
3738

3839
const isDirty = useAppSelector(({ global: { isDirty } }) => isDirty)
40+
3941
useEffect(() => {
4042
if (isDirty !== false) return
4143
if (oboTeamId && !isFetchingDashboard) refetchDashboard()
4244
if (oboTeamId && !isFetchingTeams) refetchTeams()
4345
}, [isDirty])
46+
4447
const { t } = useTranslation()
45-
// END HOOKS
46-
const team = !isLoadingTeams && (find(teams, { name: teamId }) || teamData)
48+
49+
const team = !isLoadingTeams && (find(teams, (team) => team.metadata.labels['apl.io/teamId'] === teamId) || teamData)
50+
4751
const loading = isFetchingDashboard || isLoadingTeams
4852
const teamInventory = isPlatformView ? [{ name: 'teams', count: teams?.length }] : []
4953
const dashboardInventory = dashboard ?? ([] as any)
5054
const inventory = [...teamInventory, ...dashboardInventory]
5155
const comp = (teams || team) && dashboard && <Dashboard team={team} inventory={inventory} />
56+
5257
return (
5358
<Box sx={{ paddingTop: '3rem' }}>
5459
<PaperLayout

0 commit comments

Comments
 (0)