Skip to content

Commit 3a89ea8

Browse files
DhananjayaRDhananjayaR
committed
Fixing filtering issues
Fixing msg decoding issue UI improvements Version increament Signed-off-by: Dhananjaya Rajasinghe <dhananjaya@yaalalabs.com>
1 parent 3a2e092 commit 3a89ea8

File tree

17 files changed

+779
-255
lines changed

17 files changed

+779
-255
lines changed

‎package-lock.json‎

Lines changed: 250 additions & 59 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
{
22
"name": "fixyl",
3-
"version": "1.0.13",
3+
"version": "1.0.14",
44
"private": true,
55
"dependencies": {
6-
"@ag-grid-community/all-modules": "^26.1.0",
7-
"@ag-grid-community/core": "^26.1.0",
8-
"@ag-grid-community/react": "^26.1.0",
6+
"ag-grid-community": "29.3.5",
7+
"ag-grid-react": "29.3.5",
98
"antd": "^4.16.13",
109
"antd-mask-input": "^0.1.15",
1110
"electron-is-dev": "^2.0.0",
@@ -19,6 +18,7 @@
1918
"react-dom": "^18.3.1",
2019
"react-intl-universal": "2.4.2",
2120
"react-joyride": "^2.5.0",
21+
"react-json-view": "^1.21.3",
2222
"react-scripts": "4.0.3",
2323
"react-sortable-hoc": "^2.0.0",
2424
"resize-observer-polyfill": "^1.5.1",
@@ -44,8 +44,8 @@
4444
"@vitejs/plugin-react-swc": "^3.5.0",
4545
"concurrently": "^6.3.0",
4646
"cross-env": "^7.0.3",
47-
"electron": "^15.5.7",
48-
"electron-builder": "^23.0.2",
47+
"electron": "^15.5.7",
48+
"electron-builder": "^23.0.2",
4949
"eslint": "^9.9.0",
5050
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
5151
"eslint-plugin-react-refresh": "^0.4.9",

‎src/main-layout/SessionWindow/LauncherTab/LauncherTab.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,17 @@
2424
.launcher-actions {
2525
margin-top: 20px;
2626
width: 50%;
27+
display: flex;
28+
29+
.clients {
30+
padding-right: 25px;
31+
border-right: 1px solid var(--separator-color);
32+
}
2733

34+
.servers {
35+
padding-left: 25px;
36+
}
37+
2838
.action-title {
2939
font-size: 18px;
3040
}

‎src/main-layout/SessionWindow/LauncherTab/LauncherTab.tsx‎

Lines changed: 50 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ const getIntlMessage = (msg: string) => {
1414

1515
interface LauncherTabState {
1616
profiles: BaseProfile[],
17+
serverProfiles: BaseProfile[],
1718
filter?: string
19+
filterServer?: string
1820
}
1921

2022
export class LauncherTab extends React.Component<any, LauncherTabState> {
@@ -24,7 +26,8 @@ export class LauncherTab extends React.Component<any, LauncherTabState> {
2426
super(props);
2527

2628
this.state = {
27-
profiles: GlobalServiceRegistry.profile.getAllClientProfiles()
29+
profiles: GlobalServiceRegistry.profile.getAllClientProfiles(),
30+
serverProfiles: GlobalServiceRegistry.profile.getAllServerProfiles(),
2831
}
2932
}
3033

@@ -46,33 +49,61 @@ export class LauncherTab extends React.Component<any, LauncherTabState> {
4649
}
4750

4851
render() {
49-
const { profiles, filter } = this.state;
52+
const { profiles, filter, serverProfiles, filterServer } = this.state;
5053
const filteredProfiles = profiles.filter(inst => !filter || (inst.name.toLowerCase()).includes(filter.toLowerCase()))
54+
const filteredServerProfiles = serverProfiles.filter(inst => !filterServer || (inst.name.toLowerCase()).includes(filterServer.toLowerCase()))
5155

5256
return <div className="launcher-tab-wrapper">
5357
<div className="title-section">
5458
<div className="title">{getIntlMessage("title")}</div>
5559
<div className="sub-title">{getIntlMessage("sub_title")}</div>
5660
</div>
5761
<div className="launcher-actions">
58-
<div className="action-title">{getIntlMessage("action_title")}</div>
59-
<div>
60-
<Input placeholder={getIntlMessage("filter")} onChange={e => this.setState({ filter: e.target.value })} />
62+
<div className="clients">
63+
<div className="action-title">{getIntlMessage("action_title")}</div>
64+
<div>
65+
<Input placeholder={getIntlMessage("filter")} onChange={e => this.setState({ filter: e.target.value })} />
66+
</div>
67+
<ul className="profiles">
68+
{filteredProfiles.map((profile, i) => <li className="profile" key={i} onClick={() => GlobalServiceRegistry.appManager.onSessionAction({ profile, type: "new" })}>
69+
{profile.name}
70+
</li>)}
71+
</ul>
72+
<div className="actions">
73+
<Button type="ghost" icon={<PlusOutlined />} onClick={() => {
74+
GlobalServiceRegistry.navigation.navigate({
75+
path: [
76+
{ partName: "main", action: { action: 'select', id: ActionPanelType.PROFILE } },
77+
{ partName: "profile", action: { action: 'open', id: "new_profile" } }
78+
],
79+
})
80+
}}>{getIntlMessage("create_profile")}</Button>
81+
</div>
6182
</div>
62-
<ul className="profiles">
63-
{filteredProfiles.map((profile, i) => <li className="profile" key={i} onClick={() => GlobalServiceRegistry.appManager.onSessionAction({ profile, type: "new" })}>
64-
{profile.name}
65-
</li>)}
66-
</ul>
67-
<div className="actions">
68-
<Button type="ghost" icon={<PlusOutlined />} onClick={() => {
69-
GlobalServiceRegistry.navigation.navigate({
70-
path: [
71-
{ partName: "main", action: { action: 'select', id: ActionPanelType.PROFILE } },
72-
{ partName: "profile", action: { action: 'open', id: "new_profile" } }
73-
],
74-
})
75-
}}>{getIntlMessage("create_profile")}</Button>
83+
84+
<div className="servers">
85+
<div className="action-title">{getIntlMessage("action_server_title")}</div>
86+
<div>
87+
<Input placeholder={getIntlMessage("filter_server")} onChange={e => this.setState({ filterServer: e.target.value })} />
88+
</div>
89+
<ul className="profiles">
90+
{filteredServerProfiles.map((profile, i) => <li className="profile" key={i} onClick={() => {
91+
GlobalServiceRegistry.appManager.onSessionAction({ type: "server" })
92+
setTimeout(() => {
93+
GlobalServiceRegistry.appManager.onSessionAction({ profile, type: "new" })
94+
}, 200)
95+
}}>
96+
{profile.name}
97+
</li>)}
98+
</ul>
99+
<div className="actions">
100+
<Button type="ghost" icon={<PlusOutlined />} onClick={() => {
101+
GlobalServiceRegistry.appManager.onSessionAction({ type: "server" })
102+
setTimeout(() => {
103+
GlobalServiceRegistry.appManager.onSessionAction({ type: "new", metaData: "new_server" })
104+
}, 200)
105+
}}>{getIntlMessage("create_server")}</Button>
106+
</div>
76107
</div>
77108
</div>
78109
<div className="launcher-img" />

‎src/main-layout/SessionWindow/ServerTab/ServerManager/ServerManager.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ interface ServerManagerState {
4444
export class ServerManager extends React.Component<ServerManagerProps, ServerManagerState> {
4545
private formRef: any = React.createRef();
4646
private sessionSub?: Subscription;
47+
private actionSub?: Subscription;
4748
private profilesSubscription?: Subscription;
4849

4950
constructor(props: any) {
@@ -59,6 +60,7 @@ export class ServerManager extends React.Component<ServerManagerProps, ServerMan
5960

6061
componentDidMount() {
6162
const { profile } = GlobalServiceRegistry;
63+
this.subscribeToSessionCreations();
6264
this.profilesSubscription = profile.getProfileUpdateObservable().subscribe(() => {
6365
this.setState({ profiles: profile.getAllServerProfiles() as any })
6466
})
@@ -70,9 +72,22 @@ export class ServerManager extends React.Component<ServerManagerProps, ServerMan
7072
})
7173
}
7274

75+
private subscribeToSessionCreations() {
76+
this.actionSub = GlobalServiceRegistry.appManager.getSessionActionObservable().subscribe(action => {
77+
if (action.type === "new" && action.profile && action.profile.type === "SERVER") {
78+
this.onStart(action.profile as any)
79+
this.actionSub?.unsubscribe();
80+
} else if (action.type === "new" && action.metaData === "new_server") {
81+
this.onNewProfile()
82+
this.actionSub?.unsubscribe();
83+
}
84+
})
85+
}
86+
7387
componentWillUnmount(): void {
7488
this.state.serverFixSession?.destroy();
7589
this.sessionSub?.unsubscribe();
90+
this.actionSub?.unsubscribe();
7691
this.profilesSubscription?.unsubscribe();
7792
}
7893

‎src/main-layout/SessionWindow/SessionTab/SessionManagement/Favorites.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { LM } from 'src/translations/language-manager';
88
import { Tree, Input, Button, Popover, Tooltip, Drawer, Form, Switch } from 'antd';
99
import './Favorites.scss';
1010
import { DeleteOutlined, EditOutlined, EyeOutlined, SendOutlined } from '@ant-design/icons';
11-
// import ReactJson from 'react-json-view';
11+
import ReactJson from 'react-json-view';
1212
import { FixForm } from './FixForm';
1313
import { Toast } from 'src/common/Toast/Toast';
1414

@@ -171,7 +171,7 @@ export class Favorites extends React.Component<FavoritesProps, FavoritesState> {
171171
<Popover title={getIntlMessage("message", { msg: msg.name })} placement="right"
172172
trigger="click" overlayClassName="msg-view-wrapper"
173173
content={<div className="msg-view">
174-
{/* <ReactJson src={msg.getValue()} theme="google" style={{ backgroundColor: "transparent" }} /> */}
174+
<ReactJson src={msg.getValue()} theme="google" style={{ backgroundColor: "transparent" }} />
175175
</div>}>
176176
<Tooltip title={getIntlMessage("view")}>
177177
<Button className="action-btn" icon={<EyeOutlined />}></Button>

‎src/main-layout/SessionWindow/SessionTab/SessionManagement/FixForm.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,10 @@ export class FixForm extends React.Component<FixFormProps, FixFormState> {
140140
break;
141141
}
142142

143+
if (!field.required && value === "") {
144+
return;
145+
}
146+
143147
ret[name] = value
144148
})
145149
})

‎src/main-layout/SessionWindow/SessionTab/SessoinMessageStream/SessoinMessageStream.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,11 @@
6161
height: 100%;
6262
width: 100%;
6363
}
64+
65+
.ag-filter-icon,
66+
.ag-icon-menu {
67+
display: none !important;
68+
}
6469

6570
.ag-row-odd {
6671
background-color: #323232;

‎src/main-layout/SessionWindow/SessionTab/SessoinMessageStream/SessoinMessageStream.tsx‎

Lines changed: 56 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { ClearOutlined, SwapOutlined, WechatOutlined, MoreOutlined, DiffOutlined } from '@ant-design/icons';
22
import { Switch, Form, Button, Tooltip, Checkbox, Popover, } from 'antd';
3-
import { AgGridColumn, AgGridReact } from '@ag-grid-community/react';
4-
import { AllCommunityModules, ColumnApi, GridApi, } from '@ag-grid-community/all-modules';
53
import React from 'react';
64
import { BaseClientFixSession, FixSession, FixSessionEventType } from 'src/services/fix/FixSession';
75
import { LM } from 'src/translations/language-manager';
@@ -10,6 +8,8 @@ import { transformDate } from 'src/utils/utils';
108
import { Subscription } from 'rxjs';
119
import { IntraTabCommunicator, FixCommMsg } from '../../../../common/IntraTabCommunicator';
1210
import { MessageDiffViewer } from './MessageDiffViewer';
11+
import { ColDef, ColumnApi, GridApi } from 'ag-grid-community';
12+
import { AgGridReact } from "ag-grid-react";
1313

1414
const getIntlMessage = (msg: string) => {
1515
return LM.getMessage(`session_message_stream.${msg}`);
@@ -102,14 +102,14 @@ export class SessoinMessageStream extends React.Component<SessoinMessageStreamPr
102102
this.sessionSub = this.props.session.getFixEventObservable().subscribe(event => {
103103
const data = this.getDataFromEvent(event)
104104
if (data) {
105-
105+
106106
const addedRow = this.gridApi?.applyTransaction({
107107
add: [data]
108108
})
109109

110110
if (this.state.scrollLocked) {
111111
setImmediate(() => {
112-
this.gridApi?.ensureIndexVisible(addedRow?.add[0].rowIndex, 'bottom');
112+
addedRow?.add[0].rowIndex && this.gridApi?.ensureIndexVisible(addedRow?.add[0].rowIndex, 'bottom');
113113
})
114114
}
115115

@@ -164,13 +164,15 @@ export class SessoinMessageStream extends React.Component<SessoinMessageStreamPr
164164
}
165165

166166
private onRowSelected = (event: any) => {
167-
this.setState({ selectedRow: event.data });
168-
this.props.communicator.onMessageSelected({ def: event.data.msg as any, session: this.props.session, rawMsg: event.data.rawMsg });
167+
const node = this.gridApi?.getDisplayedRowAtIndex(event.rowIndex);
168+
169+
this.setState({ selectedRow: node?.data });
170+
this.props.communicator.onMessageSelected({ def: node?.data.msg as any, session: this.props.session, rawMsg: node?.data.rawMsg });
169171

170172
const rows = this.gridApi?.getSelectedRows();
171173
if (rows?.length === 2) {
172174
this.setState({
173-
selectedRows: rows.map(row => ({
175+
selectedRows: rows.map((row: any) => ({
174176
def: row.msg,
175177
rawMsg: JSON.stringify(row.msg.getValue(), null, 2),
176178
session: this.props.session
@@ -265,6 +267,41 @@ export class SessoinMessageStream extends React.Component<SessoinMessageStreamPr
265267
</div>
266268
}
267269

270+
271+
private getColDef = (cols: any[]): ColDef[] => {
272+
return cols.map(col => ({
273+
field: col.key,
274+
resizable: true,
275+
key: col.key,
276+
sortable: true,
277+
sort: col.sort,
278+
hide: col.hide ?? false,
279+
type: col.type === 'number' ? 'numericColumn' : undefined,
280+
headerName: col.label,
281+
minWidth: col.minWidth,
282+
maxWidth: col.maxWidth,
283+
initialWidth: col.width || 200,
284+
initialFlex: col.flex,
285+
cellClass: col.className,
286+
headerClass: col.headerClassName,
287+
cellRenderer: this.getCellRenderer(col),
288+
pinned: col.pinned,
289+
lockPinned: true,
290+
lockPosition: col.key === 'checked',
291+
cellClassRules: {
292+
'right-aligned': () => col.type === 'number',
293+
'direction-cell': () => col.key === 'direction',
294+
'in-cell': (params) => col.key === 'direction' && params.value === "⬇",
295+
'out-cell': (params) => col.key === 'direction' && params.value === "⬆",
296+
},
297+
filter: true,
298+
filterParams: col.filterParams,
299+
suppressColumnsToolPanel: col.type === 'custom',
300+
valueGetter: (params: any) => this.getValueGetter(col, params),
301+
comparator: col.comparator,
302+
}));
303+
}
304+
268305
render() {
269306
const { columnConfig, diffModeEnabled, selectedRows, input,
270307
output, hb, showDiffModal, showSideBySideModal, scrollLocked, minimizedMode } = this.state;
@@ -307,6 +344,17 @@ export class SessoinMessageStream extends React.Component<SessoinMessageStreamPr
307344
<div className="body">
308345
<div className="ag-theme-alpine message-table" >
309346
<AgGridReact
347+
onGridReady={this.onGridReady}
348+
rowData={this.state.rowData}
349+
suppressMenuHide={false}
350+
animateRows
351+
rowSelection="multiple"
352+
detailCellRendererParams={{ refreshStrategy: 'everything' }}
353+
onCellFocused={this.onRowSelected}
354+
getRowId={({ data }: any) => data.id}
355+
columnDefs={this.getColDef(columnConfig)}
356+
/>
357+
{/* <AgGridReact
310358
modules={AllCommunityModules}
311359
rowData={this.state.rowData}
312360
onGridReady={this.onGridReady}
@@ -341,7 +389,7 @@ export class SessoinMessageStream extends React.Component<SessoinMessageStreamPr
341389
suppressMovable={true}
342390
/>
343391
})}
344-
</AgGridReact>
392+
</AgGridReact> */}
345393
<MessageDiffViewer msg1={selectedRows?.[0]?.rawMsg} msg2={selectedRows?.[1]?.rawMsg} visible={showDiffModal || showSideBySideModal}
346394
sideBySide={showSideBySideModal}
347395
msgObj1={selectedRows?.[0]} msgObj2={selectedRows?.[1]}

‎src/main-layout/SessionWindow/SessionWindow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ export class SessionWindow extends React.Component<any, SessionWindowState> {
9999

100100
private subscribeToSessionCreations() {
101101
this.actionSub = GlobalServiceRegistry.appManager.getSessionActionObservable().subscribe(action => {
102-
if (action.type === "new" && action.profile) {
102+
if (action.type === "new" && action.profile && action.profile.type !== "SERVER") {
103103
let session = GlobalServiceRegistry.fix.getFixSession(action.profile as ProfileWithCredentials);
104104
let hasSession = true;
105105

0 commit comments

Comments
 (0)