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

clusters"s table styles was fixed, added hyphens to breadcrumbs, URP … (#1384)

Browse source 
* clusters"s table styles was fixed, added hyphens to breadcrumbs, URP is not abbreviated and ISR is abbreviated already and "f0" was changed to 0

* styled component name for cluster table was changed

* adding tests for clusterwidget cells, adding title for ISR and bringing back changes in breadcrumb regarding hyphens

* fixing clusterWidget test

* fixing double scroll issue inside Topics > Messages > Content for large message content

* bring back last changes

* changing styles for scrollbar

* added required changes from reviewers and removed enzyme from clusterWidgets test
This commit is contained in:
NelyDavtyan 2022-01-19 16:14:47 +04:00 • committed by GitHub
parent 8c99cdfb50
commit 3291b85838
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 57 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx
View file

@ -37,7 +37,7 @@ const Overview: React.FC<OverviewProps> = ({
{runningTasksCount}
</Metrics.Indicator>
<Metrics.Indicator label="Tasks Failed" isAlert>
f{failedTasksCount}
{failedTasksCount}
</Metrics.Indicator>
</Metrics.Section>
</Metrics.Wrapper>

1
kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap
View file

@ -226,7 +226,6 @@ exports[`Overview view matches snapshot 1`] = `
</svg>
</div>
<span>
f
2
</span>
</div>

10
kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.styled.ts
View file

@ -1,5 +1,15 @@
import styled from 'styled-components';
interface TableCellProps {
maxWidth?: string;
}
export const SwitchWrapper = styled.div`
padding: 16px;
`;
export const TableCell = styled.td.attrs({ role: 'cells' })<TableCellProps>`
padding: 16px;
word-break: break-word;
max-width: ${(props) => props.maxWidth};
`;

24
kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx
View file

@ -84,24 +84,26 @@ const ClustersWidget: React.FC<Props> = ({
<tbody>
{chunkItem.data.map((cluster) => (
<tr key={cluster.name}>
<td>
<S.TableCell maxWidth="99px">
{cluster.readOnly && <Tag color="blue">readonly</Tag>}{' '}
{cluster.name}
</td>
<td>{cluster.version}</td>
<td>{cluster.brokerCount}</td>
<td>{cluster.onlinePartitionCount}</td>
<td>
</S.TableCell>
<S.TableCell maxWidth="99px">{cluster.version}</S.TableCell>
<S.TableCell maxWidth="99px">{cluster.brokerCount}</S.TableCell>
<S.TableCell maxWidth="78px">
{cluster.onlinePartitionCount}
</S.TableCell>
<S.TableCell maxWidth="60px">
<NavLink to={clusterTopicsPath(cluster.name)}>
{cluster.topicCount}
</NavLink>
</td>
<td>
</S.TableCell>
<S.TableCell maxWidth="85px">
<BytesFormatted value={cluster.bytesInPerSec} />
</td>
<td>
</S.TableCell>
<S.TableCell maxWidth="85px">
<BytesFormatted value={cluster.bytesOutPerSec} />
</td>
</S.TableCell>
</tr>
))}
</tbody>

6
kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx
View file

@ -31,4 +31,10 @@ describe('ClustersWidget', () => {
it('when cluster is read-only', () => {
expect(screen.getByText('readonly')).toBeInTheDocument();
});
it('render clusterWidget cells', () => {
const cells = screen.getAllByRole('cells');
expect(cells.length).toBe(14);
expect(cells[0]).toHaveStyle('max-width: 99px');
});
});

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

@ -17,7 +17,7 @@ const LatestVersionItem: React.FC<LatestVersionProps> = ({
<LatestVersionWrapper>
<div>
<h1>Relevant version</h1>
<JSONViewer data={schema} />
<JSONViewer data={schema} maxLines={28} />
</div>
<div data-testid="meta-data">
<div>

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

@ -8,6 +8,7 @@ exports[`LatestVersionItem matches snapshot 1`] = `
</h1>
<JSONViewer
data="{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord1\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}"
maxLines={28}
/>
</div>
<div

3
kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
View file

@ -57,7 +57,8 @@ const Overview: React.FC<Props> = ({
<Metrics.RedText>{underReplicatedPartitions}</Metrics.RedText>
</Metrics.Indicator>
<Metrics.Indicator
label="In Sync Replicas"
label="ISR"
title="In Sync Replicas"
isAlert
alertType={inSyncReplicas === replicas ? 'success' : 'error'}
>

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

@ -3,11 +3,12 @@ import JSONEditor from 'components/common/JSONEditor/JSONEditor';
import { StyledWrapper } from './StyledWrapper.styled';
interface FullMessageProps {
export interface FullMessageProps {
data: string;
maxLines?: number;
}
const JSONViewer: React.FC<FullMessageProps> = ({ data }) => {
const JSONViewer: React.FC<FullMessageProps> = ({ data, maxLines }) => {
try {
if (data.trim().startsWith('{')) {
return (
@ -18,7 +19,7 @@ const JSONViewer: React.FC<FullMessageProps> = ({ data }) => {
value={JSON.stringify(JSON.parse(data), null, '\t')}
setOptions={{
showLineNumbers: false,
maxLines: 40,
maxLines,
showGutter: false,
}}
readOnly

3
kafka-ui-react-app/src/components/common/JSONViewer/StyledWrapper.styled.ts
View file

@ -3,7 +3,4 @@ import styled from 'styled-components';
export const StyledWrapper = styled.div`
background-color: #f9fafa;
padding: 8px 16px;
max-height: 516px;
overflow-y: scroll;
overflow-wrap: anywhere;
`;

26
kafka-ui-react-app/src/components/common/JSONViewer/__test__/JSONViewer.spec.tsx
View file

@ -1,18 +1,30 @@
import { shallow } from 'enzyme';
import React from 'react';
import JSONViewer from 'components/common/JSONViewer/JSONViewer';
import JSONViewer, {
FullMessageProps,
} from 'components/common/JSONViewer/JSONViewer';
import { render } from 'lib/testHelpers';
import { screen } from '@testing-library/react';
const data = { a: 1 };
const maxLines = 28;
describe('JSONViewer component', () => {
const setupComponent = (props: FullMessageProps) =>
render(<JSONViewer {...props} />);
it('renders JSONTree', () => {
const component = shallow(<JSONViewer data={JSON.stringify(data)} />);
expect(component.exists('Styled(JSONEditor)')).toBeTruthy();
setupComponent({
data: JSON.stringify(data),
maxLines,
});
expect(screen.getByRole('textbox')).toBeInTheDocument();
});
it('matches the snapshot with fixed height with no value', () => {
const component = shallow(<JSONViewer data={data as unknown as string} />);
expect(component.exists('JSONEditor')).toBeFalsy();
expect(component.exists('p')).toBeTruthy();
setupComponent({
data: '',
maxLines,
});
expect(screen.getByText(JSON.stringify(''))).toBeInTheDocument();
});
});