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

Updated JSONViewer

Browse source
This commit is contained in:
Guzel Kafizova 2021-02-17 13:31:26 +03:00
parent 0e05605009
commit 438618fb1c
6 changed files with 61 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -45,39 +45,43 @@ const Details: React.FC<DetailsProps> = ({
</div>
</div>
<div className="box">
<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 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>
<button
className="button is-info is-small level-item"
type="button"
title="work in progress"
disabled
>
Create Schema
</button>
<button
className="button is-warning is-small level-item"
type="button"
title="work in progress"
disabled
>
Update Schema
</button>
<button
className="button is-danger is-small level-item"
type="button"
title="work in progress"
disabled
>
Delete
</button>
<div className="level-right">
<button
className="button is-primary is-small level-item"
type="button"
title="work in progress"
disabled
>
Create Schema
</button>
<button
className="button is-warning is-small level-item"
type="button"
title="work in progress"
disabled
>
Update Schema
</button>
<button
className="button is-danger is-small level-item"
type="button"
title="work in progress"
disabled
>
Delete
</button>
</div>
</div>
<div className="tile is-ancestor mt-1">
<div className="tile is-4 is-parent">
@ -109,7 +113,7 @@ const Details: React.FC<DetailsProps> = ({
</div>
</div>
<div className="box">
<table className="table is-fullwidth">
<table className="table is-striped is-fullwidth">
<thead>
<tr>
<th>Version</th>

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

@ -1,6 +1,6 @@
import React from 'react';
import { SchemaSubject } from 'generated-sources';
import JSONTree from 'react-json-tree';
import JSONViewer from 'components/common/JSONViewer/JSONViewer';
interface SchemaVersionProps {
version: SchemaSubject;
@ -9,33 +9,12 @@ interface SchemaVersionProps {
const SchemaVersion: React.FC<SchemaVersionProps> = ({
version: { version, id, schema },
}) => {
const themeJsonTree = {
scheme: 'google',
author: 'seth wright (http://sethawright.com)',
base00: '#1d1f21',
base01: '#282a2e',
base02: '#373b41',
base03: '#969896',
base04: '#b4b7b4',
base05: '#c5c8c6',
base06: '#e0e0e0',
base07: '#ffffff',
base08: '#CC342B',
base09: '#F96A38',
base0A: '#FBA922',
base0B: '#198844',
base0C: '#3971ED',
base0D: '#3971ED',
base0E: '#A36AC7',
base0F: '#3971ED',
};
return (
<tr>
<td>{version}</td>
<td>{id}</td>
<td className="py-0">
<JSONTree data={JSON.parse(schema as string)} theme={themeJsonTree} />
<JSONViewer data={JSON.parse(schema as string)} />
</td>
</tr>
);

4
kafka-ui-react-app/src/components/common/JSONViewer/JSONViewer.tsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import JSONTree from 'react-json-tree';
import theme from './themes/grayscale';
import theme from './themes/google';
interface JSONViewerProps {
data: {
@ -9,7 +9,7 @@ interface JSONViewerProps {
}
const JSONViewer: React.FC<JSONViewerProps> = ({ data }) => (
<JSONTree data={data} theme={theme} invertTheme={false} hideRoot />
<JSONTree data={data} theme={theme} shouldExpandNode={() => true} hideRoot />
);
export default JSONViewer;

20
kafka-ui-react-app/src/components/common/JSONViewer/themes/google.ts Normal file
View file

@ -0,0 +1,20 @@
export default {
scheme: 'google',
author: 'seth wright (http://sethawright.com)',
base00: '#1d1f21',
base01: '#282a2e',
base02: '#373b41',
base03: '#969896',
base04: '#b4b7b4',
base05: '#c5c8c6',
base06: '#e0e0e0',
base07: '#ffffff',
base08: '#CC342B',
base09: '#F96A38',
base0A: '#FBA922',
base0B: '#198844',
base0C: '#3971ED',
base0D: '#3971ED',
base0E: '#A36AC7',
base0F: '#3971ED',
};

20
kafka-ui-react-app/src/components/common/JSONViewer/themes/grayscale.ts
View file

@ -1,20 +0,0 @@
export default {
scheme: 'grayscale',
author: 'alexandre gavioli (https://github.com/alexx2/)',
base00: '#101010',
base01: '#252525',
base02: '#464646',
base03: '#525252',
base04: '#ababab',
base05: '#b9b9b9',
base06: '#e3e3e3',
base07: '#f7f7f7',
base08: '#7c7c7c',
base09: '#999999',
base0A: '#a0a0a0',
base0B: '#8e8e8e',
base0C: '#868686',
base0D: '#686868',
base0E: '#747474',
base0F: '#5e5e5e',
};

3
kafka-ui-react-app/src/redux/actions/thunks.ts
View file

@ -267,9 +267,8 @@ export const fetchSchemasByClusterName = (
export const fetchSchemaVersions = (
clusterName: ClusterName,
subject: SchemaName
// eslint-disable-next-line consistent-return
): PromiseThunk<void> => async (dispatch) => {
if (!subject) return Promise.resolve();
if (!subject) return;
dispatch(actions.fetchSchemaVersionsAction.request());
try {
const versions = await apiClient.getAllVersionsBySubject({