|
@@ -5,12 +5,13 @@ import { clusterSchemasPath } from 'lib/paths';
|
|
import Breadcrumb from '../../common/Breadcrumb/Breadcrumb';
|
|
import Breadcrumb from '../../common/Breadcrumb/Breadcrumb';
|
|
import SchemaVersion from './SchemaVersion';
|
|
import SchemaVersion from './SchemaVersion';
|
|
import LatestVersionItem from './LatestVersionItem';
|
|
import LatestVersionItem from './LatestVersionItem';
|
|
|
|
+import PageLoader from '../../common/PageLoader/PageLoader';
|
|
|
|
|
|
interface DetailsProps {
|
|
interface DetailsProps {
|
|
schema: SchemaSubject;
|
|
schema: SchemaSubject;
|
|
clusterName: ClusterName;
|
|
clusterName: ClusterName;
|
|
- subject: SchemaName;
|
|
|
|
versions: SchemaSubject[];
|
|
versions: SchemaSubject[];
|
|
|
|
+ isFetched: boolean;
|
|
fetchSchemaVersions: (
|
|
fetchSchemaVersions: (
|
|
clusterName: ClusterName,
|
|
clusterName: ClusterName,
|
|
schemaName: SchemaName
|
|
schemaName: SchemaName
|
|
@@ -21,13 +22,12 @@ const Details: React.FC<DetailsProps> = ({
|
|
schema,
|
|
schema,
|
|
clusterName,
|
|
clusterName,
|
|
fetchSchemaVersions,
|
|
fetchSchemaVersions,
|
|
- subject,
|
|
|
|
versions,
|
|
versions,
|
|
|
|
+ isFetched,
|
|
}) => {
|
|
}) => {
|
|
React.useEffect(() => {
|
|
React.useEffect(() => {
|
|
- fetchSchemaVersions(clusterName, subject);
|
|
|
|
|
|
+ fetchSchemaVersions(clusterName, schema.subject);
|
|
}, [fetchSchemaVersions, clusterName]);
|
|
}, [fetchSchemaVersions, clusterName]);
|
|
-
|
|
|
|
return (
|
|
return (
|
|
<div className="section">
|
|
<div className="section">
|
|
<div className="level">
|
|
<div className="level">
|
|
@@ -58,7 +58,7 @@ const Details: React.FC<DetailsProps> = ({
|
|
<button
|
|
<button
|
|
className="button is-primary is-small level-item"
|
|
className="button is-primary is-small level-item"
|
|
type="button"
|
|
type="button"
|
|
- title="work in progress"
|
|
|
|
|
|
+ title="in development"
|
|
disabled
|
|
disabled
|
|
>
|
|
>
|
|
Create Schema
|
|
Create Schema
|
|
@@ -66,7 +66,7 @@ const Details: React.FC<DetailsProps> = ({
|
|
<button
|
|
<button
|
|
className="button is-warning is-small level-item"
|
|
className="button is-warning is-small level-item"
|
|
type="button"
|
|
type="button"
|
|
- title="work in progress"
|
|
|
|
|
|
+ title="in development"
|
|
disabled
|
|
disabled
|
|
>
|
|
>
|
|
Update Schema
|
|
Update Schema
|
|
@@ -74,7 +74,7 @@ const Details: React.FC<DetailsProps> = ({
|
|
<button
|
|
<button
|
|
className="button is-danger is-small level-item"
|
|
className="button is-danger is-small level-item"
|
|
type="button"
|
|
type="button"
|
|
- title="work in progress"
|
|
|
|
|
|
+ title="in development"
|
|
disabled
|
|
disabled
|
|
>
|
|
>
|
|
Delete
|
|
Delete
|
|
@@ -83,22 +83,26 @@ const Details: React.FC<DetailsProps> = ({
|
|
</div>
|
|
</div>
|
|
<LatestVersionItem schema={schema} />
|
|
<LatestVersionItem schema={schema} />
|
|
</div>
|
|
</div>
|
|
- <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>
|
|
|
|
|
|
+ {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 />
|
|
|
|
+ )}
|
|
</div>
|
|
</div>
|
|
);
|
|
);
|
|
};
|
|
};
|