Skip to content

Commit b391b26

Browse files
benlohbenloh
committed
config-ip-filter: Add rudimentary filter panel.
1 parent 65ebf82 commit b391b26

File tree

3 files changed

+126
-18
lines changed

3 files changed

+126
-18
lines changed

‎build/app/view/netcreate/components/InfoPanel.jsx

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@
44
55
InfoPanel shows a tab panel for selecting:
66
* hiding (showing the Graph)
7+
* Filters
78
* Nodes Table
89
* Edges Table
10+
* Vocabulary
911
* Help
1012
1113
The panel itself can be resized vertically.
@@ -26,10 +28,11 @@ const ReactStrap = require('reactstrap');
2628
const { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col, Button } = ReactStrap;
2729
const classnames = require('classnames');
2830

29-
const Help = require('./Help');
30-
const Vocabulary = require('./Vocabulary');
31+
const FiltersPanel = require('./filter/FiltersPanel');
3132
const NodeTable = require('./NodeTable');
3233
const EdgeTable = require('./EdgeTable');
34+
const Vocabulary = require('./Vocabulary');
35+
const Help = require('./Help');
3336

3437
/// REACT COMPONENT ///////////////////////////////////////////////////////////
3538
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -67,7 +70,7 @@ class InfoPanel extends UNISYS.Component {
6770
window.event.stopPropagation();
6871
if (this.state.activeTab !== tab) {
6972
this.setState({ activeTab: tab });
70-
if ((tab === `1`) || (tab === '5')) {
73+
if ((tab === `1`) || (tab === '6')) { // graph or help
7174
this.setState({
7275
tabpanelHeight: '50px', // show only tab buttons
7376
hideDragger: true,
@@ -155,39 +158,47 @@ class InfoPanel extends UNISYS.Component {
155158
onClick={() => { this.toggle('1'); this.sendGA('Graph', window.location); } }
156159
>
157160
Graph
158-
</NavLink>
161+
</NavLink>
159162
</NavItem>
160163
<NavItem>
161164
<NavLink
162165
className={classnames({ active: this.state.activeTab === '2' })}
163-
onClick={() => { this.toggle('2'); this.sendGA('Nodes Table', window.location); }}
166+
onClick={() => { this.toggle('2'); this.sendGA('Filter', window.location); }}
164167
>
165-
Nodes Table
166-
</NavLink>
168+
Filters
169+
</NavLink>
167170
</NavItem>
168171
<NavItem>
169172
<NavLink
170173
className={classnames({ active: this.state.activeTab === '3' })}
171-
onClick={() => { this.toggle('3'); this.sendGA('Edges Table', window.location); }}
174+
onClick={() => { this.toggle('3'); this.sendGA('Nodes Table', window.location); }}
172175
>
173-
Edges Table
174-
</NavLink>
176+
Nodes Table
177+
</NavLink>
175178
</NavItem>
176179
<NavItem>
177180
<NavLink
178181
className={classnames({ active: this.state.activeTab === '4' })}
179-
onClick={() => { this.toggle('4'); this.sendGA('Vocabulary', window.location); }}
182+
onClick={() => { this.toggle('4'); this.sendGA('Edges Table', window.location); }}
180183
>
181-
Vocabulary
182-
</NavLink>
184+
Edges Table
185+
</NavLink>
183186
</NavItem>
184187
<NavItem>
185188
<NavLink
186189
className={classnames({ active: this.state.activeTab === '5' })}
187-
onClick={() => { this.toggle('5'); this.sendGA('Help', window.location); }}
190+
onClick={() => { this.toggle('5'); this.sendGA('Vocabulary', window.location); }}
191+
>
192+
Vocabulary
193+
</NavLink>
194+
</NavItem>
195+
<NavItem>
196+
<NavLink
197+
className={classnames({ active: this.state.activeTab === '6' })}
198+
onClick={() => { this.toggle('6'); this.sendGA('Help', window.location); }}
188199
>
189200
Help
190-
</NavLink>
201+
</NavLink>
191202
</NavItem>
192203
</Nav>
193204
<TabContent activeTab={this.state.activeTab} >
@@ -196,25 +207,32 @@ class InfoPanel extends UNISYS.Component {
196207
<TabPane tabId="2">
197208
<Row>
198209
<Col sm="12">
199-
<NodeTable tableHeight={tableHeight} bIgnoreTableUpdates={bIgnoreTableUpdates}/>
210+
<FiltersPanel tableHeight={tableHeight} />
200211
</Col>
201212
</Row>
202213
</TabPane>
203214
<TabPane tabId="3">
204215
<Row>
205216
<Col sm="12">
206-
<EdgeTable tableHeight={tableHeight} bIgnoreTableUpdates={bIgnoreTableUpdates} />
217+
<NodeTable tableHeight={tableHeight} bIgnoreTableUpdates={bIgnoreTableUpdates}/>
207218
</Col>
208219
</Row>
209220
</TabPane>
210221
<TabPane tabId="4">
211222
<Row>
212223
<Col sm="12">
213-
<Vocabulary tableHeight={tableHeight} />
224+
<EdgeTable tableHeight={tableHeight} bIgnoreTableUpdates={bIgnoreTableUpdates} />
214225
</Col>
215226
</Row>
216227
</TabPane>
217228
<TabPane tabId="5">
229+
<Row>
230+
<Col sm="12">
231+
<Vocabulary tableHeight={tableHeight} />
232+
</Col>
233+
</Row>
234+
</TabPane>
235+
<TabPane tabId="6">
218236
<Row>
219237
<Col sm="12">
220238
<Help />

‎build/app/view/netcreate/components/filter/FiltersPanel.jsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import FilterGroup from './FilterGroup';
2+
import React from 'react';
3+
import StringFilter from './StringFilter';
4+
const ReactStrap = require('reactstrap');
5+
6+
const { Input, Label } = ReactStrap;
7+
8+
const UNISYS = require('unisys/client');
9+
var UDATA = null;
10+
11+
// Storybook has problems with loading unisys without relative ref
12+
// but even with relative ref, it can't load submodules
13+
// const UNISYS = require('../../../../unisys/client');
14+
// class FiltersPanel extends React.Component {
15+
16+
// Dummy Data
17+
const filterData = {
18+
id: '1',
19+
name: 'Label',
20+
type: 'contains',
21+
value: 'tacitus'
22+
};
23+
24+
class FiltersPanel extends UNISYS.Component {
25+
constructor({ filterGroups, onFiltersChange, tableHeight }) {
26+
super();
27+
28+
console.log('filters is', filterGroups)
29+
30+
this.OnFilterChange = this.OnFilterChange.bind(this);
31+
32+
/// Initialize UNISYS DATA LINK for REACT
33+
UDATA = UNISYS.NewDataLink(this);
34+
} // constructor
35+
36+
OnFilterChange (filter) {
37+
console.log('onFilterChange', filter);
38+
UDATA.LocalCall('FILTER', filter);
39+
}
40+
41+
render() {
42+
const { tableHeight } = this.props;
43+
return (
44+
<div className="filterPanel"
45+
style={{overflow:'auto',position:'relative',display:'block',left:'10px',right:'10px',maxHeight:tableHeight}}>
46+
<StringFilter filter={filterData} onChangeHandler={this.OnFilterChange} />
47+
</div>
48+
)
49+
}
50+
}
51+
52+
module.exports = FiltersPanel;
53+
54+
// storyboard wants a regular export?!?!
55+
// export default FiltersPanel;

‎build/app/view/netcreate/components/filter/StringFilter.jsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
const ReactStrap = require('reactstrap');
3+
const { Input, Label } = ReactStrap;
4+
5+
export default function StringFilter({ filter: { id, name, type, value }, onChangeHandler }) {
6+
7+
console.log('StringFilter: id is', id);
8+
9+
function HandleChangeLocal(e) {
10+
const filterType = document.getElementById(`filterType-${id}`).value;
11+
const filterValue = document.getElementById(`filterValue-${id}`).value;
12+
// Construct search string
13+
// let result = name;
14+
// result +=':' + filterType + ':' + filterValue;
15+
let result = { name, type: filterType, value: filterValue };
16+
onChangeHandler(result);
17+
}
18+
19+
const options = [
20+
{ value: "empty", label: "--"},
21+
{ value: "contains", label: "contains"},
22+
{ value: "not-contains", label: "does not contain"},
23+
]
24+
25+
return (
26+
<div className="filter-item" id={id}>
27+
<Label>{name}:&nbsp;
28+
<Input id={`filterType-${id}`} type="select" value={type} onChange={HandleChangeLocal}>
29+
{options.map(option => <option value={option.value} key={`${id}${option.value}`}>{option.label}</option>)}
30+
</Input>
31+
<Input id={`filterValue-${id}`} type="text" value={value} onChange={HandleChangeLocal}/>
32+
</Label>
33+
</div>
34+
);
35+
}

0 commit comments

Comments
 (0)