...}
44 | forceSelected={currentPageOffset}
45 | pageNum={totalPageCount}
46 | marginPagesDisplayed={1}
47 | pageRangeDisplayed={3}
48 | clickCallback={this.handlePageChange}
49 | containerClassName={"pagination"}
50 | subContainerClassName={"pages pagination"}
51 | activeClassName={paginatorStyle.activeLabel} />
52 |
53 | )
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/kafkalot-ui/src/components/Common/Paginator/style.css:
--------------------------------------------------------------------------------
1 | .activeLabel {
2 | font-weight: 400;
3 | }
4 |
--------------------------------------------------------------------------------
/kafkalot-ui/src/components/Common/Selector/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, } from 'react'
2 | import SelectField from 'material-ui/SelectField'
3 | import MenuItem from 'material-ui/MenuItem'
4 |
5 | export default class Selector extends React.Component {
6 |
7 | static propTypes = {
8 | handler: PropTypes.func.isRequired,
9 | strategies: PropTypes.array.isRequired,
10 | currentStrategy: PropTypes.string.isRequired,
11 | style: PropTypes.object,
12 | labelStyle: PropTypes.object,
13 | floatingLabel: PropTypes.string,
14 | floatingLabelStyle: PropTypes.object,
15 | }
16 |
17 | constructor(props) {
18 | super(props)
19 |
20 | this.handleSorterChange = this.handleSorterChange.bind(this)
21 | }
22 |
23 | handleSorterChange(event, selectedIndex) {
24 | const { handler, strategies, } = this.props
25 |
26 | if (handler) handler(strategies[selectedIndex])
27 | }
28 |
29 | render() {
30 | const {
31 | style, strategies, currentStrategy,
32 | labelStyle, floatingLabel, floatingLabelStyle,
33 | } = this.props
34 |
35 | const strategyElems = strategies.reduce((acc, s) => {
36 | acc.push()
37 | return acc
38 | }, [])
39 |
40 | return (
41 |
47 | {strategyElems}
48 |
49 | )
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/kafkalot-ui/src/components/ConnectorPage/ConnectorConfigEditor.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, } from 'react'
2 |
3 | import 'jsoneditor/dist/jsoneditor.min.css'
4 | import JSONEditor from 'jsoneditor/dist/jsoneditor.min.js'
5 |
6 | import Chip from 'material-ui/Chip'
7 | import FlatButton from 'material-ui/FlatButton'
8 | import Dialog from 'material-ui/Dialog'
9 |
10 | import { ConnectorEditor as EditorTheme, } from '../../constants/Theme'
11 | import { JsonEditorMode, } from '../../constants/EditorMode'
12 | import { ConnectorProperty, } from '../../reducers/ConnectorReducer/ConnectorListState'
13 | import { Payload as ConfigSchemaPayload, } from '../../reducers/ConnectorReducer/ConfigSchemaState'
14 |
15 | const dialogStyle = {
16 | editorContainer: { paddingTop: 20, },
17 | editor: { height: 450, },
18 | button : { marginRight: 15, marginBottom: 15, },
19 | buttonLabel : { fontWeight: 300, },
20 | validateButtonLabel: { fontWeight: 300, color: EditorTheme.validationButton, },
21 | disabledValidateButtonLabel: { fontWeight: 300, color: EditorTheme.disabledValidationButton, },
22 | title: { float: 'left', fontWeight: 300, fontSize: 20, },
23 | titleChipLabel: { fontWeight: 300, fontSize: 13, },
24 | titleChip: { float: 'left', marginLeft: 10, },
25 | }
26 |
27 | const ELEM_ID_EDITOR_DIALOG = 'config-editor'
28 |
29 | export function getDefaultEditorMode (readonly) {
30 | return (readonly) ? JsonEditorMode.CODE: JsonEditorMode.CODE
31 | }
32 |
33 | export function getAvailableEditorModes (readonly) {
34 | return (readonly) ? [JsonEditorMode.VIEW, JsonEditorMode.CODE, ] :
35 | [JsonEditorMode.TREE, JsonEditorMode.CODE,]
36 | }
37 |
38 | export function isEditorJSONChanged(initial, updated) {
39 | return !(JSON.stringify(initial) === JSON.stringify(updated))
40 | }
41 |
42 | export default class ConnectorConfigEditor extends React.Component {
43 | static propTypes = {
44 | close: PropTypes.func.isRequired,
45 | update: PropTypes.func.isRequired,
46 | validateConnectorConfig: PropTypes.func.isRequired,
47 |
48 | name: PropTypes.string.isRequired,
49 | config: PropTypes.object.isRequired,
50 | configSchema: PropTypes.object, /** optional */
51 | errorMessages: PropTypes.array.isRequired,
52 | readonly: PropTypes.bool.isRequired,
53 | }
54 |
55 | constructor(props) {
56 | super(props)
57 |
58 | /**
59 | * to avoid re-drawing the whole page whenever JSON is updated,
60 | * EditorDialog manages editor as it's state
61 | */
62 | this.state = { editor: null, isJSONChanged: false, }
63 |
64 | this.handleValidateConfig = this.handleValidateConfig.bind(this)
65 | this.handleClose = this.handleClose.bind(this)
66 | this.handleUpdate = this.handleUpdate.bind(this)
67 | this.handleEditorError = this.handleEditorError.bind(this)
68 | this.handleEditorContentChange = this.handleEditorContentChange.bind(this)
69 | }
70 |
71 | /** component life-cycle */
72 | componentDidMount() {
73 | const { config, configSchema, readonly, } = this.props
74 | const initialJSON = config
75 |
76 | const defaultMode = getDefaultEditorMode(readonly)
77 | const availableModes = getAvailableEditorModes(readonly)
78 |
79 | const onChangeHandler = this.handleEditorContentChange
80 | const onErrorHandler = this.handleEditorError
81 |
82 | const options = {
83 | search: false, // TODO: fix search width
84 | mode: defaultMode,
85 | schema: configSchema,
86 | modes: availableModes,
87 | onChange: onChangeHandler,
88 | onError: onErrorHandler,
89 | }
90 |
91 | /** external library which does not be managed by React */
92 | const editor = new JSONEditor(document.getElementById(ELEM_ID_EDITOR_DIALOG), options, initialJSON)
93 |
94 | if (defaultMode !== JsonEditorMode.CODE) editor.expandAll()
95 |
96 | this.setState({ editor, }) // eslint-disable-line react/no-did-mount-set-state,react/no-set-state
97 | }
98 |
99 | /** component life-cycle */
100 | componentWillReceiveProps(nextProps) {
101 | const { config: currentJSON, } = this.props
102 | const { config: nextJSON, configSchema, } = nextProps
103 | const { editor, } = this.state
104 |
105 | /** if JSON is not changed, then disable `UPDATE` button */
106 | this.setState({ isJSONChanged: isEditorJSONChanged(currentJSON, nextJSON), }) // eslint-disable-line react/no-set-state
107 | if (editor) editor.setSchema(configSchema)
108 | }
109 |
110 | getEditorJSONValue() {
111 | const { editor, } = this.state
112 | return editor.get()
113 | }
114 |
115 | handleEditorContentChange() {
116 | const { config: prevJSON, } = this.props
117 |
118 | const updatedJSON = this.getEditorJSONValue()
119 | this.setState({ isJSONChanged: isEditorJSONChanged(prevJSON, updatedJSON), }) // eslint-disable-line react/no-set-state
120 | }
121 |
122 | handleEditorError(err) {
123 | /*eslint no-console: ["error", { allow: ["warn", "error"] }] */
124 | console.error(`JSONEditor: ${err}`) /** TODO 500 page */
125 | }
126 |
127 | handleValidateConfig() {
128 | const { validateConnectorConfig, } = this.props
129 | const { editor, } = this.state
130 |
131 | const connectorConfig = editor.get()
132 |
133 | const connectorClass = connectorConfig['connector.class']
134 |
135 | validateConnectorConfig({
136 | [ConfigSchemaPayload.CONNECTOR_CLASS]: connectorClass,
137 | [ConfigSchemaPayload.CONNECTOR_CONFIG]: connectorConfig,
138 | })
139 | }
140 |
141 | handleUpdate() {
142 | const { update, name, } = this.props
143 | const { isJSONChanged, } = this.state
144 |
145 | if (isJSONChanged) {
146 | update({
147 | [ConnectorProperty.NAME]: name,
148 | [ConnectorProperty.CONFIG]: this.getEditorJSONValue(),
149 | })
150 | }
151 | }
152 |
153 | handleClose() {
154 | const { close, } = this.props
155 | close()
156 | }
157 |
158 | createDialogTitle() {
159 | const { name, configSchema, errorMessages, } = this.props
160 |
161 | const emptySchema = configSchema === void 0
162 | const noError = errorMessages.length === 0
163 |
164 | const schemaChipLabel = (emptySchema) ? 'INVALID CLASS' : 'SCHEMA VALIDATION'
165 | const schemaChipLabelColor = (emptySchema) ?
166 | EditorTheme.titleNoSchemaChipLabelColor : EditorTheme.titleSchemaChipLabelColor
167 | const schemaChipBgColor = (emptySchema) ?
168 | EditorTheme.titleNoSchemaChipBgColor : EditorTheme.titleSchemaChipBgColor
169 |
170 | const errorChipLabel = (noError) ? 'NO ERROR' : `ERROR (${errorMessages.length})`
171 | const errorChipLabelColor = (noError) ?
172 | EditorTheme.titleNoErrorChipLabelColor : EditorTheme.titleErrorChipLabelColor
173 | const errorChipBgColor = (noError) ?
174 | EditorTheme.titleNoErrorChipBgColor : EditorTheme.titleErrorChipBgColor
175 |
176 | const errorChip = (emptySchema) ? null : (
177 |
181 | {errorChipLabel}
182 |
183 | )
184 |
185 | return (
186 |
187 |
{name}
188 |
192 | {schemaChipLabel}
193 |
194 | {errorChip}
195 |
196 |
238 |
Create New Connector
239 |
243 | {schemaChipLabel}
244 |
245 | {errorChip}
246 |
247 |
108 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
122 |
123 |
126 |
127 |
130 |
131 |
132 |
133 |
157 |
160 |
161 |
167 | {itemCountPerPageMenuItems}
168 |
169 |
170 |
177 |
178 |
179 |
192 |
{Page.ConnectorPageTitle}
193 | {selectorDOM}
194 | {commandButtonsDOM}
195 |
118 |
119 |
120 |
121 |
122 |
123 |
124 | )
125 | }
126 | }
--------------------------------------------------------------------------------
/kafkalot-ui/src/components/ConnectorPage/ConnectorList/ListItemColumn.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, } from 'react'
2 |
3 | export class ListItemLastColumn extends React.Component {
4 | render() {
5 | return ()
6 | }
7 | }
8 |
9 | export class ListItemColumn extends React.Component {
10 | static propTypes = {
11 | style: PropTypes.object,
12 | children: PropTypes.node,
13 | }
14 |
15 | static defaultStyle = {
16 | display: 'inline-block',
17 | verticalAlign: 'middle',
18 | fontWeight: 300,
19 | fontSize: 15,
20 | }
21 |
22 | render() {
23 | const { style, children, } = this.props
24 | const mergedStyle = (style) ?
25 | Object.assign({}, ListItemColumn.defaultStyle, style) : ListItemColumn.defaultStyle
26 |
27 | return (
28 | {children}
29 | )
30 | }
31 | }
--------------------------------------------------------------------------------
/kafkalot-ui/src/components/ConnectorPage/ConnectorList/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, } from 'react'
2 |
3 | import Checkbox from 'material-ui/Checkbox'
4 | import Divider from 'material-ui/Divider'
5 | import Paper from 'material-ui/Paper'
6 | import { List, ListItem, } from 'material-ui/List'
7 |
8 | import { ListItemColumn, } from './ListItemColumn'
9 | import { ConnectorListItem, } from './ConnectorListItem'
10 | import { ConnectorListProperty, } from '../../../reducers/ConnectorReducer/ConnectorListState'
11 | import { Property as PaginatorProperty, } from '../../../reducers/ConnectorReducer/PaginatorState'
12 |
13 | import * as style from './style'
14 |
15 | export default class ConnectorList extends React.Component {
16 | static propTypes = {
17 | connectors: PropTypes.array.isRequired,
18 | itemOffset: PropTypes.number.isRequired,
19 | itemCountPerPage: PropTypes.number.isRequired,
20 |
21 | actions: PropTypes.object.isRequired,
22 | tableHeaderChecked: PropTypes.bool.isRequired,
23 | toggleCurrentPageCheckboxes: PropTypes.func.isRequired,
24 | }
25 |
26 | constructor(props) {
27 | super(props)
28 |
29 | this.handleHeaderCheckboxClick = this.handleHeaderCheckboxClick.bind(this)
30 | }
31 |
32 | handleHeaderCheckboxClick() {
33 | const {
34 | toggleCurrentPageCheckboxes, tableHeaderChecked,
35 | itemCountPerPage, itemOffset,
36 | } = this.props
37 |
38 | toggleCurrentPageCheckboxes({
39 | [ConnectorListProperty.TABLE_HEADER_CHECKED]: !tableHeaderChecked, /** invert */
40 | [PaginatorProperty.ITEM_OFFSET]: itemOffset,
41 | [PaginatorProperty.ITEM_COUNT_PER_PAGE]: itemCountPerPage,
42 | })
43 | }
44 |
45 | createTableHeader() {
46 | const { tableHeaderChecked, } = this.props
47 |
48 | return(
49 |
50 |
51 |
52 |
54 |
55 |
56 | STATUS
57 | TASKS
58 | NAME
59 | UPTIME
60 |
61 |
62 | )
63 | }
64 |
65 | createTableBody() {
66 | const { connectors, actions, } = this.props
67 |
68 | const items = []
69 |
70 | for (let i = 0; i < connectors.length; i++) {
71 | const connector = connectors[i]
72 | const item = (
73 | )
81 |
82 | items.push(item)
83 |
84 | if (i < connectors.length - 1)
85 | items.push()
86 | }
87 |
88 | return(
89 |
90 | {items}
91 |
92 | )
93 | }
94 |
95 | render() {
96 | return (
97 |
98 | {this.createTableHeader()}
99 |
100 | {this.createTableBody()}
101 |
102 | )
103 | }
104 | }
105 |
106 |
107 |
108 |
--------------------------------------------------------------------------------
/kafkalot-ui/src/components/ConnectorPage/ConnectorList/style.js:
--------------------------------------------------------------------------------
1 | import * as Theme from '../../../constants/Theme'
2 |
3 | export const list = { marginTop: 20, }
4 | export const TableContainer = { marginTop: 30, marginBottom: 50, }
5 | export const HeaderContainer = { background: Theme.ConnectorList.Header, }
6 | export const BodyContainer = { paddingTop: 0, paddingBottom: 0, }
7 |
8 | const HeaderFontWeight = 400
9 |
10 | export const ItemHeaderColumn = {
11 | container: { padding: '10px 10px 10px 10px', },
12 | checkbox: { marginLeft: 15, },
13 | stateIcon: { width: 50, },
14 | stateText: { marginLeft: 15, width: 120, fontWeight: HeaderFontWeight, },
15 | taskText: { width: 120, fontWeight: HeaderFontWeight, },
16 | name: { width: 280, fontWeight: HeaderFontWeight, },
17 | uptime: { width: 150, fontWeight: HeaderFontWeight, },
18 | }
19 |
20 | const CommandButtonMarginLeft = 10
21 |
22 | export const ItemBodyColumn = {
23 | container: { padding: '3px 13px 3px 13px', },
24 | checkbox: { marginLeft: 15, },
25 | stateIcon: { width: ItemHeaderColumn.stateIcon.width, textAlign: 'center', },
26 | stateText: { marginLeft: ItemHeaderColumn.stateText.marginLeft, width: ItemHeaderColumn.stateText.width, },
27 | taskText: { width: ItemHeaderColumn.taskText.width, },
28 | name: { width: ItemHeaderColumn.name.width, },
29 | uptime: { width: ItemHeaderColumn.uptime.width, },
30 | commandButtons: { marginTop: 8, marginRight: 35, float: 'right', },
31 | commandButtonLabel: { fontWeight: 300, },
32 | commandButton: { marginLeft: CommandButtonMarginLeft, },
33 | }
34 |
35 | export const TaskColumn = {
36 | container: { marginLeft: 55, padding: '2px 10px 2px 10px', },
37 | taskId: { width: 50, },
38 | stateIcon: { width: 50, textAlign: 'center', },
39 | stateText: { marginLeft: 20, width: 120, },
40 | workerId: { marginLeft: 30, width: 150, },
41 | commandButtons: { marginTop: 8, marginRight: 35, float: 'right', },
42 | traceButton: {
43 | marginLeft: CommandButtonMarginLeft,
44 | color: Theme.ConnectorTaskItem.TraceButton,
45 | },
46 | }
47 |
48 | export const TaskTracePopover = {
49 | contentContainer: { padding: 30, },
50 | }
51 |
52 |
--------------------------------------------------------------------------------
/kafkalot-ui/src/components/ConnectorPage/RemoveDialog.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, } from 'react'
2 |
3 | import FlatButton from 'material-ui/FlatButton'
4 | import Dialog from 'material-ui/Dialog'
5 | import {List, ListItem, } from 'material-ui/List'
6 |
7 | import { Property as RemoveDialogProperty, } from '../../reducers/ConnectorReducer/RemoveDialogState'
8 |
9 | const dialogStyle = {
10 | title: { fontWeight: 300, fontSize: 18, padding: '50px 0px 0px 20px', },
11 | list: { marginTop: 30, marginBottom: 30, },
12 | button: { marginRight: 15, marginBottom: 15, },
13 | buttonLabel: { fontWeight: 300, },
14 | }
15 |
16 | export default class RemoveDialog extends React.Component {
17 | static propTypes = {
18 | connectorNames: PropTypes.array.isRequired,
19 | closeRemoveDialog: PropTypes.func.isRequired,
20 | removeConnector: PropTypes.func.isRequired,
21 | }
22 |
23 | constructor(props) {
24 | super(props)
25 |
26 | this.handleRemove = this.handleRemove.bind(this)
27 | }
28 |
29 | handleRemove() {
30 | const { connectorNames, removeConnector, } = this.props
31 |
32 | removeConnector({
33 | [RemoveDialogProperty.CONNECTOR_NAMES]: connectorNames,
34 | })
35 | }
36 |
37 | createTitle() {
38 | const { connectorNames, } = this.props
39 |
40 | const connectorCountToBeRemoved = connectorNames.length
41 | const postfix = (connectorCountToBeRemoved < 2) ? '' : 's'
42 | const titleText = `Remove ${connectorCountToBeRemoved} connector${postfix}`
43 |
44 | return (
45 | {titleText}
46 | )
47 | }
48 |
49 | createConnectorList() {
50 | const { connectorNames, } = this.props
51 |
52 | const items = []
53 | for (let i = 0; i < connectorNames.length; i ++) {
54 | items.push()
55 | }
56 |
57 | return ( {items}
)
58 | }
59 |
60 | render() {
61 | const { closeRemoveDialog, } = this.props
62 |
63 | const buttons = [
64 | ,
68 | ,
72 | ]
73 |
74 | return (
75 |
83 | )
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/kafkalot-ui/src/constants/Config.js:
--------------------------------------------------------------------------------
1 | /** injected by webpack, see also `tools/config.js` */
2 |
3 | export const ENV_DEV = process.env.ENV_DEV || ''
4 | export const ENV_PROD = process.env.ENV_PROD || ''
5 | export const NODE_ENV = process.env.NODE_ENV || ''
6 |
7 | const envStorages = process.env.STORAGES
8 | export const STORAGES = (envStorages === void 0) ? [] : envStorages
9 | export const TITLE = process.env.TITLE || ''
10 |
11 |
--------------------------------------------------------------------------------
/kafkalot-ui/src/constants/ConnectorCommand.js:
--------------------------------------------------------------------------------
1 | export const ConnectorCommand = {
2 | START: 'START',
3 | STOP: 'STOP',
4 | RESTART: 'RESTART',
5 | PAUSE: 'PAUSE',
6 | RESUME: 'RESUME',
7 | }
8 |
--------------------------------------------------------------------------------
/kafkalot-ui/src/constants/ConnectorState.js:
--------------------------------------------------------------------------------
1 | export const ConnectorState = {
2 | RUNNING: 'RUNNING',
3 | UNASSIGNED: 'UNASSIGNED',
4 | PAUSED: 'PAUSED',
5 | FAILED: 'FAILED',
6 | REGISTERED: 'REGISTERED',
7 | DISABLED: 'DISABLED',
8 | }
9 |
--------------------------------------------------------------------------------
/kafkalot-ui/src/constants/EditorMode.js:
--------------------------------------------------------------------------------
1 | export const JsonEditorMode = {
2 | TREE: 'tree', VIEW: 'view', CODE: 'code',
3 | }
4 |
--------------------------------------------------------------------------------
/kafkalot-ui/src/constants/Error.js:
--------------------------------------------------------------------------------
1 | export const Code = {
2 | DUPLICATE_NAME: 'DUPLICATE_NAME',
3 | EMPTY_NAME: 'EMPTY_NAME',
4 | EMPTY_CONFIG: 'EMPTY_CONFIG',
5 | CANNOT_CHANGE_NAME: 'CANNOT_CHANGE_NAME',
6 | FOUND_DUPLICATED_CONNECTORS: 'FOUND_DUPLICATED_CONNECTORS',
7 | NO_SUCH_CONNECTOR: 'NO_SUCH_CONNECTOR',
8 | CANNOT_UPDATE_NON_REGISTERED_CONNECTOR: 'CANNOT_UPDATE_NON_REGISTERED_CONNECTOR',
9 |
10 | CANNOT_OPEN_REMOVE_DIALOG: 'CANNOT_OPEN_REMOVE_DIALOG',
11 | CONNECTOR_COMMAND_FAILED: 'CONNECTOR_COMMAND_FAILED',
12 | CANNOT_REMOVE_CONNECTOR: 'CANNOT_REMOVE_CONNECTOR',
13 | NO_SELECTED_CONNECTORS: 'NO_SELECTED_CONNECTORS',
14 |
15 | INVALID_TASKS: 'INVALID_TASKS',
16 |
17 | CANNOT_FETCH_ALL_CONNECTORS: 'CANNOT_FETCH_ALL_CONNECTORS',
18 | CANNOT_REMOVE_ALL_SELECTED_CONNECTORS: 'CANNOT_REMOVE_ALL_SELECTED_CONNECTORS',
19 | CANNOT_CONVERT_CONNECT_CONFIG_TYPE: 'CANNOT_CONVERT_CONNECT_CONFIG_TYPE',
20 | CANNOT_CONVERT_CONNECT_VALIDATION_RESULT: 'CANNOT_CONVERT_CONNECT_VALIDATION_RESULT',
21 | CANNOT_FIND_CONNECTOR_PLUGINS: 'CANNOT_FIND_CONNECTOR_PLUGINS',
22 | CONNECTOR_CONFIG_HAS_NO_CONNECTOR_CLASS_FIELD: 'CONNECTOR_CONFIG_HAS_NO_CONNECTOR_CLASS_FIELD',
23 | }
24 |
--------------------------------------------------------------------------------
/kafkalot-ui/src/constants/Page.js:
--------------------------------------------------------------------------------
1 |
2 | export const MainPageRouting = 'kafkalot'
3 | export const ConnectorPageRouting = 'connectors'
4 | export const ConnectorPageTitle = 'Connectors'
5 |
--------------------------------------------------------------------------------
/kafkalot-ui/src/constants/Sorter.js:
--------------------------------------------------------------------------------
1 | import { ConnectorState, } from './ConnectorState'
2 |
3 | export const SorterType = {
4 | CHECKED: 'CHECKED',
5 | UNCHECKED: 'UNCHECKED',
6 | }
7 |
8 | export const AvailableSorters = [
9 | ConnectorState.RUNNING,
10 | ConnectorState.UNASSIGNED,
11 | ConnectorState.PAUSED,
12 | ConnectorState.FAILED,
13 | ConnectorState.REGISTERED,
14 | ConnectorState.DISABLED,
15 | SorterType.CHECKED,
16 | SorterType.UNCHECKED,
17 | ]
18 |
--------------------------------------------------------------------------------
/kafkalot-ui/src/constants/State.js:
--------------------------------------------------------------------------------
1 | export const ROOT = {
2 | CONNECTOR: 'connector',
3 | ROUTING: 'routing',
4 | }
5 |
6 | export const CONNECTOR = {
7 | CONNECTOR_LIST: 'connectorList',
8 | PAGINATOR: 'paginator',
9 | FILTER: 'filterKeyword',
10 | CONFIRM_DIALOG: 'confirmDialog',
11 | SORTER: 'sorter',
12 | STORAGE_SELECTOR: 'storageSelector',
13 |
14 | CONFIG_SCHEMA: 'configSchema',
15 | CONFIG_EDITOR: 'configEditor',
16 | CREATE_EDITOR: 'createEditor',
17 | REMOVE_DIALOG: 'removeDialog',
18 | SNACKBAR: 'snackbar',
19 | }
20 |
--------------------------------------------------------------------------------
/kafkalot-ui/src/constants/Theme.js:
--------------------------------------------------------------------------------
1 | export const ThemeDefaultColor = '#546e7a'
2 | export const White = '#f5f5f5'
3 |
4 | export const NavBarColors = {
5 | backgroundColor: ThemeDefaultColor,
6 | textColor: White,
7 | iconMenuColor: White,
8 | }
9 |
10 | export const ClosableSnackbar = {
11 | backgroundColor: ThemeDefaultColor,
12 | }
13 |
14 | export const ConnectorList = {
15 | Header: White,
16 | }
17 |
18 | export const ConnectorTaskItem = {
19 | TraceButton: '#607d8b',
20 | }
21 |
22 | export const ConnectorStateColor = {
23 | Running: '#00bcd4',
24 | Failed: '#e53935',
25 | Paused: '#ffc107',
26 | Unassigned: '#ce93d8',
27 | Registered: '#4db6ac',
28 | Disabled: '#b0bec5',
29 | }
30 |
31 | export const ConnectorEditor = {
32 | validationButton: ThemeDefaultColor,
33 | disabledValidationButton: 'rgba(0, 0, 0, 0.298039)',
34 | titleSchemaChipBgColor: '#039be5', /** light-blue darken-1 */
35 | titleSchemaChipLabelColor: White,
36 | titleNoSchemaChipBgColor: '#f4511e', /** deep-orange darken-1 */
37 | titleNoSchemaChipLabelColor: White,
38 | titleErrorChipBgColor: '#e53935', /** #e53935 red darken-1 */
39 | titleErrorChipLabelColor: White,
40 | titleNoErrorChipBgColor: '#546e7a', /** blue-grey darken-1 */
41 | titleNoErrorChipLabelColor: White,
42 | }
43 |
44 |
--------------------------------------------------------------------------------
/kafkalot-ui/src/containers/ConnectorPage/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, } from 'react'
2 | import { Link, } from 'react-router'
3 | import { connect, } from 'react-redux'
4 | import { bindActionCreators, } from 'redux'
5 |
6 | import ConnectorList from '../../components/ConnectorPage/ConnectorList'
7 | import ConnectorHeader from '../../components/ConnectorPage/ConnectorHeader'
8 | import Paginator from '../../components/Common/Paginator'
9 | import RemoveDialog from '../../components/ConnectorPage/RemoveDialog'
10 | import { Property as PaginatorProperty, } from '../../reducers/ConnectorReducer/PaginatorState'
11 | import Snackbar from '../../components/Common/ClosableSnackbar'
12 |
13 | import { ConnectorProperty, ConnectorListProperty, } from '../../reducers/ConnectorReducer/ConnectorListState'
14 |
15 | import ConfigEditor from '../../components/ConnectorPage/ConnectorConfigEditor'
16 | import CreateEditor from '../../components/ConnectorPage/ConnectorCreateEditor'
17 |
18 | import { ROOT, CONNECTOR, } from '../../constants/State'
19 | import Actions from '../../actions'
20 | import * as style from './style'
21 |
22 | class ConnectorPage extends React.Component {
23 | static propTypes = {
24 | actions: PropTypes.object.isRequired,
25 | connectors: PropTypes.array.isRequired,
26 | paginator: PropTypes.object.isRequired,
27 | filterKeyword: PropTypes.string.isRequired,
28 | sorter: PropTypes.string.isRequired,
29 | tableHeaderChecked: PropTypes.bool.isRequired,
30 |
31 | configSchema: PropTypes.object.isRequired,
32 | configEditor: PropTypes.object.isRequired,
33 | createEditor: PropTypes.object.isRequired,
34 | removeDialog: PropTypes.object.isRequired,
35 | snackbar: PropTypes.object.isRequired,
36 | }
37 |
38 | constructor(props) {
39 | super(props)
40 |
41 | this.handlePageOffsetChange = this.handlePageOffsetChange.bind(this)
42 | }
43 |
44 | handlePageOffsetChange(newPageOffset) {
45 | const { actions, } = this.props
46 | const { changePageOffset, } = actions
47 |
48 | changePageOffset({ [PaginatorProperty.PAGE_OFFSET]: newPageOffset, })
49 | }
50 |
51 | createSnackbarAndDialogs() {
52 | const {
53 | actions, configSchema, configEditor, createEditor, removeDialog, snackbar,
54 | } = this.props
55 |
56 | /** 3. draw dialogs, snackbar */
57 | const configEditorDOM = (configEditor.opened) ?
58 | () : null
62 |
63 | const createEditorDOM = (createEditor.opened) ?
64 | () : null
69 |
70 | const removeDialogDOM = (removeDialog.opened) ?
71 | () : null
74 |
75 | const snackbarDOM = ()
76 |
77 | return (
78 |
79 | {configEditorDOM}
80 | {createEditorDOM}
81 | {removeDialogDOM}
82 | {snackbarDOM}
83 |
84 | )
85 | }
86 |
87 | render() {
88 | const {
89 | actions, connectors, paginator, filterKeyword, sorter, tableHeaderChecked,
90 | } = this.props
91 |
92 | const {
93 | itemCountPerPage, pageOffset, itemOffset,
94 | } = paginator
95 |
96 | /** 1. filter connectors */
97 | const filtered = connectors.filter(connector => {
98 | if (filterKeyword === '') return true
99 | else if (connector[ConnectorProperty.CHECKED]) /** do not exclude checked connector to support incremental search */
100 | return true
101 | else {
102 | const searchArea = JSON.stringify(connector)
103 | return (searchArea.includes(filterKeyword))
104 | }
105 | })
106 |
107 | /** 2. select connectors to be curated */
108 | const sliced = filtered.slice(itemOffset, itemOffset + itemCountPerPage)
109 |
110 | return (
111 |
112 |
129 |
130 |
136 |
137 |
144 | {this.createSnackbarAndDialogs()}
145 |
21 | Kafkalot
22 |
23 | )
24 |
25 | const subTitle = (
26 |
27 | Kafka Connect, Stream Dashboard
28 |
29 | )
30 |
31 | const button = (
32 | }
37 | />
38 | )
39 |
40 | return (
41 |
42 |
43 | {title}
44 | {subTitle}
45 | {button}
46 |
47 |