LiteSun commented on code in PR #3014:
URL: https://github.com/apache/apisix-dashboard/pull/3014#discussion_r2075537278
##########
src/routes/ssls/index.tsx:
##########
@@ -1,9 +1,121 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/ssls/')({
- component: RouteComponent,
-})
+import { queryClient } from '@/config/global';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+import type { APISIXType } from '@/types/schema/apisix';
+import { ProTable } from '@ant-design/pro-components';
+import type { ProColumns } from '@ant-design/pro-components';
+import { useEffect, useMemo } from 'react';
+import PageHeader from '@/components/page/PageHeader';
+import { ToAddPageBtn } from '@/components/page/ToAddPageBtn';
+import { AntdConfigProvider } from '@/config/antdConfigProvider';
+import { usePagination } from '@/utils/usePagination';
+import { pageSearchSchema } from '@/types/schema/pageSearch';
+import { getSSLListQueryOptions } from '@/apis/ssls';
function RouteComponent() {
- return <div>Hello "/ssl/"!</div>
+ const { t } = useTranslation();
+
+ const { pagination, handlePageChange, updateTotal } = usePagination({
+ queryKey: 'ssls',
+ });
+
+ const sslsQuery = useSuspenseQuery(getSSLListQueryOptions(pagination));
+ const { data, isLoading } = sslsQuery;
+
+ useEffect(() => {
+ if (data?.total) {
+ updateTotal(data.total);
Review Comment:
put `updateTotal` to usePagination will be better.
##########
src/config/constant.ts:
##########
@@ -12,6 +12,7 @@ export const API_GLOBAL_RULES = '/global_rules';
export const API_PLUGINS = '/plugins';
export const API_PLUGINS_LIST = '/plugins/list';
export const API_PLUGIN_METADATA = '/plugin_metadata';
+export const API_SSLS = `/ssls`;
Review Comment:
```suggestion
export const API_SSLS = '/ssls';
```
##########
src/routes/ssls/index.tsx:
##########
@@ -1,9 +1,121 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/ssls/')({
- component: RouteComponent,
-})
+import { queryClient } from '@/config/global';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+import type { APISIXType } from '@/types/schema/apisix';
+import { ProTable } from '@ant-design/pro-components';
+import type { ProColumns } from '@ant-design/pro-components';
+import { useEffect, useMemo } from 'react';
+import PageHeader from '@/components/page/PageHeader';
+import { ToAddPageBtn } from '@/components/page/ToAddPageBtn';
+import { AntdConfigProvider } from '@/config/antdConfigProvider';
+import { usePagination } from '@/utils/usePagination';
+import { pageSearchSchema } from '@/types/schema/pageSearch';
+import { getSSLListQueryOptions } from '@/apis/ssls';
function RouteComponent() {
- return <div>Hello "/ssl/"!</div>
+ const { t } = useTranslation();
+
+ const { pagination, handlePageChange, updateTotal } = usePagination({
+ queryKey: 'ssls',
+ });
+
+ const sslsQuery = useSuspenseQuery(getSSLListQueryOptions(pagination));
+ const { data, isLoading } = sslsQuery;
+
+ useEffect(() => {
+ if (data?.total) {
+ updateTotal(data.total);
+ }
+ }, [data?.total, updateTotal]);
+
+ const columns = useMemo<ProColumns<APISIXType['RespSSLItem']>[]>(() => {
+ return [
+ {
+ dataIndex: ['value', 'id'],
+ title: 'ID',
+ key: 'id',
+ valueType: 'text',
+ },
+ {
+ dataIndex: ['value', 'sni'],
+ title: 'SNI',
+ key: 'sni',
+ valueType: 'text',
+ render: (_, record) => {
+ // Show sni if available, otherwise show the first snis entry
+ const sni = record.value.sni;
+ const snis = record.value.snis;
+ if (sni) return sni;
+ if (snis && snis.length > 0) return snis.join(', ');
+ return '-';
+ },
+ },
+ {
+ dataIndex: ['value', 'status'],
+ title: t('form.basic.status'),
+ key: 'status',
+ valueEnum: {
+ 1: { text: t('enabled'), status: 'Success' },
+ 0: { text: t('disabled'), status: 'Error' },
+ },
+ },
+ {
+ title: t('actions'),
+ valueType: 'option',
+ key: 'option',
+ width: 120,
+ // render: (_, record) => [],
Review Comment:
?
##########
src/components/form-slice/FormPartSSL/FormItemCertKeyList.tsx:
##########
@@ -0,0 +1,107 @@
+import { Button, Fieldset, Stack, type FieldsetProps } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { FormSection } from '../FormSection';
+import type { SSLPostType } from './schema';
+import type { PropsWithChildren } from 'react';
+import { FormItemTextareaWithUpload } from
'@/components/form/TextareaWithUpload';
+import IconDelete from '~icons/material-symbols/delete-forever-outline';
+
+const PairWrapper = (
+ props: PropsWithChildren & Pick<FieldsetProps, 'legend'>
+) => {
+ const { children, legend } = props;
+ return (
+ <Fieldset p={8} mb={5} legend={legend}>
+ <Stack flex={1} gap={1}>
+ {children}
+ </Stack>
+ </Fieldset>
+ );
+};
+
+const RequiredCertKey = () => {
+ const { t } = useTranslation();
+ const { control } = useFormContext<SSLPostType>();
+ return (
+ <PairWrapper>
+ <FormItemTextareaWithUpload
+ control={control}
+ label={`${t('form.ssls.cert')} 1`}
Review Comment:
static number?
##########
src/components/form-slice/FormPartSSL/FormItemCertKeyList.tsx:
##########
@@ -0,0 +1,107 @@
+import { Button, Fieldset, Stack, type FieldsetProps } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { FormSection } from '../FormSection';
+import type { SSLPostType } from './schema';
+import type { PropsWithChildren } from 'react';
+import { FormItemTextareaWithUpload } from
'@/components/form/TextareaWithUpload';
+import IconDelete from '~icons/material-symbols/delete-forever-outline';
+
+const PairWrapper = (
+ props: PropsWithChildren & Pick<FieldsetProps, 'legend'>
+) => {
+ const { children, legend } = props;
+ return (
+ <Fieldset p={8} mb={5} legend={legend}>
+ <Stack flex={1} gap={1}>
+ {children}
+ </Stack>
+ </Fieldset>
+ );
+};
+
+const RequiredCertKey = () => {
+ const { t } = useTranslation();
+ const { control } = useFormContext<SSLPostType>();
+ return (
+ <PairWrapper>
+ <FormItemTextareaWithUpload
+ control={control}
+ label={`${t('form.ssls.cert')} 1`}
+ name="cert"
+ required
+ />
+ <FormItemTextareaWithUpload
+ control={control}
+ label={`${t('form.ssls.key')} 1`}
+ name="key"
+ required
+ />
+ </PairWrapper>
+ );
+};
+const CertKeyPairList = () => {
+ const { t } = useTranslation();
+ const certs = useFieldArray({
+ name: 'certs',
+ });
+ const keys = useFieldArray({
+ name: 'keys',
+ });
+ return (
+ <>
+ {certs.fields.map((cert, idx) => (
+ <PairWrapper
+ key={cert.id}
+ legend={
+ <Button
+ leftSection={<IconDelete />}
+ justify="flex-end"
+ size="compact-xs"
+ color="red"
+ variant="outline"
+ onClick={() => {
+ certs.remove(idx);
+ keys.remove(idx);
+ }}
+ >
+ {t('form.ssls.cert_key_list.delete')}
+ </Button>
+ }
+ >
+ <FormItemTextareaWithUpload
+ key={cert.id}
+ name={`certs.${idx}`}
+ label={`${t('form.ssls.cert')} ${idx + 2}`}
Review Comment:
ditto
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscr...@apisix.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
