\n \n
\n
\n {formEnabled && this._renderForm()}\n {formEnabled && oidcAuths && this._renderSeparator()}\n {oidcAuths && this._renderOidc(oidcAuths)}\n \n \n \n {\n search[name].text = input.value;\n this.setState({ search });\n }}\n />\n {\n search[name].type = value.target.value;\n this.setState({ search });\n }}\n />\n
\n );\n }\n\n _renderSearchGroup() {\n const { isSearching } = this.state;\n\n return (\n \n\n {this._renderSearchFilter('key', 'Key')}\n {this._renderSearchFilter('value','Value')}\n {this._renderSearchFilter('headerKey', 'Header Key')}\n {this._renderSearchFilter('headerValue', 'Header Value')}\n\n
);\n }\n\n _renderCurrentSearchText() {\n const { search } = this.state;\n const filterKey = Object.keys(search).find(value => search[value].text.length > 0);\n return (filterKey !== undefined)? search[filterKey].text : '';\n }\n\n render() {\n const {\n sortBy,\n partition,\n offsets,\n messages,\n pageNumber,\n recordCount,\n showFilters,\n datetime,\n isSearching,\n canDeleteRecords,\n canDownload,\n percent,\n loading\n } = this.state;\n\n let actions = [constants.TABLE_SHARE, constants.TABLE_COPY]\n if (canDeleteRecords) actions.push(constants.TABLE_DELETE)\n if (canDownload) actions.push(constants.TABLE_DOWNLOAD)\n\n let date = moment(datetime);\n const { history } = this.props;\n const firstColumns = [\n { colName: 'Key', colSpan: 1 },\n { colName: 'Value', colSpan: 1 },\n { colName: 'Date', colSpan: 1 },\n { colName: 'Partition', colSpan: 1 },\n { colName: 'Offset', colSpan: 1 },\n { colName: 'Headers', colSpan: 1 },\n { colName: 'Schema', colSpan: 1 }\n ];\n return (\n \n this._searchMessages() }\n >\n {isSearching ? (\n \n ) : (\n \n )}\n \n this._stopEventSource()}\n >\n Stop\n \n this._clearSearch()}\n >\n Clear\n \n
\n \n
\n \n {isSearching && - \n
- \n
\n \n\n Sort: ({sortBy})\n \n {!loading &&{this._renderSortOptions()} }\n \n - \n
\n \n\n Partition: ({partition})\n \n {!loading &&\n }\n\n {this._renderPartitionOptions()}\n\n \n - \n
\n \n\n Timestamp:\n {(datetime !== '' &&\n ' ' +\n formatDateTime(\n {\n year: date.year(),\n monthValue: date.month(),\n dayOfMonth: date.date(),\n hour: date.hour(),\n minute: date.minute(),\n second: date.second()\n },\n 'DD-MM-YYYY HH:mm'\n ))}\n \n {!loading && (\n\n \n )}\n\n\n \n - \n
\n \n\n Search: { this._renderCurrentSearchText() }\n \n {!loading && (\n\n {this._renderSearchGroup()}\n \n )}\n \n - \n
\n \n\n Offsets:\n \n {!loading && (\n\n \n )}\n\n\n\n\n{this._renderOffsetsOptions()}
\n\n\n \n - \n
\n \n\n Time Format: ({this.state.dateTimeFormat})\n \n\n \n\n this._handleOnDateTimeFormatChanged(\n constants.SETTINGS_VALUES.TOPIC_DATA.DATE_TIME_FORMAT.RELATIVE\n )\n }>\n Show relative time\n \n\n this._handleOnDateTimeFormatChanged(\n constants.SETTINGS_VALUES.TOPIC_DATA.DATE_TIME_FORMAT.ISO\n )\n }>\n Show ISO timestamp\n \n \n
\n {\n let value = obj[col.accessor] === '' ? 'null' : obj[col.accessor];\n return (\n \n
\n );\n }\n },\n {\n id: 'timestamp',\n accessor: 'timestamp',\n colName: 'Date',\n type: 'text',\n cell: (obj, col) => {\n return {value}\n \n );\n }\n },\n {\n id: 'value',\n accessor: 'value',\n colName: 'Value',\n type: 'text',\n extraRow: true,\n extraRowContent: (obj, index) => {\n let value = obj.value;\n try {\n let json = LosslessJson.parse(obj.value);\n value = LosslessJson.stringify(json, undefined, \" \");\n // eslint-disable-next-line no-empty\n } catch (e) {}\n\n return (\n \n {obj.exceptions.length > 0 && (\n
')}}>\n
\n )}\n ')}}>\n
\n {obj.value || 'null'}\n \n {obj.headers.length}
;\n }\n },\n {\n id: 'schema',\n accessor: 'schema',\n colName: 'Schema',\n type: 'text',\n cell: (obj, col) => {\n return (\n \n {obj[col.accessor].key !== undefined && (\n {\n this._redirectToSchema(obj.schema.key);\n }}\n >\n Key: {obj[col.accessor].key}\n \n )}\n\n {obj[col.accessor].value !== undefined && (\n {\n this._redirectToSchema(obj.schema.value);\n }}\n >\n Value: {obj[col.accessor].value}\n \n )}\n
\n );\n }\n }\n ]}\n extraRow\n noStripes\n data={messages}\n rowId={data => {\n return data.partition + '-' + data.offset;\n }}\n updateData={data => {\n this.setState({ messages: data });\n }}\n onDelete={row => {\n this._handleOnDelete(row);\n }}\n onShare={row => {\n this._handleOnShare(row);\n }}\n onDownload={row => {\n this._handleDownload(row);\n }}\n onCopy={row => {\n this._handleCopy(row)\n }}\n actions={actions}\n onExpand={obj => {\n return obj.headers.map(header => {\n return (\n \n \n \n \n \n \n {\n this.setState({ showConnects: !showConnects, selectedTab: constants.CONNECT });\n }}\n >\n {selectedConnect}\n
\n \n\n {listConnects}\n \n )}\n {this.renderMenuItem('fa fa-fw fa-gear', constants.SETTINGS, 'Settings')}\n \n \n );\n }\n}\n\nexport default withRouter(Sidebar);\n","import Sidebar from './Sidebar';\n\nexport default Sidebar;\n","import Loading from './Loading';\n\nexport default Loading;\n","import React, { Component } from 'react';\nimport './styles.scss';\nimport image from '../../images/icon.svg';\nclass Loading extends Component {\n render() {\n const { show } = this.props;\n let loadingContainer = show ? 'loading-container' : 'loading-none';\n return (\n \n {\n this.setState({ selectedTab: tab });\n this.props.history.push({\n pathname: `/ui/${selectedCluster}/${tab}`\n });\n return false;\n }}\n >\n \n {' '}\n {\n this.setState({ selectedTab: tab });\n e.preventDefault();\n }}>\n \n \n \n \n {' '}\n {\n this.setState({ selectedTab: tab });\n e.preventDefault();\n }}>\n {label}\n \n \n \n );\n }\n\n render() {\n const {\n selectedConnect,\n selectedCluster,\n showClusters,\n showConnects,\n selectedTab,\n height,\n enableRegistry,\n enableConnect\n } = this.state;\n const roles = this.state.roles || {};\n const tag = sessionStorage.getItem('version');\n const { listConnects, listClusters } = this.setClustersAndConnects();\n return (\n {\n this.props.toggleSidebar(expanded);\n }}\n style={{ background: 'black', height: height, position: 'fixed' }}\n >\n \n \n \n {''}\n {tag}\n \n \n \n \n \n \n \n {\n this.setState({ showClusters: !showClusters, selectedTab: constants.CLUSTER });\n }}\n >\n {selectedCluster}\n
\n \n {listClusters}\n \n {roles &&\n roles.node &&\n this.renderMenuItem('fa fa-fw fa-laptop', constants.NODE, 'Nodes')}\n {roles &&\n roles.topic &&\n roles.topic['topic/read'] &&\n this.renderMenuItem('fa fa-fw fa-list', constants.TOPIC, 'Topics')}\n {roles &&\n roles.topic &&\n roles.topic['topic/data/read'] &&\n this.renderMenuItem('fa fa-fw fa-level-down', constants.TAIL, 'Live Tail')}\n {roles &&\n roles.group &&\n roles.group['group/read'] &&\n this.renderMenuItem('fa fa-fw fa-object-group', constants.GROUP, 'Consumer Groups')}\n {roles &&\n roles.acls &&\n roles.acls['acls/read'] &&\n this.renderMenuItem('fa fa-fw fa-key', constants.ACLS, 'ACLS')}\n {enableRegistry &&\n roles &&\n roles.registry &&\n roles.registry['registry/read'] &&\n this.renderMenuItem('fa fa-fw fa-cogs', constants.SCHEMA, 'Schema Registry')}\n {enableConnect && roles && roles.connect && roles.connect['connect/read'] && (\n \n this.changeSelectedConnect(connect)}\n >\n \n \n \n {connect}\n
\n \n \n \n ));\n\n return { listClusters, listConnects };\n };\n\n changeSelectedCluster(newSelectedCluster) {\n\n this.setState(\n {\n selectedCluster: newSelectedCluster.id,\n showClusters: false\n },\n () => {\n const { selectedCluster } = this.state;\n this.props.history.push({\n pathname: `/ui/${selectedCluster}/topic`,\n selectedCluster\n });\n\n this.handleRegistryAndConnects(selectedCluster);\n }\n );\n }\n\n changeSelectedConnect(connect) {\n this.setState({ selectedConnect: connect, showConnects: false }, () => {\n const { selectedConnect, selectedCluster } = this.state;\n this.props.history.push({\n pathname: `/ui/${selectedCluster}/connect/${selectedConnect}`,\n selectedCluster\n });\n });\n }\n\n renderMenuItem(iconClassName, tab, label) {\n const { selectedCluster } = this.state;\n const pathname = window.location.pathname;\n return (\n\n \n \n {\n onAdd && onAdd();\n }}\n >\n \n \n \n )}\n {actions.find(el => el === constants.TABLE_DETAILS) && (\n \n \n \n \n \n )}\n {actions.find(el => el === constants.TABLE_CONFIG) && (\n \n \n \n \n \n )}\n {actions.find(el => el === constants.TABLE_DELETE) && (\n \n {\n onDelete && onDelete(row);\n }}\n >\n \n \n \n )}\n {actions.find(el => el === constants.TABLE_EDIT) && (\n \n {\n onEdit && onEdit();\n }}\n >\n \n \n \n )}\n {actions.find(el => el === constants.TABLE_RESTART) && (\n \n {\n onRestart && onRestart(row);\n }}\n >\n \n \n \n )}\n {actions.find(el => el === constants.TABLE_COPY) && (\n \n {\n onCopy && onCopy(row);\n }}\n >\n \n \n \n )}\n {actions.find(el => el === constants.TABLE_SHARE) && (\n \n \n \n )}\n {actions.find(el => el === constants.TABLE_DOWNLOAD) && (\n \n {\n onDownload && onDownload(row);\n }}\n >\n \n \n \n )}\n \n );\n }\n\n renderLoading() {\n return (\n \n \n \n \n );\n }\n\n renderNoContent() {\n const { noContent } = this.props;\n if (noContent) {\n if (typeof noContent === 'string') {\n return (\n \n \n \n \n );\n } else {\n return noContent;\n }\n }\n return (\n \n \n \n \n );\n }\n\n colspan() {\n const { actions, columns } = this.props;\n\n return columns.filter(column => !column.extraRow).length + (actions && actions.length ? actions.length : 0)\n }\n\n render() {\n const { noStripes, loading, rowId } = this.props;\n let allItemRows = [];\n let data = this.props.data || [];\n\n data.forEach((item, index) => {\n if (rowId !== undefined) {\n index = rowId(item);\n }\n\n if (!item.id) {\n item.id = index;\n }\n const perItemRows = this.renderRow(item, index);\n allItemRows = allItemRows.concat(perItemRows);\n });\n\n let classNames = 'table table-bordered table-hover mb-0';\n if (!noStripes) classNames += ' table-striped';\n if (noStripes) classNames += ' no-stripes';\n\n return (\n {\n onChange(value);\n }}\n selectClass={selectClass}\n wrapperClass={wrapperClass}\n blankItem={blankItem}\n {...rest}\n />\n );\n };\n\n renderDatePicker = (name, label, onChange) => {\n const { formData, errors } = this.state;\n\n return (\n {\n onChange(value);\n }}\n />\n );\n };\n\n renderRadioGroup = (name, label, options, onChange) => {\n const { formData } = this.state;\n const items = [];\n\n for (let option of options) {\n const value = _.camelCase(option.toString());\n\n items[items.length] = {\n name: name,\n label: option,\n value: value,\n checked: value === formData[name]\n };\n }\n\n return \n \n );\n };\n\n renderCheckbox = (name, label, isChecked, onChange, isDefaultChecked, rest) => {\n return (\n \n {\n this.openAndCloseFilters();\n }}\n >\n \n \n \n \n );\n }\n}\n\nexport default SearchBar;\n","import SearchBar from './SearchBar';\n\nexport default SearchBar;\n","import Pagination from './Pagination';\n\nexport default Pagination;\n","\nexport const handlePageChange = ({ currentTarget: input, state }) => {\n const { value } = input;\n state.pageNumber = value;\n};\n\nexport const getPageNumber = (value, totalPageNumber) => {\n if (value <= 0) {\n value = 1;\n } else if (value > totalPageNumber) {\n value = totalPageNumber;\n }\n return value;\n};\n\nexport default {handlePageChange, getPageNumber};\n","import PageSize from './PageSize';\n\nexport default PageSize;\n","import React from 'react';\nimport './styles.scss';\n\nconst PageSize = ({\n pageNumber,\n totalPageNumber,\n currentPageSize,\n totalRecords,\n ranges = [10, 25, 50, 100, 150, 200],\n onChange,\n editPageNumber,\n showTotalPageNumber = true\n}) => {\n var pageSizeOptions = [];\n var pageSizeOptionsList = [];\n ranges.forEach(element => pageSizeOptions[element] = element );\n //if server's pageSize does not belong to ranges, it should be added - when the page is loaded for the first\n if(!ranges.includes(currentPageSize)){\n pageSizeOptions[currentPageSize] = currentPageSize;\n }\n pageSizeOptions.forEach((k) => {\n pageSizeOptionsList.push();\n })\n return (\n Do you want to delete topic: { \n );\n });\n }\n\n handleSearch = data => {\n const { searchData } = data;\n\n this.setState({ pageNumber: 1, searchData }, () => {\n this.getTopics();\n this.handleKeepSearchChange(data.keepSearch);\n this.props.history.push({\n pathname: `/ui/${this.state.selectedCluster}/topic`,\n search: `search=${searchData.search}&topicListView=${this.state.searchData.topicListView}&page=${this.state.pageNumber}`\n });\n\n });\n };\n\n handlePageChangeSubmission = value => {\n let pageNumber = getPageNumber(value, this.state.totalPageNumber);\n\n this.setState({ pageNumber: pageNumber }, () => {\n this.getTopics();\n this.props.history.push({\n pathname: `/ui/${this.state.selectedCluster}/topic`,\n search: `search=${this.state.searchData.search}&topicListView=${this.state.searchData.topicListView}&page=${pageNumber}`\n });\n });\n };\n\n handlePageSizeChangeSubmission = value => {\n let pageNumber = 1;\n this.setState({ currentPageSize: value, pageNumber: pageNumber},() => {\n this.getTopics();\n this.props.history.push({\n pathname: `/ui/${this.state.selectedCluster}/topic`,\n search: `search=${this.state.searchData.search}&topicListView=${this.state.searchData.topicListView}&uiPageSize=${value}`\n });\n });\n };\n\n async getTopics() {\n const { selectedCluster, pageNumber, currentPageSize } = this.state;\n const { search, topicListView } = this.state.searchData;\n this.setState({ loading: true } );\n\n let response = await this.getApi(uriTopics(selectedCluster, search, topicListView, pageNumber, currentPageSize));\n let data = response.data;\n\n if (data) {\n if (data.results) {\n this.handleTopics(data.results);\n } else {\n this.setState({ topics: [] });\n }\n this.setState({ selectedCluster, totalPageNumber: data.page, currentPageSize: data.pageSize, loading: false } )\n } else {\n this.setState({ topics: [], loading: false, totalPageNumber: 0});\n }\n }\n\n handleTopics(topics) {\n let tableTopics = {};\n const collapseConsumerGroups = {};\n\n const { selectedCluster, uiOptions } = this.state;\n const uiOptionsTopic = uiOptions.topic ?? {};\n\n const setState = () => {\n this.setState({ topics: Object.values(tableTopics) });\n }\n\n topics.forEach(topic => {\n tableTopics[topic.name] = {\n id: topic.name,\n name: topic.name,\n count: topic.size,\n lastWrite: undefined,\n size: showBytes(topic.logDirSize),\n partitionsTotal: topic.partitions.length,\n replicationFactor: topic.replicaCount,\n replicationInSync: topic.inSyncReplicaCount,\n groupComponent: undefined,\n internal: topic.internal\n }\n collapseConsumerGroups[topic.name] = (uiOptionsTopic.showAllConsumerGroups) ? true : false;\n });\n this.setState({collapseConsumerGroups});\n setState()\n\n const topicsName = topics.map(topic => topic.name).join(\",\");\n\n if(!uiOptionsTopic.skipConsumerGroups) {\n this.getApi(uriConsumerGroupByTopics(selectedCluster, encodeURIComponent(topicsName)))\n .then(value => {\n topics.forEach(topic => {\n tableTopics[topic.name].groupComponent = (value && value.data) ? value.data.filter(consumerGroup =>\n (consumerGroup.activeTopics && consumerGroup.activeTopics.includes(topic.name))\n || (consumerGroup.topics && consumerGroup.topics.includes(topic.name))) : [];\n });\n setState();\n });\n }\n\n if(!uiOptionsTopic.skipLastRecord) {\n this.getApi(uriTopicLastRecord(selectedCluster, encodeURIComponent(topicsName)))\n .then(value => {\n topics.forEach((topic) => {\n tableTopics[topic.name].lastWrite = value.data[topic.name] ? value.data[topic.name].timestamp : ''\n });\n setState();\n });\n }\n }\n\n\n\n handleConsumerGroups = (consumerGroups, topicId) => {\n if (consumerGroups && consumerGroups.length > 0) {\n return consumerGroups.map(consumerGroup => {\n let className = 'btn btn-sm mb-1 mr-1 btn-';\n let offsetLag = calculateTopicOffsetLag(consumerGroup.offsets, topicId);\n\n const activeTopic = consumerGroup.activeTopics && consumerGroup.activeTopics.find(\n activeTopic => activeTopic === topicId\n );\n activeTopic ? (className += 'success') : (className += 'warning');\n\n const noPropagation = e => e.stopPropagation();\n\n return (\n \n {consumerGroup.id} this.handleCollapseConsumerGroups(obj.id)}\n aria-expanded={collapseConsumerGroups[obj.id]}\n >\n {collapseConsumerGroups[obj.id] && }\n {!collapseConsumerGroups[obj.id] && }\n \n {consumerGroups.length}\n \n \n \n }\n \n );\n } else if (obj.groupComponent) {\n return \n \n );\n }\n\n render() {\n const { data, loading } = this.state;\n const roles = this.state.roles || {};\n return (\n this.handleSubmit()}\n >\n this.changeSelectedCluster(cluster)}\n >\n \n {' '}\n \n \n {cluster.id}\n
\n \n \n \n ));\n const listConnects = allConnects.map(connect => (\n \n \n {firstHeader.map((column, index) => {\n return (\n \n {column.colName}\n \n );\n })}\n {actions && actions.length > 0 && data && data.length > 0 && (\n \n \n )}\n \n \n {columns.map((column, index) => {\n if (!column.extraRow) {\n return (\n \n \n );\n }\n return null;\n })}\n {actions && actions.length > 0 && data && data.length > 0 && (\n \n \n \n );\n }\n\n onDoubleClick(onDetails, row) {\n const { history, idCol } = this.props;\n\n if (onDetails) {\n let url = onDetails(idCol ? row[this.props.idCol] : row.id, row);\n if (url) {\n history.push({\n pathname: url,\n internal: row.internal\n });\n }\n }\n }\n\n renderRow(row, index) {\n const { actions, columns, extraRow, onExpand, noRowBackgroundChange, onDetails, handleExtraExpand, handleExtraCollapse, reduce } = this.props;\n const { extraExpanded } = this.state;\n\n let extraRowColCollapsed;\n let extraRowColExpanded;\n const items = [\n \n {columns.map((column, colIndex) => {\n let extraStyles = [];\n if (noRowBackgroundChange) {\n extraStyles.push({ backgroundColor: '#444' });\n }\n if (column.expand) {\n extraStyles.push({ cursor: 'pointer' });\n }\n if (column.extraRow) {\n extraRowColCollapsed = column.cell ? column.cell(row, column) : row[column.accessor];\n extraRowColExpanded = column.extraRowContent\n ? column.extraRowContent(row, column)\n : row[column.accessor];\n return null;\n }\n if (typeof column.cell === 'function') {\n return (\n {\n if (\n actions &&\n actions.find(action => action === constants.TABLE_DETAILS) &&\n !column.expand\n ) {\n this.onDoubleClick(onDetails, row);\n }\n\n column.expand && this.handleExpand(row);\n }}\n id={`row_${column.id}_${colIndex}`}\n >\n {this.renderContent(column.cell(row, column))}\n \n );\n }\n\n return (\n {\n if (\n actions &&\n actions.find(action => action === constants.TABLE_DETAILS) &&\n !column.expand\n ) {\n this.onDoubleClick(onDetails, row);\n }\n\n column.expand && this.handleExpand(row);\n }}\n id={`row_${column.id}_${colIndex}`}\n >\n {this.renderContent(row[column.accessor])}\n \n );\n })}\n {actions && actions.length > 0 && this.renderActions(row)}\n \n ];\n if (\n JSON.stringify(\n this.state.expanded.find(el => {\n return el === row.id;\n })\n )\n ) {\n items.push(\n \n \n {onExpand(row)}\n \n \n );\n }\n\n if (extraRow && extraRowColCollapsed) {\n items.push(\n {\n if (\n !extraExpanded ||\n !JSON.stringify(extraExpanded.find(expanded => expanded.subject ? expanded.subject === row.subject : expanded === row.id)) ||\n !JSON.stringify(extraExpanded.find(expanded => expanded.subject ? expanded.subject === row.subject : expanded === row.id)).length > 0) {\n typeof handleExtraExpand === 'function'\n ? this.setState({ extraExpanded: handleExtraExpand(extraExpanded, row)})\n : this.handleExtraExpand(row);\n }\n }}\n key={'row-expanded-' + row.id}\n >\n \n {' '}\n {extraExpanded &&\n JSON.stringify(extraExpanded.find(expanded => expanded.subject ? expanded.subject === row.subject : expanded === row.id)) &&\n JSON.stringify(extraExpanded.find(expanded => expanded.subject ? expanded.subject === row.subject : expanded === row.id)).length > 0 ? (\n expanded.subject ? expanded.subject === row.subject : expanded === row.id)) &&\n JSON.stringify(extraExpanded.find(expanded => expanded.subject ? expanded.subject === row.subject : expanded === row.id)).length > 0\n ? ''\n : 'collapsed-extra-row'\n }\n >\n {extraExpanded &&\n JSON.stringify(extraExpanded.find(expanded => expanded.subject ? expanded.subject === row.subject : expanded === row.id)) &&\n JSON.stringify(extraExpanded.find(expanded => expanded.subject ? expanded.subject === row.subject : expanded === row.id)).length > 0\n ? extraRowColExpanded\n : extraRowColCollapsed}\n
\n \n \n );\n }\n\n return items;\n }\n\n renderContent(content) {\n return content !== undefined ? content : \n
\n );\n }\n}\n\nexport default Spinner;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport * as constants from '../../utils/constants';\nimport './styles.scss';\nimport Spinner from '../Spinner';\nimport {Link} from 'react-router-dom';\n\nclass Table extends Component {\n state = {\n extraExpanded: [],\n expanded: [],\n sortingColumn: '',\n reverse: false\n };\n\n handleExpand = el => {\n const currentExpandedRows = this.state.expanded;\n const isRowCurrentlyExpanded = currentExpandedRows.includes(el.id);\n const newExpandedRows = isRowCurrentlyExpanded\n ? currentExpandedRows.filter(id => id !== el.id)\n : currentExpandedRows.concat(el.id);\n this.setState({ expanded: newExpandedRows });\n };\n\n handleExtraExpand = el => {\n const currentExpandedRows = this.state.extraExpanded;\n const isRowCurrentlyExpanded = currentExpandedRows.includes(el.id);\n\n const newExpandedRows = isRowCurrentlyExpanded\n ? currentExpandedRows\n : currentExpandedRows.concat(el.id);\n this.setState({ extraExpanded: newExpandedRows });\n };\n\n handleExtraCollapse = el => {\n const currentExpandedRows = this.state.extraExpanded;\n const isRowCurrentlyExpanded = currentExpandedRows.includes(el.id);\n\n const newExpandedRows = !isRowCurrentlyExpanded\n ? currentExpandedRows\n : currentExpandedRows.filter(id => id !== el.id);\n this.setState({ extraExpanded: newExpandedRows });\n };\n\n renderHeader() {\n const { has2Headers, firstHeader, columns, actions, data } = this.props;\n return (\n <>\n {has2Headers && (\n \n \n {column.colName}\n {column.sortable && (\n {\n let data = [];\n this.setState(\n {\n sortingColumn:\n column.accessor !== this.state.sortingColumn\n ? column.accessor\n : this.state.sortingColumn,\n reverse:\n column.accessor !== this.state.sortingColumn &&\n this.state.sortingColumn > 0\n ? false\n : !this.state.reverse\n },\n () => {\n data = this.props.data.sort(\n constants.sortBy(this.state.sortingColumn, this.state.reverse)\n );\n this.props.updateData(data);\n }\n );\n }}\n />\n )}\n
\n \n {\n typeof handleExtraCollapse === 'function'\n ? this.setState({ extraExpanded: handleExtraCollapse(extraExpanded, row)})\n : this.handleExtraCollapse(row);\n }}\n aria-hidden=\"true\"\n >\n ×\n \n
\n ) : null}\n \n {noContent}\n
\n \n No data available\n
\n \n \n {this.renderHeader()}\n \n {loading? this.renderLoading() : ((data && data.length > 0) ? allItemRows : this.renderNoContent())}\n \n
\n
\n );\n }\n}\n\nTable.propTypes = {\n title: PropTypes.string,\n has2Headers: PropTypes.bool,\n firstHeader: PropTypes.arrayOf(\n PropTypes.shape({\n colName: PropTypes.string,\n colSpan: PropTypes.number\n })\n ),\n data: PropTypes.array,\n columns: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n accessor: PropTypes.string,\n colName: PropTypes.string,\n type: PropTypes.string,\n readOnly: PropTypes.bool,\n cell: PropTypes.function\n })\n ),\n actions: PropTypes.array,\n\n onAdd: PropTypes.func,\n onDetails: PropTypes.func,\n onConfig: PropTypes.func,\n onDelete: PropTypes.func,\n onEdit: PropTypes.func,\n onRestart: PropTypes.func,\n onShare: PropTypes.func,\n onDownload: PropTypes.func,\n onCopy: PropTypes.func,\n\n idCol: PropTypes.string,\n toPresent: PropTypes.array,\n noContent: PropTypes.any,\n handleExtraExpand: PropTypes.func,\n handleExtraCollapse: PropTypes.func,\n loading: PropTypes.bool,\n history: PropTypes.object,\n rowId: PropTypes.func,\n};\n\nexport default Table;\n","import ConfirmModal from './ConfirmModal';\n\nexport default ConfirmModal;\n","// Application version to display in sidebar\nexport const VERSION = 'Beta';\n\n// Config data types\nexport const MILLI = 'MILLI';\nexport const BYTES = 'BYTES';\nexport const TEXT = 'TEXT';\n\n// Role types\nexport const ROLE_TYPE = {\n TOPIC: 'topic',\n NODE: 'node',\n GROUP: 'group',\n REGISTRY: 'registry',\n ACLS: 'acls',\n CONNECT: 'connect'\n};\n\n// Table actions\nexport const TABLE_ADD = 'add';\nexport const TABLE_EDIT = 'edit';\nexport const TABLE_DELETE = 'delete';\nexport const TABLE_DETAILS = 'details';\nexport const TABLE_CONFIG = 'config';\nexport const TABLE_RESTART = 'restart';\nexport const TABLE_SHARE = 'share';\nexport const TABLE_DOWNLOAD = 'download';\nexport const TABLE_COPY = 'copy';\n\n// Tab names/route names\nexport const CLUSTER = 'cluster';\nexport const NODE = 'node';\nexport const TOPIC = 'topic';\nexport const TAIL = 'tail';\nexport const GROUP = 'group';\nexport const ACLS = 'acls';\nexport const SCHEMA = 'schema';\nexport const CONNECT = 'connect';\nexport const SETTINGS = 'settings';\n\n// Configurable settings\nexport const SETTINGS_VALUES = {\n TOPIC: {\n TOPIC_DEFAULT_VIEW: {\n ALL: 'ALL',\n HIDE_INTERNAL: 'HIDE_INTERNAL',\n HIDE_INTERNAL_STREAM: 'HIDE_INTERNAL_STREAM',\n HIDE_STREAM: 'HIDE_STREAM'\n }\n },\n TOPIC_DATA: {\n SORT: {\n OLDEST: 'OLDEST',\n NEWEST: 'NEWEST',\n },\n DATE_TIME_FORMAT: {\n RELATIVE: 'RELATIVE',\n ISO: 'ISO',\n }\n }\n}\n\nexport const TYPES = {\n STRING: 'STRING',\n LONG: 'LONG',\n CLASS: 'CLASS',\n PASSWORD: 'PASSWORD',\n INT: 'INT',\n LIST: 'LIST',\n BOOLEAN: 'BOOLEAN',\n DOUBLE: 'DOUBLE',\n SHORT: 'SHORT'\n};\n\nexport default {\n MILLI,\n BYTES,\n TEXT,\n TABLE_ADD,\n TABLE_EDIT,\n TABLE_DELETE,\n TABLE_DETAILS,\n TABLE_CONFIG,\n TABLE_RESTART,\n TABLE_SHARE,\n TABLE_COPY,\n TABLE_DOWNLOAD,\n CLUSTER,\n NODE,\n TOPIC,\n TAIL,\n GROUP,\n ACLS,\n SCHEMA,\n CONNECT,\n TYPES,\n ROLE_TYPE,\n VERSION,\n SETTINGS,\n SETTINGS_VALUES\n};\n\nexport const sortBy = (field, reverse, primer) => {\n const key = primer\n ? function(x) {\n return primer(x[field]);\n }\n : function(x) {\n return x[field];\n };\n\n reverse = !reverse ? 1 : -1;\n\n return function(a, b) {\n // eslint-disable-next-line\n return (a = key(a)), (b = key(b)), reverse * ((a > b) - (b > a));\n };\n};\n","import {createBrowserHistory} from 'history'\nimport { basePath } from './endpoints';\n\nconst customHistory = createBrowserHistory({\n basename: basePath\n});\n\nexport default customHistory;\n","import React from 'react';\nimport axios from 'axios';\nimport { toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\nimport history from './history';\n\nconst configs = {\n withCredentials: true\n};\n\nconst handleError = err => {\n let error = {\n status: err.response ? err.response.status : '',\n message: err.response ? err.response.data.message : 'Internal Server Error',\n stacktrace:\n err.response &&\n err.response.data &&\n err.response.data._embedded &&\n err.response.data._embedded.stacktrace &&\n err.response.data._embedded.stacktrace.message\n ? err.response.data._embedded.stacktrace.message\n : null\n };\n\n if (err.response && err.response.status < 500) {\n toast.warn(error.message);\n if (err.status === 401) {\n history.replace('/ui/login');\n }\n\n return error;\n } else {\n let message = React.createElement('h4', null, error.message);\n\n if (error.stacktrace) {\n let detailedReactHTMLElement = React.createElement('pre', null, error.stacktrace);\n message = React.createElement('div', null, message, detailedReactHTMLElement);\n }\n\n toast.error(message, {\n autoClose: false,\n className: 'internal-error'\n });\n\n return error;\n }\n};\n\nexport const get = (url, config) =>\n new Promise((resolve, reject) => {\n axios\n .get(url, {...configs, ...config})\n .then(res => {\n resolve(res);\n })\n .catch(err => {\n if (!axios.isCancel(err)) {\n reject(handleError(err));\n }\n });\n });\n\nexport const put = (url, body, config) =>\n new Promise((resolve, reject) => {\n axios\n .put(url, body, {...configs, ...config})\n .then(res => {\n resolve(res);\n })\n .catch(err => {\n if (!axios.isCancel(err)) {\n reject(handleError(err));\n }\n });\n });\n\nexport const post = (url, body, config) =>\n new Promise((resolve, reject) => {\n axios\n .post(url, body, {...configs, ...config})\n .then(res => {\n resolve(res);\n })\n .catch(err => {\n if (!axios.isCancel(err)) {\n reject(handleError(err));\n }\n });\n });\n\nexport const remove = (url, body, config) =>\n new Promise((resolve, reject) => {\n axios\n .delete(url, { ...configs, ...config, data: body })\n .then(res => {\n resolve(res);\n })\n .catch(err => {\n if (!axios.isCancel(err)) {\n reject(handleError(err));\n }\n });\n });\n\nexport const login = (url, body) => {\n const requestOptions = {\n method: 'POST',\n redirect: 'manual',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(body)\n };\n return fetch(url, requestOptions);\n};\n\nexport const logout = url => {\n const requestOptions = {\n method: 'GET',\n redirect: 'manual'\n };\n\n new Promise((resolve, reject) => {\n fetch(url, requestOptions)\n .then(response => {\n resolve(response);\n })\n .catch(function(err) {\n reject(handleError(err));\n });\n });\n};\n\nexport default { get, put, post, remove, login, logout };\n","import prefix from './../prefix';\n\nconst baseUrl = process.env.REACT_APP_BASE_URL ||\n `${window.location.protocol}//${window.location.hostname}:${window.location.port}`;\n\nexport const basePath = prefix()\n\nexport const apiUrl = baseUrl + prefix() + '/api'\n\nexport const uriLogin = () => {\n return `${basePath}/login`;\n};\n\nexport const uriAuths = () => {\n return `${apiUrl}/auths`;\n};\n\nexport const uriOidc = (provider) => {\n return `${baseUrl}${basePath}/oauth/login/${provider}`;\n};\n\nexport const uriLogout = () => {\n return `${basePath}/logout`;\n};\n\nexport const uriCurrentUser = () => {\n return `${apiUrl}/me`;\n};\n\nexport const uriClusters = () => {\n return `${apiUrl}/cluster`;\n};\n\nexport const uriUIOptions = (clusterId) => {\n return `${apiUrl}/${clusterId}/ui-options`;\n};\n\nexport const uriTopics = (clusterId, search, show, page, pageSize) => {\n if(pageSize === 1){\n return `${apiUrl}/${clusterId}/topic?search=${search}&show=${show}&page=${page}`;\n }else{\n return `${apiUrl}/${clusterId}/topic?search=${search}&show=${show}&page=${page}&uiPageSize=${pageSize}`;\n }\n};\n\nexport const uriTopicDefaultConf = () => `${apiUrl}/topic/defaults-configs`;\n\nexport const uriTopicsName = (clusterId) => `${apiUrl}/${clusterId}/topic/name`;\n\nexport const uriTopicsInfo = (clusterId, topicId) => `${apiUrl}/${clusterId}/topic/${topicId}`;\n\nexport const uriTopicsCreate = clusterId => `${apiUrl}/${clusterId}/topic`;\n\nexport const uriTopicsProduce = (clusterId, topicName) =>\n `${apiUrl}/${clusterId}/topic/${topicName}/data`;\n\nexport const uriDeleteTopics = (clusterId, topicId) => {\n return `${apiUrl}/${clusterId}/topic/${topicId}`;\n};\n\nexport const uriTopicData = (\n clusterId,\n topicId,\n filters,\n nextPage = ''\n) => {\n if (nextPage !== '') {\n return basePath + nextPage;\n }\n\n let uri = `${apiUrl}/${clusterId}/topic/${topicId}/data?${filters}`;\n return uri;\n};\n\nexport const uriTopicDataSearch = (clusterId, topicId, filters, offsets) => {\n let uri = `${apiUrl}/${clusterId}/topic/${topicId}/data/search`;\n if(filters) {\n uri = uri + `?${filters}`\n }\n if(offsets) {\n uri = uri + `&after=${offsets}`\n }\n return uri;\n};\n\nexport const uriTopicDataSingleRecord = (clusterId, topicId, partition, offset) => {\n let uri = `${apiUrl}/${clusterId}/topic/${topicId}/data/record/${partition}/${offset}`;\n return uri;\n};\n\nexport const uriTopicsPartitions = (clusterId, topicId) => {\n return `${apiUrl}/${clusterId}/topic/${topicId}/partitions`;\n};\n\nexport const uriTopicsGroups = (clusterId, topicId) => {\n return `${apiUrl}/${clusterId}/topic/${topicId}/groups`;\n};\nexport const uriTopicsLogs = (clusterId, topicId) => {\n return `${apiUrl}/${clusterId}/topic/${topicId}/logs`;\n};\nexport const uriTopicsConfigs = (clusterId, topicId) => {\n return `${apiUrl}/${clusterId}/topic/${topicId}/configs`;\n};\nexport const uriTopicsAcls = (clusterId, topicId) => {\n return `${apiUrl}/${clusterId}/topic/${topicId}/acls`;\n};\n\nexport const uriTopicsUpdateConfigs = (clusterId, topicId) => {\n return `${apiUrl}/${clusterId}/topic/${topicId}/configs`;\n};\n\nexport const uriTopicsOffsetsByTimestamp = (clusterId, topicId, timestamp) => {\n return `${apiUrl}/${clusterId}/topic/${topicId}/offsets/start?timestamp=${timestamp}`;\n};\n\nexport const uriTopicsCopy = (fromClusterId, fromTopicId, toClusterId, toTopicId) => {\n return `${apiUrl}/${fromClusterId}/topic/${fromTopicId}/copy/${toClusterId}/topic/${toTopicId}`;\n}\n\n\nexport const uriConnects = id => {\n return `${apiUrl}/connects${id ? '?clusterId=' + id : ''}`;\n};\n\nexport const uriConnectDefinitions = (clusterId, connectId, search, pageNumber) => {\n return `${apiUrl}/${clusterId}/connect/${connectId}?&search=${search}&page=${pageNumber}`;\n};\n\nexport const uriConnectPlugins = (clusterId, connectId) => {\n return `${apiUrl}/${clusterId}/connect/${connectId}/plugins`;\n};\n\nexport const uriConnectPlugin = (clusterId, connectId, pluginId) => {\n return `${apiUrl}/${clusterId}/connect/${connectId}/plugins/${pluginId}`;\n};\n\nexport const uriCreateConnect = (clusterId, connectId) => {\n return `${apiUrl}/${clusterId}/connect/${connectId}`;\n};\n\nexport const uriGetDefinition = (clusterId, connectId, definitionId) => {\n // eslint-disable-next-line max-len\n return `${apiUrl}/${clusterId}/connect/${connectId}/${definitionId}`;\n};\n\nexport const uriConnectDefinitionConfigs = (clusterId, connectId, definitionId) => {\n // eslint-disable-next-line max-len\n return `${apiUrl}/${clusterId}/connect/${connectId}/${definitionId}/configs`;\n};\n\nexport const uriUpdateDefinition = (clusterId, connectId, definitionId) => {\n return `${apiUrl}/${clusterId}/connect/${connectId}/${definitionId}/configs`;\n};\n\nexport const uriPauseDefinition = (clusterId, connectId, definitionId) => {\n return `${apiUrl}/${clusterId}/connect/${connectId}/${definitionId}/pause`;\n};\n\nexport const uriResumeDefinition = (clusterId, connectId, definitionId) => {\n return `${apiUrl}/${clusterId}/connect/${connectId}/${definitionId}/resume`;\n};\n\nexport const uriRestartDefinition = (clusterId, connectId, definitionId) => {\n return `${apiUrl}/${clusterId}/connect/${connectId}/${definitionId}/restart`;\n};\n\nexport const uriRestartTask = (clusterId, connectId, definitionId, taskId) => {\n return `${apiUrl}/${clusterId}/connect/${connectId}/${definitionId}/tasks/${taskId}/restart`;\n};\n\nexport const uriDeleteDefinition = (clusterId, connectId, definitionId) => {\n return `${apiUrl}/${clusterId}/connect/${connectId}/${definitionId}`;\n};\n\nexport const uriSchemaRegistry = (clusterId, search, pageNumber) => {\n return `${apiUrl}/${clusterId}/schema?&search=${search}&page=${pageNumber}`;\n};\n\nexport const uriSchemaId = (clusterId, id) => {\n return `${apiUrl}/${clusterId}/schema/id/${id}`;\n};\n\nexport const uriSchemaVersions = (clusterId, subject) => {\n return `${apiUrl}/${clusterId}/schema/${subject}/version`;\n};\n\nexport const uriDeleteSchema = (clusterId, subject) => {\n return `${apiUrl}/${clusterId}/schema/${subject}`;\n};\n\nexport const uriPreferredSchemaForTopic = (clusterId, topicId) => {\n return `${apiUrl}/${clusterId}/schema/topic/${topicId}`;\n};\n\nexport const uriDeleteSchemaVersion = (clusterId, subject, version) => {\n return `${apiUrl}/${clusterId}/schema/${subject}/version/${version}`;\n};\n\nexport const uriLatestSchemaVersion = (clusterId, subject) => {\n return `${apiUrl}/${clusterId}/schema/${subject}`;\n};\n\nexport const uriUpdateSchema = (clusterId, subject) => {\n return `${apiUrl}/${clusterId}/schema/${subject}`;\n};\n\nexport const uriSchemaCreate = clusterId => {\n return `${apiUrl}/${clusterId}/schema`;\n};\n\nexport const uriDeleteGroups = () => {\n return `${apiUrl}/group/delete`;\n};\n\nexport const uriNodes = id => {\n return `${apiUrl}/${id}/node`;\n};\n\nexport const uriNodePartitions = clusterId => {\n return `${apiUrl}/${clusterId}/node/partitions`;\n};\n\nexport const uriNodesConfigs = (clusterId, nodeId) => {\n return `${apiUrl}/${clusterId}/node/${nodeId}/configs`;\n};\n\nexport const uriNodesUpdateConfigs = (clusterId, nodeId) => {\n return `${apiUrl}/${clusterId}/node/${nodeId}/configs`;\n};\n\nexport const uriNodesLogs = (clusterId, nodeId) => {\n return `${apiUrl}/${clusterId}/node/${nodeId}/logs`;\n};\n\nexport const uriConsumerGroups = (clusterId, search, pageNumber) => {\n // eslint-disable-next-line max-len\n return `${apiUrl}/${clusterId}/group?search=${search}&page=${pageNumber}`;\n};\n\nexport const uriConsumerGroup = (clusterId, groupId) => {\n return `${apiUrl}/${clusterId}/group/${encodeURIComponent(groupId)}`;\n};\n\nexport const uriConsumerGroupTopics = (clusterId, groupId) => {\n return `${apiUrl}/group/topics?clusterId=${clusterId}&groupId=${encodeURIComponent(groupId)}`;\n};\nexport const uriConsumerGroupMembers = (clusterId, groupId) => {\n return `${apiUrl}/${clusterId}/group/${encodeURIComponent(groupId)}/members`;\n};\n\nexport const uriConsumerGroupOffsets = (clusterId, groupId) => {\n return `${apiUrl}/${clusterId}/group/${encodeURIComponent(groupId)}/offsets`;\n};\n\nexport const uriConsumerGroupOffsetsByTimestamp = (clusterId, groupId, timestamp) => {\n return `${apiUrl}/${clusterId}/group/${encodeURIComponent(groupId)}/offsets/start?timestamp=${timestamp}`;\n};\n\nexport const uriConsumerGroupDelete = (clusterId, groupId) => {\n return `${apiUrl}/${clusterId}/group/${encodeURIComponent(groupId)}`;\n};\n\nexport const uriConsumerGroupUpdate = (clusterId, groupId) => {\n return `${apiUrl}/${clusterId}/group/${encodeURIComponent(groupId)}/offsets`;\n};\n\nexport const uriDeleteGroupOffsets = (clusterId, groupId, topicName) => {\n return `${apiUrl}/${clusterId}/group/${encodeURIComponent(groupId)}/topic/${topicName}`;\n};\n\nexport const uriAclsList = (clusterId, search) => {\n let url = `${apiUrl}/${clusterId}/acls`;\n return search ? `${url}?search=${search}` : url;\n};\n\nexport const uriConsumerGroupAcls = (clusterId, groupId) => {\n return `${apiUrl}/${clusterId}/group/${encodeURIComponent(groupId)}/acls`;\n};\n\nexport const uriConsumerGroupByTopics = (clusterId, topicList) => {\n return `${apiUrl}/${clusterId}/group/topics?topics=${topicList}`;\n};\n\nexport const uriAclsByPrincipal = (clusterId, principalEncoded, resourceType = 'ANY') => {\n return `${apiUrl}/${clusterId}/acls/${principalEncoded}?resourceType=${resourceType}`;\n};\n\nexport const uriLiveTail = (clusterId, search, topics, size) => {\n let searchUrl = `search=${search}`;\n let topicsUrl = search.length > 0 ? '&' : '';\n topics.forEach((topic, index) => {\n if (index > 0) {\n topicsUrl += '&topics=' + topic;\n } else {\n topicsUrl += 'topics=' + topic;\n }\n });\n\n let sizeUrl = `${search.length > 0 || topics.length > 0 ? '&' : ''}size=${size}`;\n return `${apiUrl}/${clusterId}/tail/sse?${search.length > 0 ? searchUrl : ''}${\n topics.length > 0 ? topicsUrl : ''\n }${size.length > 0 ? sizeUrl : ''}`;\n};\n\n\nexport const uriTopicDataDelete = (clusterId, topicName, partition, key) => {\n return `${apiUrl}/${clusterId}/topic/${topicName}/data?partition=${partition}&key=${key}`;\n};\n\nexport const uriTopicDataEmpty = (clusterId, topicName) => {\n return `${apiUrl}/${clusterId}/topic/${topicName}/data/empty`;\n}\n\nexport const uriTopicLastRecord = (clusterId, topicList) => {\n return `${apiUrl}/${clusterId}/topic/last-record?topics=${topicList}`;\n}\n\nexport default {\n apiUrl,\n uriClusters,\n uriConnects,\n uriCreateConnect,\n uriConnectPlugins,\n uriGetDefinition,\n uriUpdateDefinition,\n uriPauseDefinition,\n uriResumeDefinition,\n uriRestartDefinition,\n uriRestartTask,\n uriConnectDefinitions,\n uriConnectDefinitionConfigs,\n uriNodes,\n uriNodesConfigs,\n uriTopicsLogs,\n uriTopicsGroups,\n uriNodePartitions,\n uriTopicsPartitions,\n uriTopicData,\n uriTopicsProduce,\n uriTopicsCreate,\n uriTopics,\n uriDeleteTopics,\n uriNodesLogs,\n uriConsumerGroups,\n uriConsumerGroupTopics,\n uriConsumerGroupMembers,\n uriSchemaRegistry,\n uriDeleteSchema,\n uriPreferredSchemaForTopic,\n uriSchemaCreate,\n uriConsumerGroupUpdate,\n uriTopicsConfigs,\n uriLatestSchemaVersion,\n uriSchemaVersions,\n uriAclsList,\n uriAclsByPrincipal,\n uriLiveTail,\n uriTopicDataSearch,\n uriTopicDataDelete,\n uriDeleteGroupOffsets\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport DateTimePicker from 'react-datepicker';\nimport moment from 'moment';\nimport { formatDateTime } from '../../utils/converters';\n\nclass DatePicker extends React.Component {\n static propTypes = {\n value: PropTypes.string,\n onChange: PropTypes.func\n };\n\n state = {\n value: '',\n openDateModal: false\n };\n\n componentDidMount = () => {\n this.setState({\n value: (this.props.value) ? this.props.value : new Date()\n });\n };\n\n onChange = value => {\n this.setState({ value }, () => {\n this.props.onChange && this.props.onChange(value);\n });\n };\n\n getDisplayValue = value => {\n let date = moment(value);\n try {\n return formatDateTime(\n {\n year: date.year(),\n monthValue: date.month(),\n dayOfMonth: date.date(),\n hour: date.hour(),\n minute: date.minute(),\n second: date.second()\n },\n 'DD-MM-YYYY HH:mm'\n );\n } catch (e) {\n return '';\n }\n };\n\n render = () => {\n const { value } = this.state;\n const { showDateTimeInput, showTimeInput, showTimeSelect, onClear } = this.props;\n return (\n \n {showDateTimeInput && (\n {\n this.onChange(date);\n }}\n showTimeSelect={showTimeSelect}\n showTimeInput={showTimeInput}\n dateFormat=\"MM/dd/yyyy h:mm aa\"\n inline\n />\n
\n );\n };\n}\n\nexport default DatePicker;\n","import DatePicker from './DatePicker';\n\nexport default DatePicker;\n","export const getUIOptions = (cluster) => {\n const uiOptions = localStorage.getItem('uiOptions');\n if (uiOptions !== null) {\n const objParsed = JSON.parse(uiOptions);\n return objParsed[cluster];\n } else {\n return null;\n }\n}\n\nexport const setUIOptions = (cluster, newUIOptions) => {\n\n const uiOptions = localStorage.getItem('uiOptions');\n if (uiOptions !== null) {\n const objParsed = JSON.parse(uiOptions);\n objParsed[cluster] = newUIOptions;\n localStorage.setItem('uiOptions', JSON.stringify(objParsed));\n } else {\n localStorage.setItem('uiOptions', JSON.stringify({[cluster]: newUIOptions}));\n }\n\n}\n\nexport const popProduceToTopicValues = () => {\n const produceToTopicValues = localStorage.getItem('produceToTopicValues');\n localStorage.removeItem('produceToTopicValues');\n return produceToTopicValues !== null ? JSON.parse(produceToTopicValues) : {};\n}\n\nexport const setProduceToTopicValues = (newProduceToTopicValues) => {\n localStorage.setItem('produceToTopicValues', JSON.stringify(newProduceToTopicValues));\n}\n\n\n\n\n","import React from 'react';\n\nimport '../styles.scss';\n\nfunction ConfirmModal({handleConfirm, handleCancel, show, message, confirmLabel, cancelLabel}) {\n const showHideClassname = show ? 'modal display-block' : 'modal display-none';\n\n return (\n \n {\n this.setState(\n {\n value: new Date()\n },\n () => {\n onClear && onClear();\n }\n );\n }}\n >\n Clear\n \n )}\n
\n )}\n\n \n {\n this.logout();\n }}\n >\n {' '}\n \n {username} (Logout)\n \n \n ));\n } else if (auths && username) {\n return ( \n {' '}\n \n {username}\n );\n } else {\n return (<>);\n }\n }\n\n render() {\n const { title, children } = this.props;\n return (\n \n \n {' '}\n
\n \n );\n }\n}\n\nexport default withRouter(Header);\n","import Header from './Header';\n\nexport default Header;\n","import Input from './Input';\n\nexport default Input;\n","import React from 'react';\n\nconst Input = props => {\n const { name, label, placeholder, error, noStyle, wrapperClass, inputClass, ...rest } = props;\n let wrapperClassRender = 'form-group';\n let inputClassRender = 'col-sm-10';\n if (noStyle) {\n wrapperClassRender = '';\n inputClassRender = '';\n }\n if (wrapperClass) {\n wrapperClassRender = wrapperClass;\n }\n if (inputClass) {\n inputClassRender = inputClass;\n }\n\n return (\n \n
\n );\n}\n\nexport default ConfirmModal;\n","import React from 'react';\n\nconst Select = ({ name, label, items, error, wrapperClass, selectClass, blankItem, ...rest }) => {\n let wrapperClassRender = 'form-group';\n let selectClassRender = 'col-xs-10';\n if (wrapperClass) {\n wrapperClassRender = wrapperClass;\n }\n if (selectClass) {\n selectClassRender = selectClass;\n }\n\n return (\n \n
\n \n
\n \n \n \n \n \n
\n \n ?\n
\n {/**/}\n {/* !*/}\n {/*
*/}\n {/**/}\n {/* i*/}\n {/*
*/}\n {/**/}\n {/* */}\n {/* */}\n {/* */}\n {/* ![\"\"]()
*/}\n {/*
\n */}\n {/* */}\n {/* */}\n {/*
*/}\n {/**/}\n {/**/}\n
\n
\n \n {message}\n
\n {/**/}\n {/**/}\n {/**/}\n {/* */}\n {/*
*/}\n {/**/}\n {/**/}\n {/**/}\n {/**/}\n {/**/}\n \n \n \n
\n \n \n {label !== '' ? (\n \n ) : (\n \n )}\n
\n );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport default Select;\n","import Table from './Table';\n\nexport default Table;\n","import React from 'react';\n\nimport { Link, withRouter } from 'react-router-dom';\nimport { organizeRoles } from '../../utils/converters';\nimport { logout } from '../../utils/api';\nimport { uriCurrentUser, uriLogout } from '../../utils/endpoints';\nimport { toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\nimport Root from \"../../components/Root\";\n\nclass Header extends Root {\n state = {\n login: sessionStorage.getItem('login'),\n username: sessionStorage.getItem('user'),\n auths: JSON.parse(sessionStorage.getItem('auths')),\n goBack: true\n };\n\n // unauthorizedGoBack = ['topic', 'node', 'tail', 'group', 'acls', 'schema'];\n //\n // componentDidMount() {\n // const url = window.location.pathname.split('/');\n // this.unauthorizedGoBack.forEach(el => {\n // if ('' === url[url.length - 1] || el === url[url.length - 1] || 'connect' === url[url.length - 2]) {\n // this.setState({ goBack: false });\n // }\n // });\n // this.goBack = this.goBack.bind(this);\n // }\n\n // goBack() {\n // this.props.history.goBack();\n // }\n\n async logout() {\n await logout(uriLogout());\n await this.getApi(uriCurrentUser()).then(res => {\n let currentUserData = res.data;\n sessionStorage.setItem('login', currentUserData.logged);\n sessionStorage.setItem('user', 'default');\n sessionStorage.setItem('roles', organizeRoles(currentUserData.roles));\n this.setState({ login: currentUserData.logged }, () => {\n this.props.history.replace({\n pathname: '/ui/login',\n ...this.props.history\n });\n window.location.reload(false);\n toast.success('Logged out successfully');\n });\n });\n }\n\n _renderLogin() {\n const { login, username, auths } = this.state;\n if(auths && auths.loginEnabled) {\n return (login === 'false' || !login ? (\n \n \n \n ) : (\n \n \n \n {error &&
\n {error}
}\n {title}
{' '}\n\n {this._renderLogin()}\n {children}\n
\n \n {label !== '' ? (\n \n ) : (\n \n )}\n
\n );\n};\n\nexport default Input;\n","import RadioGroup from './RadioGroup';\n\nexport default RadioGroup;\n","import React, { Component } from 'react';\n\nclass RadioGroup extends Component {\n renderOptions = (name, items, handleChange) => {\n let renderedItems = [];\n for (let item of items) {\n renderedItems.push(\n \n
\n \n {error}\n
\n )}\n \n handleChange(item.value)}\n />\n \n
\n );\n }\n\n return renderedItems;\n };\n\n render() {\n const { name, label, items, handleChange } = this.props;\n\n return (\n \n );\n }\n}\n\nexport default RadioGroup;\n","import React from 'react';\n\nimport Joi from 'joi-browser';\nimport _ from 'lodash';\n\nimport Input from './Input';\nimport Select from './Select';\nimport RadioGroup from './RadioGroup';\nimport DatePicker from '../DatePicker';\nimport AceEditor from 'react-ace';\nimport Dropdown from 'react-bootstrap/Dropdown';\n\nimport 'ace-builds/src-noconflict/mode-json';\nimport 'ace-builds/src-noconflict/theme-merbivore_soft';\nimport Root from '../Root';\n\nclass Form extends Root {\n state = {\n formData: {},\n errors: {}\n };\n\n validate = () => {\n const { error } = Joi.validate(this.state.formData, this.schema);\n\n if (!error) return null;\n const errors = {};\n for (let item of error.details) {\n errors[item.path[0]] = item.message;\n }\n return errors;\n };\n\n validateProperty = ({ name, value }) => {\n const obj = { [name]: value };\n const schema = { [name]: this.schema[name] };\n const { error } = Joi.validate(obj, schema);\n\n return error ? error.details[0].message : null;\n };\n\n handleSubmit = e => {\n e.preventDefault();\n\n const errors = this.validate();\n this.setState({ errors: errors || {} });\n\n if (errors) return;\n\n this.doSubmit();\n };\n\n handleChange = ({ currentTarget: input }) => {\n const errors = { ...this.state.errors };\n const errorMessage = this.validateProperty(input);\n if (errorMessage) {\n errors[input.name] = errorMessage;\n } else {\n delete errors[input.name];\n }\n\n const { formData } = this.state;\n formData[input.name] = input.value;\n this.setState({ formData, errors });\n };\n\n renderButton = (label, click, className, type, children) => {\n return (\n \n \n
\n );\n };\n\n renderInput = (\n name,\n label,\n placeholder,\n type = 'text',\n onChange = this.handleChange,\n noStyle,\n wrapperClass,\n inputClass,\n rest\n ) => {\n const { formData, errors } = this.state;\n return (\n \n {label !== '' ? (\n \n ) : (\n \n )}\n
\n );\n };\n\n renderSelect = (name, label, items, onChange, selectClass, wrapperClass, blankItem, rest) => {\n const { formData, errors } = this.state;\n\n return (\n \n {\n onChange(value);\n }}\n name=\"UNIQUE_ID_OF_DIV\"\n editorProps={{ $blockScrolling: true }}\n setOptions={options}\n style={{ width: '100%', minHeight: '25vh' }}\n {...rest}\n />\n {errors[name] &&
\n {errors[name]}
}\n \n \n
\n \n \n \n \n \n \n \n
\n \n
\n {renderResults}\n \n Results\n \n
\n );\n};\n\nexport default PageSize;","import TopicList from './TopicList';\n\nexport default TopicList;\n","import React from 'react';\nimport {Link} from 'react-router-dom';\nimport Table from '../../../components/Table';\nimport Header from '../../Header';\nimport SearchBar from '../../../components/SearchBar';\nimport Pagination from '../../../components/Pagination';\nimport ConfirmModal from '../../../components/Modal/ConfirmModal';\nimport {uriConsumerGroupByTopics, uriDeleteTopics, uriTopicLastRecord, uriTopics} from '../../../utils/endpoints';\nimport constants from '../../../utils/constants';\nimport {calculateTopicOffsetLag, showBytes} from '../../../utils/converters';\nimport './styles.scss';\nimport {toast} from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\nimport {Collapse} from 'react-bootstrap';\nimport Root from '../../../components/Root';\nimport DateTime from '../../../components/DateTime';\nimport {getClusterUIOptions} from '../../../utils/functions';\nimport {handlePageChange, getPageNumber} from './../../../utils/pagination';\nimport PageSize from '../../../components/PageSize';\n\nclass TopicList extends Root {\n state = {\n topics: [],\n showDeleteModal: false,\n topicToDelete: {},\n selectedCluster: '',\n deleteMessage: '',\n deleteData: {},\n pageNumber: 1,\n totalPageNumber: 1,\n currentPageSize: 1,\n searchData: {\n search: '',\n topicListView: constants.SETTINGS_VALUES.TOPIC.TOPIC_DEFAULT_VIEW.HIDE_INTERNAL\n },\n keepSearch: false,\n createTopicFormData: {\n name: '',\n partition: 1,\n replication: 1,\n cleanup: 'delete',\n retention: 86400000\n },\n roles: JSON.parse(sessionStorage.getItem('roles')),\n loading: true,\n cancel: undefined,\n collapseConsumerGroups: {},\n uiOptions: {}\n };\n\n componentDidMount() {\n this._initializeVars(() => {\n this.getTopics();\n this.props.history.replace({\n pathname: `/ui/${this.state.selectedCluster}/topic`,\n search: this.props.location.search\n })});\n }\n\n componentDidUpdate(prevProps, prevState) {\n\n if (this.props.location.pathname !== prevProps.location.pathname) {\n this.cancelAxiosRequests();\n this.renewCancelToken();\n\n this.setState({ pageNumber: 1 }, () => {\n this._initializeVars(this.getTopics);\n });\n }\n }\n\n async _initializeVars(callBackFunction) {\n const { clusterId } = this.props.match.params;\n const query = new URLSearchParams(this.props.location.search);\n const {searchData, keepSearch} = this.state;\n let { pageNumber } = this.state;\n let { currentPageSize } = this.state;\n const uiOptions = await getClusterUIOptions(clusterId)\n\n let searchDataTmp;\n let keepSearchTmp = keepSearch;\n const topicListSearch = localStorage.getItem('topicListSearch');\n if(topicListSearch) {\n searchDataTmp = JSON.parse(topicListSearch);\n keepSearchTmp = true;\n } else {\n searchDataTmp = {\n search: (query.get('search'))? query.get('search') : searchData.search,\n topicListView: (query.get('topicListView'))? query.get('topicListView') :\n (uiOptions && uiOptions.topic && uiOptions.topic.defaultView)? uiOptions.topic.defaultView : searchData.topicListView,\n }\n pageNumber = (query.get('page'))? parseInt(query.get('page')) : parseInt(pageNumber)\n currentPageSize = (query.get('uiPageSize'))? parseInt(query.get('uiPageSize')) : parseInt(currentPageSize)\n }\n\n this.setState({\n selectedCluster: clusterId, \n searchData: searchDataTmp,\n keepSearch: keepSearchTmp,\n uiOptions: uiOptions ?? {},\n pageNumber: pageNumber,\n currentPageSize: currentPageSize\n }, callBackFunction);\n }\n\n showDeleteModal = deleteMessage => {\n this.setState({ showDeleteModal: true, deleteMessage });\n };\n\n closeDeleteModal = () => {\n this.setState({ showDeleteModal: false, deleteMessage: '' });\n };\n\n deleteTopic = () => {\n const { selectedCluster, topicToDelete } = this.state;\n\n this.removeApi(uriDeleteTopics(selectedCluster, topicToDelete.id))\n .then(() => {\n toast.success(`Topic '${topicToDelete.name}' is deleted`);\n this.setState({ showDeleteModal: false, topicToDelete: {} }, () => this.getTopics());\n })\n .catch(() => {\n this.setState({ showDeleteModal: false, topicToDelete: {} }, () => this.getTopics());\n });\n };\n\n handleOnDelete(topic) {\n this.setState({ topicToDelete: topic }, () => {\n this.showDeleteModal(\n {topic.id}} ? Lag: {Number(offsetLag).toLocaleString()}
\n \n );\n });\n }\n\n return '';\n };\n\n\n handleCollapseConsumerGroups(id) {\n const tmpGroups = {};\n\n Object.keys(this.state.collapseConsumerGroups).forEach(key => {\n tmpGroups[key] = (key === id)? !this.state.collapseConsumerGroups[key] : this.state.collapseConsumerGroups[key];\n });\n this.setState({collapseConsumerGroups : tmpGroups});\n }\n\n handleKeepSearchChange(value){\n const { searchData } = this.state;\n if(value) {\n localStorage.setItem('topicListSearch', JSON.stringify(searchData));\n } else {\n localStorage.removeItem('topicListSearch');\n }\n\n }\n\n render() {\n const { topics, selectedCluster, searchData, pageNumber, totalPageNumber, currentPageSize, loading, collapseConsumerGroups, keepSearch, uiOptions } = this.state;\n const uiOptionsTopic = uiOptions.topic ?? {};\n const dateTimeFormat = uiOptions.topicData && uiOptions.topicData.dateTimeFormat ?\n uiOptions.topicData.dateTimeFormat :\n constants.SETTINGS_VALUES.TOPIC_DATA.DATE_TIME_FORMAT.RELATIVE;\n const roles = this.state.roles || {};\n const { clusterId } = this.props.match.params;\n \n\n const topicCols =\n [\n {\n id: 'name',\n accessor: 'name',\n colName: 'Name',\n type: 'text'\n },\n {\n id: 'count',\n accessor: 'count',\n colName: 'Count',\n type: 'text',\n cell: (obj, col) => {\n return ≈ {obj[col.accessor]};\n }\n },\n {\n id: 'size',\n accessor: 'size',\n colName: 'Size',\n type: 'text'\n }\n ];\n\n if(!uiOptionsTopic.skipLastRecord) {\n topicCols.push({\n id: 'lastWrite',\n accessor: 'lastWrite',\n colName: 'Last Record',\n type: 'text',\n cell: (obj, col) => {\n return obj[col.accessor] ?\n \n {consumerGroups.splice(1, consumerGroups.length).map(group => {\n return (
\n {group}
);\n })}\n \n }\n }\n }\n ]\n\n const firstColumns = [\n {colName: 'Topics', colSpan: topicCols.length},\n {colName: 'Partitions', colSpan: partitionCols.length},\n {colName: 'Replications', colSpan: replicationCols.length}\n ];\n\n if(!uiOptionsTopic.skipConsumerGroups) {\n firstColumns.push({colName: 'Consumer Groups', colSpan: 1});\n }\n\n let onDetailsFunction = undefined;\n const actions = [constants.TABLE_CONFIG];\n if(roles.topic && roles.topic['topic/data/read']) {\n actions.push(constants.TABLE_DETAILS);\n onDetailsFunction = (id) => `/ui/${selectedCluster}/topic/${id}/data`;\n }\n if(roles.topic && roles.topic['topic/delete']) {\n actions.push(constants.TABLE_DELETE);\n }\n\n return (\n \n {' '}\n {replica.id}\n \n );\n });\n }\n\n handleSize(size) {\n return (\n \n );\n }\n\n render() {\n const { data, loading } = this.state;\n return (\n \n {topic}\n \n \n );\n }\n\n render() {\n const { data, loading } = this.state;\n const roles = this.state.roles || {};\n const isUpdatable = roles.topic && roles.topic['topic/config/update'];\n return (\n this.handleSubmit()}\n >\n \n Do you want to empty the Topic: { \n );\n });\n }\n\n showDeleteModal = deleteMessage => {\n this.setState({ showDeleteModal: true, deleteMessage });\n };\n\n closeDeleteModal = () => {\n this.setState({ showDeleteModal: false, deleteMessage: '' });\n };\n\n canEmptyTopic = () => {\n const { configs } = this.state;\n const res = configs.filter( config => config.name === 'cleanup.policy');\n if(res && res.length === 1 && res[0].value === 'delete') return true;\n return false;\n }\n\n emptyTopic = () => {\n const { clusterId, topicId } = this.props.match.params;\n\n this.removeApi(\n uriTopicDataEmpty(clusterId, topicId)\n )\n .then(() => {\n toast.success(`Topic '${topicId}' will be emptied`);\n this.setState({ showDeleteModal: false }, () => {\n this.topicData.current.getMessages();\n });\n })\n .catch(() => {\n this.setState({ showDeleteModal: false });\n });\n };\n\n componentDidUpdate(prevProps, prevState) {\n if (this.props.location.pathname !== prevProps.location.pathname) {\n const tabSelected = getSelectedTab(this.props, this.tabs);\n this.setState({ selectedTab: tabSelected });\n }\n }\n\n async getTopicsConfig() {\n const { clusterId, topicId } = this.state;\n let configs = [];\n try {\n configs = await this.getApi(uriTopicsConfigs(clusterId, topicId));\n this.setState({ configs: configs.data });\n } catch (err) {\n console.error('Error:', err);\n }\n }\n\n selectTab = tab => {\n this.setState({ selectedTab: tab });\n\n };\n\n tabClassName = tab => {\n const { selectedTab } = this.state;\n return selectedTab === tab ? 'nav-link active' : 'nav-link';\n };\n\n renderSelectedTab = () => {\n const { selectedTab, topicId, clusterId, roles, topicInternal } = this.state;\n const { history, match, location } = this.props;\n\n switch (selectedTab) {\n case 'data':\n return \n ) : (\n
\n );\n }\n}\n\nexport default Topic;\n","import React from 'react';\nimport Header from '../../Header';\nimport Table from '../../../components/Table';\nimport * as constants from '../../../utils/constants';\nimport { uriNodes } from '../../../utils/endpoints';\nimport { uriNodePartitions } from '../../../utils/endpoints';\nimport Root from '../../../components/Root';\n\nclass NodesList extends Root {\n state = {\n data: [],\n selectedCluster: '',\n loading: true\n };\n\n componentDidMount() {\n this.getNodes();\n }\n\n async getNodes() {\n let nodes = [];\n const { clusterId } = this.props.match.params;\n nodes = await this.getApi(uriNodes(clusterId));\n this.handleData(nodes.data);\n this.setState({ selectedCluster: clusterId });\n }\n\n handleData(nodes) {\n const { clusterId } = this.props.match.params;\n let tableNodes = {}\n const setState = () => {\n this.setState({ data: Object.values(tableNodes), loading: false});\n }\n\n nodes.nodes.forEach(node => {\n tableNodes[node.id] = {\n id: JSON.stringify(node.id) || '',\n host: `${node.host}:${node.port}` || '',\n rack: node.rack || '',\n controller: nodes.controller && nodes.controller.id === node.id ? 'True' : 'False' || '',\n partition: undefined\n };\n });\n\n setState();\n\n this.getApi(uriNodePartitions(clusterId))\n .then(value => {\n for (let node of value.data) {\n const topicNode = tableNodes[node.id];\n tableNodes[node.id].partition = topicNode ?\n (node.countLeader) + ' (' + (((node.countLeader) / node.totalPartitions) * 100).toFixed(2) + '%)' :\n '';\n }\n\n setState();\n })\n\n return Object.values(tableNodes);\n }\n\n render() {\n const { history } = this.props;\n const { data, selectedCluster, loading } = this.state;\n return (\n \n \n {\n let { searchData } = { ...this.state };\n searchData.topicListView = value;\n this.setState(searchData);\n }}\n onKeepSearchChange={value => {\n this.handleKeepSearchChange(value);\n }}\n doSubmit={this.handleSearch}\n />\n\n {\n this.setState({ topics: data });\n }}\n onDelete={topic => {\n this.handleOnDelete(topic);\n }}\n onDetails={onDetailsFunction}\n onConfig={(id) => `/ui/${selectedCluster}/topic/${id}/configs`}\n actions={actions}\n />\n\n {roles.topic['topic/insert'] && (\n \n )}\n\n
\n );\n }\n}\n\nexport default TopicList;\n","import TopicData from './TopicData';\n\nexport default TopicData;\n","import TopicPartitions from './TopicPartitions';\n\nexport default TopicPartitions;\n","import React from 'react';\nimport { uriTopicsPartitions } from '../../../../utils/endpoints';\nimport Table from '../../../../components/Table';\nimport converters from '../../../../utils/converters';\nimport Root from \"../../../../components/Root\";\n\nclass TopicPartitions extends Root {\n state = {\n data: [],\n selectedCluster: this.props.clusterId,\n selectedTopic: this.props.topic,\n loading: true\n };\n componentDidMount() {\n this.getTopicsPartitions();\n }\n\n async getTopicsPartitions() {\n const { selectedCluster, selectedTopic } = this.state;\n\n let partitions = await this.getApi(uriTopicsPartitions(selectedCluster, selectedTopic));\n this.handleData(partitions.data);\n }\n\n handleData(partitions) {\n let tablePartitions = partitions.map(partition => {\n return {\n id: partition.id,\n leader: partition.leader.id,\n replicas: partition.nodes,\n offsets: (\n \n ),\n size: partition\n };\n });\n this.setState({ data: tablePartitions, loading: false });\n }\n\n handleLeader(leader) {\n return {leader};\n }\n\n handleReplicas(replicas) {\n return replicas.map(replica => {\n return (\n \n {\n return this.handleLeader(obj[col.accessor]);\n }\n },\n {\n id: 'replicas',\n accessor: 'replicas',\n colName: 'Replicas',\n type: 'text',\n cell: (obj, col) => {\n return this.handleReplicas(obj[col.accessor]);\n }\n },\n {\n id: 'offsets',\n accessor: 'offsets',\n colName: 'Offsets',\n type: 'text',\n sortable: true\n },\n {\n id: 'size',\n accessor: 'size',\n colName: 'Size',\n type: 'text',\n cell: (obj, col) => {\n return this.handleSize(obj[col.accessor]);\n }\n }\n ]}\n data={data}\n updateData={data => {\n this.setState({ data });\n }}\n />\n
\n );\n }\n}\n\nexport default TopicPartitions;\n","import TopicGroups from './TopicGroups';\n\nexport default TopicGroups;\n","import React from 'react';\nimport Table from '../../../../components/Table';\nimport { uriTopicsGroups } from '../../../../utils/endpoints';\nimport constants from '../../../../utils/constants';\nimport Root from \"../../../../components/Root\";\nimport {Link} from \"react-router-dom\";\n\nclass TopicGroups extends Root {\n state = {\n consumerGroups: [],\n topicId: this.props.topicId,\n showDeleteModal: false,\n selectedCluster: this.props.clusterId,\n deleteMessage: '',\n loading: true\n };\n\n componentDidMount() {\n this.getConsumerGroup();\n }\n\n async getConsumerGroup() {\n const { selectedCluster, topicId } = this.state;\n\n let data = await this.getApi(uriTopicsGroups(selectedCluster, topicId));\n if (data && data.data) {\n this.handleGroups(data.data);\n } else {\n this.setState({ consumerGroup: [], loading: false });\n }\n }\n\n handleGroups(consumerGroups) {\n let tableConsumerGroups =\n consumerGroups.map(consumerGroup => {\n return {\n id: consumerGroup.id,\n state: consumerGroup.state,\n coordinator: consumerGroup.coordinator.id,\n members: consumerGroup.members ? consumerGroup.members.length : 0,\n topics: this.groupTopics(consumerGroup.offsets)\n };\n }) || [];\n this.setState({ consumerGroups: tableConsumerGroups, loading: false });\n }\n\n groupTopics(topics) {\n if (!topics) return {};\n return topics.reduce(function(a, e) {\n let key = e.topic;\n a[key] ? (a[key] = a[key] + e.offsetLag) : (a[key] = e.offsetLag || 0);\n return a;\n }, {});\n }\n\n handleState(state) {\n return (\n \n {state}\n \n );\n }\n\n handleCoordinator(coordinator) {\n return {coordinator};\n }\n\n handleTopics(topics) {\n const noPropagation = e => e.stopPropagation();\n return Object.keys(topics).map(topic => {\n return (\n Lag: {Number(topics[topic]).toLocaleString()}
\n \n );\n });\n }\n\n render() {\n const { selectedCluster, loading } = this.state;\n\n return (\n \n {\n return this.handleState(obj.state);\n }\n },\n {\n id: 'coordinator',\n accessor: 'coordinator',\n colName: 'Coordinator',\n cell: obj => {\n return this.handleCoordinator(obj.coordinator);\n }\n },\n {\n id: 'members',\n accessor: 'members',\n colName: 'Members',\n sortable: true\n },\n {\n id: 'topics',\n accessor: 'topics',\n colName: 'Topics',\n cell: obj => {\n if (obj.topics) {\n return this.handleTopics(obj.topics);\n }\n }\n }\n ]}\n data={this.state.consumerGroups}\n updateData={data => {\n this.setState({ consumerGroups: data });\n }}\n onDetails={id => `/ui/${selectedCluster}/group/${id}` }\n actions={[constants.TABLE_DETAILS]}\n />\n
\n );\n }\n}\nexport default TopicGroups;\n","import TopicConfigs from './TopicConfigs';\n\nexport default TopicConfigs;\n","import React from 'react';\nimport { uriTopicsConfigs, uriTopicsUpdateConfigs } from '../../../../utils/endpoints';\nimport Table from '../../../../components/Table';\nimport Form from '../../../../components/Form/Form';\nimport converters from '../../../../utils/converters';\nimport Joi from 'joi-browser';\nimport { MILLI, BYTES, TEXT } from '../../../../utils/constants';\nimport { toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\nclass TopicConfigs extends Form {\n state = {\n host: '',\n port: '',\n data: [],\n selectedCluster: this.props.clusterId,\n selectedTopic: this.props.topicId,\n formData: {},\n changedConfigs: {},\n errors: {},\n configs: [],\n roles: JSON.parse(sessionStorage.getItem('roles')),\n loading: true\n };\n\n schema = {};\n\n componentDidMount() {\n this.getTopicsConfig();\n }\n\n async getTopicsConfig() {\n let configs = [];\n const { selectedCluster, selectedTopic } = this.state;\n\n configs = await this.getApi(uriTopicsConfigs(selectedCluster, selectedTopic));\n this.handleData(configs.data);\n }\n\n handleData(configs) {\n configs.forEach(config => {\n this.createValidationSchema(config);\n });\n\n let tableTopics = configs.map(config => {\n return {\n id: config.name,\n name: config.name,\n description: config.description,\n value: config.value,\n readOnly: config.readOnly,\n dataType: this.getConfigDataType(config.name),\n type: config.source,\n sensitive: config.sensitive\n };\n });\n this.setState({ data: tableTopics, configs, loading: false });\n }\n getConfigDataType = configName => {\n switch (configName.substring(configName.lastIndexOf('.'))) {\n case '.ms':\n return MILLI;\n case '.size':\n return BYTES;\n default:\n return TEXT;\n }\n };\n handleDataType(dataType, value) {\n switch (dataType) {\n case 'MILLI':\n return (\n {converters.showTime(value)}\n );\n case 'BYTES':\n return (\n {converters.showBytes(value)}\n );\n default:\n return ;\n }\n }\n\n createValidationSchema(config) {\n let { formData } = this.state;\n let validation;\n if (isNaN(config.value)) {\n validation = Joi.any();\n } else {\n validation = Joi.any();\n }\n this.schema[config.name] = validation;\n\n formData[config.name] = isNaN(+config.value) ? config.value : +config.value;\n this.setState({ formData });\n }\n\n onChange({ currentTarget: input }) {\n let { data, configs } = this.state;\n let config = {};\n let newData = data.map(row => {\n if (row.id === input.name) {\n config = configs.find(config => config.name === input.name);\n let { formData, changedConfigs } = this.state;\n formData[input.name] = input.value;\n if (input.value === config.value) {\n delete changedConfigs[input.name];\n } else {\n changedConfigs[input.name] = input.value;\n }\n\n this.setState({ formData, changedConfigs });\n return {\n id: config.name,\n name: config.name,\n description: config.description,\n value: config.value,\n readOnly: config.readOnly,\n dataType: this.getConfigDataType(config.name),\n type: config.source,\n sensitive: config.sensitive\n };\n }\n return row;\n });\n\n this.setState({ data: newData });\n }\n\n async doSubmit() {\n const { selectedCluster, selectedTopic, changedConfigs } = this.state;\n\n await this.postApi(uriTopicsUpdateConfigs(selectedCluster, selectedTopic), {\n clusterId: selectedCluster,\n topicId: selectedTopic,\n configs: changedConfigs\n });\n\n this.setState({ state: this.state }, () => {\n toast.success(`Topic configs '${selectedTopic}' updated successfully`);\n });\n }\n\n getInput(value, name, readOnly, dataType) {\n return (\n \n {dataType === 'TEXT' ? (\n this.onChange(value)}\n className=\"form-control\"\n autoComplete=\"off\"\n value={value}\n name={name}\n placeholder=\"default\"\n />\n ) : (\n this.onChange(value)}\n className=\"form-control\"\n autoComplete=\"off\"\n value={value}\n name={name}\n placeholder=\"default\"\n />\n )}\n {this.handleDataType(dataType, value)}\n
\n );\n }\n\n handleTypeAndSensitive(configType, configSensitive) {\n const type = configType === 'DEFAULT_CONFIG' ? 'secondary' : 'warning';\n return (\n \n {configType}\n {configSensitive ? (\n \n ) : (\n ''\n )}\n
\n );\n }\n\n handleNameAndDescription(name, description) {\n const descript = description ? (\n \n \n \n ) : (\n ''\n );\n return (\n \n {name} {descript}\n \n );\n }\n\n renderTabs(tabName, isActive) {\n const active = isActive ? 'active' : '';\n return (\n \n {tabName}\n
\n \n {\n return this.handleNameAndDescription(obj.name, obj.description);\n }\n },\n {\n id: 'value',\n accessor: 'value',\n colName: 'Value',\n type: 'text',\n readOnly: !isUpdatable,\n cell: obj => {\n return this.getInput(\n this.state.formData[obj.name],\n obj.name,\n obj.readOnly,\n obj.dataType\n );\n }\n },\n {\n id: 'typeAndSensitive',\n accessor: 'typeAndSensitive',\n colName: 'Type',\n type: 'text',\n cell: obj => {\n return this.handleTypeAndSensitive(obj.type, obj.sensitive);\n }\n }\n ]}\n data={data}\n updateData={data => {\n this.setState({ data });\n }}\n noContent={'No acl for configs for current kafka user.'}\n />\n {isUpdatable && !this.props.internal ? (\n \n ) : null}\n
\n \n );\n }\n}\n\nexport default TopicConfigs;\n","import TopicAcls from './TopicAcls';\n\nexport default TopicAcls;\n","import React from 'react';\nimport Table from '../../../../components/Table';\nimport { uriTopicsAcls } from '../../../../utils/endpoints';\nimport Root from \"../../../../components/Root\";\n\nclass TopicAcls extends Root {\n state = {\n data: [],\n selectedCluster: '',\n loading: true\n };\n\n componentDidMount() {\n this.getAcls();\n }\n\n async getAcls() {\n let acls = [];\n const { clusterId, topicId } = this.props;\n\n acls = await this.getApi(uriTopicsAcls(clusterId, topicId));\n this.handleData(acls.data);\n }\n\n handleData(data) {\n let tableAcls = [];\n data.map(principal =>\n principal.acls.forEach((acl, index) => {\n tableAcls.push({\n id: index,\n principal: principal.principal,\n topic: acl.resource.name || '',\n host: acl.host || '',\n permission: acl.operation || ''\n });\n })\n );\n this.setState({ data: tableAcls, loading: false });\n return tableAcls;\n }\n\n render() {\n const { data, loading } = this.state;\n return (\n \n {\n return (\n \n \n {obj[col.accessor].permissionType}\n {' '}\n {obj[col.accessor].operation}\n \n );\n }\n }\n ]}\n data={data}\n updateData={data => {\n this.setState({ data });\n }}\n noContent={\n \n \n \n \n }\n />\n
\n );\n }\n}\n\nexport default TopicAcls;\n","import TopicLogs from './TopicLogs';\n\nexport default TopicLogs;\n","import React from 'react';\nimport { uriTopicsLogs } from '../../../../utils/endpoints';\nimport Table from '../../../../components/Table';\nimport converters from '../../../../utils/converters';\nimport Root from \"../../../../components/Root\";\n\nclass TopicLogs extends Root {\n state = {\n data: [],\n selectedCluster: this.props.clusterId,\n selectedTopic: this.props.topic,\n loading: true\n };\n\n componentDidMount() {\n this.getTopicLogs();\n }\n\n async getTopicLogs() {\n const { selectedCluster, selectedTopic } = this.state;\n\n let logs = await this.getApi(uriTopicsLogs(selectedCluster, selectedTopic));\n this.handleData(logs.data);\n }\n\n handleData(logs) {\n let tableLogs = logs.map(log => {\n return {\n broker: log.brokerId,\n topic: log.topic,\n partition: log.partition,\n size: log.size,\n offsetLag: Number(log.offsetLag).toLocaleString()\n };\n });\n this.setState({ data: tableLogs, loading: false });\n }\n\n handleSize(size) {\n return ;\n }\n render() {\n const { data, loading } = this.state;\n return (\n \n No ACLS found, or the \"authorizer.class.name\" parameter is not configured on the\n cluster.\n
\n \n {\n return this.handleSize(obj[col.accessor]);\n }\n },\n {\n id: 'offsetLag',\n accessor: 'offsetLag',\n colName: 'OffsetLag',\n type: 'text',\n sortable: true\n }\n ]}\n data={data}\n updateData={data => {\n this.setState({ data });\n }}\n />\n
\n );\n }\n}\n\nexport default TopicLogs;\n","import Topic from './Topic';\n\nexport default Topic;\n","import React from 'react';\nimport Header from '../../Header';\nimport TopicData from './TopicData';\nimport TopicPartitions from './TopicPartitions';\nimport TopicGroups from './TopicGroups';\nimport TopicConfigs from './TopicConfigs';\nimport TopicAcls from './TopicAcls';\nimport TopicLogs from './TopicLogs';\nimport { uriTopicsConfigs, uriTopicDataEmpty } from '../../../utils/endpoints';\nimport ConfirmModal from '../../../components/Modal/ConfirmModal';\nimport { toast } from 'react-toastify';\nimport {getSelectedTab} from \"../../../utils/functions\";\nimport { Link } from 'react-router-dom';\nimport Root from \"../../../components/Root\";\n\nclass Topic extends Root {\n state = {\n clusterId: this.props.clusterId,\n topicId: this.props.topicId,\n topic: {},\n selectedTab: '',\n showDeleteModal: false,\n deleteMessage: '',\n compactMessageToDelete: '',\n roles: JSON.parse(sessionStorage.getItem('roles')),\n topicInternal: false,\n configs: []\n };\n\n tabs = ['data','partitions','groups','configs','acls','logs'];\n\n constructor(props) {\n super(props);\n this.topicData = React.createRef();\n }\n\n static getDerivedStateFromProps(props, state) {\n return state;\n }\n\n componentDidMount() {\n const { clusterId, topicId } = this.props.match.params;\n const searchParams = this.props.location.search;\n\n const roles = this.state.roles || {};\n const tabSelected = getSelectedTab(this.props, this.tabs);\n\n this.setState(\n {\n clusterId,\n topicId,\n selectedTab: roles.topic && roles.topic['topic/data/read'] ? tabSelected : 'configs',\n topicInternal: this.props.location.internal\n },\n () => {\n this.getTopicsConfig();\n let uri = `/ui/${clusterId}/topic/${topicId}/${this.state.selectedTab}`;\n if(searchParams) {\n uri = uri + searchParams;\n }\n this.props.history.replace(uri);\n }\n );\n }\n\n handleOnEmpty() {\n this.setState(() => {\n this.showDeleteModal(\n {this.state.topicId}} ?\n \n
\n :\n \n
\n {selectedTab !== 'configs' && roles.topic && roles.topic['topic/data/insert'] && (\n - \n {roles.topic && roles.topic['topic/data/read'] && (\n
- \n \n Data\n \n \n )}\n
- \n \n Partitions\n \n \n
- \n \n Consumer Groups\n \n \n
- \n \n Configs\n \n \n {roles.acls && roles.acls['acls/read'] && (\n
- \n \n ACLS\n \n \n )}\n
- \n \n Logs\n \n \n
\n
\n \n {this.renderSelectedTab()}\n
\n \n Empty Topic\n
\n }\n\n \n Copy Topic\n \n\n \n\n Live Tail\n \n\n \n Produce to topic\n \n \n \n )}\n \n {\n return {obj[col.accessor] || ''};\n }\n },\n {\n id: 'host',\n accessor: 'host',\n colName: 'Host',\n type: 'text',\n sortable: true\n },\n {\n id: 'controller',\n accessor: 'controller',\n colName: 'Controller',\n type: 'text',\n sortable: true\n },\n {\n id: 'partition',\n accessor: 'partition',\n colName: 'Partitions (% of total)',\n type: 'text',\n sortable: false\n },\n {\n id: 'rack',\n accessor: 'rack',\n colName: 'Rack',\n type: 'text',\n sortable: true\n }\n ]}\n data={data}\n updateData={data => {\n this.setState({ data });\n }}\n actions={[constants.TABLE_DETAILS]}\n onDetails={id => `/ui/${selectedCluster}/node/${id}`}\n />\n
\n );\n }\n}\n\nexport default NodesList;\n","import React from 'react';\nimport { uriNodesConfigs, uriNodesUpdateConfigs } from '../../../../utils/endpoints';\nimport { BYTES, MILLI, TEXT } from '../../../../utils/constants';\nimport Table from '../../../../components/Table';\nimport Form from '../../../../components/Form/Form';\nimport converters from '../../../../utils/converters';\nimport Joi from 'joi-browser';\nimport { toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\nclass NodeConfigs extends Form {\n state = {\n host: '',\n port: '',\n data: [],\n selectedCluster: this.props.clusterId,\n selectedNode: this.props.nodeId,\n formData: {},\n changedConfigs: {},\n errors: {},\n configs: [],\n roles: JSON.parse(sessionStorage.getItem('roles')),\n loading: true\n };\n\n schema = {};\n\n componentDidMount() {\n this.getNodesConfig();\n }\n\n async getNodesConfig() {\n const { selectedCluster, selectedNode } = this.state;\n\n let configs = await this.getApi(uriNodesConfigs(selectedCluster, selectedNode));\n this.handleData(configs.data);\n }\n\n handleData(configs) {\n configs.forEach(config => {\n this.createValidationSchema(config);\n });\n\n let tableNodes = configs.map(config => {\n return {\n id: config.name,\n name: config.name,\n description: config.description,\n readOnly: config.readOnly,\n dataType: this.getConfigDataType(config.name),\n type: config.source,\n sensitive: config.sensitive\n };\n });\n this.setState({ data: tableNodes, configs, loading: false });\n }\n\n handleDataType(dataType, value) {\n switch (dataType) {\n case MILLI:\n return (\n {converters.showTime(value)}\n );\n case BYTES:\n return (\n {converters.showBytes(value)}\n );\n default:\n return ;\n }\n }\n\n getConfigDataType = configName => {\n if (configName === undefined) {\n return TEXT;\n }\n\n switch (configName.substring(configName.lastIndexOf('.'))) {\n case '.ms':\n return MILLI;\n case '.size':\n return BYTES;\n default:\n return TEXT;\n }\n };\n\n createValidationSchema(config) {\n let { formData } = this.state;\n let validation;\n if (isNaN(config.value)) {\n validation = Joi.any();\n } else {\n validation = Joi.any();\n }\n this.schema[config.name] = validation;\n\n formData[config.name] = isNaN(+config.value) ? config.value : +config.value;\n this.setState({ formData });\n }\n\n onChange({ currentTarget: input }) {\n let { data, configs } = this.state;\n let config = {};\n let newData = data.map(row => {\n if (row.id === input.name) {\n config = configs.find(config => config.name === input.name);\n let { formData, changedConfigs } = this.state;\n formData[input.name] = input.value;\n if (input.value === config.value) {\n delete changedConfigs[input.name];\n } else {\n changedConfigs[input.name] = input.value;\n }\n\n this.setState({ formData, changedConfigs });\n return {\n id: config.name,\n name: config.name,\n description: config.description,\n readOnly: config.readOnly,\n dataType: this.getConfigDataType(config.name),\n type: config.source,\n sensitive: config.sensitive\n };\n }\n return row;\n });\n\n this.setState({ data: newData });\n }\n\n async doSubmit() {\n const { selectedCluster, selectedNode, changedConfigs } = this.state;\n let { configs } = this.state;\n\n await this.postApi(uriNodesUpdateConfigs(selectedCluster, selectedNode), {\n configs: changedConfigs\n });\n\n this.setState({ state: this.state });\n toast.success(`Node configs '${selectedNode}' updated successfully.`);\n Object.keys(changedConfigs).forEach(key => {\n const changedConfig = changedConfigs[key];\n const configIndex = configs.findIndex(config => config.name === key);\n configs[configIndex].value = changedConfig;\n });\n }\n\n getInput(value, name, readOnly, dataType) {\n return (\n \n {dataType === 'TEXT' ? (\n this.onChange(value)}\n className=\"form-control\"\n autoComplete=\"off\"\n value={value}\n readOnly={readOnly}\n name={name}\n placeholder=\"Default\"\n />\n ) : (\n this.onChange(value)}\n className=\"form-control\"\n autoComplete=\"off\"\n value={value}\n readOnly={readOnly}\n name={name}\n placeholder=\"Default\"\n />\n )}\n {this.handleDataType(dataType, value)}\n
\n );\n }\n\n handleTypeAndSensitive(configType, configSensitive) {\n const type = configType === 'DEFAULT_CONFIG' ? 'secondary' : 'warning';\n return (\n \n {configType}\n {configSensitive ? (\n \n ) : (\n ''\n )}\n
\n );\n }\n\n handleNameAndDescription(name, description) {\n const descript = description ? (\n \n \n \n ) : (\n ''\n );\n return (\n \n
\n );\n }\n\n renderTabs(tabName, isActive) {\n const active = isActive ? 'active' : '';\n return (\n {name} {descript}\n \n {tabName}\n
\n \n {\n return this.handleNameAndDescription(obj.name, obj.description);\n }\n },\n {\n id: 'value',\n accessor: 'value',\n colName: 'Value',\n type: 'text',\n cell: obj => {\n return this.getInput(\n this.state.formData[obj.name],\n obj.name,\n obj.readOnly,\n obj.dataType\n );\n }\n },\n {\n id: 'typeAndSensitive',\n accessor: 'typeAndSensitive',\n colName: 'Type',\n type: 'text',\n cell: obj => {\n return this.handleTypeAndSensitive(obj.type, obj.sensitive);\n }\n }\n ]}\n data={data}\n updateData={data => {\n this.setState({ data });\n }}\n />\n {roles.node['node/config/update'] &&\n this.renderButton('Update configs', this.handleSubmit, undefined, 'submit')}\n
\n \n );\n }\n}\n\nexport default NodeConfigs;\n","import React from 'react';\nimport { uriNodesLogs } from '../../../../utils/endpoints';\nimport Table from '../../../../components/Table';\nimport { showBytes } from '../../../../utils/converters';\nimport { sortBy } from '../../../../utils/constants';\nimport Root from \"../../../../components/Root\";\n\nclass NodeLogs extends Root {\n state = {\n host: '',\n port: '',\n data: [],\n selectedCluster: this.props.clusterId,\n selectedNode: this.props.nodeId,\n loading: true\n };\n\n componentDidMount() {\n this.getNodesLogs();\n }\n\n async getNodesLogs() {\n let logs = [];\n const { selectedCluster, selectedNode } = this.state;\n\n logs = await this.getApi(uriNodesLogs(selectedCluster, selectedNode));\n logs = logs.data.sort(sortBy('partition', false))\n .sort(sortBy('topic', false));\n this.handleData(logs);\n }\n\n handleData(logs) {\n let tableNodes = logs.map(log => {\n return {\n broker: log.brokerId,\n topic: log.topic,\n partition: log.partition,\n size: showBytes(log.size),\n offsetLag: Number(log.offsetLag).toLocaleString()\n };\n });\n this.setState({ data: tableNodes, loading: false });\n }\n\n render() {\n const { data, loading } = this.state;\n return (\n \n {\n this.setState({ data });\n }}\n />\n
\n );\n }\n}\n\nexport default NodeLogs;\n","import Node from './Node';\n\nexport default Node;\n","import React, { Component } from 'react';\nimport Header from '../../Header';\nimport NodeConfigs from './/NodeConfigs/NodeConfigs';\nimport NodeLogs from './/NodeLogs/NodeLogs';\nimport {getSelectedTab} from \"../../../utils/functions\";\nimport {Link} from \"react-router-dom\";\n\nclass Node extends Component {\n state = {\n host: '',\n port: '',\n data: [],\n clusterId: this.props.match.params.clusterId,\n selectedNode: this.props.match.params.nodeId,\n selectedTab: 'configs'\n };\n\n tabs = ['configs', 'logs'];\n\n componentDidMount() {\n const { clusterId, nodeId } = this.props.match.params;\n const tabSelected = getSelectedTab(this.props, this.tabs);\n this.setState(\n {\n selectedTab: (tabSelected)? tabSelected : 'configs'\n },\n () => {\n this.props.history.replace(`/ui/${clusterId}/node/${nodeId}/${this.state.selectedTab}`);\n }\n );\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (this.props.location.pathname !== prevProps.location.pathname) {\n const tabSelected = getSelectedTab(this.props, this.tabs);\n this.setState({ selectedTab: tabSelected });\n }\n }\n\n tabClassName = tab => {\n const { selectedTab } = this.state;\n return selectedTab === tab ? 'nav-link active' : 'nav-link';\n };\n\n renderSelectedTab() {\n const { selectedTab } = this.state;\n\n switch (selectedTab) {\n case 'configs':\n return (\n \n
\n );\n }\n}\n\nexport default Node;\n","import React, { Component } from 'react';\nimport { Link, withRouter } from 'react-router-dom';\nimport { matchPath } from 'react-router';\nimport constants from '../../utils/constants';\nimport _ from 'lodash';\nimport './styles.scss';\nimport SideNav, { NavIcon, NavItem, NavText } from '@trendmicro/react-sidenav';\nimport '@trendmicro/react-sidenav/dist/react-sidenav.css';\n\nclass Sidebar extends Component {\n state = {\n selectedTab: constants.TOPIC,\n selectedCluster: '',\n selectedConnect: '',\n allClusters: [],\n allConnects: [],\n showClusters: false,\n showConnects: false,\n enableRegistry: false,\n enableConnect: false,\n roles: JSON.parse(sessionStorage.getItem('roles')),\n height: 'auto'\n };\n\n static getDerivedStateFromProps(nextProps, prevState) {\n let selectedTab = nextProps.selectedTab || prevState.selectedTab;\n return { selectedTab };\n }\n\n componentDidMount() {\n let tabs = [\n constants.CLUSTER,\n constants.CONNECT,\n constants.GROUP,\n constants.NODE,\n constants.SCHEMA,\n constants.TAIL,\n constants.TOPIC,\n constants.ACLS\n ];\n let path = this.props.location.pathname.split('/');\n if (tabs.find(el => el === path[2])) {\n this.setState({ selectedTab: path[2] });\n }\n if (this.props.clusters && this.props.clusters.length > 0) {\n this.handleGetClusters(this.props.clusters || [], selectedCluster => {\n this.handleRegistryAndConnects(selectedCluster);\n });\n }\n }\n\n handleGetClusters(clusters, callback = () => {}) {\n const match = matchPath(this.props.history.location.pathname, {\n path: '/ui/:clusterId/',\n exact: false,\n strict: false\n });\n\n const clusterId = match ? match.params.clusterId || '' : '';\n let allClusters =\n _(clusters)\n .sortBy(cluster => cluster.id)\n .value() || [];\n const cluster = allClusters.find(cluster => cluster.id === clusterId);\n this.setState(\n {\n allClusters: allClusters,\n selectedCluster: (cluster ? cluster.id : allClusters[0].id) || allClusters[0].id\n },\n () => {\n const { selectedCluster } = this.state;\n callback(selectedCluster);\n }\n );\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.location !== prevProps.location) {\n this.setState({ height: document.getElementById('root').offsetHeight });\n }\n if (this.props.clusters !== prevProps.clusters) {\n this.handleGetClusters(this.props.clusters || [], selectedCluster => {\n this.handleRegistryAndConnects(selectedCluster);\n });\n }\n }\n\n handleRegistryAndConnects(selectedCluster) {\n const { allClusters } = this.state;\n const cluster = allClusters.find(cluster => cluster.id === selectedCluster);\n const enableConnects = cluster.connects !== undefined;\n if (enableConnects) {\n this.setState({\n enableRegistry: cluster.registry,\n enableConnect: enableConnects,\n allConnects: cluster.connects,\n selectedConnect: cluster.connects[0]\n });\n } else {\n this.setState({\n enableRegistry: cluster.registry,\n enableConnect: enableConnects,\n allConnects: [],\n selectedConnect: ''\n });\n }\n }\n\n setClustersAndConnects = () => {\n const { allClusters, allConnects, selectedCluster, selectedConnect } = this.state;\n const listClusters = allClusters.map(cluster => (\n \n
\n - \n
- \n \n Configs\n \n \n
- \n \n Logs\n \n \n
\n
\n \n {this.renderSelectedTab()}\n
\n \n \n
\n \n
\n );\n }\n}\n\nexport default Loading;\n","import './Base.scss';\nimport React, { Component } from 'react';\nimport { withRouter } from 'react-router-dom';\nimport Sidebar from '../../containers/SideBar';\nimport constants from '../../utils/constants';\nimport Loading from '../../containers/Loading';\nimport { Helmet } from 'react-helmet';\nclass Base extends Component {\n state = {\n clusterId: '',\n topicId: '',\n selectedTab: constants.CLUSTER, //cluster | node | topic | tail | group | acls | schema | connect\n action: '',\n loading: false,\n expanded: !!localStorage.getItem('expanded')\n };\n\n static getDerivedStateFromProps(nextProps) {\n const clusterId = nextProps.match.params.clusterId;\n const topicId = nextProps.match.params.topicId;\n const action = nextProps.match.params.action;\n const { loading, tab } = nextProps.location;\n return {\n topicId: topicId,\n clusterId: clusterId,\n selectedTab: tab,\n action: action,\n loading\n };\n }\n\n handleTitle() {\n const page = window.location.pathname;\n let title = '';\n if (page.includes('node')) {\n title = 'Nodes |';\n }\n if (page.includes('topic')) {\n title = 'Topics |';\n }\n if (page.includes('tail')) {\n title = 'Live Tail |';\n }\n if (page.includes('group')) {\n title = 'Consumer Groups |';\n }\n if (page.includes('acls')) {\n title = 'Acls |';\n }\n if (page.includes('schema')) {\n title = 'Schema Registry |';\n }\n if (page.includes('connect')) {\n title = 'Connect |';\n }\n\n return title + ' akhq.io';\n }\n\n componentWillUnmount() {\n clearTimeout(this.interval);\n }\n\n render() {\n const { children, clusters } = this.props;\n const { loading, selectedTab, expanded } = this.state;\n return (\n <>\n \n
\n\n {this.props.children}\n \n \n
\n
\n \n 
\n \n HQ\n \n
\n \n {children}\n
\n \n );\n }\n}\n\nexport default withRouter(Base);\n","import React from 'react';\nimport Dropdown from 'react-bootstrap/Dropdown';\nimport _ from 'lodash';\nimport Input from '../../components/Form/Input';\nimport Header from '../Header';\nimport { SETTINGS_VALUES } from '../../utils/constants';\nimport { getClusterUIOptions } from '../../utils/functions';\nimport { uriLiveTail, uriTopicsName } from '../../utils/endpoints';\nimport Table from '../../components/Table';\nimport AceEditor from 'react-ace';\nimport 'ace-builds/webpack-resolver';\nimport 'ace-builds/src-noconflict/mode-json';\nimport 'ace-builds/src-noconflict/theme-merbivore_soft';\nimport Root from '../../components/Root';\nimport DateTime from '../../components/DateTime';\n\nconst STATUS = {\n STOPPED: 'STOPPED',\n STARTED: 'STARTED',\n PAUSED: 'PAUSED'\n};\n\nconst MAX_RECORDS = [50, 100, 250, 500, 1000, 2500];\n\nclass Tail extends Root {\n state = {\n search: '',\n dropdownSearch: '',\n topics: [],\n showDropdown: false,\n selectedTopics: [],\n selectedStatus: 'STOPPED',\n maxRecords: 50,\n data: [],\n showFilters: '',\n dateTimeFormat: SETTINGS_VALUES.TOPIC_DATA.DATE_TIME_FORMAT.RELATIVE\n };\n eventSource;\n\n componentDidMount = async () => {\n const { clusterId } = this.props.match.params;\n const query = new URLSearchParams(this.props.location.search);\n\n let data = await this.getApi(uriTopicsName(clusterId));\n data = data.data;\n let topics = [];\n if (query && query.get('topicId')) {\n topics = [ query.get('topicId') ];\n }\n\n if (data) {\n this.setState({ topics: data, selectedTopics: topics }, () => {\n if (query && query.get('topicId')) {\n this.setState({ selectedStatus: STATUS.STARTED });\n this.startEventSource();\n }\n });\n } else {\n this.setState({ topics: [], selectedTopics: topics }, () => {\n if (query && query.get('topicId')) {\n this.setState({ selectedStatus: STATUS.STARTED });\n this.startEventSource();\n }\n });\n }\n\n this.initDateTimeFormat();\n }\n\n initDateTimeFormat = async () => {\n const { clusterId } = this.props.match.params;\n const uiOptions = await getClusterUIOptions(clusterId)\n if(uiOptions.topicData && uiOptions.topicData.dateTimeFormat) {\n this.setState(({\n dateTimeFormat: uiOptions.topicData.dateTimeFormat\n }));\n }\n }\n\n componentWillUnmount = () => {\n super.componentWillUnmount();\n this.onStop();\n };\n\n startEventSource = () => {\n const { clusterId } = this.props.match.params;\n const { search, selectedTopics, maxRecords } = this.state;\n this.eventSource = new EventSource(\n uriLiveTail(clusterId, search, selectedTopics, JSON.stringify(maxRecords))\n );\n let self = this;\n this.eventSource.addEventListener('tailBody', function(e) {\n let res = JSON.parse(e.data);\n let { data } = self.state;\n\n\n if (res.records) {\n data = data.concat(res.records);\n if (data.length > maxRecords) {\n data = data.slice(data.length - maxRecords);\n }\n }\n\n self.setState({ data: data });\n self.scrollToBottom();\n });\n\n this.eventSource.onerror = e => {\n this.setState({ selectedStatus: STATUS.STOPPED });\n };\n };\n\n onStop = () => {\n if (this.eventSource) this.eventSource.close();\n };\n\n onStart = () => {\n this.startEventSource();\n };\n\n scrollToBottom = () => {\n const followScroll = (document.body.scrollTop || document.documentElement.scrollTop) + window.innerHeight >=\n (document.documentElement.scrollHeight - document.documentElement.clientHeight)\n\n if (followScroll) {\n this.messagesEnd.scrollIntoView({ behavior: 'smooth' });\n }\n }\n\n handleChange = e => {\n this.setState({ [e.target.name]: [e.target.value] });\n };\n\n handleSelectedTopics = topic => {\n let selectedTopics = this.state.selectedTopics;\n if (\n selectedTopics.find(el => {\n return el === topic;\n })\n ) {\n let updatedSelected = _.remove(selectedTopics, el => {\n return el !== topic;\n });\n this.setState({\n selectedTopics: updatedSelected\n });\n } else {\n selectedTopics.push(topic);\n this.setState({ selectedTopics: selectedTopics });\n }\n };\n\n renderTopicList = () => {\n let { topics, dropdownSearch, selectedTopics } = this.state;\n\n return (\n \n \n {topics\n .filter(topic => {\n if (dropdownSearch.length > 0) {\n return topic.includes(dropdownSearch);\n }\n return topic;\n })\n .map((topic, index) => {\n let selected = selectedTopics.find(selected => selected === topic);\n return (\n \n {\n this.onStop();\n this.setState({ data: [] });\n this.handleSelectedTopics(topic);\n }}\n role=\"option\"\n className={`dropdown-item ${selected ? 'selected' : ''}`}\n id={`bs-select-${index}-0`}\n aria-selected=\"false\"\n >\n {topic}\n
\n \n );\n })}\n {' '}\n \n );\n };\n\n openAndCloseFilters() {\n let { showFilters } = this.state;\n if (showFilters === 'show') {\n this.setState({ showFilters: '' });\n } else {\n this.setState({ showFilters: 'show' });\n }\n }\n\n render() {\n const {\n search,\n dropdownSearch,\n selectedTopics,\n topics,\n selectedStatus,\n maxRecords,\n data,\n showFilters\n } = this.state;\n\n return (\n \n \n {\n this.openAndCloseFilters();\n }}\n >\n \n \n \n \n );\n })}\n \n \n {\n this.onStop();\n this.setState({ selectedStatus: STATUS.STARTED }, () => {\n this.onStart();\n });\n }}\n className=\"btn btn-primary\"\n type=\"submit\"\n >\n Search \n \n \n
\n \n {selectedStatus !== STATUS.STOPPED && (\n \n {\n this.onStop();\n this.setState({ selectedStatus: STATUS.PAUSED });\n }}\n >\n \n Pause\n \n {\n this.onStart();\n this.setState({ selectedStatus: STATUS.STARTED });\n }}\n >\n Resume\n \n {\n this.setState({ data: [] });\n }}\n >\n Clear\n \n
\n \n
\n );\n }\n },\n {\n id: 'partition',\n accessor: 'partition',\n colName: 'Partition',\n type: 'text'\n },\n {\n id: 'offset',\n accessor: 'offset',\n colName: 'Offset',\n type: 'text'\n },\n {\n id: 'headers',\n accessor: 'headers',\n colName: 'Headers',\n type: 'text',\n expand: true,\n cell: obj => {\n return (\n \n {obj.headers ? Object.keys(obj.headers).length : 0}\n
\n );\n }\n },\n {\n id: 'value',\n accessor: 'value',\n colName: 'Schema',\n type: 'text',\n extraRow: true,\n extraRowContent: (obj, index) => {\n return (\n \n {obj.value}\n \n );\n }\n }\n ]}\n extraRow\n noStripes\n data={data}\n updateData={data => {\n this.setState({ data: data });\n }}\n noContent={ { this.messagesEnd = el; }}>\n
\n \n );\n }\n}\n\nexport default Tail;\n","import Tail from './Tail';\n\nexport default Tail;\n","import Acls from './Acls';\n\nexport default Acls;\n","import React from 'react';\nimport Header from '../../Header';\nimport Table from '../../../components/Table';\nimport * as constants from '../../../utils/constants';\nimport { uriAclsList } from '../../../utils/endpoints';\nimport SearchBar from '../../../components/SearchBar';\nimport Root from \"../../../components/Root\";\n\nclass Acls extends Root {\n state = {\n data: [],\n selectedCluster: '',\n searchData: {\n search: ''\n },\n loading: true\n };\n\n componentDidMount() {\n const { searchData } = this.state;\n const query = new URLSearchParams(this.props.location.search);\n const { clusterId } = this.props.match.params;\n\n this.setState({ selectedCluster: clusterId, searchData: { search: (query.get('search'))? query.get('search') : searchData.search }}, () => {\n this.getAcls();\n });\n }\n\n async getAcls() {\n let acls = [];\n const { selectedCluster } = this.state;\n\n acls = await this.getApi(uriAclsList(selectedCluster, this.state.searchData.search));\n this.handleData(acls.data);\n }\n\n handleData(acls) {\n let tableAcls = acls.map(acl => {\n acl.principalEncoded = btoa(acl.principal);\n return {\n id: acl,\n user: acl.principal || ''\n };\n });\n this.setState({ data: tableAcls, loading: false });\n return tableAcls;\n }\n\n handleSearch = data => {\n const { searchData } = data;\n this.setState({ searchData, loading: true }, () => {\n this.getAcls();\n this.props.history.push({\n pathname: `/ui/${this.state.selectedCluster}/acls`,\n search: `search=${searchData.search}`\n });\n });\n };\n\n render() {\n const { data, searchData, loading } = this.state;\n const { clusterId } = this.props.match.params;\n\n return (\n \n \n {\n this.setState({ data });\n }}\n noContent={\n \n \n \n \n }\n onDetails={acl => `/ui/${clusterId}/acls/${acl.principalEncoded}`}\n />\n
\n );\n }\n}\n\nexport default Acls;\n","import React from 'react';\nimport Header from '../../Header';\nimport Table from '../../../components/Table/Table';\nimport constants from '../../../utils/constants';\nimport { Link } from 'react-router-dom';\nimport { uriConnectDefinitions, uriDeleteDefinition } from '../../../utils/endpoints';\nimport ConfirmModal from '../../../components/Modal/ConfirmModal/ConfirmModal';\nimport AceEditor from 'react-ace';\nimport 'ace-builds/webpack-resolver';\nimport 'ace-builds/src-noconflict/mode-json';\nimport 'ace-builds/src-noconflict/theme-merbivore_soft';\nimport { toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\nimport Root from \"../../../components/Root\";\nimport SearchBar from \"../../../components/SearchBar\";\nimport Pagination from \"../../../components/Pagination\";\nimport {handlePageChange, getPageNumber} from \"./../../../utils/pagination\"\n\nclass ConnectList extends Root {\n state = {\n clusterId: '',\n connectId: '',\n tableData: [],\n showDeleteModal: false,\n definitionToDelete: '',\n deleteMessage: '',\n roles: JSON.parse(sessionStorage.getItem('roles')),\n loading: true,\n pageNumber: 1,\n totalPageNumber: 1,\n history: this.props,\n searchData: {\n search: ''\n },\n };\n\n static getDerivedStateFromProps(nextProps, prevState) {\n const clusterId = nextProps.match.params.clusterId;\n const connectId = nextProps.match.params.connectId;\n\n return {\n clusterId: clusterId,\n connectId: connectId\n };\n }\n\n componentDidMount() {\n const { searchData, pageNumber } = this.state;\n const query = new URLSearchParams(this.props.location.search);\n this.setState({\n searchData: { search: (query.get('search'))? query.get('search') : searchData.search },\n pageNumber: (query.get('page')) ? parseInt(query.get('page')) : parseInt(pageNumber)\n }, () => {\n this.getConnectDefinitions();\n });\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (this.props.location.pathname !== prevProps.location.pathname) {\n this.cancelAxiosRequests();\n this.renewCancelToken();\n\n this.setState({ pageNumber: 1 }, () => {\n this.componentDidMount();\n });\n }\n }\n\n async getConnectDefinitions() {\n const { clusterId, connectId, pageNumber } = this.state;\n const { search } = this.state.searchData;\n\n this.setState({ loading: true });\n\n let response = await this.getApi(uriConnectDefinitions(clusterId, connectId, search, pageNumber));\n let data = response.data;\n if (data.results) {\n this.handleData(data);\n this.setState({ selectedCluster: clusterId, totalPageNumber: data.page }, () => {\n this.props.history.push({\n pathname: `/ui/${this.state.clusterId}/connect/${this.state.connectId}`,\n search: `search=${this.state.searchData.search}&page=${pageNumber}`\n })\n });\n } else {\n this.setState({ clusterId, tableData: [], totalPageNumber: 0, loading: false });\n }\n }\n\n deleteDefinition = () => {\n const { clusterId, connectId, definitionToDelete: definition } = this.state;\n\n this.removeApi(uriDeleteDefinition(clusterId, connectId, definition))\n .then(() => {\n toast.success(`Definition '${definition}' is deleted`);\n this.setState({ showDeleteModal: false, definitionToDelete: '' }, () => {\n this.getConnectDefinitions();\n });\n })\n .catch(() => {\n this.setState({ showDeleteModal: false, topicToDelete: {} });\n });\n };\n\n handleData = data => {\n let tableData = [];\n tableData = data.results.map(connectDefinition => {\n return {\n id: connectDefinition.name || '',\n config: JSON.stringify(connectDefinition.configs) || '',\n type:\n {\n type: connectDefinition.type,\n shortClassName: connectDefinition.shortClassName\n } || '',\n tasks: connectDefinition.tasks || ''\n };\n });\n\n this.setState({ tableData, loading: false, totalPageNumber: data.page });\n };\n\n showDeleteModal = deleteMessage => {\n this.setState({ showDeleteModal: true, deleteMessage });\n };\n\n closeDeleteModal = () => {\n this.setState({ showDeleteModal: false, deleteMessage: '' });\n };\n\n getTableActions = () => {\n const roles = this.state.roles || {};\n let actions = [];\n\n if (roles.connect && roles.connect['connect/read']) {\n actions.push(constants.TABLE_DETAILS);\n }\n if (roles.connect && roles.connect['connect/delete']) {\n actions.push(constants.TABLE_DELETE);\n }\n\n return actions;\n };\n\n handleOnDelete(definition) {\n this.setState({ definitionToDelete: definition }, () => {\n this.showDeleteModal(\n \n No ACLS found, or the \"authorizer.class.name\" parameter is not configured on the\n cluster.\n
\n {definition}} ?\n \n
\n \n {\n return (\n \n \n {` ${obj[col.accessor].shortClassName}`}\n \n );\n }\n return (\n \n \n {` ${obj[col.accessor].shortClassName}`}\n \n );\n }\n },\n {\n id: 'tasks',\n accessor: 'tasks',\n colName: 'Tasks',\n type: 'text',\n cell: (obj, col) => {\n return this.renderTasks(obj[col.accessor]);\n }\n }\n ]}\n data={tableData}\n updateData={data => {\n this.setState({ tableData: data });\n }}\n actions={this.getTableActions()}\n onDetails={name => `/ui/${clusterId}/connect/${connectId}/definition/${name}` }\n onDelete={row => {\n this.handleOnDelete(row.id);\n }}\n extraRow\n noStripes\n onExpand={obj => {\n return Object.keys(obj.headers).map(header => {\n return (\n \n \n {header}\n \n \n {obj.headers[header]}\n \n \n );\n });\n }}\n noContent={'No connectors available'}\n />\n {roles.connect && roles.connect['connect/insert'] && (\n \n )}\n
\n );\n }\n}\n\nexport default ConnectList;\n","import React from 'react';\nimport Joi from 'joi-browser';\nimport './styles.scss';\nimport { uriConnectPlugins, uriCreateConnect } from '../../../utils/endpoints';\nimport { withRouter } from 'react-router-dom';\nimport Header from '../../Header/Header';\nimport constants from '../../../utils/constants';\nimport Select from '../../../components/Form/Select';\nimport AceEditor from 'react-ace';\nimport _ from 'lodash';\nimport 'ace-builds/webpack-resolver';\nimport 'ace-builds/src-noconflict/mode-json';\nimport 'ace-builds/src-noconflict/theme-merbivore_soft';\nimport { toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\nimport Root from \"../../../components/Root\";\n\nclass ConnectCreate extends Root {\n state = {\n clusterId: this.props.match.params.clusterId,\n connectId: this.props.match.params.connectId,\n formData: {},\n errors: {},\n plugins: [],\n selectedType: '',\n display: '',\n plugin: {}\n };\n\n schema = {};\n componentDidMount() {\n this.getPlugins();\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.location === prevProps.location) {\n let height = document.getElementById('root').offsetHeight;\n document.getElementsByClassName('sidenav---sidenav---_2tBP')[0].style.height = height + 'px';\n }\n }\n\n async getPlugins() {\n const { connectId, clusterId } = this.state;\n\n let plugins = await this.getApi(uriConnectPlugins(clusterId, connectId));\n this.setState({ clusterId, connectId, plugins: plugins.data });\n }\n\n onTypeChange = value => {\n let formData = {};\n this.setState({ selectedType: value, formData }, () => {\n this.renderForm();\n });\n };\n\n handleShema(definitions) {\n this.schema = {};\n let formData = {};\n formData.type = this.state.selectedType;\n this.schema['type'] = Joi.string().required();\n formData.subject = '';\n this.schema['subject'] = Joi.string().required();\n definitions.forEach(definition => {\n let config = this.handleDefinition(definition);\n formData[definition.name] = '';\n this.schema[definition.name] = config;\n if (definition.name === 'transforms') {\n formData['transformsprops'] = '{}';\n this.schema['transformsprops'] = Joi.object().required();\n }\n });\n this.setState({ formData });\n }\n\n handleDefinition(definition) {\n let def = '';\n if (definition.name !== 'name' && definition.name !== 'connect.class') {\n if (definition.required) {\n switch (definition.type) {\n case constants.TYPES.LONG:\n case constants.TYPES.INT:\n case constants.TYPES.DOUBLE:\n case constants.TYPES.SHORT:\n def = Joi.number().required();\n break;\n case constants.TYPES.PASSWORD:\n def = Joi.password().required();\n break;\n case constants.TYPES.BOOLEAN:\n def = Joi.boolean().required();\n break;\n default:\n def = Joi.string().required();\n break;\n }\n } else {\n switch (definition.type) {\n case constants.TYPES.LONG:\n case constants.TYPES.INT:\n case constants.TYPES.DOUBLE:\n case constants.TYPES.SHORT:\n def = Joi.number().allow('');\n break;\n\n case constants.TYPES.BOOLEAN:\n def = Joi.boolean().allow('');\n break;\n default:\n def = Joi.string().allow('');\n break;\n }\n }\n } else {\n def = Joi.string().allow('');\n }\n\n return def;\n }\n\n renderTableRows(plugin) {\n let rows = '';\n let title = '';\n let { formData } = this.state;\n const errors = [];\n const errorMessage = this.validateProperty({ name: plugin.name, value: formData[plugin.name] });\n if (errorMessage) {\n errors[plugin.name] = errorMessage;\n }\n\n switch (plugin.importance) {\n case 'HIGH':\n title = (\n \n {plugin.displayName}\n {''}\n \n JSON.stringify(JSON.parse(obj[col.accessor]), null, 2)}>\n {obj[col.accessor]}\n \n \n );\n }\n },\n {\n id: 'type',\n accessor: 'type',\n colName: 'Type',\n type: 'text',\n cell: (obj, col) => {\n if (obj[col.accessor].type === 'source') {\n return (\n {plugin.name};\n let required = {};\n if (plugin.required) {\n required = Required;\n } else {\n required = \n {name}\n
\n {required}\n
\n {documentation}\n
\n {errors[plugin.name]}\n
\n )}\n \n Transforms additional properties\n \n {`Json object to be added to configurations. example:\n {\n \"transforms.createKey.type\":\"org.apache.kafka.connect.transforms.ValueToKey\",\n \"transforms.createKey.fields\":\"c1\",\n \"transforms.extractInt.type\":\"org.apache.kafka.connect.transforms.ExtractField$Key\",\n \"transforms.extractInt.field\":\"c1\"\n }`}\n \n \n {errors['transformsprops']}\n
\n )}\n \n {\n e.preventDefault();\n this.doSubmit();\n }}\n >\n \n \n )}\n \n
\n );\n }\n}\n\nexport default withRouter(ConnectCreate);\n","import React from 'react';\nimport './styles.scss';\nimport Table from '../../../../components/Table/Table';\nimport constants from '../../../../utils/constants';\nimport {\n uriGetDefinition,\n uriPauseDefinition,\n uriResumeDefinition,\n uriRestartDefinition,\n uriRestartTask\n} from '../../../../utils/endpoints';\nimport ConfirmModal from '../../../../components/Modal/ConfirmModal/ConfirmModal';\nimport './styles.scss';\nimport { toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\nimport AceEditor from 'react-ace';\nimport Root from \"../../../../components/Root\";\n\nclass ConnectTasks extends Root {\n state = {\n clusterId: this.props.clusterId || this.props.match.params.clusterId,\n connectId: this.props.connectId || this.props.match.params.connectId,\n definitionId: this.props.definitionId || this.props.match.params.clusterId,\n definition: {},\n definitionModifyMessage: '',\n definitionModifyData: {},\n tableData: [],\n showActionModal: false,\n actionMessage: '',\n roles: JSON.parse(sessionStorage.getItem('roles')),\n loading: true\n };\n\n definitionState = {\n PAUSE: 'PAUSE',\n RESUME: 'RESUME',\n RESTART: 'RESTART',\n RESTART_TASK: 'RESTART_TASK'\n };\n\n componentDidMount() {\n this.getDefinition();\n }\n\n handleTasks() {\n const tasks = this.state.definition.tasks || [];\n let tableData = [];\n tasks.forEach(task => {\n tableData.push({\n id: JSON.stringify(task.id),\n worker: task.workerId,\n state: task.state,\n trace: task.trace\n });\n });\n this.setState({ tableData, loading: false });\n }\n\n async getDefinition() {\n let definition = {};\n const { clusterId, connectId, definitionId } = this.state;\n\n this.setState({ loading: true });\n definition = await this.getApi(uriGetDefinition(clusterId, connectId, definitionId));\n this.setState({ definition: definition.data }, () => this.handleTasks());\n }\n\n modifyDefinitionState = () => {\n const { definitionId } = this.state;\n const { uri, action, taskId } = this.state.definitionModifyData;\n\n this.getApi(uri)\n .then(() => this.getDefinition())\n .then(() => {\n toast.success(\n `${\n taskId !== undefined\n ? `Definition '${definitionId}' tasks ${taskId} is restarted`\n : `Definition '${definitionId}' is ${action}`\n }`\n );\n this.closeActionModal();\n });\n };\n\n showActionModal = definitionModifyMessage => {\n this.setState({ showActionModal: true, definitionModifyMessage });\n };\n\n closeActionModal = () => {\n this.setState({\n showActionModal: false,\n definitionModifyMessage: '',\n definitionModifyData: {}\n });\n };\n\n handleAction = (option, taskId) => {\n const { clusterId, connectId, definitionId } = this.state;\n let uri = '';\n let action = '';\n let failedAction = '';\n\n switch (option) {\n case 'PAUSE':\n uri = uriPauseDefinition(clusterId, connectId, definitionId);\n action = 'paused';\n failedAction = 'pause';\n break;\n case 'RESUME':\n uri = uriResumeDefinition(clusterId, connectId, definitionId);\n action = 'resumed';\n failedAction = 'resume';\n break;\n case 'RESTART':\n uri = uriRestartDefinition(clusterId, connectId, definitionId);\n action = 'restarted';\n failedAction = 'restart';\n break;\n case 'RESTART_TASK':\n uri = uriRestartTask(clusterId, connectId, definitionId, taskId);\n action = 'restarted';\n failedAction = 'restart';\n break;\n default:\n uri = uriResumeDefinition(clusterId, connectId, definitionId);\n action = 'resumed';\n failedAction = 'resume';\n break;\n }\n\n let definitionModifyData = {\n uri,\n action,\n failedAction\n };\n\n if (taskId !== undefined) definitionModifyData.taskId = taskId;\n\n this.setState({ definitionModifyData }, () => {\n this.showActionModal(\n taskId !== undefined ? (\n \n \n\n
\n \n {\n let { formData } = this.state;\n const errors = { ...this.state.errors };\n const errorMessage = this.validateProperty(input);\n if (errorMessage) {\n errors[input.name] = errorMessage;\n } else {\n delete errors[input.name];\n }\n formData['subject'] = input.value;\n this.setState({ formData });\n }}\n placeholder=\"Subject\"\n />\n
\n \n \n \n
\n
\n\n | Name | \nValue | \n
|---|
\n \n
\n \n {taskId} from {this.state.definitionId}\n \n }{' '}\n ?\n {this.state.definitionId}} ?\n \n
\n \n ) : (\n \n {\n return this.renderTask(obj[col.accessor]);\n }\n },\n {\n id: 'trace',\n name: 'trace',\n accessor: 'trace',\n colName: 'Trace',\n type: 'text',\n extraRow: true,\n extraRowContent: (obj, index) => {\n return (\n
\n {roles.connect && roles.connect['connect/state/update'] && (\n \n {obj.trace}\n \n ) : null;\n }\n }\n ]}\n extraRow\n noStripes\n data={tableData}\n updateData={data => {\n this.setState({ tableData: data });\n }}\n actions={\n roles.connect && roles.connect['connect/state/update'] && [constants.TABLE_RESTART]\n }\n onRestart={row => {\n this.handleAction(this.definitionState.RESTART_TASK, row.id);\n }}\n />\n {plugin.name};\n let required = {};\n if (plugin.required) {\n required = Required;\n } else {\n required = \n {name}\n
\n {required}\n
\n {documentation}\n
\n {errors[plugin.name]}\n
\n )}\n \n Transforms additional properties\n \n {`Json object to be added to configurations. example:\n {\n \"transforms.createKey.type\":\"org.apache.kafka.connect.transforms.ValueToKey\",\n \"transforms.createKey.fields\":\"c1\",\n \"transforms.extractInt.type\":\"org.apache.kafka.connect.transforms.ExtractField$Key\",\n \"transforms.extractInt.field\":\"c1\"\n }`}\n \n \n {errors['transformsprops']}\n
\n )}\n \n this.handleSubmit(e)}\n >\n {plugin && (\n \n \n )}\n \n
\n );\n }\n}\n\nexport default ConnectConfigs;\n","import React, { Component } from 'react';\nimport Header from '../../Header/Header';\nimport ConnectTasks from './ConnectTasks/ConnectTasks';\nimport ConnectConfigs from './ConnectConfigs/ConnectConfigs';\nimport {getSelectedTab} from \"../../../utils/functions\";\nimport {Link} from \"react-router-dom\";\n\nclass Connect extends Component {\n state = {\n clusterId: this.props.history.clusterId || this.props.match.params.clusterId,\n connectId: this.props.history.connectId || this.props.match.params.connectId,\n definitionId: this.props.history.definitionId || this.props.match.params.definitionId,\n selectedTab: 'tasks'\n };\n\n tabs = ['tasks', 'configs'];\n\n componentDidMount() {\n const { clusterId, connectId, definitionId } = this.props.match.params;\n const tabSelected = getSelectedTab(this.props, this.tabs);\n this.setState({ selectedTab: (tabSelected)? tabSelected : 'tasks' },\n () => {\n this.props.history.replace(`/ui/${clusterId}/connect/${connectId}/definition/${definitionId}/${this.state.selectedTab}`);\n });\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (this.props.location.pathname !== prevProps.location.pathname) {\n const tabSelected = getSelectedTab(this.props, this.tabs);\n this.setState({ selectedTab: tabSelected });\n }\n }\n\n tabClassName = tab => {\n const { selectedTab } = this.state;\n return selectedTab === tab ? 'nav-link active' : 'nav-link';\n };\n\n renderSelectedTab() {\n const { clusterId, connectId, definitionId, selectedTab } = this.state;\n const { history, match } = this.props;\n\n switch (selectedTab) {\n case 'tasks':\n return (\n \n \n
\n \n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n {roles.connect && roles.connect['connect/update'] && (\n | Name | \nValue | \n
|---|
\n \n Update\n \n
\n )}\n \n
\n );\n }\n}\n\nexport default Connect;\n","import React from 'react';\nimport Joi from 'joi-browser';\nimport { withRouter } from 'react-router-dom';\nimport Form from '../../../components/Form/Form';\nimport Header from '../../Header';\nimport { uriTopicsCreate, uriTopicDefaultConf } from '../../../utils/endpoints';\nimport { toast } from 'react-toastify';\n\nclass TopicCreate extends Form {\n state = {\n formData: {\n name: '',\n partition: 1,\n replication: 1,\n cleanup: 'delete',\n retention: 86400000\n },\n errors: {}\n };\n\n componentDidMount() {\n this.getTopicDefaultConf();\n }\n\n async getTopicDefaultConf() {\n let { formData } = { ...this.state }\n const defaults = await this.getApi(uriTopicDefaultConf());\n\n formData.retention = defaults.data.retention\n formData.partition = defaults.data.partition\n formData.replication = defaults.data.replication\n\n this.setState({ formData });\n }\n\n schema = {\n name: Joi.string()\n .required()\n .label('Name'),\n partition: Joi.number()\n .min(1)\n .label('Partition')\n .required(),\n replication: Joi.number()\n .min(1)\n .label('Replication')\n .required(),\n cleanup: Joi.string().required(),\n retention: Joi.number().label('Retention')\n };\n\n onCleanupChange = value => {\n let { formData } = { ...this.state };\n formData.cleanup = value;\n\n this.setState({ formData });\n };\n\n async doSubmit() {\n const { formData } = this.state;\n const { clusterId } = this.props.match.params;\n const topic = {\n cluster: clusterId,\n name: formData.name,\n partition: formData.partition,\n replication: formData.replication,\n configs: {\n 'cleanup.policy': formData.cleanup === 'deleteAndCompact' ? '' : formData.cleanup,\n 'retention.ms': formData.retention\n }\n };\n\n this.postApi(uriTopicsCreate(clusterId), topic)\n .then(() => {\n this.props.history.push({\n pathname: `/ui/${clusterId}/topic`,\n });\n toast.success(`Topic '${formData.name}' is created`);\n });\n }\n render() {\n return (\n \n
\n - \n
- \n \n Tasks\n \n \n
- \n \n Configs\n \n \n
\n
\n \n {this.renderSelectedTab()}\n
\n \n this.doSubmit()}\n >\n
\n );\n }\n}\n\nexport default withRouter(TopicCreate);\n","import TopicProduce from './TopicProduce';\n\nexport default TopicProduce;\n","import React from 'react';\nimport Form from '../../../components/Form/Form';\nimport Header from '../../Header';\nimport Joi from 'joi-browser';\nimport Dropdown from 'react-bootstrap/Dropdown';\nimport { formatDateTime } from '../../../utils/converters';\nimport { popProduceToTopicValues } from '../../../utils/localstorage';\nimport {\n uriTopics,\n uriPreferredSchemaForTopic,\n uriTopicsPartitions,\n uriTopicsProduce\n} from '../../../utils/endpoints';\nimport moment from 'moment';\nimport DatePicker from '../../../components/DatePicker';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\n\nclass TopicProduce extends Form {\n state = {\n partitions: [],\n nHeaders: 1,\n formData: {\n partition: '',\n key: '',\n hKey0: '',\n hValue0: '',\n value: '',\n keyValueSeparator: ':'\n },\n datetime: new Date(),\n openDateModal: false,\n errors: {},\n selectableValueFormats: [\n { _id: 'string', name: 'string' },\n { _id: 'json', name: 'json' }\n ],\n keySchema: [],\n keySchemaSearchValue: '',\n selectedKeySchema: '',\n valueSchema: [],\n valueSchemaSearchValue: '',\n selectedValueSchema: '',\n clusterId: '',\n topicId: '',\n topics: [],\n topicsSearchValue: '',\n multiMessage: false,\n tombstone: false,\n valuePlaceholder: '{\"param\": \"value\"}'\n };\n\n schema = {\n partition: Joi.number()\n .allow(null)\n .label('Partition'),\n key: Joi.string()\n .allow('')\n .label('Key'),\n hKey0: Joi.string()\n .allow('')\n .label('hKey0'),\n hValue0: Joi.string()\n .allow('')\n .label('hValue0'),\n value: Joi.string()\n .allow('')\n .label('Value'),\n keyValueSeparator: Joi.string()\n .min(1)\n .label('keyValueSeparator')\n };\n\n async componentDidMount() {\n const { clusterId, topicId } = this.props.match.params;\n\n let response = await this.getApi(uriTopicsPartitions(clusterId, topicId));\n let partitions = response.data.map(item => {\n return { name: item.id, _id: Number(item.id) };\n });\n partitions.unshift({name: 'auto assign', _id: null});\n\n this.setState(({\n partitions,\n topicId,\n formData: {\n ...this.state.formData,\n partition: partitions[0]._id,\n },\n }));\n\n await this.getPreferredSchemaForTopic();\n const topicEventData = popProduceToTopicValues();\n if (Object.keys(topicEventData).length) {\n await this.initByTopicEvent(topicEventData);\n }\n\n this.setState({ clusterId, topicId });\n\n this.initAvailableTopics();\n }\n\n async initAvailableTopics() {\n const {clusterId} = this.props.match.params;\n\n const topics = [];\n let page = 0;\n let topicResponseData = {};\n do {\n page = page + 1;\n topicResponseData = await this.getApi(uriTopics(clusterId, '', '', page))\n .then(res => res.data);\n topicResponseData.results\n .forEach(topicData => topics.push(topicData.name));\n } while(page < topicResponseData.pages);\n\n this.setState({\n topics,\n });\n }\n\n async getPreferredSchemaForTopic() {\n const { clusterId } = this.props.match.params;\n let schema = await this.getApi(uriPreferredSchemaForTopic(clusterId, this.state.topicId));\n let keySchema = [];\n let valueSchema = [];\n schema.data && schema.data.key && schema.data.key.map(index => keySchema.push(index));\n schema.data && schema.data.value && schema.data.value.map(index => valueSchema.push(index));\n this.setState({ keySchema: keySchema, valueSchema: valueSchema });\n }\n\n async initByTopicEvent(copyValues) {\n const {header, keySchemaId, valueSchemaId, ...topicValuesDefault} = copyValues;\n\n const keySchema = this.state.keySchema.find(schema => schema.id === keySchemaId);\n const valueSchema = this.state.valueSchema.find(schema => schema.id === valueSchemaId);\n\n this.setState(({\n formData: {\n ...this.state.formData,\n ...topicValuesDefault,\n },\n selectedKeySchema: keySchema ? keySchema.subject : '',\n selectedValueSchema: valueSchema ? valueSchema.subject : '',\n nHeaders: Object.keys(header).length ? 0 : 1\n }));\n\n Object.entries(header).forEach(([key, value]) => this.handlePlus(key, value));\n }\n\n doSubmit() {\n const {\n formData,\n topicId,\n datetime,\n selectedKeySchema,\n selectedValueSchema,\n keySchema,\n valueSchema,\n multiMessage,\n tombstone\n } = this.state;\n const { clusterId } = this.props.match.params;\n\n let schemaKeyToSend = keySchema.find(key => key.subject === selectedKeySchema);\n let schemaValueToSend = valueSchema.find(value => value.subject === selectedValueSchema);\n let value;\n if (tombstone) {\n value = null;\n } else {\n value = multiMessage ? formData.value : JSON.parse(JSON.stringify(formData.value))\n }\n const topic = {\n clusterId,\n topicId,\n topics: [topicId],\n partition: formData.partition,\n key: formData.key,\n timestamp: datetime.toISOString(),\n value: value,\n keySchema: schemaKeyToSend ? schemaKeyToSend.id : '',\n valueSchema: schemaValueToSend ? schemaValueToSend.id : '',\n multiMessage: multiMessage,\n keyValueSeparator: formData.keyValueSeparator\n };\n\n const headers = [];\n Object.keys(formData).forEach(key => {\n if (key.includes('hKey')) {\n let keyNumbers = key.replace(/\\D/g, '');\n headers.push({\n key: formData[key],\n value: formData[`hValue${keyNumbers}`]\n });\n }\n });\n\n topic.headers = headers;\n\n this.postApi(uriTopicsProduce(clusterId, topicId), topic)\n .then(() => {\n this.props.history.push({\n pathname: `/ui/${clusterId}/topic/${topicId}`,\n });\n toast.success(`Produced to ${topicId}.`);\n });\n }\n\n renderMultiMessage(tombstone) {\n const { formData, multiMessage } = this.state;\n\n return (\n \n \n
\n );\n }\n\n renderTombstone(multiMessage) {\n const { tombstone } = this.state;\n\n return (\n \n {this.renderCheckbox(\n 'isMultiMessage',\n '',\n multiMessage,\n () => {\n this.setState({multiMessage: !multiMessage,\n valuePlaceholder: this.getPlaceholderValue(!multiMessage, formData.keyValueSeparator)})\n },\n false,\n { disabled: tombstone }\n )}\n\n \n {\n this.setState({\n formData: { ...formData,\n keyValueSeparator: event.target.value},\n valuePlaceholder: this.getPlaceholderValue(!multiMessage, event.target.value)})\n }\n }\n />\n
\n \n \n
\n );\n }\n\n getPlaceholderValue(isMultiMessage, keyValueSeparator) {\n if(isMultiMessage) {\n return 'key1' + keyValueSeparator + '{\"param\": \"value1\"}\\n'\n + 'key2' + keyValueSeparator + '{\"param\": \"value2\"}';\n } else {\n return '{\"param\": \"value\"}';\n }\n }\n\n renderHeaders() {\n let headers = [];\n\n Object.keys(this.state.formData).forEach(key => {\n if (key.includes('hKey')) {\n let keyNumbers = key.replace(/\\D/g, '');\n headers.push(this.renderHeader(Number(keyNumbers)));\n }\n });\n return \n {this.renderCheckbox(\n 'isTombstone',\n '',\n tombstone,\n () => {\n this.setState({tombstone: !tombstone} )\n },\n false,\n { disabled: multiMessage }\n )}\n
\n {headers.map(head => head)}
;\n }\n\n renderHeader(position) {\n return (\n \n \n\n
\n );\n }\n\n handlePlus(providedKey, providedValue) {\n const { formData, nHeaders } = this.state;\n\n let newFormData = {\n ...formData,\n [`hKey${nHeaders}`]: providedKey || '',\n [`hValue${nHeaders}`]: providedValue || '',\n };\n this.schema = {\n ...this.schema,\n [`hKey${nHeaders}`]: Joi.string()\n .min(1)\n .label(`hKey${nHeaders}`),\n [`hValue${nHeaders}`]: Joi.string()\n .min(1)\n .label(`hValue${nHeaders}`)\n };\n this.setState({ nHeaders: this.state.nHeaders + 1, formData: newFormData });\n }\n\n handleRemove(position) {\n const state = {\n ...this.state\n };\n delete state.formData[`hKey${position}`];\n delete state.formData[`hValue${position}`];\n this.setState(state);\n }\n\n renderResults = (results, searchValue, selectedValue, tag) => {\n return (\n \n
\n \n {this.renderInput(\n `hKey${position}`,\n '',\n 'Key',\n 'text',\n undefined,\n true,\n 'col-sm-6',\n 'input-class'\n )}\n\n {this.renderInput(\n `hValue${position}`,\n '',\n 'Value',\n 'text',\n undefined,\n true,\n 'col-sm-6',\n 'input-class'\n )}\n
\n \n {\n position === 0 ? this.handlePlus() : this.handleRemove(position);\n }}\n >\n \n \n
\n \n \n {results\n .filter(key => {\n if (searchValue.length > 0) {\n return key.includes(searchValue);\n }\n return results;\n })\n .map((key, index) => {\n let selected = selectedValue === key ? 'selected' : '';\n return (\n \n \n {\n if (tag === 'key') {\n selectedValue === key\n ? this.setState({ selectedKeySchema: '' })\n : this.setState({ selectedKeySchema: key });\n } else if (tag === 'value') {\n selectedValue === key\n ? this.setState({ selectedValueSchema: '' })\n : this.setState({ selectedValueSchema: key });\n } else if (tag === 'topicId') {\n if( selectedValue !== key) {\n this.setState({topicId: key});\n this.getPreferredSchemaForTopic();\n }\n }\n }}\n role=\"option\"\n className={`dropdown-item ${selected}`}\n id={`bs-select-${index}-0`}\n aria-selected=\"false\"\n >\n {key}\n
\n \n \n );\n })}\n {' '}\n \n );\n };\n\n render() {\n const {\n topicId,\n topics,\n topicsSearchValue,\n formData,\n partitions,\n datetime,\n keySchema,\n keySchemaSearchValue,\n selectedKeySchema,\n valueSchema,\n valueSchemaSearchValue,\n selectedValueSchema,\n multiMessage,\n tombstone\n } = this.state;\n let date = moment(datetime);\n return (\n \n \n
\n );\n }\n}\n\nexport default TopicProduce;\n\n","import TopicCopy from './TopicCopy';\n\nexport default TopicCopy;\n","import React from 'react';\nimport Header from '../../Header/Header';\nimport Form from '../../../components/Form/Form';\nimport {\n formatDateTime,\n transformListObjsToViewOptions,\n transformStringArrayToViewOptions\n} from '../../../utils/converters';\nimport Joi from 'joi-browser';\nimport {\n uriClusters,\n uriTopicsCopy,\n uriTopicsInfo,\n uriTopicsName, uriTopicsOffsetsByTimestamp\n} from '../../../utils/endpoints';\nimport './styles.scss';\nimport {toast} from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\nimport Dropdown from \"react-bootstrap/Dropdown\";\nimport DatePicker from \"../../../components/DatePicker\";\nimport moment from \"moment\";\nimport Input from \"../../../components/Form/Input\";\n\nclass TopicCopy extends Form {\n state = {\n clusterId: '',\n topicId: '',\n clusters: [],\n topics: [],\n selectedTopic: undefined,\n checked: {},\n formData: {},\n errors: {},\n loading: true\n };\n\n schema = {};\n\n componentDidMount() {\n const { clusterId, topicId } = this.props.match.params;\n\n this.schema['clusterListView'] = Joi.string().required();\n this.schema['topicListView'] = Joi.string().required();\n this.schema['lastMessagesNr'] = Joi.string().allow('');\n\n this.setState({ clusterId, topicId, formData: { clusterListView: clusterId, lastMessagesNr: ''} }, () => {\n this.setupInitialData(clusterId, topicId);\n });\n }\n\n\n setupInitialData = (clusterId, topicId) => {\n const { formData, checked } = this.state;\n\n const requests = [\n this.getApi(uriClusters()),\n this.getApi(uriTopicsName(clusterId)),\n this.getApi(uriTopicsInfo(clusterId, topicId))\n ];\n\n Promise.all(requests)\n .then(data => {\n data[2].data.partitions.forEach(partition => {\n const name = `partition-${partition.id}`;\n const checkName = `check-${name}`;\n\n this.schema[name] = Joi.number()\n .min(partition.firstOffset || 0)\n .max(partition.lastOffset || 0)\n .required()\n .label(`Partition ${partition.id} offset`);\n\n formData[name] = partition.firstOffset || '0';\n checked[checkName] = true;\n });\n\n this.setState({\n formData,\n checked,\n selectedTopic: data[2].data,\n clusters: transformListObjsToViewOptions(data[0].data, 'id', 'id'),\n topics: transformStringArrayToViewOptions(data[1].data),\n loading: false\n });\n })\n .catch(err => {\n console.error('Error:', err);\n });\n }\n\n getTopics = (clusterId) => {\n this\n .getApi(uriTopicsName(clusterId))\n .then(res => {\n this.setState(\n { topics: transformStringArrayToViewOptions(res.data), loading: false }\n );\n })\n .catch(err => {\n console.error('Error:', err);\n });\n };\n\n handleOnChangeTopic = () => {\n const { formData } = this.state;\n\n this\n .getApi(uriTopicsInfo(formData.clusterListView, formData.topicListView))\n .then(res => {\n this.setState(\n { selectedTopic: res.data, loading: false }\n );\n })\n .catch(err => {\n console.error('Error:', err);\n });\n };\n\n createSubmitBody = (formData, checked) => {\n let body = [];\n let splitName = [];\n let partition = '';\n const checkedPartition= [];\n\n Object.keys(checked).forEach(checkedName => {\n splitName = checkedName.split('-');\n partition = splitName.pop();\n checkedPartition[partition] = checked[checkedName];\n });\n\n Object.keys(formData).filter(value => value.startsWith('partition')).forEach(name => {\n splitName = name.split('-');\n partition = splitName.pop();\n\n if(checkedPartition[partition] === true) {\n body.push({\n partition,\n offset: formData[name]\n });\n }\n });\n return body;\n };\n\n async doSubmit() {\n const { clusterId, topicId, formData, checked } = this.state;\n const result = await this.postApi(\n uriTopicsCopy(clusterId, topicId, formData.clusterListView, formData.topicListView),\n this.createSubmitBody(formData, checked)\n );\n\n toast.success(`Copied ${result.data.records} records to topic '${formData.topicListView}' successfully.`);\n }\n\n checkedTopicOffset = (event) => {\n const { checked } = this.state;\n checked[event.target.value] = event.target.checked;\n\n this.setState({ checked: checked });\n }\n\n renderTopicPartition = () => {\n const { selectedTopic } = this.state;\n const renderedItems = [];\n\n if(selectedTopic) {\n\n renderedItems.push(\n \n );\n }\n return renderedItems;\n };\n\n renderPartitionInputs = (partitions) => {\n const { checked } = this.state;\n const renderedInputs = [];\n\n partitions.forEach(partition => {\n const name = `partition-${partition.id}`;\n const checkName = `check-${name}`;\n\n renderedInputs.push(\n \n { \n\n }\n
\n );\n });\n\n return renderedInputs;\n };\n\n unCheckAll = (value) => {\n const {checked} = this.state;\n\n Object.keys(checked).forEach(name => {\n checked[name] = value;\n });\n\n this.setState({ checked});\n }\n\n resetToFirstOffsets = () => {\n const { selectedTopic, formData } = this.state;\n\n selectedTopic.partitions.forEach(partition => {\n const name = `partition-${partition.id}`;\n formData[name] = partition.firstOffset || '0';\n });\n\n this.setState({ formData });\n };\n\n resetToLastOffsets = () => {\n const { selectedTopic, formData } = this.state;\n\n selectedTopic.partitions.forEach(partition => {\n const name = `partition-${partition.id}`;\n formData[name] = partition.lastOffset || '0';\n });\n\n this.setState({ formData });\n };\n\n resetToCalculatedOffsets = ({ currentTarget: input }) => {\n const { selectedTopic, formData } = this.state;\n\n selectedTopic.partitions.forEach(partition => {\n const name = `partition-${partition.id}`;\n const calculatedOffset = (partition.lastOffset || 0) - input.value;\n formData[name] = (!calculatedOffset || calculatedOffset < 0 )? '0' : calculatedOffset;\n });\n\n formData['lastMessagesNr'] = input.value;\n this.setState({ formData });\n };\n\n async getTopicOffset() {\n const { clusterId, topicId, timestamp} = this.state;\n const momentValue = moment(timestamp);\n\n const date =\n timestamp.toString().length > 0\n ? formatDateTime(\n {\n year: momentValue.year(),\n monthValue: momentValue.month(),\n dayOfMonth: momentValue.date(),\n hour: momentValue.hour(),\n minute: momentValue.minute(),\n second: momentValue.second(),\n milli: momentValue.millisecond()\n },\n 'YYYY-MM-DDTHH:mm:ss.SSS'\n ) + 'Z'\n : '';\n\n let data = {};\n if (date !== '') {\n data = await this.getApi(uriTopicsOffsetsByTimestamp(clusterId, topicId, date));\n data = data.data;\n this.handleOffsetsByTimestamp(data);\n }\n }\n\n handleOffsetsByTimestamp = partitions => {\n const { formData } = this.state;\n partitions.forEach(partition => {\n const name = `partition-${partition.partition}`;\n formData[name] = partition.offset || '0';\n });\n this.setState({ formData });\n };\n\n renderResetButton = () => {\n const { timestamp, formData} = this.state;\n const { loading } = this.props.history.location;\n\n return (\n \n\n \n \n\n {this.renderInput(\n name,\n `Partition: ${partition.id}`,\n 'Offset',\n 'number',\n undefined,\n true,\n 'partition-input-div',\n `partition-input ${name}-input`\n )}\n \n
\n \n {\n this.setState({ timestamp: value }, () => this.getTopicOffset());\n }}\n />\n
\n \n
\n \n this.handleSubmit()}\n >\n {this.renderTopicPartition()}\n \n\n {this.renderButton(\n 'Copy',\n this.handleSubmit,\n undefined,\n 'submit',\n this.renderResetButton()\n )}\n \n
\n );\n }\n}\n\nexport default TopicCopy;\n","import ConsumerGroupList from './ConsumerGroupList';\n\nexport default ConsumerGroupList;\n","import React from 'react';\nimport Table from '../../../components/Table';\nimport { uriConsumerGroups, uriConsumerGroupDelete } from '../../../utils/endpoints';\nimport constants from '../../../utils/constants';\nimport {calculateTopicOffsetLag, groupedTopicOffset} from '../../../utils/converters';\nimport Header from '../../Header';\nimport SearchBar from '../../../components/SearchBar';\nimport Pagination from '../../../components/Pagination';\nimport ConfirmModal from '../../../components/Modal/ConfirmModal';\nimport { toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\nimport Root from \"../../../components/Root\";\nimport {Link} from \"react-router-dom\";\nimport {handlePageChange, getPageNumber} from \"./../../../utils/pagination\"\n\nclass ConsumerGroupList extends Root {\n state = {\n consumerGroups: [],\n showDeleteModal: false,\n selectedCluster: '',\n deleteMessage: '',\n groupToDelete: {},\n deleteData: {},\n pageNumber: 1,\n totalPageNumber: 1,\n history: this.props,\n search: '',\n roles: JSON.parse(sessionStorage.getItem('roles')),\n loading: true\n };\n\n componentDidMount() {\n const { clusterId } = this.props.match.params;\n const { search, pageNumber} = this.state;\n const query = new URLSearchParams(this.props.location.search);\n\n this.setState({ selectedCluster: clusterId,\n search: (query.get('search'))? query.get('search') : search,\n pageNumber: (query.get('page'))? parseInt(query.get('page')) : parseInt(pageNumber)\n }, () => {\n this.getConsumerGroup();\n });\n }\n\n handleSearch = data => {\n this.setState({ pageNumber: 1, search: data.searchData.search }, () => {\n this.getConsumerGroup();\n });\n };\n\n handlePageChangeSubmission = value => {\n let pageNumber = getPageNumber(value, this.state.totalPageNumber);\n this.setState({ pageNumber: pageNumber }, () => {\n this.getConsumerGroup();\n });\n };\n\n\n async getConsumerGroup() {\n const { selectedCluster, pageNumber, search } = this.state;\n this.setState({ loading: true });\n\n let response = await this.getApi(uriConsumerGroups(selectedCluster, search, pageNumber));\n response = response.data;\n if (response.results) {\n this.handleConsumerGroup(response.results);\n this.setState({ selectedCluster, totalPageNumber: response.page }, () =>\n this.props.history.push({\n pathname: `/ui/${this.state.selectedCluster}/group`,\n search: `search=${this.state.search}&page=${pageNumber}`\n })\n );\n } else {\n this.setState({ selectedCluster, consumerGroups: [], totalPageNumber: 1, loading: false });\n }\n }\n\n handleConsumerGroup(consumerGroup) {\n let tableConsumerGroup = [];\n consumerGroup.forEach(consumerGroup => {\n tableConsumerGroup.push({\n id: consumerGroup.id,\n state: consumerGroup.state,\n coordinator: consumerGroup.coordinator.id,\n members: consumerGroup.members ? consumerGroup.members.length : 0,\n topics: consumerGroup.offsets ? groupedTopicOffset(consumerGroup.offsets) : {}\n });\n });\n\n this.setState({ consumerGroups: tableConsumerGroup, loading: false });\n }\n\n handleState(state) {\n let className = '';\n\n switch (state) {\n case 'STABLE':\n className = 'badge badge-success';\n break;\n case 'PREPARING_REBALANCE':\n className = 'badge badge-primary';\n break;\n default:\n className = 'badge badge-warning';\n break;\n }\n\n return {state.replace('_', ' ')};\n }\n\n handleCoordinator(coordinator) {\n return {coordinator};\n }\n\n handleTopics(group, groupedTopicOffset) {\n const noPropagation = e => e.stopPropagation();\n return Object.keys(groupedTopicOffset).map(topicId => {\n const topicOffsets = groupedTopicOffset[topicId];\n const offsetLag = calculateTopicOffsetLag(topicOffsets, topicId);\n\n return (\n Lag: {Number(offsetLag).toLocaleString()}
\n \n );\n });\n }\n\n handleOnDelete(group) {\n this.setState({ groupToDelete: group }, () => {\n this.showDeleteModal(\n {group.id}} ?\n \n \n {\n return this.handleState(obj.state);\n }\n },\n {\n id: 'coordinator',\n accessor: 'coordinator',\n colName: 'Coordinator',\n cell: obj => {\n return this.handleCoordinator(obj.coordinator);\n }\n },\n {\n id: 'members',\n accessor: 'members',\n colName: 'Members'\n },\n {\n id: 'topics',\n accessor: 'topics',\n colName: 'Topics',\n cell: obj => {\n if (obj.topics) {\n return this.handleTopics(obj.id, obj.topics);\n }\n }\n }\n ]}\n data={this.state.consumerGroups}\n updateData={data => {\n this.setState({ consumerGroups: data });\n }}\n noContent={'No consumer group available'}\n onDelete={group => {\n this.handleOnDelete(group);\n }}\n onDetails={id => `/ui/${selectedCluster}/group/${encodeURIComponent(id)}`}\n actions={\n roles.group && roles.group['group/delete']\n ? [constants.TABLE_DELETE, constants.TABLE_DETAILS]\n : [constants.TABLE_DETAILS]\n }\n />\n\n
\n );\n }\n}\nexport default ConsumerGroupList;\n","import React from 'react';\nimport Table from '../../../../components/Table';\nimport { uriConsumerGroupOffsets } from '../../../../utils/endpoints';\nimport { Link } from 'react-router-dom';\nimport Root from \"../../../../components/Root\";\n\nclass ConsumerGroupTopics extends Root {\n state = {\n data: [],\n selectedCluster: this.props.clusterId,\n selectedConsumerGroup: this.props.consumerGroupId,\n loading: true\n };\n\n componentDidMount() {\n this.getConsumerGroupTopics();\n }\n\n async getConsumerGroupTopics() {\n let offsets = [];\n const { selectedCluster, selectedConsumerGroup } = this.state;\n\n offsets = await this.getApi(uriConsumerGroupOffsets(selectedCluster, selectedConsumerGroup));\n offsets = offsets.data;\n this.handleData(offsets);\n }\n\n handleData(offsets) {\n let data = offsets.map(offset => {\n return {\n name: offset.topic,\n partition: offset.partition,\n member: offset.member ? offset.member.host : '',\n offset: offset.offset,\n lag: offset.offsetLag\n };\n });\n this.setState({ data, loading: false });\n }\n\n handleOptional(optional) {\n if (optional !== undefined && optional !== '' && optional !== 'NaN') {\n return ;\n } else {\n return ;\n }\n }\n\n render() {\n const { data, loading } = this.state;\n return (\n \n {\n return (\n \n {obj[col.accessor]}\n \n );\n }\n },\n {\n id: 'partition',\n accessor: 'partition',\n colName: 'Partition',\n type: 'text',\n sortable: true\n },\n {\n id: 'member',\n accessor: 'member',\n colName: 'Member',\n type: 'text',\n cell: obj => {\n return this.handleOptional(obj.member.host);\n }\n },\n {\n id: 'offset',\n accessor: 'offset',\n colName: 'Offset',\n type: 'text',\n cell: obj => {\n if (obj.offset !== undefined && obj.offset !== '') {\n return (\n \n {obj.offset}\n \n );\n }\n return ;\n }\n },\n {\n id: 'metadata',\n accessor: 'metadata',\n colName: 'Metadata',\n type: 'text',\n cell: obj => {\n return this.handleOptional(obj.metadata);\n }\n },\n {\n id: 'lag',\n accessor: 'lag',\n colName: 'Lag',\n type: 'text',\n cell: obj => {\n return this.handleOptional(Number(obj.lag).toLocaleString());\n }\n }\n ]}\n data={data}\n updateData={data => {\n this.setState({ data });\n }}\n />\n
\n );\n }\n}\nexport default ConsumerGroupTopics;\n","import React from 'react';\nimport Table from '../../../../components/Table';\nimport { uriConsumerGroupMembers } from '../../../../utils/endpoints';\nimport constants from '../../../../utils/constants';\nimport { Link } from 'react-router-dom';\nimport './styles.scss';\nimport Root from \"../../../../components/Root\";\n\nclass ConsumerGroupMembers extends Root {\n state = {\n data: [],\n selectedCluster: this.props.clusterId,\n selectedConsumerGroup: this.props.consumerGroupId,\n loading: true\n };\n\n componentDidMount() {\n this.getConsumerGroupMembers();\n }\n\n async getConsumerGroupMembers() {\n const { selectedCluster, selectedConsumerGroup } = this.state;\n\n const members = await this.getApi(uriConsumerGroupMembers(selectedCluster, selectedConsumerGroup));\n\n this.handleData(members.data);\n }\n\n handleData(members) {\n const data = members.map(member => {\n return {\n clientId: member.clientId,\n id: member.id,\n host: member.host,\n assignments: member.assignments\n };\n });\n this.setState({ data, loading: false });\n }\n\n handlePartitions(partitions) {\n return partitions.map(partition => {\n return {partition}
;\n });\n }\n\n handleAssignments(assignments) {\n const {history} = this.props;\n let topics = [];\n\n if (assignments) {\n assignments.forEach(assignment => {\n if (!topics.find(topic => topic === assignment.topic)) {\n topics.push(assignment.topic);\n }\n });\n }\n return topics.map(topic => {\n let partitions = [];\n assignments.forEach(assignment => {\n if (assignment.topic === topic) {\n partitions.push(assignment.partition);\n }\n });\n\n return (\n \n {\n return this.handleAssignments(obj.assignments);\n }\n }\n ]}\n data={data}\n updateData={data => {\n this.setState({ data });\n }}\n />\n
\n );\n }\n}\n\nexport default ConsumerGroupMembers;\n","import React from 'react';\nimport Table from '../../../../components/Table';\nimport { uriConsumerGroupAcls } from '../../../../utils/endpoints';\nimport Root from \"../../../../components/Root\";\n\nclass TopicAcls extends Root {\n state = {\n data: [],\n selectedCluster: '',\n loading: true\n };\n\n componentDidMount() {\n this.getAcls();\n }\n\n async getAcls() {\n let acls = [];\n const { clusterId, consumerGroupId } = this.props;\n\n acls = await this.getApi(uriConsumerGroupAcls(clusterId, consumerGroupId));\n this.handleData(acls.data);\n }\n\n handleData(data) {\n let tableAcls = [];\n data.map(principal =>\n principal.acls.forEach((acl, index) => {\n tableAcls.push({\n id: index,\n group: acl.resource.name || '',\n host: acl.host || '',\n permission: acl.operation || ''\n });\n })\n );\n this.setState({ data: tableAcls, loading: false });\n return tableAcls;\n }\n\n render() {\n const { data, loading } = this.state;\n return (\n \n {\n return (\n \n \n {obj[col.accessor].permissionType}\n {' '}\n {obj[col.accessor].operation}\n \n );\n }\n }\n ]}\n data={data}\n updateData={data => {\n this.setState({ data });\n }}\n noContent={\n \n \n \n \n }\n />\n
\n );\n }\n}\n\nexport default TopicAcls;\n","import ConsumerGroup from './ConsumerGroup';\n\nexport default ConsumerGroup;\n","import React, { Component } from 'react';\nimport Header from '../../Header';\nimport ConsumerGroupTopics from './ConsumerGroupTopics/ConsumerGroupTopics';\nimport ConsumerGroupMembers from './ConsumerGroupMembers/ConsumerGroupMembers';\nimport { Link } from 'react-router-dom';\nimport ConsumerGroupAcls from './ConsumerGroupAcls/ConsumerGroupAcls';\nimport {getSelectedTab} from \"../../../utils/functions\";\n\nclass ConsumerGroup extends Component {\n state = {\n clusterId: this.props.match.params.clusterId,\n consumerGroupId: this.props.match.params.consumerGroupId,\n consumerGroup: {},\n selectedTab: 'topics',\n roles: JSON.parse(sessionStorage.getItem('roles'))\n };\n\n tabs = ['topics','members','acls'];\n\n componentDidMount() {\n const { clusterId, consumerGroupId } = this.props.match.params;\n const tabSelected = getSelectedTab(this.props, this.tabs);\n this.setState(\n {\n selectedTab: (tabSelected)? tabSelected : 'topics'\n },\n () => {\n this.props.history.replace(`/ui/${clusterId}/group/${consumerGroupId}/${this.state.selectedTab}`);\n }\n );\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (this.props.location.pathname !== prevProps.location.pathname) {\n const tabSelected = getSelectedTab(this.props, this.tabs);\n this.setState({ selectedTab: tabSelected });\n }\n }\n\n tabClassName = tab => {\n const { selectedTab } = this.state;\n return selectedTab === tab ? 'nav-link active' : 'nav-link';\n };\n\n renderSelectedTab() {\n const { selectedTab } = this.state;\n const { history } = this.props;\n const { clusterId, consumerGroupId } = this.props.match.params;\n switch (selectedTab) {\n case 'topics':\n return (\n \n No ACLS found, or the \"authorizer.class.name\" parameter is not configured on the\n cluster.\n
\n \n
\n );\n }\n}\n\nexport default ConsumerGroup;\n","import SchemaVersions from './SchemaVersions';\n\nexport default SchemaVersions;\n","import React from 'react';\nimport Table from '../../../../components/Table';\nimport constants from '../../../../utils/constants';\nimport ConfirmModal from '../../../../components/Modal/ConfirmModal';\nimport { uriDeleteSchemaVersion } from '../../../../utils/endpoints';\nimport AceEditor from 'react-ace';\nimport { toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\nimport 'ace-builds/webpack-resolver';\nimport 'ace-builds/src-noconflict/mode-json';\nimport 'ace-builds/src-noconflict/theme-merbivore_soft';\nimport Root from \"../../../../components/Root\";\n\nclass SchemaVersions extends Root {\n state = {\n data: [],\n selectedCluster: this.props.clusterId,\n selectedSchema: this.props.schemaName,\n schemaVersions: this.props.schemas,\n deleteMessage: '',\n schemaToDelete: {},\n deleteData: { clusterId: '', subject: '', versionId: 1 },\n roles: JSON.parse(sessionStorage.getItem('roles')),\n loading: true\n };\n\n componentDidMount() {\n this.handleData(this.state.schemaVersions);\n }\n\n handleData(schemas) {\n\n if (schemas) {\n let data = schemas.map(schema => {\n return {\n id: schema.id,\n version: schema.version,\n schemaType: schema.schemaType,\n schema: \"PROTOBUF\" === schema.schemaType ? schema.schema : JSON.stringify(JSON.parse(schema.schema), null, 2)\n };\n });\n this.setState({ data, loading: false });\n } else {\n this.setState({ data: [], loading: false });\n }\n }\n\n handleOnDelete(schema) {\n this.setState({ schemaToDelete: schema }, () => {\n this.showDeleteModal(\n \n
\n\n {roles.group && (roles.group['group/offsets/delete'] || roles.group['group/offsets/update']) && (\n \n )}\n - \n
- \n \n Topics\n \n \n
- \n \n Members\n \n \n {roles.acls && roles.acls['acls/read'] && (\n
- \n \n ACLS\n \n \n )}\n
\n
\n \n {this.renderSelectedTab()}\n
\n \n {schema.id} from {this.state.selectedSchema}\n \n }{' '}\n ?\n \n {\n return {obj[col.accessor] || ''};\n }\n },\n {\n id: 'schema',\n name: 'schema',\n accessor: 'schema',\n colName: 'Schema',\n type: 'text',\n extraRow: true,\n extraRowContent: (obj, col, index) => {\n return (\n \n \n {header}\n \n \n {obj.headers[header]}\n \n \n );\n });\n }}\n />\n
\n );\n }\n}\nexport default SchemaVersions;\n","import SchemaUpdate from './SchemaUpdate';\n\nexport default SchemaUpdate;\n","import React from 'react';\nimport Form from '../../../../components/Form/Form';\nimport Joi from 'joi-browser';\nimport { uriLatestSchemaVersion, uriUpdateSchema } from '../../../../utils/endpoints';\nimport { toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\n\nclass SchemaUpdate extends Form {\n state = {\n clusterId: '',\n schemaId: '',\n compatibilityOptions: [\n {\n _id: 'NONE',\n name: 'NONE'\n },\n {\n _id: 'BACKWARD',\n name: 'BACKWARD'\n },\n {\n _id: 'BACKWARD_TRANSITIVE',\n name: 'BACKWARD_TRANSITIVE'\n },\n {\n _id: 'FORWARD',\n name: 'FORWARD'\n },\n {\n _id: 'FORWARD_TRANSITIVE',\n name: 'FORWARD_TRANSITIVE'\n },\n {\n _id: 'FULL',\n name: 'FULL'\n },\n {\n _id: 'FULL_TRANSITIVE',\n name: 'FULL_TRANSITIVE'\n }\n ],\n formData: {\n subject: '',\n compatibility: '',\n schema: '',\n schemaType: ''\n },\n errors: {},\n roles: JSON.parse(sessionStorage.getItem('roles'))\n };\n\n schema = {\n subject: Joi.string()\n .required()\n .label('Subject'),\n compatibility: Joi.string()\n .required()\n .label('Compatibility Level'),\n schema: Joi.string()\n .required()\n .label('Latest Schema'),\n schemaType: Joi.string()\n .label('Schema Type'),\n references: Joi.any()\n .label('Refecences')\n };\n\n componentDidMount() {\n const { clusterId } = this.props.match.params;\n const { schemaId } = this.props || this.props.match.params;\n this.setState({ clusterId, schemaId }, () => this.getLatestSchemaVersion(clusterId, schemaId));\n }\n\n async getLatestSchemaVersion() {\n const { clusterId, schemaId } = this.state;\n let data = await this.getApi(uriLatestSchemaVersion(clusterId, schemaId));\n\n data = data.data;\n if (data) {\n this.handleLatestSchemaVersion(data);\n }\n }\n\n handleLatestSchemaVersion = latestSchemaVersion => {\n const { formData } = { ...this.state };\n\n formData.subject = latestSchemaVersion.subject;\n formData.compatibility = latestSchemaVersion.compatibilityLevel;\n formData.schemaType = latestSchemaVersion.schemaType;\n formData.schema = \"PROTOBUF\" === formData.schemaType?latestSchemaVersion.schema :JSON.stringify(JSON.parse(latestSchemaVersion.schema), null, 2);\n formData.references = latestSchemaVersion.references;\n\n this.setState(formData);\n };\n\n doSubmit() {\n const { clusterId, formData } = this.state;\n const body = {\n clusterId,\n subject: formData.subject,\n compatibilityLevel: formData.compatibility,\n schema: formData.schema,\n schemaType: formData.schemaType,\n references: formData.references\n };\n\n this.postApi(uriUpdateSchema(clusterId, formData.subject), body)\n .then(() => {\n toast.success(`Schema '${formData.subject}' is updated`);\n this.props.getSchemaVersions();\n window.location.reload(false);\n });\n }\n\n render() {\n const { compatibilityOptions, roles } = this.state;\n\n return (\n \n \n {obj[\"schemaType\"] === \"PROTOBUF\" ? obj[col.accessor] : JSON.stringify(JSON.parse(obj[col.accessor]))}\n \n \n );\n }\n }\n ]}\n data={this.state.data}\n updateData={data => {\n this.setState({ data });\n }}\n onDelete={schema => {\n this.handleOnDelete(schema);\n }}\n actions={\n roles.registry && roles.registry['registry/version/delete']\n ? [constants.TABLE_DELETE]\n : []\n }\n extraRow\n noStripes\n onExpand={obj => {\n return Object.keys(obj.headers).map(header => {\n return (\n \n
\n );\n }\n}\n\nexport default Schema;\n","import React from 'react';\nimport Table from '../../../components/Table';\nimport endpoints, { uriDeleteSchema } from '../../../utils/endpoints';\nimport constants from '../../../utils/constants';\nimport { Link } from 'react-router-dom';\nimport Header from '../../Header';\nimport SearchBar from '../../../components/SearchBar';\nimport Pagination from '../../../components/Pagination';\nimport ConfirmModal from '../../../components/Modal/ConfirmModal';\nimport './styles.scss';\nimport AceEditor from 'react-ace';\nimport 'ace-builds/webpack-resolver';\nimport 'ace-builds/src-noconflict/mode-json';\nimport 'ace-builds/src-noconflict/mode-protobuf';\nimport 'ace-builds/src-noconflict/theme-merbivore_soft';\nimport { toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\nimport Root from \"../../../components/Root\";\nimport {handlePageChange, getPageNumber} from \"./../../../utils/pagination\"\n\n\nclass SchemaList extends Root {\n state = {\n schemasRegistry: [],\n showDeleteModal: false,\n selectedCluster: '',\n deleteMessage: '',\n schemaToDelete: {},\n deleteData: {},\n pageNumber: 1,\n totalPageNumber: 1,\n history: this.props,\n searchData: {\n search: ''\n },\n createSubjectFormData: {\n subject: '',\n compatibilityLevel: '',\n schema: ''\n },\n roles: JSON.parse(sessionStorage.getItem('roles')),\n loading: true\n };\n\n componentDidMount() {\n let { clusterId } = this.props.match.params;\n const { searchData, pageNumber } = this.state;\n const query = new URLSearchParams(this.props.location.search);\n\n this.setState({\n selectedCluster: clusterId,\n searchData: { search: (query.get('search'))? query.get('search') : searchData.search },\n pageNumber: (query.get('page'))? parseInt(query.get('page')) : parseInt(pageNumber)\n }, () => {\n this.getSchemaRegistry();\n });\n }\n\n handleSearch = data => {\n const { searchData } = data;\n this.setState({ pageNumber: 1, searchData }, () => {\n this.getSchemaRegistry();\n });\n };\n\n handlePageChangeSubmission = value => {\n let pageNumber = parseInt(getPageNumber(value, this.state.totalPageNumber));\n this.setState({pageNumber: pageNumber}, () => {\n this.getSchemaRegistry();\n })\n }\n\n async getSchemaRegistry() {\n\n const { selectedCluster, pageNumber } = this.state;\n const { search } = this.state.searchData;\n\n this.setState({ loading: true });\n\n let response = await this.getApi(\n endpoints.uriSchemaRegistry(selectedCluster, search, pageNumber)\n );\n\n let data = response.data;\n if (data.results) {\n this.handleSchemaRegistry(data.results);\n this.setState({ selectedCluster, totalPageNumber: data.page }, () => {\n this.props.history.push({\n pathname: `/ui/${this.state.selectedCluster}/schema`,\n search: `search=${this.state.searchData.search}&page=${pageNumber}`\n })\n });\n } else {\n this.setState({ selectedCluster, schemasRegistry: [], totalPageNumber: 0, loading: false });\n }\n\n }\n\n handleSchemaRegistry(schemas) {\n let tableSchemaRegistry = [];\n schemas.forEach(schema => {\n schema.size = 0;\n schema.logDirSize = 0;\n\n tableSchemaRegistry.push({\n id: schema.id,\n subject: schema.subject,\n version: schema.version,\n exception: schema.exception,\n schemaType: schema.schemaType,\n schema: schema.schemaType === \"PROTOBUF\" ? schema.schema : (schema.schema ? JSON.stringify(JSON.parse(schema.schema), null, 2) : null)\n });\n });\n this.setState({ schemasRegistry: tableSchemaRegistry, loading: false });\n }\n\n handleVersion(version) {\n return {version};\n }\n\n handleOnDelete(schema) {\n this.setState({ schemaToDelete: schema }, () => {\n this.showDeleteModal(`Delete SchemaRegistry ${schema.subject}?`);\n });\n }\n\n showDeleteModal = deleteMessage => {\n this.setState({ showDeleteModal: true, deleteMessage });\n };\n\n closeDeleteModal = () => {\n this.setState({ showDeleteModal: false, deleteMessage: '' });\n };\n\n deleteSchemaRegistry = () => {\n const { selectedCluster, schemaToDelete } = this.state;\n const deleteData = {\n clusterId: selectedCluster,\n subject: schemaToDelete.subject\n };\n\n this.removeApi(uriDeleteSchema(selectedCluster, schemaToDelete.subject), deleteData)\n .then(() => {\n toast.success(`Schema '${schemaToDelete.subject}' is deleted`);\n this.setState({ showDeleteModal: false, schemaToDelete: {} });\n this.getSchemaRegistry();\n })\n .catch(() => {\n this.setState({ showDeleteModal: false, schemaToDelete: {} });\n });\n };\n render() {\n const {\n selectedCluster,\n searchData,\n pageNumber,\n totalPageNumber,\n loading\n } = this.state;\n const roles = this.state.roles || {};\n const { history } = this.props;\n const { clusterId } = this.props.match.params;\n\n return (\n \n
\n - \n {roles.registry['registry/update'] && (\n
- \n \n Update\n \n )}\n
- \n \n Versions {totalVersions}\n \n \n
\n
\n \n {this.renderSelectedTab()}\n
\n \n \n {\n return this.handleVersion(obj.version);\n }\n },\n {\n id: 'schema',\n name: 'schema',\n accessor: 'schema',\n colName: 'Schema',\n type: 'text',\n extraRow: true,\n extraRowContent: (obj, col, index) => {\n return (\n
\n );\n }\n}\n\nexport default SchemaList;\n","import React from 'react';\nimport Header from '../../Header';\nimport Joi from 'joi-browser';\nimport Form from '../../../components/Form/Form';\nimport {uriSchemaCreate} from '../../../utils/endpoints';\nimport {toast} from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\n\nclass SchemaCreate extends Form {\n state = {\n formData: {\n subject: '',\n compatibilityLevel: 'BACKWARD',\n schemaData: '',\n schemaType: 'AVRO'\n },\n compatibilityLevelSelect: [\n { _id: 'NONE', name: 'NONE' },\n { _id: 'BACKWARD', name: 'BACKWARD' },\n { _id: 'BACKWARD_TRANSITIVE', name: 'BACKWARD_TRANSITIVE' },\n { _id: 'FORWARD', name: 'FORWARD' },\n { _id: 'FORWARD_TRANSITIVE', name: 'FORWARD_TRANSITIVE' },\n { _id: 'FULL', name: 'FULL' },\n { _id: 'FULL_TRANSITIVE', name: 'FULL_TRANSITIVE' }\n ],\n schemaTypeSelect: [\n { _id: 'AVRO', name: 'AVRO' },\n { _id: 'JSON', name: 'JSON' },\n { _id: 'PROTOBUF', name: 'PROTOBUF' }\n ],\n errors: {}\n };\n\n schema = {\n subject: Joi.string()\n .required()\n .label('subject'),\n compatibilityLevel: Joi.string()\n .label('Compatibility')\n .required(),\n schemaType: Joi.string()\n .label('SchemaType')\n .required(),\n schemaData: Joi.string()\n .label('SchemaData')\n .required()\n };\n\n onCleanupChange = value => {\n let { formData } = { ...this.state };\n formData.compatibilityLevel = value;\n\n this.setState({ formData });\n };\n\n async doSubmit() {\n const { formData } = this.state;\n const { clusterId } = this.props.match.params;\n\n const schemaType = formData.schemaType;\n let schemaData;\n let references;\n\n if (formData.schemaType === 'PROTOBUF') {\n schemaData = formData.schemaData;\n } else {\n const parsedSchemaData = JSON.parse(formData.schemaData);\n schemaData = parsedSchemaData.schema ? JSON.stringify(parsedSchemaData.schema) : formData.schemaData\n references = parsedSchemaData.references || [];\n }\n\n const schema = {\n cluster: clusterId,\n subject: formData.subject,\n schema: schemaData,\n schemaType: schemaType,\n references: references,\n compatibilityLevel: formData.compatibilityLevel\n };\n\n this.postApi(uriSchemaCreate(clusterId), schema)\n .then(() => {\n this.props.history.push({\n pathname: `/ui/${clusterId}/schema`,\n });\n toast.success(`Schema '${formData.subject}' is created`);\n });\n }\n\n render() {\n const { compatibilityLevelSelect, schemaTypeSelect, formData } = this.state;\n return (\n \n \n { obj.schemaType === \"PROTOBUF\"? obj[col.accessor] : JSON.stringify(JSON.parse(obj[col.accessor]))}\n \n \n );\n } else if (obj.exception) {\n return (\n \n {obj.exception}\n
\n );\n }\n }\n }\n ]}\n data={this.state.schemasRegistry}\n updateData={data => {\n this.setState({ schemasRegistry: data });\n }}\n onDelete={schema => {\n this.handleOnDelete(schema);\n }}\n idCol=\"subject\"\n onDetails={subject => {\n return `/ui/${selectedCluster}/schema/details/${subject}`;\n }}\n actions={\n roles.registry && roles.registry['registry/delete']\n ? [constants.TABLE_DELETE, constants.TABLE_DETAILS]\n : [constants.TABLE_DETAILS]\n }\n extraRow\n noStripes\n handleExtraExpand={(extraExpanded, el) => {\n const currentExpandedRows = extraExpanded;\n const isRowCurrentlyExpanded = currentExpandedRows.includes(el.subject);\n\n const newExpandedRows = isRowCurrentlyExpanded\n ? currentExpandedRows\n : currentExpandedRows.concat({ id: el.id, subject: el.subject });\n return newExpandedRows;\n }}\n handleExtraCollapse={(extraExpanded, el) => {\n const currentExpandedRows = extraExpanded;\n const isRowCurrentlyExpanded = currentExpandedRows.some(\n obj => obj.subject === el.subject\n );\n\n const newExpandedRows = !isRowCurrentlyExpanded\n ? currentExpandedRows\n : currentExpandedRows.filter(\n obj => !(obj.id === el.id && obj.subject === el.subject)\n );\n return newExpandedRows;\n }}\n noContent={'No schemas available'}\n />\n {roles.registry && roles.registry['registry/insert'] && (\n \n )}\n\n \n this.doSubmit()}\n >\n
\n );\n }\n}\n\nexport default SchemaCreate;\n","import ConsumerGroupUpdate from './ConsumerGroupUpdate';\n\nexport default ConsumerGroupUpdate;\n","import React from 'react';\nimport Header from '../../../Header/Header';\nimport Form from '../../../../components/Form/Form';\nimport Dropdown from 'react-bootstrap/Dropdown';\nimport DatePicker from '../../../../components/DatePicker';\nimport {formatDateTime, groupedTopicOffset} from '../../../../utils/converters';\nimport Joi from 'joi-browser';\nimport {\n uriConsumerGroup,\n uriConsumerGroupOffsetsByTimestamp,\n uriConsumerGroupUpdate\n} from '../../../../utils/endpoints';\nimport moment from 'moment';\nimport './styles.scss';\nimport { toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\n\nclass ConsumerGroupUpdate extends Form {\n state = {\n clusterId: '',\n consumerGroupId: '',\n timestamp: '',\n topicOffset: this.props.topicOffset || {},\n firstOffsets: {},\n lastOffsets: {},\n formData: {},\n checked: {},\n errors: {}\n };\n\n schema = {};\n\n componentDidMount() {\n const { clusterId, consumerGroupId } = this.props.match.params;\n\n this.setState({ clusterId, consumerGroupId }, () => {\n this.getTopicOffset();\n });\n }\n\n async getTopicOffset() {\n const { clusterId, consumerGroupId, topicOffset, timestamp} = this.state;\n const momentValue = moment(timestamp);\n\n const date =\n timestamp.toString().length > 0\n ? formatDateTime(\n {\n year: momentValue.year(),\n monthValue: momentValue.month(),\n dayOfMonth: momentValue.date(),\n hour: momentValue.hour(),\n minute: momentValue.minute(),\n second: momentValue.second(),\n milli: momentValue.millisecond()\n },\n 'YYYY-MM-DDTHH:mm:ss.SSS'\n ) + 'Z'\n : '';\n\n let data = {};\n if (JSON.stringify(topicOffset) === JSON.stringify({})) {\n data = await this.getApi(uriConsumerGroup(clusterId, consumerGroupId));\n data = data.data;\n const topicOffset = groupedTopicOffset(data.offsets);\n\n if (data) {\n this.setState({ topicOffset: topicOffset}, () =>\n this.createValidationSchema(topicOffset)\n );\n } else {\n this.setState({ topicOffset: {} });\n }\n } else if (date !== '') {\n data = await this.getApi(uriConsumerGroupOffsetsByTimestamp(clusterId, consumerGroupId, date));\n data = data.data;\n this.handleOffsetsByTimestamp(data);\n } else {\n this.createValidationSchema(topicOffset);\n }\n }\n\n createValidationSchema = topicOffset => {\n let { formData, checked} = this.state;\n let firstOffsets = {};\n let lastOffsets = {};\n let name = '';\n\n Object.keys(topicOffset).forEach(topidId => {\n checked[topidId] = false;\n topicOffset[topidId].forEach(offset => {\n name = `${topidId}-${offset.partition}`;\n this.schema[name] = Joi.number()\n .min(offset.firstOffset || 0)\n .max(offset.lastOffset || 0)\n .required()\n .label(`Partition ${offset.partition} offset`);\n formData[name] = offset.offset || 0;\n firstOffsets[name] = offset.firstOffset || 0;\n lastOffsets[name] = offset.lastOffset || 0;\n });\n });\n\n this.setState({ formData, firstOffsets, lastOffsets, checked});\n };\n\n handleOffsetsByTimestamp = offsets => {\n let { formData } = this.state;\n let topic = '';\n let partition = '';\n offsets.forEach(offset => {\n topic = offset.topic;\n partition = offset.partition;\n formData[`${topic}-${partition}`] = offset.offset;\n });\n };\n\n resetToFirstOffsets = () => {\n const { firstOffsets } = this.state;\n let { formData } = this.state;\n\n Object.keys(formData).forEach(name => {\n formData[name] = firstOffsets[name];\n });\n\n this.setState({ formData });\n };\n\n unCheckAll = (value) => {\n const {checked} = this.state;\n\n Object.keys(checked).forEach(name => {\n checked[name] = value;\n });\n\n this.setState({ checked});\n }\n\n resetToLastOffsets = () => {\n const { lastOffsets } = this.state;\n let { formData } = this.state;\n\n Object.keys(formData).forEach(name => {\n formData[name] = lastOffsets[name];\n });\n\n this.setState({ formData });\n };\n\n createSubmitBody = (formData, checked) => {\n let body = [];\n let splitName = [];\n let topic = '';\n let partition = '';\n\n Object.keys(formData).forEach(name => {\n splitName = name.split('-');\n partition = splitName.pop();\n topic = splitName.join('-');\n\n if (checked[topic] === true) {\n body.push({\n topic,\n partition,\n offset: formData[name]\n });\n }\n });\n\n return body;\n };\n\n async doSubmit() {\n const { clusterId, consumerGroupId, formData, checked } = this.state;\n\n if (Object.values(checked).filter(value => value === true).length > 0) {\n await this.postApi(\n uriConsumerGroupUpdate(clusterId, consumerGroupId),\n this.createSubmitBody(formData, checked)\n );\n\n this.setState({ state: this.state });\n toast.success(`Offsets for '${consumerGroupId}' updated successfully.`);\n } else {\n toast.error('Unable to perform operation, no topics checked.');\n }\n }\n\n rendertopicOffset = () => {\n const { topicOffset, checked } = this.state;\n const renderedItems = [];\n\n Object.keys(topicOffset).forEach(topicId => {\n renderedItems.push(\n \n );\n });\n\n return renderedItems;\n };\n\n checkedtopicOffset = (event) => {\n const { checked } = this.state;\n checked[event.target.value] = event.target.checked;\n\n this.setState({ checked: checked });\n }\n\n renderPartitionInputs = (offsets, topicId, disabled) => {\n const renderedInputs = [];\n\n offsets.forEach(offset => {\n const name = `${topicId}-${offset.partition}`;\n\n renderedInputs.push(\n \n
\n );\n });\n\n return renderedInputs;\n };\n\n renderResetButton = () => {\n const { timestamp } = this.state;\n const { loading } = this.props.history.location;\n\n return (\n \n \n \n {this.renderInput(\n name,\n `Partition: ${offset.partition}`,\n 'Offset',\n 'number',\n undefined,\n true,\n 'partition-input-div',\n `partition-input ${name}-input`,\n { disabled: disabled }\n )}\n \n
\n \n {\n this.setState({ timestamp: value }, () => this.getTopicOffset());\n }}\n />\n
\n \n this.handleSubmit()}\n >\n {this.rendertopicOffset()}\n {this.renderButton(\n 'Update',\n this.handleSubmit,\n undefined,\n 'submit',\n this.renderResetButton()\n )}\n \n
\n );\n }\n}\n\nexport default ConsumerGroupUpdate;\n","import ConsumerGroupOffsetDelete from './ConsumerGroupOffsetDelete';\n\nexport default ConsumerGroupOffsetDelete;\n","import React from 'react';\nimport Header from '../../../Header/Header';\nimport {\n uriConsumerGroup, uriDeleteGroupOffsets,\n} from '../../../../utils/endpoints';\nimport 'react-toastify/dist/ReactToastify.css';\nimport Root from \"../../../../components/Root\";\nimport Table from \"../../../../components/Table\";\nimport constants from \"../../../../utils/constants\";\nimport ConfirmModal from \"../../../../components/Modal/ConfirmModal\";\nimport {toast} from \"react-toastify\";\n\nclass ConsumerGroupOffsetDelete extends Root {\n state = {\n clusterId: '',\n consumerGroupId: '',\n topicIds: [],\n deleteAllOffsetsForTopic: '',\n showDeleteModal: false,\n deleteMessage: '',\n };\n\n componentDidMount() {\n const {clusterId, consumerGroupId} = this.props.match.params;\n\n this.setState({clusterId, consumerGroupId}, () => {\n this.getTopics();\n });\n }\n\n async getTopics() {\n const { clusterId, consumerGroupId } = this.state;\n\n let data;\n data = await this.getApi(uriConsumerGroup(clusterId, consumerGroupId));\n data = data.data;\n\n if (data && data.topics) {\n this.setState({ topicIds: data.topics.map(topic => ({ topic })) });\n } else {\n this.setState({ topicIds: [] });\n }\n }\n\n showDeleteModal = deleteMessage => {\n this.setState({ showDeleteModal: true, deleteMessage });\n };\n\n closeDeleteModal = () => {\n this.setState({ showDeleteModal: false, deleteMessage: '', deleteAllOffsetsForTopic: '' });\n };\n\n deleteOffsets = () => {\n const { clusterId, consumerGroupId, deleteAllOffsetsForTopic } = this.state;\n this.removeApi(uriDeleteGroupOffsets(clusterId, consumerGroupId, deleteAllOffsetsForTopic))\n .then(() => {\n toast.success(`Offsets for topic '${deleteAllOffsetsForTopic}' and consumer group '${consumerGroupId}' are deleted`);\n this.setState({ showDeleteModal: false, deleteMessage: '', deleteAllOffsetsForTopic: '' }, () => {\n this.getTopics();\n });\n })\n .catch(() => {\n this.setState({ showDeleteModal: false, deleteMessage: '', deleteAllOffsetsForTopic: '' });\n });\n }\n\n handleOnDelete(topicId) {\n this.setState({ deleteAllOffsetsForTopic: topicId }, () => {\n this.showDeleteModal(\n {topicId}} ?\n \n
\n );\n }\n}\n\nexport default ConsumerGroupOffsetDelete;\n","import React from 'react';\nimport Table from '../../../../components/Table/Table';\nimport { uriAclsByPrincipal } from '../../../../utils/endpoints';\nimport Root from \"../../../../components/Root\";\n\nclass AclGroups extends Root {\n state = {\n selectedCluster: this.props.clusterId,\n principalEncoded: this.props.principalEncoded,\n tableData: [],\n loading: true\n };\n\n componentDidMount() {\n this.getAcls();\n }\n\n async getAcls() {\n const { selectedCluster, principalEncoded } = this.state;\n\n const response = await this.getApi(uriAclsByPrincipal(selectedCluster, principalEncoded, 'GROUP'));\n if (response.data.acls) {\n const acls = response.data || [];\n this.handleAcls(acls);\n } else {\n this.setState({ tableData: [], loading: false });\n }\n }\n\n handleAcls = data => {\n const tableData = data.acls.map(acl => {\n return {\n group: acl.resource.name,\n patterntype: acl.resource.patternType,\n host: acl.host,\n permission: acl.operation\n };\n });\n\n this.setState({ tableData, loading: false });\n };\n\n handlePermission = permission => {\n return (\n \n \n
\n \n \n \n \n \n }\n onDelete={(row) => {\n this.handleOnDelete(row.topic)\n }}\n actions={\n [constants.TABLE_DELETE]\n }\n />\n
\n \n No offsets found.\n
\n {this.handlePermission(obj.permission)}
;\n }\n }\n }\n ]}\n data={this.state.tableData}\n updateData={data => {\n this.setState({ tableData: data });\n }}\n noContent={\n 'No ACLS found, or the \"authorizer.class.name\" parameter is not configured on the cluster.'\n }\n />\n );\n }\n}\n\nexport default AclGroups;\n","import React from 'react';\nimport Table from '../../../../components/Table/Table';\nimport { uriAclsByPrincipal } from '../../../../utils/endpoints';\nimport Root from \"../../../../components/Root\";\n\nclass AclTopics extends Root {\n state = {\n selectedCluster: this.props.clusterId,\n principalEncoded: this.props.principalEncoded,\n tableData: [],\n loading: true\n };\n\n componentDidMount() {\n this.getAcls();\n }\n\n async getAcls() {\n const { selectedCluster, principalEncoded } = this.state;\n\n const response = await this.getApi(uriAclsByPrincipal(selectedCluster, principalEncoded, 'TOPIC'));\n if (response.data.acls) {\n const acls = response.data || [];\n this.handleAcls(acls);\n } else {\n this.setState({ tableData: [], loading: false });\n }\n }\n\n handleAcls = data => {\n const tableData = data.acls.map(acl => {\n return {\n topic: acl.resource.name,\n patterntype: acl.resource.patternType,\n host: acl.host,\n permission: acl.operation\n };\n });\n\n this.setState({ tableData, loading: false });\n };\n\n handlePermission = permission => {\n return (\n {this.handlePermission(obj.permission)}
;\n }\n }\n }\n ]}\n data={this.state.tableData}\n updateData={data => {\n this.setState({ tableData: data });\n }}\n noContent={\n 'No ACLS found, or the \"authorizer.class.name\" parameter is not configured on the cluster.'\n }\n />\n );\n }\n}\n\nexport default AclTopics;\n","import React from 'react';\nimport Table from '../../../../components/Table/Table';\nimport { uriAclsByPrincipal } from '../../../../utils/endpoints';\nimport Root from \"../../../../components/Root\";\n\nclass AclClusters extends Root {\n state = {\n selectedCluster: this.props.clusterId,\n principalEncoded: this.props.principalEncoded,\n tableData: [],\n loading: true\n };\n\n componentDidMount() {\n this.getAcls();\n }\n\n async getAcls() {\n const { selectedCluster, principalEncoded } = this.state;\n\n const response = await this.getApi(uriAclsByPrincipal(selectedCluster, principalEncoded, 'CLUSTER'));\n if (response.data.acls) {\n const acls = response.data || [];\n this.handleAcls(acls);\n } else {\n this.setState({ tableData: [], loading: false });\n }\n }\n\n handleAcls = data => {\n const tableData = data.acls.map(acl => {\n return {\n cluster: acl.resource.name,\n patterntype: acl.resource.patternType,\n host: acl.host,\n permission: acl.operation\n };\n });\n\n this.setState({ tableData, loading: false });\n };\n\n handlePermission = permission => {\n return (\n {this.handlePermission(obj.permission)}
;\n }\n }\n }\n ]}\n data={this.state.tableData}\n updateData={data => {\n this.setState({ tableData: data });\n }}\n noContent={\n 'No ACLS found, or the \"authorizer.class.name\" parameter is not configured on the cluster.'\n }\n />\n );\n }\n}\n\nexport default AclClusters;\n","import React from 'react';\nimport Table from '../../../../components/Table/Table';\nimport { uriAclsByPrincipal } from '../../../../utils/endpoints';\nimport Root from \"../../../../components/Root\";\n\nclass AclTransactionalIds extends Root {\n state = {\n selectedCluster: this.props.clusterId,\n principalEncoded: this.props.principalEncoded,\n tableData: [],\n loading: true\n };\n\n componentDidMount() {\n this.getAcls();\n }\n\n async getAcls() {\n const { selectedCluster, principalEncoded } = this.state;\n\n const response = await this.getApi(uriAclsByPrincipal(selectedCluster, principalEncoded, 'TRANSACTIONAL_ID'));\n if (response.data.acls) {\n const acls = response.data || [];\n this.handleAcls(acls);\n } else {\n this.setState({ tableData: [], loading: false });\n }\n }\n\n handleAcls = data => {\n const tableData = data.acls.map(acl => {\n return {\n transactionalId: acl.resource.name,\n patterntype: acl.resource.patternType,\n host: acl.host,\n permission: acl.operation\n };\n });\n\n this.setState({ tableData, loading: false });\n };\n\n handlePermission = permission => {\n return (\n {this.handlePermission(obj.permission)}
;\n }\n }\n }\n ]}\n data={this.state.tableData}\n updateData={data => {\n this.setState({ tableData: data });\n }}\n noContent={\n 'No ACLS found, or the \"authorizer.class.name\" parameter is not configured on the cluster.'\n }\n />\n );\n }\n}\n\nexport default AclTransactionalIds;\n","import AclDetails from './AclDetails';\n\nexport default AclDetails;\n","import React, { Component } from 'react';\nimport Header from '../../Header';\nimport AclGroups from './AclGroups/AclGroups';\nimport AclTopics from './AclTopics/AclTopics';\nimport AclClusters from './AclClusters/AclClusters';\nimport AclTransactionalIds from './AclTransactionalIds/AclTransactionalIds';\nimport {getSelectedTab} from \"../../../utils/functions\";\nimport { Link } from 'react-router-dom';\n\nclass AclDetails extends Component {\n state = {\n clusterId: this.props.match.params.clusterId,\n principalEncoded: this.props.match.params.principalEncoded,\n selectedTab: 'topics'\n };\n\n tabs = ['topics', 'groups', 'clusters', 'transactionalids'];\n\n componentDidMount() {\n const { clusterId, principalEncoded } = this.props.match.params;\n const tabSelected = getSelectedTab(this.props, this.tabs);\n this.setState(\n {\n selectedTab: (tabSelected)? tabSelected : 'topics'\n },\n () => {\n this.props.history.replace(`/ui/${clusterId}/acls/${principalEncoded}/${this.state.selectedTab}`);\n }\n );\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (this.props.location.pathname !== prevProps.location.pathname) {\n const tabSelected = getSelectedTab(this.props, this.tabs);\n this.setState({ selectedTab: tabSelected });\n }\n }\n\n tabClassName = tab => {\n const { selectedTab } = this.state;\n return selectedTab === tab ? 'nav-link active' : 'nav-link';\n };\n\n renderSelectedTab() {\n const { selectedTab, clusterId, principalEncoded } = this.state;\n const { history } = this.props;\n\n switch (selectedTab) {\n case 'groups':\n return (\n \n
\n );\n }\n}\n\nexport default AclDetails;\n","import Login from './Login';\n\nexport default Login;\n","import React from 'react';\n\nimport logo from '../../images/logo.svg';\nimport { uriCurrentUser, uriLogin, uriOidc } from '../../utils/endpoints';\nimport { organizeRoles } from '../../utils/converters';\nimport { login } from '../../utils/api';\nimport Form from '../../components/Form/Form';\nimport Joi from 'joi-browser';\nimport { toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\n// Adaptation of login.ftl\n\nclass Login extends Form {\n state = {\n formData: {\n username: '',\n password: ''\n },\n errors: {},\n config: {\n formEnabled: true,\n oidcAuths: []\n }\n };\n\n schema = {\n username: Joi.string()\n .required()\n .label('Username'),\n password: Joi.string()\n .required()\n .label('Password')\n };\n\n login() {\n const { formData } = this.state;\n\n try {\n const body = {\n username: formData.username,\n password: formData.password\n };\n\n login(uriLogin(), body)\n .then(() => {\n this.getData();\n });\n } catch (err) {\n toast.error('Wrong Username or Password!');\n }\n }\n\n async getData() {\n const res = await this.getApi(uriCurrentUser());\n const currentUserData = res.data;\n\n if (currentUserData.logged) {\n sessionStorage.setItem('login', true);\n sessionStorage.setItem('user', currentUserData.username);\n sessionStorage.setItem('roles', organizeRoles(currentUserData.roles));\n\n const returnTo = sessionStorage.getItem('returnTo');\n sessionStorage.removeItem('returnTo');\n\n this.props.history.push({\n pathname: (returnTo || '/ui'),\n });\n\n window.location.reload(true);\n } else {\n toast.error('Wrong Username or Password!');\n }\n }\n\n componentDidMount() {\n const auths = JSON.parse(sessionStorage.getItem('auths'));\n if (auths && auths.loginEnabled) {\n const { loginEnabled, ...config } = auths;\n this.setState({ config });\n } else {\n this.props.history.push({\n pathname: '/ui',\n });\n }\n }\n\n _renderForm() {\n const { errors } = this.state;\n return (\n <>\n \n
\n - \n
- \n \n Topics\n \n \n
- \n \n Groups\n \n \n
- \n \n Clusters\n \n \n
- \n \n Transactional Ids\n \n \n
\n
\n \n {this.renderSelectedTab()}\n
\n \n
\n\n \n \n \n \n
\n \n {errors.username}\n
\n )}\n \n
\n\n \n \n \n \n
\n \n {errors.password}\n
\n )}\n \n
\n \n );\n }\n\n _renderSeparator() {\n return (\n \n or\n
\n );\n }\n\n _renderOidc(oidcsAuths) {\n return oidcsAuths.map(auth => (\n {auth.label}\n ));\n }\n\n render() {\n const { formEnabled, oidcAuths } = this.state.config;\n\n return (\n \n \n {\n e.preventDefault();\n this.login();\n }}\n >\n \n
\n );\n }\n}\n\nexport default Login;\n","import React from 'react';\nimport Joi from 'joi-browser';\nimport Form from '../../components/Form/Form';\nimport Header from '../Header';\nimport {SETTINGS_VALUES} from '../../utils/constants';\nimport {setUIOptions} from '../../utils/localstorage';\nimport './styles.scss';\nimport {toast} from 'react-toastify';\nimport {getClusterUIOptions} from '../../utils/functions';\n\nclass Settings extends Form {\n state = {\n clusterId: '',\n formData: {\n topicDefaultView: '',\n topicDataSort: '',\n topicDataDateTimeFormat: '',\n skipConsumerGroups: false,\n skipLastRecord: false,\n showAllConsumerGroups: true\n },\n errors: {}\n };\n\n topicDefaultView = Object.entries(SETTINGS_VALUES.TOPIC.TOPIC_DEFAULT_VIEW)\n .map(([value]) => ({_id: value, name: value}));\n topicDataSort = Object.entries(SETTINGS_VALUES.TOPIC_DATA.SORT)\n .map(([value]) => ({_id: value, name: value}));\n topicDataDateTimeFormat = Object.entries(SETTINGS_VALUES.TOPIC_DATA.DATE_TIME_FORMAT)\n .map(([value]) => ({_id: value, name: value}));\n\n schema = {\n topicDefaultView: Joi.string().optional(),\n topicDataSort: Joi.string().optional(),\n topicDataDateTimeFormat: Joi.string().required(),\n skipConsumerGroups: Joi.boolean().optional(),\n skipLastRecord: Joi.boolean().optional(),\n showAllConsumerGroups: Joi.boolean().optional()\n };\n\n componentDidMount() {\n const { clusterId } = this.props.match.params;\n this.setState( {clusterId}, () => {\n this._initializeVars(() => {\n this.setState({\n formData: {\n topicDefaultView: (this.state.uiOptions && this.state.uiOptions.topic) ?\n this.state.uiOptions.topic.defaultView : '',\n topicDataSort: (this.state.uiOptions && this.state.uiOptions.topicData) ?\n this.state.uiOptions.topicData.sort : '',\n topicDataDateTimeFormat: (this.state.uiOptions && this.state.uiOptions.topicData) ?\n this.state.uiOptions.topicData.dateTimeFormat : '',\n skipConsumerGroups: (this.state.uiOptions && this.state.uiOptions.topic) ?\n this.state.uiOptions.topic.skipConsumerGroups : false,\n skipLastRecord: (this.state.uiOptions && this.state.uiOptions.topic) ?\n this.state.uiOptions.topic.skipLastRecord : false,\n showAllConsumerGroups: (this.state.uiOptions && this.state.uiOptions.topic) ?\n this.state.uiOptions.topic.showAllConsumerGroups : false\n }\n })\n })\n });\n }\n\n checkedSkipConsumerGroups = (event) => {\n const { formData } = this.state;\n formData.skipConsumerGroups = event.target.checked;\n this.setState({formData});\n }\n\nasync _initializeVars(callBackFunction) {\n const uiOptions = await getClusterUIOptions(this.state.clusterId)\n this.setState({\n uiOptions: uiOptions ?? {},\n }, callBackFunction);\n}\n\n doSubmit() {\n const { clusterId, formData } = this.state;\n setUIOptions(clusterId,\n {\n topic: {\n defaultView: formData.topicDefaultView,\n skipConsumerGroups: formData.skipConsumerGroups,\n skipLastRecord: formData.skipLastRecord,\n showAllConsumerGroups: formData.showAllConsumerGroups\n },\n topicData: {\n sort: formData.topicDataSort,\n dateTimeFormat: formData.topicDataDateTimeFormat\n }\n });\n toast.success(`Settings for cluster '${clusterId}' updated successfully.`);\n }\n\n render() {\n return (\n \n this.doSubmit()}\n >\n
\n );\n }\n}\n\nexport default Settings;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter, Switch, Route, Redirect } from 'react-router-dom';\nimport TopicList from '../containers/Topic/TopicList';\nimport Topic from '../containers/Topic/Topic';\nimport NodesList from '../containers/Node/NodeList/NodesList';\nimport NodeDetails from '../containers/Node/NodeDetail';\nimport Base from '../components/Base/Base.jsx';\nimport Tail from '../containers/Tail';\nimport Acls from '../containers/Acl/AclList';\nimport ConnectList from '../containers/Connect/ConnectList/ConnectList';\nimport ConnectCreate from '../containers/Connect/ConnectCreate/ConnectCreate';\nimport Connect from '../containers/Connect/ConnectDetail/Connect';\nimport TopicCreate from '../containers/Topic/TopicCreate/TopicCreate';\nimport TopicProduce from '../containers/Topic/TopicProduce';\nimport TopicCopy from '../containers/Topic/TopicCopy';\nimport Loading from '../containers/Loading';\nimport ConsumerGroupList from '../containers/ConsumerGroup/ConsumerGroupList';\nimport ConsumerGroup from '../containers/ConsumerGroup/ConsumerGroupDetail';\nimport Schema from '../containers/Schema/SchemaDetail/Schema';\nimport SchemaList from '../containers/Schema/SchemaList/SchemaList';\nimport SchemaCreate from '../containers/Schema/SchemaCreate/SchemaCreate';\nimport ConsumerGroupUpdate from '../containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupUpdate';\nimport ConsumerGroupOffsetDelete from '../containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupOffsetDelete';\nimport AclDetails from '../containers/Acl/AclDetail';\nimport Login from '../containers/Login';\nimport Settings from '../containers/Settings/Settings';\nimport { organizeRoles } from './converters';\nimport {uriAuths, uriClusters, uriCurrentUser} from './endpoints';\nimport Root from '../components/Root';\n\nclass Routes extends Root {\n state = {\n clusters: [],\n clusterId: '',\n user: '',\n loading: true\n };\n static propTypes = {\n location: PropTypes.object,\n history: PropTypes.object,\n clusterId: PropTypes.string,\n clusters: PropTypes.array\n };\n\n async getClusters() {\n const { clusterId } = this.state;\n try {\n const resClusters = await this.getApi(uriClusters());\n this.setState(\n {\n clusters: resClusters.data,\n clusterId: resClusters.data ? resClusters.data[0].id : '',\n loading: false\n }\n );\n\n } catch(err) {\n if (err.status === 401) {\n if (!clusterId || clusterId.length <= 0) {\n this.setState({ clusterId: '401' });\n }\n }\n console.error('Error:', err);\n }\n }\n\n _initUserAndAuth() {\n const requests = [this.getApi(uriCurrentUser()), this.getApi(uriAuths())];\n Promise.all(requests)\n .then(data => {\n this._setAuths(data[1]);\n this._setCurrentUser(data[0].data);\n })\n .catch(err => {\n console.error('Error:', err);\n });\n }\n\n _setAuths(response) {\n if (response.status === 200) {\n sessionStorage.setItem('auths', JSON.stringify(response.data));\n sessionStorage.setItem('version', response.data.version);\n }\n }\n\n _setCurrentUser(currentUserData) {\n sessionStorage.setItem('user', '');\n if (currentUserData.logged) {\n sessionStorage.setItem('login', true);\n sessionStorage.setItem('user', currentUserData.username);\n sessionStorage.setItem('roles', organizeRoles(currentUserData.roles));\n this.setState({ user: currentUserData.username });\n } else {\n sessionStorage.setItem('login', false);\n if (currentUserData.roles) {\n sessionStorage.setItem('user', 'default');\n sessionStorage.setItem('roles', organizeRoles(currentUserData.roles));\n this.setState({ user: 'default' });\n } else {\n sessionStorage.setItem('user', '');\n sessionStorage.setItem('roles', JSON.stringify({}));\n this.setState({ user: 'not_logged' });\n }\n }\n this.setState({ loading: false });\n }\n\n handleRedirect() {\n let clusterId = this.state.clusterId;\n const roles = JSON.parse(sessionStorage.getItem('roles'));\n if (roles && roles.topic && roles.topic['topic/read']) return `/ui/${clusterId}/topic`;\n else if (roles && roles.node && roles.node['node/read']) return `/ui/${clusterId}/node`;\n else if (roles && roles.group && roles.group['group/read']) return `/ui/${clusterId}/group`;\n else if (roles && roles.acls && roles.acls['acls/read']) return `/ui/${clusterId}/acls`;\n else if (roles && roles.registry && roles.registry['registry/read'])\n return `/ui/${clusterId}/schema`;\n else if (roles && Object.keys(roles).length > 0) return `/ui/${clusterId}/topic`;\n else return '/ui/login';\n }\n\n render() {\n const { location } = this.props;\n const clusters = this.state.clusters || [];\n const roles = JSON.parse(sessionStorage.getItem('roles')) || {};\n let clusterId = this.state.clusterId;\n\n if (this.state.user.length <= 0) {\n this._initUserAndAuth();\n return <>;\n }\n\n if (\n (clusterId.length <= 0 || clusterId === '401') &&\n (sessionStorage.getItem('login') === 'true' || this.state.user === 'default')\n ) {\n this.getClusters();\n return <>;\n }\n\n if (!clusters.find(el => el.id === this.state.clusterId) && clusterId !== '401') {\n clusterId = clusters[0] || '';\n }\n\n if (!this.state.loading) {\n if (clusterId) {\n return (\n - \n
- \n \n «\n Previous\n\n \n \n
- \n \n {totalRecords !== undefined ? '≈ ' + totalRecords :\n \n
- \n \n »\n Next\n\n \n \n