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

Implement readonly flag logic

Browse source
This commit is contained in:
GneyHabub 2021-03-09 13:42:03 +03:00
parent a9cb9567d6
commit 93d471f408
10 changed files with 91 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,7 @@ const ClusterWidget: React.FC<ClusterWidgetProps> = ({
bytesInPerSec,
bytesOutPerSec,
onlinePartitionCount,
readOnly,
},
}) => (
<div className="column is-full-modile is-6">
@ -29,6 +30,9 @@ const ClusterWidget: React.FC<ClusterWidgetProps> = ({
>
{status}
</div>
{readOnly && (
<div className="tag has-margin-right is-info is-light">readonly</div>
)}
{name}
</div>

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

@ -12,6 +12,7 @@ export interface DetailsProps {
clusterName: ClusterName;
versions: SchemaSubject[];
isFetched: boolean;
isReadOnly?: boolean | undefined;
fetchSchemaVersions: (
clusterName: ClusterName,
schemaName: SchemaName
@ -24,6 +25,7 @@ const Details: React.FC<DetailsProps> = ({
fetchSchemaVersions,
versions,
isFetched,
isReadOnly,
}) => {
React.useEffect(() => {
fetchSchemaVersions(clusterName, schema.subject as SchemaName);
@ -54,24 +56,26 @@ const Details: React.FC<DetailsProps> = ({
</div>
</div>
</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>
{!isReadOnly && (
<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>

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

@ -6,6 +6,7 @@ import {
getSchema,
getSortedSchemaVersions,
} from 'redux/reducers/schemas/selectors';
import { getClustersReadonlyStatus } from 'redux/reducers/clusters/selectors';
import { fetchSchemaVersions } from 'redux/actions';
import Details from './Details';
@ -28,6 +29,7 @@ const mapStateToProps = (
versions: getSortedSchemaVersions(state),
isFetched: getIsSchemaVersionFetched(state),
clusterName,
isReadOnly: getClustersReadonlyStatus(clusterName)(state),
});
const mapDispatchToProps = {

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

@ -7,9 +7,10 @@ import ListItem from './ListItem';
export interface ListProps {
schemas: SchemaSubject[];
isReadOnly?: boolean | undefined;
}
const List: React.FC<ListProps> = ({ schemas }) => {
const List: React.FC<ListProps> = ({ schemas, isReadOnly }) => {
const { clusterName } = useParams<{ clusterName: string }>();
return (
@ -17,14 +18,16 @@ const List: React.FC<ListProps> = ({ schemas }) => {
<Breadcrumb>Schema Registry</Breadcrumb>
<div className="box">
<div className="level">
<div className="level-item level-right">
<NavLink
className="button is-primary"
to={clusterSchemaNewPath(clusterName)}
>
Create Schema
</NavLink>
</div>
{!isReadOnly && (
<div className="level-item level-right">
<NavLink
className="button is-primary"
to={clusterSchemaNewPath(clusterName)}
>
Create Schema
</NavLink>
</div>
)}
</div>
</div>

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

@ -1,10 +1,26 @@
import { connect } from 'react-redux';
import { RootState } from 'redux/interfaces';
import { RootState, ClusterName } from 'redux/interfaces';
import { getSchemaList } from 'redux/reducers/schemas/selectors';
import { getClustersReadonlyStatus } from 'redux/reducers/clusters/selectors';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import List from './List';
const mapStateToProps = (state: RootState) => ({
interface RouteProps {
clusterName: ClusterName;
}
type OwnProps = RouteComponentProps<RouteProps>;
const mapStateToProps = (
state: RootState,
{
match: {
params: { clusterName },
},
}: OwnProps
) => ({
schemas: getSchemaList(state),
isReadOnly: getClustersReadonlyStatus(clusterName)(state),
});
export default connect(mapStateToProps)(List);
export default withRouter(connect(mapStateToProps)(List));

11
kafka-ui-react-app/src/components/Topics/Details/Details.tsx
View file

@ -18,9 +18,10 @@ import SettingsEditButton from './Settings/SettingsEditButton';
interface Props extends Topic, TopicDetails {
clusterName: ClusterName;
topicName: TopicName;
isReadOnly: boolean | undefined;
}
const Details: React.FC<Props> = ({ clusterName, topicName }) => {
const Details: React.FC<Props> = ({ clusterName, topicName, isReadOnly }) => {
return (
<div className="section">
<div className="level">
@ -33,9 +34,11 @@ const Details: React.FC<Props> = ({ clusterName, topicName }) => {
{topicName}
</Breadcrumb>
</div>
<SettingsEditButton
to={clusterTopicsTopicEditPath(clusterName, topicName)}
/>
{!isReadOnly && (
<SettingsEditButton
to={clusterTopicsTopicEditPath(clusterName, topicName)}
/>
)}
</div>
<div className="box">

2
kafka-ui-react-app/src/components/Topics/Details/DetailsContainer.ts
View file

@ -1,5 +1,6 @@
import { connect } from 'react-redux';
import { ClusterName, RootState, TopicName } from 'redux/interfaces';
import { getClustersReadonlyStatus } from 'redux/reducers/clusters/selectors';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import Details from './Details';
@ -20,6 +21,7 @@ const mapStateToProps = (
) => ({
clusterName,
topicName,
isReadOnly: getClustersReadonlyStatus(clusterName)(state),
});
export default withRouter(connect(mapStateToProps)(Details));

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

@ -9,9 +9,15 @@ interface Props {
clusterName: ClusterName;
topics: TopicWithDetailedInfo[];
externalTopics: TopicWithDetailedInfo[];
isReadOnly?: boolean | undefined;
}
const List: React.FC<Props> = ({ clusterName, topics, externalTopics }) => {
const List: React.FC<Props> = ({
clusterName,
topics,
externalTopics,
isReadOnly,
}) => {
const [showInternal, setShowInternal] = React.useState<boolean>(true);
const handleSwitch = () => setShowInternal(!showInternal);
@ -38,12 +44,14 @@ const List: React.FC<Props> = ({ clusterName, topics, externalTopics }) => {
</div>
</div>
<div className="level-item level-right">
<NavLink
className="button is-primary"
to={clusterTopicNewPath(clusterName)}
>
Add a Topic
</NavLink>
{!isReadOnly && (
<NavLink
className="button is-primary"
to={clusterTopicNewPath(clusterName)}
>
Add a Topic
</NavLink>
)}
</div>
</div>
</div>

2
kafka-ui-react-app/src/components/Topics/List/ListContainer.ts
View file

@ -4,6 +4,7 @@ import {
getTopicList,
getExternalTopicList,
} from 'redux/reducers/topics/selectors';
import { getClustersReadonlyStatus } from 'redux/reducers/clusters/selectors';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import List from './List';
@ -24,6 +25,7 @@ const mapStateToProps = (
clusterName,
topics: getTopicList(state),
externalTopics: getExternalTopicList(state),
isReadOnly: getClustersReadonlyStatus(clusterName)(state),
});
export default withRouter(connect(mapStateToProps)(List));

6
kafka-ui-react-app/src/redux/reducers/clusters/selectors.ts
View file

@ -24,3 +24,9 @@ export const getOnlineClusters = createSelector(getClusterList, (clusters) =>
export const getOfflineClusters = createSelector(getClusterList, (clusters) =>
clusters.filter(({ status }) => status === ServerStatus.OFFLINE)
);
export const getClustersReadonlyStatus = (clusterName: string) =>
createSelector(
getClusterList,
(clusters) => clusters.find(({ name }) => name === clusterName)?.readOnly
);