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';
export interface DetailsProps {
subject: SchemaName;
schema: SchemaSubject;
clusterName: ClusterName;
versions: SchemaSubject[];
@ -19,6 +20,7 @@ export interface DetailsProps {
}
const Details: React.FC<DetailsProps> = ({
subject,
schema,
clusterName,
fetchSchemaVersions,
@ -26,8 +28,9 @@ const Details: React.FC<DetailsProps> = ({
isFetched,
}) => {
React.useEffect(() => {
fetchSchemaVersions(clusterName, schema.subject as SchemaName);
fetchSchemaVersions(clusterName, subject);
}, [fetchSchemaVersions, clusterName]);
return (
<div className="section">
<div className="level">
@ -39,59 +42,61 @@ const Details: React.FC<DetailsProps> = ({
},
]}
>
{schema.subject}
{subject}
</Breadcrumb>
</div>
<div className="box">
<div className="level">
<div className="level-left">
<div className="level-item">
<div className="mr-1">
<b>Latest Version</b>
{isFetched ? (
<>
<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">
#{schema.version}
</div>
</div>
</div>
<div className="tag is-info is-light" title="Version">
#{schema.version}
<div className="level-right">
<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>
<LatestVersionItem schema={schema} />
</div>
<div className="level-right">
<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 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>
</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 />
)}

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

@ -24,6 +24,7 @@ const mapStateToProps = (
},
}: OwnProps
) => ({
subject,
schema: getSchema(state, subject),
versions: getSortedSchemaVersions(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
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>
<PageLoader />
@ -209,9 +143,7 @@ exports[`Details View when page with schema versions loaded when schema has vers
},
]
}
>
test
</Breadcrumb>
/>
</div>
<div
className="box"
@ -343,9 +275,7 @@ exports[`Details View when page with schema versions loaded when versions are em
},
]
}
>
test
</Breadcrumb>
/>
</div>
<div
className="box"