-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat & fix: Event, Ingress and Secret Overview & Errors in using next…
… build (#4374) * feat: Replaced mobx with zustand * fix: displayed wrong time and info * fix: The content of badge overflow * style: Collected theme and added dumpKubeObject function * feat: Ingress & Secret resource * fix: errors in using next build * feat: Events overview and new UI components
- Loading branch information
Showing
36 changed files
with
765 additions
and
106 deletions.
There are no files selected for viewing
17 changes: 17 additions & 0 deletions
17
frontend/plugins/kubepanel/public/create-resource-templates/Ingress.yaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| apiVersion: networking.k8s.io/v1 | ||
| kind: Ingress | ||
| metadata: | ||
| name: minimal-ingress | ||
| annotations: | ||
| nginx.ingress.kubernetes.io/rewrite-target: / | ||
| spec: | ||
| rules: | ||
| - http: | ||
| paths: | ||
| - path: /testpath | ||
| pathType: Prefix | ||
| backend: | ||
| service: | ||
| name: test | ||
| port: | ||
| number: 80 |
8 changes: 8 additions & 0 deletions
8
frontend/plugins/kubepanel/public/create-resource-templates/Secret.yaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| apiVersion: v1 | ||
| kind: Secret | ||
| metadata: | ||
| name: secret-basic-auth | ||
| type: kubernetes.io/basic-auth | ||
| stringData: | ||
| username: admin | ||
| password: t0p-Secret |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
17 changes: 17 additions & 0 deletions
17
frontend/plugins/kubepanel/src/components/common/section/section.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| interface SectionProps { | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| /** | ||
| * Renders a section component with the provided children. | ||
| * | ||
| * @param {SectionProps} children - The children to render within the section. | ||
| * @return {JSX.Element} The rendered section component. | ||
| */ | ||
| export function Section({ children }: SectionProps) { | ||
| return ( | ||
| <section className="w-full bg-white px-10 py-8 flex flex-col flex-wrap gap-3"> | ||
| {children} | ||
| </section> | ||
| ); | ||
| } |
22 changes: 22 additions & 0 deletions
22
frontend/plugins/kubepanel/src/components/common/title/title.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| interface PageTitleProps { | ||
| children: string; | ||
| type: 'primary' | 'secondary' | 'table'; | ||
| } | ||
|
|
||
| const titleClassName: Record<PageTitleProps['type'], string> = { | ||
| primary: 'text-2xl font-medium', | ||
| secondary: 'text-xl font-medium', | ||
| table: 'text-xs font-medium text-gray-500' | ||
| }; | ||
|
|
||
| /** | ||
| * Renders a title component with the specified type and children. | ||
| * | ||
| * @param {PageTitleProps} props - The properties of the title component. | ||
| * @param {ReactNode} props.children - The content of the title component. | ||
| * @param {string} props.type - The type of the title component. | ||
| * @return {JSX.Element} The rendered title component. | ||
| */ | ||
| export default function Title({ children, type }: PageTitleProps) { | ||
| return <span className={titleClassName[type]}>{children}</span>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...tend/plugins/kubepanel/src/components/kube/object/detail/kube-object-detail-info-list.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
frontend/plugins/kubepanel/src/pages/kubepanel/components/drawer/drawer-collapse.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
117 changes: 117 additions & 0 deletions
117
...gins/kubepanel/src/pages/kubepanel/components/kube-object/config/secret/secret-detail.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import { Secret } from '@/k8slens/kube-object'; | ||
| import DrawerPanel from '../../../drawer/drawer-panel'; | ||
| import { KubeObjectInfoList } from '@/components/kube/object/detail/kube-object-detail-info-list'; | ||
| import Drawer from '../../../drawer/drawer'; | ||
| import React, { Suspense } from 'react'; | ||
| import { Button, Input, Space } from 'antd'; | ||
| import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; | ||
| import { DetailDrawerProps } from '@/types/detail'; | ||
| import { entries } from 'lodash'; | ||
| import { updateResource } from '@/api/update'; | ||
| import { Resources } from '@/constants/kube-object'; | ||
| import { dumpKubeObject } from '@/utils/yaml'; | ||
| import useMessage from 'antd/lib/message/useMessage'; | ||
|
|
||
| type RevealableInput = { | ||
| name: string; | ||
| initValue: string; | ||
| onChange?: (value: string) => void; | ||
| }; | ||
|
|
||
| const SecretDataInput = ({ name, initValue, onChange }: RevealableInput) => { | ||
| const [revealed, setRevealed] = React.useState(false); | ||
| const [value, setValue] = React.useState(initValue); | ||
| return ( | ||
| <div> | ||
| <div className="mb-1">{name}</div> | ||
| <Space> | ||
| <Input.TextArea | ||
| disabled={!revealed} | ||
| autoSize={{ maxRows: 20 }} | ||
| styles={{ | ||
| textarea: { | ||
| fontFamily: 'monospace', | ||
| lineHeight: 1.2, | ||
| width: '478px' | ||
| } | ||
| }} | ||
| onChange={(e) => { | ||
| setValue(e.target.value); | ||
| onChange?.(e.target.value); | ||
| }} | ||
| value={revealed ? value : ''} | ||
| /> | ||
| <Button | ||
| icon={revealed ? <EyeInvisibleOutlined /> : <EyeOutlined />} | ||
| type="text" | ||
| onClick={() => setRevealed(!revealed)} | ||
| /> | ||
| </Space> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const SecretDataForm = ({ secret }: { secret: Secret }) => { | ||
| const [isSaving, setIsSaving] = React.useState(false); | ||
| const [msgApi, contextHolder] = useMessage({}); | ||
| const dataMap = React.useRef<Partial<Record<string, string>>>(secret.data).current; | ||
|
|
||
| return ( | ||
| <> | ||
| {contextHolder} | ||
| {entries(secret.data).map(([name, value]) => ( | ||
| <SecretDataInput | ||
| key={name} | ||
| name={name} | ||
| initValue={Buffer.from(value || '', 'base64').toString()} | ||
| onChange={(value) => { | ||
| dataMap[name] = Buffer.from(value, 'ascii').toString('base64'); | ||
| }} | ||
| /> | ||
| ))} | ||
| <Suspense> | ||
| <Button | ||
| style={{ width: 'max-content' }} | ||
| loading={isSaving} | ||
| onClick={() => { | ||
| setIsSaving(true); | ||
| updateResource( | ||
| dumpKubeObject<Secret>({ | ||
| ...secret, | ||
| data: dataMap | ||
| }), | ||
| secret.getName(), | ||
| Resources.Secrets | ||
| ) | ||
| .then((res) => { | ||
| if (res.code >= 300 || res.code < 200) msgApi.error(res.message); | ||
| else msgApi.success('Successfully Saved!'); | ||
| }) | ||
| .finally(() => { | ||
| setIsSaving(false); | ||
| }); | ||
| }} | ||
| > | ||
| Save | ||
| </Button> | ||
| </Suspense> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const SecretDetail = ({ obj, open, onClose }: DetailDrawerProps<Secret>) => { | ||
| if (!obj || !(obj instanceof Secret)) return null; | ||
|
|
||
| return ( | ||
| <Drawer open={open} title={`Secret: ${obj.getName()}`} onClose={onClose}> | ||
| <DrawerPanel> | ||
| <KubeObjectInfoList obj={obj} /> | ||
| </DrawerPanel> | ||
| <DrawerPanel title="Data"> | ||
| <SecretDataForm secret={obj} /> | ||
| </DrawerPanel> | ||
| </Drawer> | ||
| ); | ||
| }; | ||
|
|
||
| export default SecretDetail; |
Oops, something went wrong.