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

Fix linter (#452)

Browse source
This commit is contained in:
Alexander Krivonosov 2021-05-12 21:10:38 +03:00 • committed by GitHub
parent 98fcc90c6b
commit b60ff8acf6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 465 additions and 473 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,9 +18,8 @@ const mapStateToProps = (state: RootState) => ({
isFetching: getIsSchemaListFetching(state), isFetching: getIsSchemaListFetching(state),
schemas: getSchemaList(state), schemas: getSchemaList(state),
globalSchemaCompatibilityLevel: getGlobalSchemaCompatibilityLevel(state), globalSchemaCompatibilityLevel: getGlobalSchemaCompatibilityLevel(state),
isGlobalSchemaCompatibilityLevelFetched: getGlobalSchemaCompatibilityLevelFetched( isGlobalSchemaCompatibilityLevelFetched:
state getGlobalSchemaCompatibilityLevelFetched(state),
),
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

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

@ -23,10 +23,8 @@ const ListItem: React.FC<ListItemProps> = ({
clusterName, clusterName,
clearTopicMessages, clearTopicMessages,
}) => { }) => {
const [ const [isDeleteTopicConfirmationVisible, setDeleteTopicConfirmationVisible] =
isDeleteTopicConfirmationVisible, React.useState(false);
setDeleteTopicConfirmationVisible,
] = React.useState(false);
const outOfSyncReplicas = React.useMemo(() => { const outOfSyncReplicas = React.useMemo(() => {
if (partitions === undefined || partitions.length === 0) { if (partitions === undefined || partitions.length === 0) {

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

@ -33,10 +33,8 @@ const Details: React.FC<Props> = ({
}) => { }) => {
const history = useHistory(); const history = useHistory();
const { isReadOnly } = React.useContext(ClusterContext); const { isReadOnly } = React.useContext(ClusterContext);
const [ const [isDeleteTopicConfirmationVisible, setDeleteTopicConfirmationVisible] =
isDeleteTopicConfirmationVisible, React.useState(false);
setDeleteTopicConfirmationVisible,
] = React.useState(false);
const deleteTopicHandler = React.useCallback(() => { const deleteTopicHandler = React.useCallback(() => {
deleteTopic(clusterName, topicName); deleteTopic(clusterName, topicName);
history.push(clusterTopicsPath(clusterName)); history.push(clusterTopicsPath(clusterName));

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

@ -50,9 +50,8 @@ const Messages: React.FC<Props> = ({
fetchTopicMessages, fetchTopicMessages,
}) => { }) => {
const [searchQuery, setSearchQuery] = React.useState<string>(''); const [searchQuery, setSearchQuery] = React.useState<string>('');
const [searchTimestamp, setSearchTimestamp] = React.useState<Date | null>( const [searchTimestamp, setSearchTimestamp] =
null React.useState<Date | null>(null);
);
const [filterProps, setFilterProps] = React.useState<FilterProps[]>([]); const [filterProps, setFilterProps] = React.useState<FilterProps[]>([]);
const [selectedSeekType, setSelectedSeekType] = React.useState<SeekType>( const [selectedSeekType, setSelectedSeekType] = React.useState<SeekType>(
SeekType.OFFSET SeekType.OFFSET

11
kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamSelect.tsx
View file

@ -39,12 +39,11 @@ const CustomParamSelect: React.FC<CustomParamSelectProps> = ({
return valid || 'Custom Parameter must be unique'; return valid || 'Custom Parameter must be unique';
}; };
const onChange = (inputName: string) => ( const onChange =
event: React.ChangeEvent<HTMLSelectElement> (inputName: string) => (event: React.ChangeEvent<HTMLSelectElement>) => {
) => { trigger(inputName);
trigger(inputName); onNameChange(index, event.target.value);
onNameChange(index, event.target.value); };
};
return ( return (
<> <>

12
kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx
View file

@ -35,13 +35,11 @@ const CustomParams: React.FC<Props> = ({ isSubmitting, config }) => {
) )
: {}; : {};
const [ const [formCustomParams, setFormCustomParams] =
formCustomParams, React.useState<TopicFormCustomParams>({
setFormCustomParams, byIndex,
] = React.useState<TopicFormCustomParams>({ allIndexes: Object.keys(byIndex),
byIndex, });
allIndexes: Object.keys(byIndex),
});
const onAdd = (event: React.MouseEvent<HTMLButtonElement>) => { const onAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault(); event.preventDefault();

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

@ -235,9 +235,8 @@ export const updateConnectorConfigAction = createAsyncAction(
'PATCH_CONNECTOR_CONFIG__FAILURE' 'PATCH_CONNECTOR_CONFIG__FAILURE'
)<undefined, { connector: Connector }, { alert?: FailurePayload }>(); )<undefined, { connector: Connector }, { alert?: FailurePayload }>();
export const setTopicsSearchAction = createAction( export const setTopicsSearchAction =
'SET_TOPICS_SEARCH' createAction('SET_TOPICS_SEARCH')<string>();
)<string>();
export const setTopicsOrderByAction = createAction( export const setTopicsOrderByAction = createAction(
'SET_TOPICS_ORDER_BY' 'SET_TOPICS_ORDER_BY'

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

@ -6,30 +6,29 @@ import * as actions from 'redux/actions/actions';
const apiClientConf = new Configuration(BASE_PARAMS); const apiClientConf = new Configuration(BASE_PARAMS);
export const brokersApiClient = new BrokersApi(apiClientConf); export const brokersApiClient = new BrokersApi(apiClientConf);
export const fetchBrokers = ( export const fetchBrokers =
clusterName: ClusterName (clusterName: ClusterName): PromiseThunkResult =>
): PromiseThunkResult => async (dispatch) => { async (dispatch) => {
dispatch(actions.fetchBrokersAction.request()); dispatch(actions.fetchBrokersAction.request());
try { try {
const payload = await brokersApiClient.getBrokers({ clusterName }); const payload = await brokersApiClient.getBrokers({ clusterName });
dispatch(actions.fetchBrokersAction.success(payload)); dispatch(actions.fetchBrokersAction.success(payload));
} catch (e) { } catch (e) {
dispatch(actions.fetchBrokersAction.failure()); dispatch(actions.fetchBrokersAction.failure());
} }
}; };
export const fetchBrokerMetrics = ( export const fetchBrokerMetrics =
clusterName: ClusterName, (clusterName: ClusterName, brokerId: BrokerId): PromiseThunkResult =>
brokerId: BrokerId async (dispatch) => {
): PromiseThunkResult => async (dispatch) => { dispatch(actions.fetchBrokerMetricsAction.request());
dispatch(actions.fetchBrokerMetricsAction.request()); try {
try { const payload = await brokersApiClient.getBrokersMetrics({
const payload = await brokersApiClient.getBrokersMetrics({ clusterName,
clusterName, id: brokerId,
id: brokerId, });
}); dispatch(actions.fetchBrokerMetricsAction.success(payload));
dispatch(actions.fetchBrokerMetricsAction.success(payload)); } catch (e) {
} catch (e) { dispatch(actions.fetchBrokerMetricsAction.failure());
dispatch(actions.fetchBrokerMetricsAction.failure()); }
} };
};

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

@ -16,28 +16,28 @@ export const fetchClustersList = (): PromiseThunkResult => async (dispatch) => {
} }
}; };
export const fetchClusterStats = ( export const fetchClusterStats =
clusterName: ClusterName (clusterName: ClusterName): PromiseThunkResult =>
): PromiseThunkResult => async (dispatch) => { async (dispatch) => {
dispatch(actions.fetchClusterStatsAction.request()); dispatch(actions.fetchClusterStatsAction.request());
try { try {
const payload = await clustersApiClient.getClusterStats({ clusterName }); const payload = await clustersApiClient.getClusterStats({ clusterName });
dispatch(actions.fetchClusterStatsAction.success(payload)); dispatch(actions.fetchClusterStatsAction.success(payload));
} catch (e) { } catch (e) {
dispatch(actions.fetchClusterStatsAction.failure()); dispatch(actions.fetchClusterStatsAction.failure());
} }
}; };
export const fetchClusterMetrics = ( export const fetchClusterMetrics =
clusterName: ClusterName (clusterName: ClusterName): PromiseThunkResult =>
): PromiseThunkResult => async (dispatch) => { async (dispatch) => {
dispatch(actions.fetchClusterMetricsAction.request()); dispatch(actions.fetchClusterMetricsAction.request());
try { try {
const payload = await clustersApiClient.getClusterMetrics({ const payload = await clustersApiClient.getClusterMetrics({
clusterName, clusterName,
}); });
dispatch(actions.fetchClusterMetricsAction.success(payload)); dispatch(actions.fetchClusterMetricsAction.success(payload));
} catch (e) { } catch (e) {
dispatch(actions.fetchClusterMetricsAction.failure()); dispatch(actions.fetchClusterMetricsAction.failure());
} }
}; };

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

@ -10,39 +10,40 @@ import * as actions from 'redux/actions/actions';
const apiClientConf = new Configuration(BASE_PARAMS); const apiClientConf = new Configuration(BASE_PARAMS);
export const consumerGroupsApiClient = new ConsumerGroupsApi(apiClientConf); export const consumerGroupsApiClient = new ConsumerGroupsApi(apiClientConf);
export const fetchConsumerGroupsList = ( export const fetchConsumerGroupsList =
clusterName: ClusterName (clusterName: ClusterName): PromiseThunkResult =>
): PromiseThunkResult => async (dispatch) => { async (dispatch) => {
dispatch(actions.fetchConsumerGroupsAction.request()); dispatch(actions.fetchConsumerGroupsAction.request());
try { try {
const consumerGroups = await consumerGroupsApiClient.getConsumerGroups({ const consumerGroups = await consumerGroupsApiClient.getConsumerGroups({
clusterName,
});
dispatch(actions.fetchConsumerGroupsAction.success(consumerGroups));
} catch (e) {
dispatch(actions.fetchConsumerGroupsAction.failure());
}
};
export const fetchConsumerGroupDetails = (
clusterName: ClusterName,
consumerGroupID: ConsumerGroupID
): PromiseThunkResult => async (dispatch) => {
dispatch(actions.fetchConsumerGroupDetailsAction.request());
try {
const consumerGroupDetails = await consumerGroupsApiClient.getConsumerGroup(
{
clusterName, clusterName,
id: consumerGroupID, });
} dispatch(actions.fetchConsumerGroupsAction.success(consumerGroups));
); } catch (e) {
dispatch( dispatch(actions.fetchConsumerGroupsAction.failure());
actions.fetchConsumerGroupDetailsAction.success({ }
consumerGroupID, };
details: consumerGroupDetails,
}) export const fetchConsumerGroupDetails =
); (
} catch (e) { clusterName: ClusterName,
dispatch(actions.fetchConsumerGroupDetailsAction.failure()); consumerGroupID: ConsumerGroupID
} ): PromiseThunkResult =>
}; async (dispatch) => {
dispatch(actions.fetchConsumerGroupDetailsAction.request());
try {
const consumerGroupDetails =
await consumerGroupsApiClient.getConsumerGroup({
clusterName,
id: consumerGroupID,
});
dispatch(
actions.fetchConsumerGroupDetailsAction.success({
consumerGroupID,
details: consumerGroupDetails,
})
);
} catch (e) {
dispatch(actions.fetchConsumerGroupDetailsAction.failure());
}
};

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

@ -20,160 +20,164 @@ import { isEqual } from 'lodash';
const apiClientConf = new Configuration(BASE_PARAMS); const apiClientConf = new Configuration(BASE_PARAMS);
export const schemasApiClient = new SchemasApi(apiClientConf); export const schemasApiClient = new SchemasApi(apiClientConf);
export const fetchSchemasByClusterName = ( export const fetchSchemasByClusterName =
clusterName: ClusterName (clusterName: ClusterName): PromiseThunkResult<void> =>
): PromiseThunkResult<void> => async (dispatch) => { async (dispatch) => {
dispatch(actions.fetchSchemasByClusterNameAction.request()); dispatch(actions.fetchSchemasByClusterNameAction.request());
try { try {
const schemas = await schemasApiClient.getSchemas({ clusterName }); const schemas = await schemasApiClient.getSchemas({ clusterName });
dispatch(actions.fetchSchemasByClusterNameAction.success(schemas)); dispatch(actions.fetchSchemasByClusterNameAction.success(schemas));
} catch (e) { } catch (e) {
dispatch(actions.fetchSchemasByClusterNameAction.failure()); dispatch(actions.fetchSchemasByClusterNameAction.failure());
}
};
export const fetchSchemaVersions = (
clusterName: ClusterName,
subject: SchemaName
): PromiseThunkResult<void> => async (dispatch) => {
if (!subject) return;
dispatch(actions.fetchSchemaVersionsAction.request());
try {
const versions = await schemasApiClient.getAllVersionsBySubject({
clusterName,
subject,
});
dispatch(actions.fetchSchemaVersionsAction.success(versions));
} catch (e) {
dispatch(actions.fetchSchemaVersionsAction.failure());
}
};
export const fetchGlobalSchemaCompatibilityLevel = (
clusterName: ClusterName
): PromiseThunkResult<void> => async (dispatch) => {
dispatch(actions.fetchGlobalSchemaCompatibilityLevelAction.request());
try {
const result = await schemasApiClient.getGlobalSchemaCompatibilityLevel({
clusterName,
});
dispatch(
actions.fetchGlobalSchemaCompatibilityLevelAction.success(
result.compatibility
)
);
} catch (e) {
dispatch(actions.fetchGlobalSchemaCompatibilityLevelAction.failure());
}
};
export const updateGlobalSchemaCompatibilityLevel = (
clusterName: ClusterName,
compatibilityLevel: CompatibilityLevelCompatibilityEnum
): PromiseThunkResult<void> => async (dispatch) => {
dispatch(actions.updateGlobalSchemaCompatibilityLevelAction.request());
try {
await schemasApiClient.updateGlobalSchemaCompatibilityLevel({
clusterName,
compatibilityLevel: { compatibility: compatibilityLevel },
});
dispatch(
actions.updateGlobalSchemaCompatibilityLevelAction.success(
compatibilityLevel
)
);
} catch (e) {
dispatch(actions.updateGlobalSchemaCompatibilityLevelAction.failure());
}
};
export const createSchema = (
clusterName: ClusterName,
newSchemaSubject: NewSchemaSubject
): PromiseThunkResult => async (dispatch) => {
dispatch(actions.createSchemaAction.request());
try {
const schema: SchemaSubject = await schemasApiClient.createNewSchema({
clusterName,
newSchemaSubject,
});
dispatch(actions.createSchemaAction.success(schema));
} catch (error) {
const response = await getResponse(error);
const alert: FailurePayload = {
subject: ['schema', newSchemaSubject.subject].join('-'),
title: `Schema ${newSchemaSubject.subject}`,
response,
};
dispatch(actions.createSchemaAction.failure({ alert }));
throw error;
}
};
export const updateSchema = (
latestSchema: SchemaSubject,
newSchema: string,
newSchemaType: SchemaType,
newCompatibilityLevel: CompatibilityLevelCompatibilityEnum,
clusterName: string,
subject: string
): PromiseThunkResult => async (dispatch) => {
dispatch(actions.updateSchemaAction.request());
try {
let schema: SchemaSubject = latestSchema;
if (
(newSchema &&
!isEqual(JSON.parse(latestSchema.schema), JSON.parse(newSchema))) ||
newSchemaType !== latestSchema.schemaType
) {
schema = await schemasApiClient.createNewSchema({
clusterName,
newSchemaSubject: {
...latestSchema,
schema: newSchema || latestSchema.schema,
schemaType: newSchemaType || latestSchema.schemaType,
},
});
} }
if (newCompatibilityLevel !== latestSchema.compatibilityLevel) { };
await schemasApiClient.updateSchemaCompatibilityLevel({
export const fetchSchemaVersions =
(clusterName: ClusterName, subject: SchemaName): PromiseThunkResult<void> =>
async (dispatch) => {
if (!subject) return;
dispatch(actions.fetchSchemaVersionsAction.request());
try {
const versions = await schemasApiClient.getAllVersionsBySubject({
clusterName, clusterName,
subject, subject,
compatibilityLevel: {
compatibility: newCompatibilityLevel,
},
}); });
dispatch(actions.fetchSchemaVersionsAction.success(versions));
} catch (e) {
dispatch(actions.fetchSchemaVersionsAction.failure());
} }
actions.updateSchemaAction.success(schema); };
} catch (e) {
const response = await getResponse(e); export const fetchGlobalSchemaCompatibilityLevel =
const alert: FailurePayload = { (clusterName: ClusterName): PromiseThunkResult<void> =>
subject: ['schema', subject].join('-'), async (dispatch) => {
title: `Schema ${subject}`, dispatch(actions.fetchGlobalSchemaCompatibilityLevelAction.request());
response, try {
}; const result = await schemasApiClient.getGlobalSchemaCompatibilityLevel({
dispatch(actions.updateSchemaAction.failure({ alert })); clusterName,
throw e; });
} dispatch(
}; actions.fetchGlobalSchemaCompatibilityLevelAction.success(
export const deleteSchema = ( result.compatibility
clusterName: ClusterName, )
subject: string );
): PromiseThunkResult => async (dispatch) => { } catch (e) {
dispatch(actions.deleteSchemaAction.request()); dispatch(actions.fetchGlobalSchemaCompatibilityLevelAction.failure());
try { }
await schemasApiClient.deleteSchema({ };
clusterName,
subject, export const updateGlobalSchemaCompatibilityLevel =
}); (
dispatch(actions.deleteSchemaAction.success(subject)); clusterName: ClusterName,
} catch (error) { compatibilityLevel: CompatibilityLevelCompatibilityEnum
const response = await getResponse(error); ): PromiseThunkResult<void> =>
const alert: FailurePayload = { async (dispatch) => {
subject: ['schema', subject].join('-'), dispatch(actions.updateGlobalSchemaCompatibilityLevelAction.request());
title: `Schema ${subject}`, try {
response, await schemasApiClient.updateGlobalSchemaCompatibilityLevel({
}; clusterName,
dispatch(actions.deleteSchemaAction.failure({ alert })); compatibilityLevel: { compatibility: compatibilityLevel },
} });
}; dispatch(
actions.updateGlobalSchemaCompatibilityLevelAction.success(
compatibilityLevel
)
);
} catch (e) {
dispatch(actions.updateGlobalSchemaCompatibilityLevelAction.failure());
}
};
export const createSchema =
(
clusterName: ClusterName,
newSchemaSubject: NewSchemaSubject
): PromiseThunkResult =>
async (dispatch) => {
dispatch(actions.createSchemaAction.request());
try {
const schema: SchemaSubject = await schemasApiClient.createNewSchema({
clusterName,
newSchemaSubject,
});
dispatch(actions.createSchemaAction.success(schema));
} catch (error) {
const response = await getResponse(error);
const alert: FailurePayload = {
subject: ['schema', newSchemaSubject.subject].join('-'),
title: `Schema ${newSchemaSubject.subject}`,
response,
};
dispatch(actions.createSchemaAction.failure({ alert }));
throw error;
}
};
export const updateSchema =
(
latestSchema: SchemaSubject,
newSchema: string,
newSchemaType: SchemaType,
newCompatibilityLevel: CompatibilityLevelCompatibilityEnum,
clusterName: string,
subject: string
): PromiseThunkResult =>
async (dispatch) => {
dispatch(actions.updateSchemaAction.request());
try {
let schema: SchemaSubject = latestSchema;
if (
(newSchema &&
!isEqual(JSON.parse(latestSchema.schema), JSON.parse(newSchema))) ||
newSchemaType !== latestSchema.schemaType
) {
schema = await schemasApiClient.createNewSchema({
clusterName,
newSchemaSubject: {
...latestSchema,
schema: newSchema || latestSchema.schema,
schemaType: newSchemaType || latestSchema.schemaType,
},
});
}
if (newCompatibilityLevel !== latestSchema.compatibilityLevel) {
await schemasApiClient.updateSchemaCompatibilityLevel({
clusterName,
subject,
compatibilityLevel: {
compatibility: newCompatibilityLevel,
},
});
}
actions.updateSchemaAction.success(schema);
} catch (e) {
const response = await getResponse(e);
const alert: FailurePayload = {
subject: ['schema', subject].join('-'),
title: `Schema ${subject}`,
response,
};
dispatch(actions.updateSchemaAction.failure({ alert }));
throw e;
}
};
export const deleteSchema =
(clusterName: ClusterName, subject: string): PromiseThunkResult =>
async (dispatch) => {
dispatch(actions.deleteSchemaAction.request());
try {
await schemasApiClient.deleteSchema({
clusterName,
subject,
});
dispatch(actions.deleteSchemaAction.success(subject));
} catch (error) {
const response = await getResponse(error);
const alert: FailurePayload = {
subject: ['schema', subject].join('-'),
title: `Schema ${subject}`,
response,
};
dispatch(actions.deleteSchemaAction.failure({ alert }));
}
};

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

@ -36,136 +36,138 @@ export interface FetchTopicsListParams {
orderBy?: TopicColumnsToSort; orderBy?: TopicColumnsToSort;
} }
export const fetchTopicsList = ( export const fetchTopicsList =
params: FetchTopicsListParams (params: FetchTopicsListParams): PromiseThunkResult =>
): PromiseThunkResult => async (dispatch, getState) => { async (dispatch, getState) => {
dispatch(actions.fetchTopicsListAction.request()); dispatch(actions.fetchTopicsListAction.request());
try { try {
const { topics, pageCount } = await topicsApiClient.getTopics(params); const { topics, pageCount } = await topicsApiClient.getTopics(params);
const newState = (topics || []).reduce( const newState = (topics || []).reduce(
(memo: TopicsState, topic) => ({ (memo: TopicsState, topic) => ({
...memo, ...memo,
byName: {
...memo.byName,
[topic.name]: {
...memo.byName[topic.name],
...topic,
id: v4(),
},
},
allNames: [...memo.allNames, topic.name],
}),
{
...getState().topics,
allNames: [],
totalPages: pageCount || 1,
}
);
dispatch(actions.fetchTopicsListAction.success(newState));
} catch (e) {
dispatch(actions.fetchTopicsListAction.failure());
}
};
export const fetchTopicMessages =
(
clusterName: ClusterName,
topicName: TopicName,
queryParams: Partial<TopicMessageQueryParams>
): PromiseThunkResult =>
async (dispatch) => {
dispatch(actions.fetchTopicMessagesAction.request());
try {
const messages = await messagesApiClient.getTopicMessages({
clusterName,
topicName,
...queryParams,
});
dispatch(actions.fetchTopicMessagesAction.success(messages));
} catch (e) {
dispatch(actions.fetchTopicMessagesAction.failure());
}
};
export const clearTopicMessages =
(
clusterName: ClusterName,
topicName: TopicName,
partitions?: number[]
): PromiseThunkResult =>
async (dispatch) => {
dispatch(actions.clearMessagesTopicAction.request());
try {
await messagesApiClient.deleteTopicMessages({
clusterName,
topicName,
partitions,
});
dispatch(actions.clearMessagesTopicAction.success(topicName));
} catch (e) {
const response = await getResponse(e);
const alert: FailurePayload = {
subject: [clusterName, topicName, partitions].join('-'),
title: `Clear Topic Messages`,
response,
};
dispatch(actions.clearMessagesTopicAction.failure({ alert }));
}
};
export const fetchTopicDetails =
(clusterName: ClusterName, topicName: TopicName): PromiseThunkResult =>
async (dispatch, getState) => {
dispatch(actions.fetchTopicDetailsAction.request());
try {
const topicDetails = await topicsApiClient.getTopicDetails({
clusterName,
topicName,
});
const state = getState().topics;
const newState = {
...state,
byName: { byName: {
...memo.byName, ...state.byName,
[topic.name]: { [topicName]: {
...memo.byName[topic.name], ...state.byName[topicName],
...topic, ...topicDetails,
id: v4(),
}, },
}, },
allNames: [...memo.allNames, topic.name], };
}), dispatch(actions.fetchTopicDetailsAction.success(newState));
{ } catch (e) {
...getState().topics, dispatch(actions.fetchTopicDetailsAction.failure());
allNames: [], }
totalPages: pageCount || 1, };
}
);
dispatch(actions.fetchTopicsListAction.success(newState));
} catch (e) {
dispatch(actions.fetchTopicsListAction.failure());
}
};
export const fetchTopicMessages = ( export const fetchTopicConfig =
clusterName: ClusterName, (clusterName: ClusterName, topicName: TopicName): PromiseThunkResult =>
topicName: TopicName, async (dispatch, getState) => {
queryParams: Partial<TopicMessageQueryParams> dispatch(actions.fetchTopicConfigAction.request());
): PromiseThunkResult => async (dispatch) => { try {
dispatch(actions.fetchTopicMessagesAction.request()); const config = await topicsApiClient.getTopicConfigs({
try { clusterName,
const messages = await messagesApiClient.getTopicMessages({ topicName,
clusterName, });
topicName,
...queryParams,
});
dispatch(actions.fetchTopicMessagesAction.success(messages));
} catch (e) {
dispatch(actions.fetchTopicMessagesAction.failure());
}
};
export const clearTopicMessages = ( const state = getState().topics;
clusterName: ClusterName, const newState = {
topicName: TopicName, ...state,
partitions?: number[] byName: {
): PromiseThunkResult => async (dispatch) => { ...state.byName,
dispatch(actions.clearMessagesTopicAction.request()); [topicName]: {
try { ...state.byName[topicName],
await messagesApiClient.deleteTopicMessages({ config: config.map((inputConfig) => ({
clusterName, ...inputConfig,
topicName, })),
partitions, },
});
dispatch(actions.clearMessagesTopicAction.success(topicName));
} catch (e) {
const response = await getResponse(e);
const alert: FailurePayload = {
subject: [clusterName, topicName, partitions].join('-'),
title: `Clear Topic Messages`,
response,
};
dispatch(actions.clearMessagesTopicAction.failure({ alert }));
}
};
export const fetchTopicDetails = (
clusterName: ClusterName,
topicName: TopicName
): PromiseThunkResult => async (dispatch, getState) => {
dispatch(actions.fetchTopicDetailsAction.request());
try {
const topicDetails = await topicsApiClient.getTopicDetails({
clusterName,
topicName,
});
const state = getState().topics;
const newState = {
...state,
byName: {
...state.byName,
[topicName]: {
...state.byName[topicName],
...topicDetails,
}, },
}, };
};
dispatch(actions.fetchTopicDetailsAction.success(newState));
} catch (e) {
dispatch(actions.fetchTopicDetailsAction.failure());
}
};
export const fetchTopicConfig = ( dispatch(actions.fetchTopicConfigAction.success(newState));
clusterName: ClusterName, } catch (e) {
topicName: TopicName dispatch(actions.fetchTopicConfigAction.failure());
): PromiseThunkResult => async (dispatch, getState) => { }
dispatch(actions.fetchTopicConfigAction.request()); };
try {
const config = await topicsApiClient.getTopicConfigs({
clusterName,
topicName,
});
const state = getState().topics;
const newState = {
...state,
byName: {
...state.byName,
[topicName]: {
...state.byName[topicName],
config: config.map((inputConfig) => ({
...inputConfig,
})),
},
},
};
dispatch(actions.fetchTopicConfigAction.success(newState));
} catch (e) {
dispatch(actions.fetchTopicConfigAction.failure());
}
};
const formatTopicCreation = (form: TopicFormDataRaw): TopicCreation => { const formatTopicCreation = (form: TopicFormDataRaw): TopicCreation => {
const { const {
@ -233,84 +235,84 @@ const formatTopicUpdate = (form: TopicFormDataRaw): TopicUpdate => {
}; };
}; };
export const createTopic = ( export const createTopic =
clusterName: ClusterName, (clusterName: ClusterName, form: TopicFormDataRaw): PromiseThunkResult =>
form: TopicFormDataRaw async (dispatch, getState) => {
): PromiseThunkResult => async (dispatch, getState) => { dispatch(actions.createTopicAction.request());
dispatch(actions.createTopicAction.request()); try {
try { const topic: Topic = await topicsApiClient.createTopic({
const topic: Topic = await topicsApiClient.createTopic({ clusterName,
clusterName, topicCreation: formatTopicCreation(form),
topicCreation: formatTopicCreation(form), });
});
const state = getState().topics; const state = getState().topics;
const newState = { const newState = {
...state, ...state,
byName: { byName: {
...state.byName, ...state.byName,
[topic.name]: { [topic.name]: {
...topic, ...topic,
},
}, },
}, allNames: [...state.allNames, topic.name],
allNames: [...state.allNames, topic.name], };
};
dispatch(actions.createTopicAction.success(newState)); dispatch(actions.createTopicAction.success(newState));
} catch (error) { } catch (error) {
const response = await getResponse(error); const response = await getResponse(error);
const alert: FailurePayload = { const alert: FailurePayload = {
subject: ['schema', form.name].join('-'), subject: ['schema', form.name].join('-'),
title: `Schema ${form.name}`, title: `Schema ${form.name}`,
response, response,
}; };
dispatch(actions.createTopicAction.failure({ alert })); dispatch(actions.createTopicAction.failure({ alert }));
} }
}; };
export const updateTopic = ( export const updateTopic =
clusterName: ClusterName, (
topicName: TopicName, clusterName: ClusterName,
form: TopicFormDataRaw topicName: TopicName,
): PromiseThunkResult => async (dispatch, getState) => { form: TopicFormDataRaw
dispatch(actions.updateTopicAction.request()); ): PromiseThunkResult =>
try { async (dispatch, getState) => {
const topic: Topic = await topicsApiClient.updateTopic({ dispatch(actions.updateTopicAction.request());
clusterName, try {
topicName, const topic: Topic = await topicsApiClient.updateTopic({
topicUpdate: formatTopicUpdate(form), clusterName,
}); topicName,
topicUpdate: formatTopicUpdate(form),
});
const state = getState().topics; const state = getState().topics;
const newState = { const newState = {
...state, ...state,
byName: { byName: {
...state.byName, ...state.byName,
[topic.name]: { [topic.name]: {
...state.byName[topic.name], ...state.byName[topic.name],
...topic, ...topic,
},
}, },
}, };
};
dispatch(actions.updateTopicAction.success(newState)); dispatch(actions.updateTopicAction.success(newState));
} catch (e) { } catch (e) {
dispatch(actions.updateTopicAction.failure()); dispatch(actions.updateTopicAction.failure());
} }
}; };
export const deleteTopic = ( export const deleteTopic =
clusterName: ClusterName, (clusterName: ClusterName, topicName: TopicName): PromiseThunkResult =>
topicName: TopicName async (dispatch) => {
): PromiseThunkResult => async (dispatch) => { dispatch(actions.deleteTopicAction.request());
dispatch(actions.deleteTopicAction.request()); try {
try { await topicsApiClient.deleteTopic({
await topicsApiClient.deleteTopic({ clusterName,
clusterName, topicName,
topicName, });
}); dispatch(actions.deleteTopicAction.success(topicName));
dispatch(actions.deleteTopicAction.success(topicName)); } catch (e) {
} catch (e) { dispatch(actions.deleteTopicAction.failure());
dispatch(actions.deleteTopicAction.failure()); }
} };
};

10
kafka-ui-react-app/src/redux/reducers/topics/selectors.ts
View file

@ -18,12 +18,10 @@ export const getTopicListTotalPages = (state: RootState) =>
topicsState(state).totalPages; topicsState(state).totalPages;
const getTopicListFetchingStatus = createFetchingSelector('GET_TOPICS'); const getTopicListFetchingStatus = createFetchingSelector('GET_TOPICS');
const getTopicDetailsFetchingStatus = createFetchingSelector( const getTopicDetailsFetchingStatus =
'GET_TOPIC_DETAILS' createFetchingSelector('GET_TOPIC_DETAILS');
); const getTopicMessagesFetchingStatus =
const getTopicMessagesFetchingStatus = createFetchingSelector( createFetchingSelector('GET_TOPIC_MESSAGES');
'GET_TOPIC_MESSAGES'
);
const getTopicConfigFetchingStatus = createFetchingSelector('GET_TOPIC_CONFIG'); const getTopicConfigFetchingStatus = createFetchingSelector('GET_TOPIC_CONFIG');
const getTopicCreationStatus = createFetchingSelector('POST_TOPIC'); const getTopicCreationStatus = createFetchingSelector('POST_TOPIC');
const getTopicUpdateStatus = createFetchingSelector('PATCH_TOPIC'); const getTopicUpdateStatus = createFetchingSelector('PATCH_TOPIC');

6
kafka-ui-react-app/src/redux/store/configureStore/mockStoreCreator.ts
View file

@ -6,9 +6,7 @@ import { RootState, Action } from 'redux/interfaces';
const middlewares: Array<Middleware> = [thunk]; const middlewares: Array<Middleware> = [thunk];
type DispatchExts = ThunkDispatch<RootState, undefined, Action>; type DispatchExts = ThunkDispatch<RootState, undefined, Action>;
const mockStoreCreator: MockStoreCreator< const mockStoreCreator: MockStoreCreator<RootState, DispatchExts> =
RootState, configureMockStore<RootState, DispatchExts>(middlewares);
DispatchExts
> = configureMockStore<RootState, DispatchExts>(middlewares);
export default mockStoreCreator(); export default mockStoreCreator();