luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add "Show Activity" switch

Browse Source
This commit is contained in:
Thomas Nordquist
2019-02-18 13:01:22 +01:00
parent e0978ee64b
commit 590c24a3bd
7 changed files with 60 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/App.tsx
View File

@@ -94,6 +94,7 @@ const mapStateToProps = (state: AppState) => {
settingsVisible: state.settings.visible,
connectionId: state.connection.connectionId,
error: state.globalState.error,
highlightTopicUpdates: state.settings.highlightTopicUpdates,
}
}

6
app/src/actions/Settings.ts
View File

@@ -21,6 +21,12 @@ export const toggleSettingsVisibility = (): Action => {
}
}
export const togglehighlightTopicUpdates = (): Action => {
return {
type: ActionTypes.SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY,
}
}
export const setTopicOrder = (topicOrder: TopicOrder = TopicOrder.none): Action => {
return {
topicOrder,

22
app/src/components/Settings.tsx
View File

@@ -10,6 +10,7 @@ import {
MenuItem,
Select,
Typography,
Switch,
} from '@material-ui/core'
import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
@@ -58,6 +59,7 @@ const styles: StyleRulesCallback = theme => ({
interface Props {
autoExpandLimit: number
highlightTopicUpdates: boolean
visible: boolean
store?: any
topicOrder: TopicOrder
@@ -96,12 +98,29 @@ class Settings extends React.Component<Props, {}> {
{this.renderAutoExpand()}
{this.renderNodeOrder()}
{this.renderhighlightTopicUpdates()}
</div>
<BrokerStatistics />
</Drawer>
)
}
private renderhighlightTopicUpdates() {
const { highlightTopicUpdates, actions } = this.props
return (
<div style={{ padding: '8px', display: 'flex' }}>
<InputLabel htmlFor="toggle-highlight-activity" style={{ flex: '1', marginTop: '8px' }}>Show Activity</InputLabel>
<Switch
name="toggle-highlight-activity"
checked={highlightTopicUpdates}
onChange={actions.togglehighlightTopicUpdates}
color="primary"
/>
</div>
)
}
private renderAutoExpand() {
const { classes, autoExpandLimit } = this.props
@@ -132,7 +151,7 @@ class Settings extends React.Component<Props, {}> {
return (
<div style={{ padding: '8px', display: 'flex' }}>
<InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>Topic order</InputLabel>
<InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>Topic Order</InputLabel>
<Select
value={topicOrder}
onChange={this.onChangeSorting}
@@ -160,6 +179,7 @@ const mapStateToProps = (state: AppState) => {
autoExpandLimit: state.settings.autoExpandLimit,
topicOrder: state.settings.topicOrder,
visible: state.settings.visible,
highlightTopicUpdates: state.settings.highlightTopicUpdates,
}
}

4
app/src/components/Tree/Tree.tsx
View File

@@ -22,9 +22,9 @@ interface Props {
tree?: q.Tree<TopicViewModel>
filter: string
host?: string
topicOrder: TopicOrder
autoExpandLimit: number
highlightTopicUpdates: boolean
}
interface State {
@@ -111,6 +111,7 @@ class Tree extends React.PureComponent<Props, State> {
topicOrder={this.props.topicOrder}
lastUpdate={tree.lastUpdate}
didSelectTopic={this.props.actions.selectTopic}
highlightTopicUpdates={this.props.highlightTopicUpdates}
/>
</div>
)
@@ -128,6 +129,7 @@ const mapStateToProps = (state: AppState) => {
host: state.connection.host,
autoExpandLimit: state.settings.autoExpandLimit,
topicOrder: state.settings.topicOrder,
highlightTopicUpdates: state.settings.highlightTopicUpdates,
}
}

9
app/src/components/Tree/TreeNode.tsx
View File

@@ -30,7 +30,7 @@ const styles = (theme: Theme) => {
marginTop: '-1px',
},
selected: {
backgroundColor: 'rgba(200, 200, 200, 0.55)',
backgroundColor: 'rgba(170, 170, 170, 0.55)',
},
hover: {
backgroundColor: 'rgba(100, 100, 100, 0.55)',
@@ -51,6 +51,7 @@ interface Props {
autoExpandLimit: number
lastUpdate: number
didSelectTopic: any
highlightTopicUpdates: boolean
}
interface State {
@@ -64,12 +65,10 @@ class TreeNode extends React.Component<Props, State> {
private dirtyEdges: boolean = true
private dirtyMessage: boolean = true
private animationDirty: boolean = false
private lastRenderTime = 0
private cssAnimationWasSetAt?: number
private willUpdateTime: number = performance.now()
private titleRef?: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
private nodeRef?: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
private subnodesDidchange = () => {
@@ -129,7 +128,6 @@ class TreeNode extends React.Component<Props, State> {
public componentWillUnmount() {
const { treeNode } = this.props
this.removeSubscriber(treeNode)
this.titleRef = undefined
this.nodeRef = undefined
}
@@ -182,7 +180,7 @@ class TreeNode extends React.Component<Props, State> {
const isDirty = this.dirtyEdges || this.dirtyMessage || this.dirtySubnodes
this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false
const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot
const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot && this.props.highlightTopicUpdates
const animation = shouldStartAnimation ? { willChange: 'auto', translateZ: 0, animation: 'example 0.5s' } : {}
this.animationDirty = shouldStartAnimation
@@ -244,6 +242,7 @@ class TreeNode extends React.Component<Props, State> {
topicOrder={this.props.topicOrder}
lastUpdate={this.props.treeNode.lastUpdate}
didSelectTopic={this.props.didSelectTopic}
highlightTopicUpdates={this.props.highlightTopicUpdates}
/>
)
}

4
app/src/components/Tree/TreeNodeSubnodes.tsx
View File

@@ -12,13 +12,12 @@ export interface Props {
filter?: string
collapsed?: boolean | undefined
classes: any
lastUpdate: number
topicOrder: TopicOrder
selectedTopic?: q.TreeNode<TopicViewModel>
autoExpandLimit: number
didSelectTopic: any
highlightTopicUpdates: boolean
}
interface State {
@@ -83,6 +82,7 @@ class TreeNodeSubnodes extends React.Component<Props, State> {
autoExpandLimit={this.props.autoExpandLimit}
lastUpdate={node.lastUpdate}
didSelectTopic={this.props.didSelectTopic}
highlightTopicUpdates={this.props.highlightTopicUpdates}
/>
)
})

31
app/src/reducers/Settings.ts
View File

@@ -13,20 +13,23 @@ export interface SettingsState {
visible: boolean
topicOrder: TopicOrder
topicFilter?: string
highlightTopicUpdates: boolean
}
export type Action = SetAutoExpandLimit | ToggleVisibility | SetTopicOrder | FilterTopics
export type Action = SetAutoExpandLimit | ToggleVisibility | SetTopicOrder | FilterTopics | TogglehighlightTopicUpdates
export enum ActionTypes {
SETTINGS_SET_AUTO_EXPAND_LIMIT = 'SETTINGS_SET_AUTO_EXPAND_LIMIT',
SETTINGS_TOGGLE_VISIBILITY = 'SETTINGS_TOGGLE_VISIBILITY',
SETTINGS_SET_TOPIC_ORDER = 'SETTINGS_SET_TOPIC_ORDER',
SETTINGS_FILTER_TOPICS = 'SETTINGS_FILTER_TOPICS',
SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY = 'SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY',
}
const initialState: SettingsState = {
autoExpandLimit: 0,
topicOrder: TopicOrder.none,
visible: false,
highlightTopicUpdates: true,
}
export const settingsReducer = createReducer(initialState, {
@@ -34,8 +37,14 @@ export const settingsReducer = createReducer(initialState, {
SETTINGS_TOGGLE_VISIBILITY: toggleVisibility,
SETTINGS_SET_TOPIC_ORDER: setTopicOrder,
SETTINGS_FILTER_TOPICS: filterTopics,
SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY: togglehighlightTopicUpdates,
})
export interface SetAutoExpandLimit {
type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT
autoExpandLimit: number
}
function setAutoExpandLimit(state: SettingsState, action: SetAutoExpandLimit) {
return {
...state,
@@ -43,9 +52,19 @@ function setAutoExpandLimit(state: SettingsState, action: SetAutoExpandLimit) {
}
}
export interface SetAutoExpandLimit {
type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT
autoExpandLimit: number
export interface TogglehighlightTopicUpdates {
type: ActionTypes.SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY
}
function togglehighlightTopicUpdates(state: SettingsState, _action: TogglehighlightTopicUpdates) {
return {
...state,
highlightTopicUpdates: !state.highlightTopicUpdates,
}
}
export interface ToggleVisibility {
type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY
}
function toggleVisibility(state: SettingsState, action: ToggleVisibility) {
@@ -55,10 +74,6 @@ function toggleVisibility(state: SettingsState, action: ToggleVisibility) {
}
}
export interface ToggleVisibility {
type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY
}
function setTopicOrder(state: SettingsState, action: SetTopicOrder) {
return {
...state,