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

[CHORE] Get rid of react-json-tree (#387)

Browse source
This commit is contained in:
Oleg Shur 2021-04-23 13:50:13 +03:00 • committed by GitHub
parent f935083b09
commit 993db2fc00
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 425 additions and 511 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
kafka-ui-react-app/package.json
View file

@ -21,7 +21,6 @@
"react-datepicker": "^3.7.0",
"react-dom": "^17.0.1",
"react-hook-form": "^6.15.5",
"react-json-tree": "^0.15.0",
"react-multi-select-component": "^4.0.0",
"react-redux": "^7.2.2",
"react-router": "^5.2.0",

46
kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
View file

@ -54,30 +54,28 @@ const Details: React.FC<Props> = ({
{isFetched ? (
<div className="box">
<div className="table-container">
<table className="table is-striped is-fullwidth">
<thead>
<tr>
<th>Consumer ID</th>
<th>Host</th>
<th>Topic</th>
<th>Partition</th>
<th>Messages behind</th>
<th>Current offset</th>
<th>End offset</th>
</tr>
</thead>
<tbody>
{items.map((consumer) => (
<ListItem
key={consumer.consumerId}
clusterName={clusterName}
consumer={consumer}
/>
))}
</tbody>
</table>
</div>
<table className="table is-striped is-fullwidth">
<thead>
<tr>
<th>Consumer ID</th>
<th>Host</th>
<th>Topic</th>
<th>Partition</th>
<th>Messages behind</th>
<th>Current offset</th>
<th>End offset</th>
</tr>
</thead>
<tbody>
{items.map((consumer) => (
<ListItem
key={consumer.consumerId}
clusterName={clusterName}
consumer={consumer}
/>
))}
</tbody>
</table>
</div>
) : (
<PageLoader />

48
kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx
View file

@ -37,31 +37,29 @@ const List: React.FC<Props> = ({ consumerGroups }) => {
/>
</div>
</div>
<div className="table-container">
<table className="table is-striped is-fullwidth is-hoverable">
<thead>
<tr>
<th>Consumer group ID</th>
<th>Num of consumers</th>
<th>Num of topics</th>
</tr>
</thead>
<tbody>
{consumerGroups
.filter(
(consumerGroup) =>
!searchText ||
consumerGroup?.consumerGroupId?.indexOf(searchText) >= 0
)
.map((consumerGroup) => (
<ListItem
key={consumerGroup.consumerGroupId}
consumerGroup={consumerGroup}
/>
))}
</tbody>
</table>
</div>
<table className="table is-striped is-fullwidth is-hoverable">
<thead>
<tr>
<th>Consumer group ID</th>
<th>Num of consumers</th>
<th>Num of topics</th>
</tr>
</thead>
<tbody>
{consumerGroups
.filter(
(consumerGroup) =>
!searchText ||
consumerGroup?.consumerGroupId?.indexOf(searchText) >= 0
)
.map((consumerGroup) => (
<ListItem
key={consumerGroup.consumerGroupId}
consumerGroup={consumerGroup}
/>
))}
</tbody>
</table>
</div>
) : (
'No active consumer groups'

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

@ -112,22 +112,20 @@ const Details: React.FC<DetailsProps> = ({
<LatestVersionItem schema={schema} />
</div>
<div className="box">
<div className="table-container">
<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>
<table className="table 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>
</>
) : (

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

@ -1,6 +1,6 @@
import React from 'react';
import { SchemaSubject } from 'generated-sources';
import JSONViewer from 'components/common/JSONViewer/JSONViewer';
import JSONEditor from 'components/common/JSONEditor/JSONEditor';
interface LatestVersionProps {
schema: SchemaSubject;
@ -12,29 +12,32 @@ const LatestVersionItem: React.FC<LatestVersionProps> = ({
<div className="tile is-ancestor mt-1">
<div className="tile is-4 is-parent">
<div className="tile is-child">
<div className="table-container">
<table className="table is-fullwidth">
<tbody>
<tr>
<td>ID</td>
<td>{id}</td>
</tr>
<tr>
<td>Subject</td>
<td>{subject}</td>
</tr>
<tr>
<td>Compatibility</td>
<td>{compatibilityLevel}</td>
</tr>
</tbody>
</table>
</div>
<table className="table is-fullwidth">
<tbody>
<tr>
<td>ID</td>
<td>{id}</td>
</tr>
<tr>
<td>Subject</td>
<td>{subject}</td>
</tr>
<tr>
<td>Compatibility</td>
<td>{compatibilityLevel}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="tile is-parent">
<div className="tile is-child box py-1">
<JSONViewer data={JSON.parse(schema)} />
<div className="tile is-child box">
<JSONEditor
name="schema"
value={JSON.stringify(JSON.parse(schema), null, '\t')}
showGutter={false}
readOnly
/>
</div>
</div>
</div>

11
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 JSONViewer from 'components/common/JSONViewer/JSONViewer';
import JSONEditor from 'components/common/JSONEditor/JSONEditor';
interface SchemaVersionProps {
version: SchemaSubject;
@ -13,8 +13,13 @@ const SchemaVersion: React.FC<SchemaVersionProps> = ({
<tr>
<td>{version}</td>
<td>{id}</td>
<td className="py-0">
<JSONViewer data={JSON.parse(schema)} />
<td>
<JSONEditor
name="schema"
value={JSON.stringify(JSON.parse(schema), null, '\t')}
showGutter={false}
readOnly
/>
</td>
</tr>
);

2
kafka-ui-react-app/src/components/Schemas/Details/__test__/LatestVersionItem.spec.tsx
View file

@ -10,7 +10,7 @@ describe('LatestVersionItem', () => {
expect(wrapper.find('table').length).toEqual(1);
expect(wrapper.find('td').at(1).text()).toEqual('1');
expect(wrapper.exists('JSONViewer')).toBeTruthy();
expect(wrapper.exists('JSONEditor')).toBeTruthy();
});
it('matches snapshot', () => {

2
kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx
View file

@ -9,7 +9,7 @@ describe('SchemaVersion', () => {
const wrapper = shallow(<SchemaVersion version={versions[0]} />);
expect(wrapper.find('td').length).toEqual(3);
expect(wrapper.exists('JSONViewer')).toBeTruthy();
expect(wrapper.exists('JSONEditor')).toBeTruthy();
});
it('matches snapshot', () => {

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

@ -94,28 +94,24 @@ exports[`Details View Initial state matches snapshot 1`] = `
<div
className="box"
>
<div
className="table-container"
<table
className="table is-fullwidth"
>
<table
className="table is-striped is-fullwidth"
>
<thead>
<tr>
<th>
Version
</th>
<th>
ID
</th>
<th>
Schema
</th>
</tr>
</thead>
<tbody />
</table>
</div>
<thead>
<tr>
<th>
Version
</th>
<th>
ID
</th>
<th>
Schema
</th>
</tr>
</thead>
<tbody />
</table>
</div>
</div>
`;
@ -238,55 +234,51 @@ exports[`Details View when page with schema versions loaded when schema has vers
<div
className="box"
>
<div
className="table-container"
<table
className="table is-fullwidth"
>
<table
className="table is-striped is-fullwidth"
>
<thead>
<tr>
<th>
Version
</th>
<th>
ID
</th>
<th>
Schema
</th>
</tr>
</thead>
<tbody>
<SchemaVersion
key="1"
version={
Object {
"compatibilityLevel": "BACKWARD",
"id": 1,
"schema": "{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord1\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}",
"schemaType": "JSON",
"subject": "test",
"version": "1",
}
<thead>
<tr>
<th>
Version
</th>
<th>
ID
</th>
<th>
Schema
</th>
</tr>
</thead>
<tbody>
<SchemaVersion
key="1"
version={
Object {
"compatibilityLevel": "BACKWARD",
"id": 1,
"schema": "{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord1\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}",
"schemaType": "JSON",
"subject": "test",
"version": "1",
}
/>
<SchemaVersion
key="2"
version={
Object {
"compatibilityLevel": "BACKWARD",
"id": 2,
"schema": "{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord2\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}",
"schemaType": "JSON",
"subject": "test",
"version": "2",
}
}
/>
<SchemaVersion
key="2"
version={
Object {
"compatibilityLevel": "BACKWARD",
"id": 2,
"schema": "{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord2\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}",
"schemaType": "JSON",
"subject": "test",
"version": "2",
}
/>
</tbody>
</table>
</div>
}
/>
</tbody>
</table>
</div>
</div>
`;
@ -385,28 +377,24 @@ exports[`Details View when page with schema versions loaded when versions are em
<div
className="box"
>
<div
className="table-container"
<table
className="table is-fullwidth"
>
<table
className="table is-striped is-fullwidth"
>
<thead>
<tr>
<th>
Version
</th>
<th>
ID
</th>
<th>
Schema
</th>
</tr>
</thead>
<tbody />
</table>
</div>
<thead>
<tr>
<th>
Version
</th>
<th>
ID
</th>
<th>
Schema
</th>
</tr>
</thead>
<tbody />
</table>
</div>
</div>
`;

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

@ -10,62 +10,59 @@ exports[`LatestVersionItem matches snapshot 1`] = `
<div
className="tile is-child"
>
<div
className="table-container"
<table
className="table is-fullwidth"
>
<table
className="table is-fullwidth"
>
<tbody>
<tr>
<td>
ID
</td>
<td>
1
</td>
</tr>
<tr>
<td>
Subject
</td>
<td>
test
</td>
</tr>
<tr>
<td>
Compatibility
</td>
<td>
BACKWARD
</td>
</tr>
</tbody>
</table>
</div>
<tbody>
<tr>
<td>
ID
</td>
<td>
1
</td>
</tr>
<tr>
<td>
Subject
</td>
<td>
test
</td>
</tr>
<tr>
<td>
Compatibility
</td>
<td>
BACKWARD
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
className="tile is-parent"
>
<div
className="tile is-child box py-1"
className="tile is-child box"
>
<JSONViewer
data={
Object {
"fields": Array [
Object {
"name": "id",
"type": "long",
},
],
"name": "MyRecord1",
"namespace": "com.mycompany",
"type": "record",
}
}
<JSONEditor
name="schema"
readOnly={true}
showGutter={false}
value="{
\\"type\\": \\"record\\",
\\"name\\": \\"MyRecord1\\",
\\"namespace\\": \\"com.mycompany\\",
\\"fields\\": [
{
\\"name\\": \\"id\\",
\\"type\\": \\"long\\"
}
]
}"
/>
</div>
</div>

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

@ -8,23 +8,22 @@ exports[`SchemaVersion matches snapshot 1`] = `
<td>
1
</td>
<td
className="py-0"
>
<JSONViewer
data={
Object {
"fields": Array [
Object {
"name": "id",
"type": "long",
},
],
"name": "MyRecord1",
"namespace": "com.mycompany",
"type": "record",
}
}
<td>
<JSONEditor
name="schema"
readOnly={true}
showGutter={false}
value="{
\\"type\\": \\"record\\",
\\"name\\": \\"MyRecord1\\",
\\"namespace\\": \\"com.mycompany\\",
\\"fields\\": [
{
\\"name\\": \\"id\\",
\\"type\\": \\"long\\"
}
]
}"
/>
</td>
</tr>

21
kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx
View file

@ -1,16 +1,16 @@
import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
import React from 'react';
import { useHistory } from 'react-router';
import { useForm, Controller } from 'react-hook-form';
import {
CompatibilityLevelCompatibilityEnum,
SchemaSubject,
SchemaType,
} from 'generated-sources';
import { clusterSchemaPath, clusterSchemasPath } from 'lib/paths';
import React from 'react';
import { ClusterName, NewSchemaSubjectRaw, SchemaName } from 'redux/interfaces';
import PageLoader from 'components/common/PageLoader/PageLoader';
import { useHistory } from 'react-router';
import JSONEditor from 'components/common/JSONEditor/JSONEditor';
import { useForm } from 'react-hook-form';
import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
export interface EditProps {
subject: SchemaName;
@ -143,17 +143,24 @@ const Edit = ({
<div className="column is-one-half">
<h4 className="title is-5 mb-2">Latest Schema</h4>
<JSONEditor
readonly
readOnly
value={getFormattedSchema()}
name="latestSchema"
highlightActiveLine={false}
/>
</div>
<div className="column is-one-half">
<h4 className="title is-5 mb-2">New Schema</h4>
<JSONEditor
<Controller
control={control}
value={getFormattedSchema()}
name="newSchema"
render={({ name, onChange }) => (
<JSONEditor
defaultValue={getFormattedSchema()}
name={name}
onChange={onChange}
/>
)}
/>
</div>
</div>

5
kafka-ui-react-app/src/components/Schemas/Edit/__tests__/Edit.spec.tsx
View file

@ -54,7 +54,10 @@ describe('Edit Component', () => {
expect(component).toMatchSnapshot();
});
it('shows editor', () => {
expect(component.find('JSONEditor').length).toEqual(2);
expect(component.find('JSONEditor[name="latestSchema"]').length).toEqual(
1
);
expect(component.find('Controller[name="newSchema"]').length).toEqual(1);
expect(component.find('button').exists()).toBeTruthy();
});
it('does not fetch them', () => {

9
kafka-ui-react-app/src/components/Schemas/Edit/__tests__/__snapshots__/Edit.spec.tsx.snap
View file

@ -143,8 +143,9 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
Latest Schema
</h4>
<JSONEditor
highlightActiveLine={false}
name="latestSchema"
readonly={true}
readOnly={true}
value="{
\\"schema\\": \\"schema\\"
}"
@ -158,7 +159,7 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
>
New Schema
</h4>
<JSONEditor
<Controller
control={
Object {
"defaultValuesRef": Object {
@ -261,9 +262,7 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
}
}
name="newSchema"
value="{
\\"schema\\": \\"schema\\"
}"
render={[Function]}
/>
</div>
</div>

36
kafka-ui-react-app/src/components/Schemas/List/List.tsx
View file

@ -49,27 +49,25 @@ const List: React.FC<ListProps> = ({
<PageLoader />
) : (
<div className="box">
<div className="table-container">
<table className="table is-striped is-fullwidth">
<thead>
<table className="table is-striped is-fullwidth">
<thead>
<tr>
<th>Schema Name</th>
<th>Version</th>
<th>Compatibility</th>
</tr>
</thead>
<tbody>
{schemas.length === 0 && (
<tr>
<th>Schema Name</th>
<th>Version</th>
<th>Compatibility</th>
<td colSpan={10}>No schemas found</td>
</tr>
</thead>
<tbody>
{schemas.length === 0 && (
<tr>
<td colSpan={10}>No schemas found</td>
</tr>
)}
{schemas.map((subject) => (
<ListItem key={subject.id} subject={subject} />
))}
</tbody>
</table>
</div>
)}
{schemas.map((subject) => (
<ListItem key={subject.id} subject={subject} />
))}
</tbody>
</table>
</div>
)}
</div>

54
kafka-ui-react-app/src/components/Topics/List/List.tsx
View file

@ -88,36 +88,34 @@ const List: React.FC<Props> = ({
<PageLoader />
) : (
<div className="box">
<div className="table-container">
<table className="table is-fullwidth">
<thead>
<table className="table is-fullwidth">
<thead>
<tr>
<th>Topic Name</th>
<th>Total Partitions</th>
<th>Out of sync replicas</th>
<th>Type</th>
<th> </th>
</tr>
</thead>
<tbody>
{items.map((topic) => (
<ListItem
clusterName={clusterName}
key={topic.name}
topic={topic}
deleteTopic={deleteTopic}
clearTopicMessages={clearTopicMessages}
/>
))}
{items.length === 0 && (
<tr>
<th>Topic Name</th>
<th>Total Partitions</th>
<th>Out of sync replicas</th>
<th>Type</th>
<th> </th>
<td colSpan={10}>No topics found</td>
</tr>
</thead>
<tbody>
{items.map((topic) => (
<ListItem
clusterName={clusterName}
key={topic.name}
topic={topic}
deleteTopic={deleteTopic}
clearTopicMessages={clearTopicMessages}
/>
))}
{items.length === 0 && (
<tr>
<td colSpan={10}>No topics found</td>
</tr>
)}
</tbody>
</table>
<Pagination totalPages={totalPages} />
</div>
)}
</tbody>
</table>
<Pagination totalPages={totalPages} />
</div>
)}
</div>

16
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageItem.tsx
View file

@ -1,10 +1,9 @@
import React from 'react';
import { format } from 'date-fns';
import { TopicMessage } from 'generated-sources';
import JSONViewer from 'components/common/JSONViewer/JSONViewer';
import { isObject } from 'lodash';
import Dropdown from 'components/common/Dropdown/Dropdown';
import DropdownItem from 'components/common/Dropdown/DropdownItem';
import JSONEditor from 'components/common/JSONEditor/JSONEditor';
import useDataSaver from 'lib/hooks/useDataSaver';
export interface MessageItemProp {
@ -24,18 +23,19 @@ const MessageItem: React.FC<MessageItemProp> = ({
'topic-message',
(content as Record<string, string>) || ''
);
return (
<tr>
<td style={{ width: 200 }}>{format(timestamp, 'yyyy-MM-dd HH:mm:ss')}</td>
<td style={{ width: 150 }}>{offset}</td>
<td style={{ width: 100 }}>{partition}</td>
<td style={{ wordBreak: 'break-word' }}>
{isObject(content) ? (
<JSONViewer data={content as Record<string, string>} />
) : (
content
)}
<JSONEditor
readOnly
value={JSON.stringify(content, null, '\t')}
name="latestSchema"
highlightActiveLine={false}
height="300px"
/>
</td>
<td className="has-text-right">
<Dropdown

50
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx
View file

@ -16,32 +16,30 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
return (
<>
<div className="table-container">
<table className="table is-fullwidth">
<thead>
<tr>
<th>Timestamp</th>
<th>Offset</th>
<th>Partition</th>
<th>Content</th>
<th> </th>
</tr>
</thead>
<tbody>
{messages.map(
({ partition, offset, timestamp, content }: TopicMessage) => (
<MessageItem
key={`message-${timestamp.getTime()}-${offset}`}
partition={partition}
offset={offset}
timestamp={timestamp}
content={content}
/>
)
)}
</tbody>
</table>
</div>
<table className="table is-fullwidth">
<thead>
<tr>
<th>Timestamp</th>
<th>Offset</th>
<th>Partition</th>
<th>Content</th>
<th> </th>
</tr>
</thead>
<tbody>
{messages.map(
({ partition, offset, timestamp, content }: TopicMessage) => (
<MessageItem
key={`message-${timestamp.getTime()}-${offset}`}
partition={partition}
offset={offset}
timestamp={timestamp}
content={content}
/>
)
)}
</tbody>
</table>
<div className="columns">
<div className="column is-full">
<CustomParamButton

12
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageItem.spec.tsx
View file

@ -10,12 +10,12 @@ jest.mock('date-fns', () => ({
describe('MessageItem', () => {
describe('when content is defined', () => {
it('renders table row with JSONTree', () => {
it('renders table row with JSONEditor', () => {
const wrapper = shallow(<MessageItem {...messages[0]} />);
expect(wrapper.find('tr').length).toEqual(1);
expect(wrapper.find('td').length).toEqual(5);
expect(wrapper.find('JSONViewer').length).toEqual(1);
expect(wrapper.find('JSONEditor').length).toEqual(1);
});
it('matches snapshot', () => {
@ -24,14 +24,6 @@ describe('MessageItem', () => {
});
describe('when content is undefined', () => {
it('renders table row without JSONTree', () => {
const wrapper = shallow(<MessageItem {...messages[1]} />);
expect(wrapper.find('tr').length).toEqual(1);
expect(wrapper.find('td').length).toEqual(5);
expect(wrapper.find('JSONViewer').length).toEqual(0);
});
it('matches snapshot', () => {
expect(shallow(<MessageItem {...messages[1]} />)).toMatchSnapshot();
});

4
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx
View file

@ -65,8 +65,8 @@ describe('Messages', () => {
it('renders table', () => {
expect(messagesWrapper.exists('.table.is-fullwidth')).toBeTruthy();
});
it('renders JSONTree', () => {
expect(messagesWrapper.find('JSONTree').length).toEqual(1);
it('renders JSONEditor', () => {
expect(messagesWrapper.find('JSONEditor').length).toEqual(1);
});
it('parses message content correctly', () => {
const messages = [

4
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessagesTable.spec.tsx
View file

@ -16,7 +16,7 @@ describe('MessagesTable', () => {
);
describe('when topic is empty', () => {
it('renders table row with JSONTree', () => {
it('renders table row with JSONEditor', () => {
const wrapper = shallow(setupWrapper());
expect(wrapper.exists('table')).toBeFalsy();
expect(wrapper.exists('CustomParamButton')).toBeFalsy();
@ -32,7 +32,7 @@ describe('MessagesTable', () => {
const onNext = jest.fn();
const wrapper = shallow(setupWrapper({ messages, onNext }));
it('renders table row without JSONTree', () => {
it('renders table row without JSONEditor', () => {
expect(wrapper.exists('table')).toBeTruthy();
expect(wrapper.exists('CustomParamButton')).toBeTruthy();
expect(wrapper.find('MessageItem').length).toEqual(2);

25
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageItem.spec.tsx.snap
View file

@ -36,13 +36,15 @@ exports[`MessageItem when content is defined matches snapshot 1`] = `
}
}
>
<JSONViewer
data={
Object {
"foo": "bar",
"key": "val",
}
}
<JSONEditor
height="300px"
highlightActiveLine={false}
name="latestSchema"
readOnly={true}
value="{
\\"foo\\": \\"bar\\",
\\"key\\": \\"val\\"
}"
/>
</td>
<td
@ -110,7 +112,14 @@ exports[`MessageItem when content is undefined matches snapshot 1`] = `
"wordBreak": "break-word",
}
}
/>
>
<JSONEditor
height="300px"
highlightActiveLine={false}
name="latestSchema"
readOnly={true}
/>
</td>
<td
className="has-text-right"
>

86
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessagesTable.spec.tsx.snap
View file

@ -2,53 +2,49 @@
exports[`MessagesTable when topic contains messages matches snapshot 1`] = `
<Fragment>
<div
className="table-container"
<table
className="table is-fullwidth"
>
<table
className="table is-fullwidth"
>
<thead>
<tr>
<th>
Timestamp
</th>
<th>
Offset
</th>
<th>
Partition
</th>
<th>
Content
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<MessageItem
content={
Object {
"foo": "bar",
"key": "val",
}
<thead>
<tr>
<th>
Timestamp
</th>
<th>
Offset
</th>
<th>
Partition
</th>
<th>
Content
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<MessageItem
content={
Object {
"foo": "bar",
"key": "val",
}
key="message-802310400000-2"
offset={2}
partition={1}
timestamp={1995-06-05T00:00:00.000Z}
/>
<MessageItem
key="message-1596585600000-20"
offset={20}
partition={2}
timestamp={2020-08-05T00:00:00.000Z}
/>
</tbody>
</table>
</div>
}
key="message-802310400000-2"
offset={2}
partition={1}
timestamp={1995-06-05T00:00:00.000Z}
/>
<MessageItem
key="message-1596585600000-20"
offset={20}
partition={2}
timestamp={2020-08-05T00:00:00.000Z}
/>
</tbody>
</table>
<div
className="columns"
>

30
kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/Settings.tsx
View file

@ -47,22 +47,20 @@ const Settings: React.FC<Props> = ({
return (
<div className="box">
<div className="table-container">
<table className="table is-striped is-fullwidth">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
<th>Default Value</th>
</tr>
</thead>
<tbody>
{config.map((item) => (
<ConfigListItem key={item.name} config={item} />
))}
</tbody>
</table>
</div>
<table className="table is-striped is-fullwidth">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
<th>Default Value</th>
</tr>
</thead>
<tbody>
{config.map((item) => (
<ConfigListItem key={item.name} config={item} />
))}
</tbody>
</table>
</div>
);
};

64
kafka-ui-react-app/src/components/common/JSONEditor/JSONEditor.tsx
View file

@ -1,56 +1,18 @@
import AceEditor from 'react-ace';
/* eslint-disable react/jsx-props-no-spreading */
import AceEditor, { IAceEditorProps } from 'react-ace';
import 'ace-builds/src-noconflict/mode-json5';
import 'ace-builds/src-noconflict/theme-dawn';
import 'ace-builds/src-noconflict/theme-textmate';
import React from 'react';
import { Control, Controller } from 'react-hook-form';
interface JSONEditorProps {
readonly?: boolean;
onChange?: (e: string) => void;
value: string;
name: string;
control?: Control;
}
const JSONEditor: React.FC<JSONEditorProps> = ({
readonly,
onChange,
value,
name,
control,
}) => {
if (control) {
return (
<Controller
control={control}
name={name}
as={
<AceEditor
defaultValue={value}
mode="json5"
theme="dawn"
name={name}
tabSize={2}
width="100%"
wrapEnabled
/>
}
/>
);
}
return (
<AceEditor
mode="json5"
theme="dawn"
name={name}
value={value}
tabSize={2}
width="100%"
readOnly={readonly}
onChange={onChange}
wrapEnabled
/>
);
};
const JSONEditor: React.FC<IAceEditorProps> = (props) => (
<AceEditor
mode="json5"
theme="textmate"
tabSize={2}
width="100%"
wrapEnabled
{...props}
/>
);
export default JSONEditor;

2
kafka-ui-react-app/src/components/common/JSONEditor/__tests__/__snapshots__/JSONEditor.spec.tsx.snap
View file

@ -35,7 +35,7 @@ exports[`JSONEditor component matches the snapshot 1`] = `
showPrintMargin={true}
style={Object {}}
tabSize={2}
theme="dawn"
theme="textmate"
value="{}"
width="100%"
wrapEnabled={true}

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

@ -1,13 +0,0 @@
import React from 'react';
import JSONTree from 'react-json-tree';
import theme from 'components/common/JSONViewer/themes/google';
interface JSONViewerProps {
data: Record<string, string>;
}
const JSONViewer: React.FC<JSONViewerProps> = ({ data }) => (
<JSONTree data={data} theme={theme} shouldExpandNode={() => true} hideRoot />
);
export default JSONViewer;

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

@ -1,20 +0,0 @@
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',
};

5
kafka-ui-react-app/src/redux/reducers/schemas/__test__/selectors.spec.ts
View file

@ -1,3 +1,4 @@
import { orderBy } from 'lodash';
import {
createSchemaAction,
fetchSchemasByClusterNameAction,
@ -65,9 +66,9 @@ describe('Schemas selectors', () => {
);
});
it('returns sorted versions of schema', () => {
it('returns ordered versions of schema', () => {
expect(selectors.getSortedSchemaVersions(store.getState())).toEqual(
schemaVersionsPayload
orderBy(schemaVersionsPayload, 'id', 'desc')
);
});
});

5
kafka-ui-react-app/src/redux/reducers/schemas/selectors.ts
View file

@ -1,7 +1,7 @@
import { createSelector } from 'reselect';
import { orderBy } from 'lodash';
import { RootState, SchemasState } from 'redux/interfaces';
import { createFetchingSelector } from 'redux/reducers/loader/selectors';
import { sortBy } from 'lodash';
const schemasState = ({ schemas }: RootState): SchemasState => schemas;
@ -56,5 +56,6 @@ export const getSchema = createSelector(
export const getSortedSchemaVersions = createSelector(
schemasState,
({ currentSchemaVersions }) => sortBy(currentSchemaVersions, ['id'])
({ currentSchemaVersions }) =>
orderBy(currentSchemaVersions, ['id'], ['desc'])
);