Fixing filtering issues

Fixing msg decoding issue UI improvements Version increament Signed-off-by: Dhananjaya Rajasinghe <[email protected]>
yaalalabs · Feb 4, 2025 · 3a89ea8 · 3a89ea8
1 parent 3a2e092
commit 3a89ea8
Show file tree

Hide file tree

Showing 17 changed files with 779 additions and 255 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,11 +1,10 @@
 {
   "name": "fixyl",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "private": true,
   "dependencies": {
-    "@ag-grid-community/all-modules": "^26.1.0",
-    "@ag-grid-community/core": "^26.1.0",
-    "@ag-grid-community/react": "^26.1.0",
+    "ag-grid-community": "29.3.5",
+    "ag-grid-react": "29.3.5",
     "antd": "^4.16.13",
     "antd-mask-input": "^0.1.15",
     "electron-is-dev": "^2.0.0",
@@ -19,6 +18,7 @@
     "react-dom": "^18.3.1",
     "react-intl-universal": "2.4.2",
     "react-joyride": "^2.5.0",
+    "react-json-view": "^1.21.3",
     "react-scripts": "4.0.3",
     "react-sortable-hoc": "^2.0.0",
     "resize-observer-polyfill": "^1.5.1",
@@ -44,8 +44,8 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "concurrently": "^6.3.0",
     "cross-env": "^7.0.3",
-		"electron": "^15.5.7",
-		"electron-builder": "^23.0.2",
+    "electron": "^15.5.7",
+    "electron-builder": "^23.0.2",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",

diff --git a/src/main-layout/SessionWindow/LauncherTab/LauncherTab.scss b/src/main-layout/SessionWindow/LauncherTab/LauncherTab.scss
@@ -24,7 +24,17 @@
     .launcher-actions {
         margin-top: 20px;
         width: 50%;
+        display: flex;
+
+        .clients {
+            padding-right: 25px;
+            border-right: 1px solid var(--separator-color);
+        }
 
+        .servers {
+            padding-left: 25px;
+        }
+
         .action-title {
             font-size: 18px;
         }

diff --git a/src/main-layout/SessionWindow/LauncherTab/LauncherTab.tsx b/src/main-layout/SessionWindow/LauncherTab/LauncherTab.tsx
@@ -14,7 +14,9 @@ const getIntlMessage = (msg: string) => {
 
 interface LauncherTabState {
   profiles: BaseProfile[],
+  serverProfiles: BaseProfile[],
   filter?: string
+  filterServer?: string
 }
 
 export class LauncherTab extends React.Component<any, LauncherTabState> {
@@ -24,7 +26,8 @@ export class LauncherTab extends React.Component<any, LauncherTabState> {
     super(props);
 
     this.state = {
-      profiles: GlobalServiceRegistry.profile.getAllClientProfiles()
+      profiles: GlobalServiceRegistry.profile.getAllClientProfiles(),
+      serverProfiles: GlobalServiceRegistry.profile.getAllServerProfiles(),
     }
   }
 
@@ -46,33 +49,61 @@ export class LauncherTab extends React.Component<any, LauncherTabState> {
   }
 
   render() {
-    const { profiles, filter } = this.state;
+    const { profiles, filter, serverProfiles, filterServer } = this.state;
     const filteredProfiles = profiles.filter(inst => !filter || (inst.name.toLowerCase()).includes(filter.toLowerCase()))
+    const filteredServerProfiles = serverProfiles.filter(inst => !filterServer || (inst.name.toLowerCase()).includes(filterServer.toLowerCase()))
 
     return <div className="launcher-tab-wrapper">
       <div className="title-section">
         <div className="title">{getIntlMessage("title")}</div>
         <div className="sub-title">{getIntlMessage("sub_title")}</div>
       </div>
       <div className="launcher-actions">
-        <div className="action-title">{getIntlMessage("action_title")}</div>
-        <div>
-          <Input placeholder={getIntlMessage("filter")} onChange={e => this.setState({ filter: e.target.value })} />
+        <div className="clients">
+          <div className="action-title">{getIntlMessage("action_title")}</div>
+          <div>
+            <Input placeholder={getIntlMessage("filter")} onChange={e => this.setState({ filter: e.target.value })} />
+          </div>
+          <ul className="profiles">
+            {filteredProfiles.map((profile, i) => <li className="profile" key={i} onClick={() => GlobalServiceRegistry.appManager.onSessionAction({ profile, type: "new" })}>
+              {profile.name}
+            </li>)}
+          </ul>
+          <div className="actions">
+            <Button type="ghost" icon={<PlusOutlined />} onClick={() => {
+              GlobalServiceRegistry.navigation.navigate({
+                path: [
+                  { partName: "main", action: { action: 'select', id: ActionPanelType.PROFILE } },
+                  { partName: "profile", action: { action: 'open', id: "new_profile" } }
+                ],
+              })
+            }}>{getIntlMessage("create_profile")}</Button>
+          </div>
         </div>
-        <ul className="profiles">
-          {filteredProfiles.map((profile, i) => <li className="profile" key={i} onClick={() => GlobalServiceRegistry.appManager.onSessionAction({ profile, type: "new" })}>
-            {profile.name}
-          </li>)}
-        </ul>
-        <div className="actions">
-          <Button type="ghost" icon={<PlusOutlined />} onClick={() => {
-            GlobalServiceRegistry.navigation.navigate({
-              path: [
-                { partName: "main", action: { action: 'select', id: ActionPanelType.PROFILE } },
-                { partName: "profile", action: { action: 'open', id: "new_profile" } }
-              ],
-            })
-          }}>{getIntlMessage("create_profile")}</Button>
+
+        <div className="servers">
+          <div className="action-title">{getIntlMessage("action_server_title")}</div>
+          <div>
+            <Input placeholder={getIntlMessage("filter_server")} onChange={e => this.setState({ filterServer: e.target.value })} />
+          </div>
+          <ul className="profiles">
+            {filteredServerProfiles.map((profile, i) => <li className="profile" key={i} onClick={() => {
+              GlobalServiceRegistry.appManager.onSessionAction({ type: "server" })
+              setTimeout(() => {
+                GlobalServiceRegistry.appManager.onSessionAction({ profile, type: "new" })
+              }, 200)
+            }}>
+              {profile.name}
+            </li>)}
+          </ul>
+          <div className="actions">
+            <Button type="ghost" icon={<PlusOutlined />} onClick={() => {
+              GlobalServiceRegistry.appManager.onSessionAction({ type: "server" })
+              setTimeout(() => {
+                GlobalServiceRegistry.appManager.onSessionAction({  type: "new", metaData: "new_server" })
+              }, 200)
+            }}>{getIntlMessage("create_server")}</Button>
+          </div>
         </div>
       </div>
       <div className="launcher-img" />

diff --git a/src/main-layout/SessionWindow/ServerTab/ServerManager/ServerManager.tsx b/src/main-layout/SessionWindow/ServerTab/ServerManager/ServerManager.tsx
@@ -44,6 +44,7 @@ interface ServerManagerState {
 export class ServerManager extends React.Component<ServerManagerProps, ServerManagerState> {
     private formRef: any = React.createRef();
     private sessionSub?: Subscription;
+    private actionSub?: Subscription;
     private profilesSubscription?: Subscription;
 
     constructor(props: any) {
@@ -59,6 +60,7 @@ export class ServerManager extends React.Component<ServerManagerProps, ServerMan
 
     componentDidMount() {
         const { profile } = GlobalServiceRegistry;
+        this.subscribeToSessionCreations();
         this.profilesSubscription = profile.getProfileUpdateObservable().subscribe(() => {
             this.setState({ profiles: profile.getAllServerProfiles() as any })
         })
@@ -70,9 +72,22 @@ export class ServerManager extends React.Component<ServerManagerProps, ServerMan
         })
     }
 
+    private subscribeToSessionCreations() {
+        this.actionSub = GlobalServiceRegistry.appManager.getSessionActionObservable().subscribe(action => {
+            if (action.type === "new" && action.profile && action.profile.type === "SERVER") {
+                this.onStart(action.profile as any)
+                this.actionSub?.unsubscribe();
+            } else if (action.type === "new" && action.metaData === "new_server") {
+                this.onNewProfile()
+                this.actionSub?.unsubscribe();
+            }
+        })
+    }
+
     componentWillUnmount(): void {
         this.state.serverFixSession?.destroy();
         this.sessionSub?.unsubscribe();
+        this.actionSub?.unsubscribe();
         this.profilesSubscription?.unsubscribe();
     }
 

diff --git a/src/main-layout/SessionWindow/SessionTab/SessionManagement/Favorites.tsx b/src/main-layout/SessionWindow/SessionTab/SessionManagement/Favorites.tsx
@@ -8,7 +8,7 @@ import { LM } from 'src/translations/language-manager';
 import { Tree, Input, Button, Popover, Tooltip, Drawer, Form, Switch } from 'antd';
 import './Favorites.scss';
 import { DeleteOutlined, EditOutlined, EyeOutlined, SendOutlined } from '@ant-design/icons';
-// import ReactJson from 'react-json-view';
+import ReactJson from 'react-json-view';
 import { FixForm } from './FixForm';
 import { Toast } from 'src/common/Toast/Toast';
 
@@ -171,7 +171,7 @@ export class Favorites extends React.Component<FavoritesProps, FavoritesState> {
                 <Popover title={getIntlMessage("message", { msg: msg.name })} placement="right"
                     trigger="click" overlayClassName="msg-view-wrapper"
                     content={<div className="msg-view">
-                        {/* <ReactJson src={msg.getValue()} theme="google" style={{ backgroundColor: "transparent" }} /> */}
+                        <ReactJson src={msg.getValue()} theme="google" style={{ backgroundColor: "transparent" }} />
                     </div>}>
                     <Tooltip title={getIntlMessage("view")}>
                         <Button className="action-btn" icon={<EyeOutlined />}></Button>

diff --git a/src/main-layout/SessionWindow/SessionTab/SessionManagement/FixForm.tsx b/src/main-layout/SessionWindow/SessionTab/SessionManagement/FixForm.tsx
@@ -140,6 +140,10 @@ export class FixForm extends React.Component<FixFormProps, FixFormState> {
                         break;
                 }
 
+                if (!field.required && value === "") {
+                    return;
+                }
+
                 ret[name] = value
             })
         })

diff --git a/src/main-layout/SessionWindow/SessionTab/SessoinMessageStream/SessoinMessageStream.scss b/src/main-layout/SessionWindow/SessionTab/SessoinMessageStream/SessoinMessageStream.scss
@@ -61,6 +61,11 @@
             height: 100%;
             width: 100%;
         }
+
+        .ag-filter-icon,
+        .ag-icon-menu {
+            display: none !important;
+        }
 
         .ag-row-odd {
             background-color: #323232;

diff --git a/src/main-layout/SessionWindow/SessionTab/SessoinMessageStream/SessoinMessageStream.tsx b/src/main-layout/SessionWindow/SessionTab/SessoinMessageStream/SessoinMessageStream.tsx
@@ -1,7 +1,5 @@
 import { ClearOutlined, SwapOutlined, WechatOutlined, MoreOutlined, DiffOutlined } from '@ant-design/icons';
 import { Switch, Form, Button, Tooltip, Checkbox, Popover, } from 'antd';
-import { AgGridColumn, AgGridReact } from '@ag-grid-community/react';
-import { AllCommunityModules, ColumnApi, GridApi, } from '@ag-grid-community/all-modules';
 import React from 'react';
 import { BaseClientFixSession, FixSession, FixSessionEventType } from 'src/services/fix/FixSession';
 import { LM } from 'src/translations/language-manager';
@@ -10,6 +8,8 @@ import { transformDate } from 'src/utils/utils';
 import { Subscription } from 'rxjs';
 import { IntraTabCommunicator, FixCommMsg } from '../../../../common/IntraTabCommunicator';
 import { MessageDiffViewer } from './MessageDiffViewer';
+import { ColDef, ColumnApi, GridApi } from 'ag-grid-community';
+import { AgGridReact } from "ag-grid-react";
 
 const getIntlMessage = (msg: string) => {
   return LM.getMessage(`session_message_stream.${msg}`);
@@ -102,14 +102,14 @@ export class SessoinMessageStream extends React.Component<SessoinMessageStreamPr
     this.sessionSub = this.props.session.getFixEventObservable().subscribe(event => {
       const data = this.getDataFromEvent(event)
       if (data) {
-        
+
         const addedRow = this.gridApi?.applyTransaction({
           add: [data]
         })
 
         if (this.state.scrollLocked) {
           setImmediate(() => {
-            this.gridApi?.ensureIndexVisible(addedRow?.add[0].rowIndex, 'bottom');
+            addedRow?.add[0].rowIndex && this.gridApi?.ensureIndexVisible(addedRow?.add[0].rowIndex, 'bottom');
           })
         }
 
@@ -164,13 +164,15 @@ export class SessoinMessageStream extends React.Component<SessoinMessageStreamPr
   }
 
   private onRowSelected = (event: any) => {
-    this.setState({ selectedRow: event.data });
-    this.props.communicator.onMessageSelected({ def: event.data.msg as any, session: this.props.session, rawMsg: event.data.rawMsg });
+    const node = this.gridApi?.getDisplayedRowAtIndex(event.rowIndex);
+
+    this.setState({ selectedRow: node?.data });
+    this.props.communicator.onMessageSelected({ def: node?.data.msg as any, session: this.props.session, rawMsg: node?.data.rawMsg });
 
     const rows = this.gridApi?.getSelectedRows();
     if (rows?.length === 2) {
       this.setState({
-        selectedRows: rows.map(row => ({
+        selectedRows: rows.map((row: any) => ({
           def: row.msg,
           rawMsg: JSON.stringify(row.msg.getValue(), null, 2),
           session: this.props.session
@@ -265,6 +267,41 @@ export class SessoinMessageStream extends React.Component<SessoinMessageStreamPr
     </div>
   }
 
+
+  private getColDef = (cols: any[]): ColDef[] => {
+    return cols.map(col => ({
+      field: col.key,
+      resizable: true,
+      key: col.key,
+      sortable: true,
+      sort: col.sort,
+      hide: col.hide ?? false,
+      type: col.type === 'number' ? 'numericColumn' : undefined,
+      headerName: col.label,
+      minWidth: col.minWidth,
+      maxWidth: col.maxWidth,
+      initialWidth: col.width || 200,
+      initialFlex: col.flex,
+      cellClass: col.className,
+      headerClass: col.headerClassName,
+      cellRenderer: this.getCellRenderer(col),
+      pinned: col.pinned,
+      lockPinned: true,
+      lockPosition: col.key === 'checked',
+      cellClassRules: {
+        'right-aligned': () => col.type === 'number',
+        'direction-cell': () => col.key === 'direction',
+        'in-cell': (params) => col.key === 'direction' && params.value === "⬇",
+        'out-cell': (params) => col.key === 'direction' && params.value === "⬆",
+      },
+      filter: true,
+      filterParams: col.filterParams,
+      suppressColumnsToolPanel: col.type === 'custom',
+      valueGetter: (params: any) => this.getValueGetter(col, params),
+      comparator: col.comparator,
+    }));
+  }
+
   render() {
     const { columnConfig, diffModeEnabled, selectedRows, input,
       output, hb, showDiffModal, showSideBySideModal, scrollLocked, minimizedMode } = this.state;
@@ -307,6 +344,17 @@ export class SessoinMessageStream extends React.Component<SessoinMessageStreamPr
       <div className="body">
         <div className="ag-theme-alpine message-table" >
           <AgGridReact
+            onGridReady={this.onGridReady}
+            rowData={this.state.rowData}
+            suppressMenuHide={false}
+            animateRows
+            rowSelection="multiple"
+            detailCellRendererParams={{ refreshStrategy: 'everything' }}
+            onCellFocused={this.onRowSelected}
+            getRowId={({ data }: any) => data.id}
+            columnDefs={this.getColDef(columnConfig)}
+          />
+          {/* <AgGridReact
             modules={AllCommunityModules}
             rowData={this.state.rowData}
             onGridReady={this.onGridReady}
@@ -341,7 +389,7 @@ export class SessoinMessageStream extends React.Component<SessoinMessageStreamPr
                 suppressMovable={true}
               />
             })}
-          </AgGridReact>
+          </AgGridReact> */}
           <MessageDiffViewer msg1={selectedRows?.[0]?.rawMsg} msg2={selectedRows?.[1]?.rawMsg} visible={showDiffModal || showSideBySideModal}
             sideBySide={showSideBySideModal}
             msgObj1={selectedRows?.[0]} msgObj2={selectedRows?.[1]}

diff --git a/src/main-layout/SessionWindow/SessionWindow.tsx b/src/main-layout/SessionWindow/SessionWindow.tsx
@@ -99,7 +99,7 @@ export class SessionWindow extends React.Component<any, SessionWindowState> {
 
   private subscribeToSessionCreations() {
     this.actionSub = GlobalServiceRegistry.appManager.getSessionActionObservable().subscribe(action => {
-      if (action.type === "new" && action.profile) {
+      if (action.type === "new" && action.profile && action.profile.type !== "SERVER") {
         let session = GlobalServiceRegistry.fix.getFixSession(action.profile as ProfileWithCredentials);
         let hasSession = true;
 

diff --git a/src/main-layout/SideMenu/SideMenu.tsx b/src/main-layout/SideMenu/SideMenu.tsx
@@ -173,14 +173,14 @@ export class SideMenu extends React.Component<any, SideMenuState> {
       <div className="side-menu-container">
         <MenuItem icon={<ProfileOutlined />} name={getIntlMessage("profile")} id={ActionPanelType.PROFILE}
           isActive={activePanel === ActionPanelType.PROFILE} onSelected={this.onSelected} />
+        <MenuItem icon={<DatabaseOutlined />} name={getIntlMessage("server")} id={ActionPanelType.SERVER}
+          isActive={activePanel === ActionPanelType.SERVER} onSelected={() => this.onSessionAction("server")} />
         <MenuItem icon={<EyeOutlined />} name={getIntlMessage("message_viewer")} id={ActionPanelType.MESSAGE_VIEWER}
           isActive={activePanel === ActionPanelType.MESSAGE_VIEWER} onSelected={() => this.onSessionAction("message_viewer")} />
         <MenuItem icon={<DiffOutlined />} name={getIntlMessage("message_diff_viewer")} id={ActionPanelType.MESSAGE_DIFF_VIEWER}
           isActive={activePanel === ActionPanelType.MESSAGE_DIFF_VIEWER} onSelected={() => this.onSessionAction("message_diff_viewer")} />
         <MenuItem icon={<GlobalOutlined />} name={getIntlMessage("global_params")} id={ActionPanelType.GLOBAL_PARAMS}
           isActive={activePanel === ActionPanelType.GLOBAL_PARAMS} onSelected={this.onSelected} />
-        <MenuItem icon={<DatabaseOutlined />} name={getIntlMessage("server")} id={ActionPanelType.SERVER}
-          isActive={activePanel === ActionPanelType.SERVER} onSelected={() => this.onSessionAction("server")} />
         <MenuItem icon={<SettingOutlined />} name={getIntlMessage("settings")} id={ActionPanelType.SETTINGS}
           isActive={activePanel === ActionPanelType.SETTINGS} onSelected={this.onSelected} />
       </div>

diff --git a/src/services/app-management/AppManagementService.ts b/src/services/app-management/AppManagementService.ts
@@ -8,6 +8,7 @@ export type SessionActionType = "new" | "destroy" | "message_viewer" | "message_
 
 export interface SessionAction {
     profile?: BaseProfile;
+    metaData?: any;
     type: SessionActionType
 }
-Original file line number
+Diff line change
@@ Expand Up @@
                             break;
                     }
+                    if (!field.required && value === "") {
+                        return;
+                    }
                     ret[name] = value
                 })
             })
@@ Expand Down @@