Skip to content

Commit

Permalink
frontend: add support for gateway-api
Browse files Browse the repository at this point in the history
  • Loading branch information
farodin91 committed Oct 30, 2024
1 parent 543bccb commit d09a4e8
Show file tree
Hide file tree
Showing 17 changed files with 859 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -592,6 +592,92 @@
</div>
</div>
</li>
<li
class="css-1lee0ix"
>
<a
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button css-sayhe9-MuiButtonBase-root-MuiListItem-root"
href="/"
role="button"
tabindex="0"
>
<div
aria-label="Gateway"
class="MuiListItemIcon-root css-1blhdvq-MuiListItemIcon-root"
data-mui-internal-clone-element="true"
/>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</a>
</li>
<li
class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-75xxte-MuiListItem-root"
>
<div
class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-11uq76c-MuiCollapse-root"
style="min-height: 0px;"
>
<div
class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
>
<div
class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
>
<ul
class="MuiList-root css-2l483y-MuiList-root"
>
<li
class="css-b4fdej"
>
<a
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button css-sayhe9-MuiButtonBase-root-MuiListItem-root"
href="/"
role="button"
tabindex="0"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-nqgwvn-MuiTypography-root"
>
Gateways
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</a>
</li>
<li
class="css-b4fdej"
>
<a
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button css-sayhe9-MuiButtonBase-root-MuiListItem-root"
href="/"
role="button"
tabindex="0"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-nqgwvn-MuiTypography-root"
>
Gateway Classes
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li
class="css-1lee0ix"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -627,6 +627,99 @@
</div>
</div>
</li>
<li
class="css-1icvoo8"
>
<a
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button css-sayhe9-MuiButtonBase-root-MuiListItem-root"
href="/"
role="button"
tabindex="0"
>
<div
class="MuiListItemIcon-root css-1blhdvq-MuiListItemIcon-root"
/>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-nqgwvn-MuiTypography-root"
>
Gateway
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</a>
</li>
<li
class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-75xxte-MuiListItem-root"
>
<div
class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-11uq76c-MuiCollapse-root"
style="min-height: 0px;"
>
<div
class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
>
<div
class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
>
<ul
class="MuiList-root css-2l483y-MuiList-root"
>
<li
class="css-b4fdej"
>
<a
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button css-sayhe9-MuiButtonBase-root-MuiListItem-root"
href="/"
role="button"
tabindex="0"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-nqgwvn-MuiTypography-root"
>
Gateways
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</a>
</li>
<li
class="css-b4fdej"
>
<a
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button css-sayhe9-MuiButtonBase-root-MuiListItem-root"
href="/"
role="button"
tabindex="0"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-nqgwvn-MuiTypography-root"
>
Gateway Classes
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li
class="css-1icvoo8"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -627,6 +627,99 @@
</div>
</div>
</li>
<li
class="css-1icvoo8"
>
<a
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button css-sayhe9-MuiButtonBase-root-MuiListItem-root"
href="/"
role="button"
tabindex="0"
>
<div
class="MuiListItemIcon-root css-1blhdvq-MuiListItemIcon-root"
/>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-nqgwvn-MuiTypography-root"
>
Gateway
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</a>
</li>
<li
class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-75xxte-MuiListItem-root"
>
<div
class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-11uq76c-MuiCollapse-root"
style="min-height: 0px;"
>
<div
class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
>
<div
class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
>
<ul
class="MuiList-root css-2l483y-MuiList-root"
>
<li
class="css-b4fdej"
>
<a
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button css-sayhe9-MuiButtonBase-root-MuiListItem-root"
href="/"
role="button"
tabindex="0"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-nqgwvn-MuiTypography-root"
>
Gateways
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</a>
</li>
<li
class="css-b4fdej"
>
<a
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button css-sayhe9-MuiButtonBase-root-MuiListItem-root"
href="/"
role="button"
tabindex="0"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-nqgwvn-MuiTypography-root"
>
Gateway Classes
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li
class="css-1icvoo8"
>
Expand Down
23 changes: 23 additions & 0 deletions frontend/src/components/Sidebar/prepareRoutes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,29 @@ function prepareRoutes(
},
],
},
{
name: 'gateway',
label: t('glossary|Gateway'),
icon: 'mdi:folder-network-outline',
subList: [
{
name: 'k8sgateways',
label: t('glossary|Gateways'),
},
{
name: 'gatewayclasses',
label: t('glossary|Gateway Classes'),
},
{
name: 'httproutes',
label: t('glossary|HTTP Routes'),
},
{
name: 'grpcroutes',
label: t('glossary|GRPC Routes'),
},
],
},
{
name: 'security',
label: t('glossary|Security'),
Expand Down
38 changes: 38 additions & 0 deletions frontend/src/components/gateway/ClassDetails.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom';
import GatewayClass, { KubeGatewayClass } from '../../lib/k8s/gatewayClass';
import { ConditionsTable, DetailsGrid } from '../common/Resource';
import SectionBox from '../common/SectionBox';

export default function GatewayClassDetails() {
const { name } = useParams<{ name: string }>();
const { t } = useTranslation(['glossary', 'translation']);

return (
<DetailsGrid
resourceType={GatewayClass}
name={name}
withEvents
extraInfo={gatewayClass =>
gatewayClass && [
{
name: t('Controller Name'),
value: gatewayClass.controllerName,
},
]
}
extraSections={(item: KubeGatewayClass) =>
item && [
{
id: 'headlamp.gatewayclass-conditions',
section: (
<SectionBox title={t('translation|Conditions')}>
<ConditionsTable resource={item.jsonData} showLastUpdate={false} />
</SectionBox>
),
},
]
}
/>
);
}
26 changes: 26 additions & 0 deletions frontend/src/components/gateway/ClassList.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { useTranslation } from 'react-i18next';
import GatewayClass from '../../lib/k8s/gatewayClass';
import ResourceListView from '../common/Resource/ResourceListView';

export default function GatewayClassList() {
const { t } = useTranslation('glossary');

return (
<ResourceListView
title={t('Gateway Classes')}
headerProps={{
noNamespaceFilter: true,
}}
resourceClass={GatewayClass}
columns={[
'name',
{
id: 'controllerName',
label: t('Controller'),
getValue: (GatewayClass: GatewayClass) => GatewayClass.spec?.controllerName,
},
'age',
]}
/>
);
}
Loading

0 comments on commit d09a4e8

Please sign in to comment.