0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix error on details page of schema reg section load

Browse source
This commit is contained in:
Oleg Shuralev 2021-03-10 23:10:32 +03:00
parent 3b47cf3104
commit c2b8a79c1e
No known key found for this signature in database
GPG key ID: 99C6BDC0A1C2E647
3 changed files with 56 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
kafka-ui-react-app/src/components/Schemas/Details/Details.tsx
View file

@ -8,6 +8,7 @@ import LatestVersionItem from './LatestVersionItem';
import PageLoader from '../../common/PageLoader/PageLoader'; import PageLoader from '../../common/PageLoader/PageLoader';
export interface DetailsProps { export interface DetailsProps {
subject: SchemaName;
schema: SchemaSubject; schema: SchemaSubject;
clusterName: ClusterName; clusterName: ClusterName;
versions: SchemaSubject[]; versions: SchemaSubject[];
@ -19,6 +20,7 @@ export interface DetailsProps {
} }
const Details: React.FC<DetailsProps> = ({ const Details: React.FC<DetailsProps> = ({
subject,
schema, schema,
clusterName, clusterName,
fetchSchemaVersions, fetchSchemaVersions,
@ -26,8 +28,9 @@ const Details: React.FC<DetailsProps> = ({
isFetched, isFetched,
}) => { }) => {
React.useEffect(() => { React.useEffect(() => {
fetchSchemaVersions(clusterName, schema.subject as SchemaName); fetchSchemaVersions(clusterName, subject);
}, [fetchSchemaVersions, clusterName]); }, [fetchSchemaVersions, clusterName]);
return ( return (
<div className="section"> <div className="section">
<div className="level"> <div className="level">
@ -39,59 +42,61 @@ const Details: React.FC<DetailsProps> = ({
}, },
]} ]}
> >
{schema.subject} {subject}
</Breadcrumb> </Breadcrumb>
</div> </div>
<div className="box"> {isFetched ? (
<div className="level"> <>
<div className="level-left"> <div className="box">
<div className="level-item"> <div className="level">
<div className="mr-1"> <div className="level-left">
<b>Latest Version</b> <div className="level-item">
<div className="mr-1">
<b>Latest Version</b>
</div>
<div className="tag is-info is-light" title="Version">
#{schema.version}
</div>
</div>
</div> </div>
<div className="tag is-info is-light" title="Version"> <div className="level-right">
#{schema.version} <button
className="button is-warning is-small level-item"
type="button"
title="in development"
disabled
>
Update Schema
</button>
<button
className="button is-danger is-small level-item"
type="button"
title="in development"
disabled
>
Delete
</button>
</div> </div>
</div> </div>
<LatestVersionItem schema={schema} />
</div> </div>
<div className="level-right"> <div className="box">
<button <table className="table is-striped is-fullwidth">
className="button is-warning is-small level-item" <thead>
type="button" <tr>
title="in development" <th>Version</th>
disabled <th>ID</th>
> <th>Schema</th>
Update Schema </tr>
</button> </thead>
<button <tbody>
className="button is-danger is-small level-item" {versions.map((version) => (
type="button" <SchemaVersion key={version.id} version={version} />
title="in development" ))}
disabled </tbody>
> </table>
Delete
</button>
</div> </div>
</div> </>
<LatestVersionItem schema={schema} />
</div>
{isFetched ? (
<div className="box">
<table className="table is-striped is-fullwidth">
<thead>
<tr>
<th>Version</th>
<th>ID</th>
<th>Schema</th>
</tr>
</thead>
<tbody>
{versions.map((version) => (
<SchemaVersion key={version.id} version={version} />
))}
</tbody>
</table>
</div>
) : ( ) : (
<PageLoader /> <PageLoader />
)} )}

1
kafka-ui-react-app/src/components/Schemas/Details/DetailsContainer.ts
View file

@ -24,6 +24,7 @@ const mapStateToProps = (
}, },
}: OwnProps }: OwnProps
) => ({ ) => ({
subject,
schema: getSchema(state, subject), schema: getSchema(state, subject),
versions: getSortedSchemaVersions(state), versions: getSortedSchemaVersions(state),
isFetched: getIsSchemaVersionFetched(state), isFetched: getIsSchemaVersionFetched(state),

76
kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/Details.spec.tsx.snap
View file

@ -16,9 +16,7 @@ exports[`Details View Initial state matches snapshot 1`] = `
}, },
] ]
} }
> />
test
</Breadcrumb>
</div> </div>
<div <div
className="box" className="box"
@ -123,70 +121,6 @@ exports[`Details View when page with schema versions is loading matches snapshot
}, },
] ]
} }
>
test
</Breadcrumb>
</div>
<div
className="box"
>
<div
className="level"
>
<div
className="level-left"
>
<div
className="level-item"
>
<div
className="mr-1"
>
<b>
Latest Version
</b>
</div>
<div
className="tag is-info is-light"
title="Version"
>
#
1
</div>
</div>
</div>
<div
className="level-right"
>
<button
className="button is-warning is-small level-item"
disabled={true}
title="in development"
type="button"
>
Update Schema
</button>
<button
className="button is-danger is-small level-item"
disabled={true}
title="in development"
type="button"
>
Delete
</button>
</div>
</div>
<LatestVersionItem
schema={
Object {
"compatibilityLevel": "BACKWARD",
"id": 1,
"schema": "{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord1\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}",
"schemaType": "JSON",
"subject": "test",
"version": "1",
}
}
/> />
</div> </div>
<PageLoader /> <PageLoader />
@ -209,9 +143,7 @@ exports[`Details View when page with schema versions loaded when schema has vers
}, },
] ]
} }
> />
test
</Breadcrumb>
</div> </div>
<div <div
className="box" className="box"
@ -343,9 +275,7 @@ exports[`Details View when page with schema versions loaded when versions are em
}, },
] ]
} }
> />
test
</Breadcrumb>
</div> </div>
<div <div
className="box" className="box"