From 23c0704090be5655acb39d2ebc4a7a23ffccfd5b Mon Sep 17 00:00:00 2001 From: svetaStrech Date: Tue, 26 Dec 2023 15:31:32 +0200 Subject: [PATCH] RND-365-station-messages-tab-redesign --- ui_src/src/App.scss | 4 +- ui_src/src/components/cloneModal/style.scss | 9 +- ui_src/src/config.js | 2 +- ui_src/src/dark-style.scss | 35 ++- .../components/customCollapse/index.js | 2 +- .../components/messageDetails/index.js | 225 +++++++++++------ .../components/messageDetails/style.scss | 124 ++++++++-- .../components/multiCollapse/index.js | 146 +++-------- .../components/multiCollapse/style.scss | 37 ++- .../stationObservabilty/messages/index.js | 81 ++++--- .../stationObservabilty/messages/style.scss | 229 ++++++------------ 11 files changed, 497 insertions(+), 397 deletions(-) diff --git a/ui_src/src/App.scss b/ui_src/src/App.scss index 82c8bd0ca..3e9dfe96f 100644 --- a/ui_src/src/App.scss +++ b/ui_src/src/App.scss @@ -1,7 +1,7 @@ //ANT design v4 @import '~antd/dist/antd.css'; @import '@stigg/react-sdk/dist/styles.css'; -@import "dark-style"; +@import 'dark-style'; .App { text-align: center; @@ -46,7 +46,7 @@ ::-webkit-scrollbar { width: 0px; - height: 0px; + height: 3px; } ::-webkit-scrollbar-thumb { diff --git a/ui_src/src/components/cloneModal/style.scss b/ui_src/src/components/cloneModal/style.scss index d3cfcbbe1..f11b7f3c8 100644 --- a/ui_src/src/components/cloneModal/style.scss +++ b/ui_src/src/components/cloneModal/style.scss @@ -43,10 +43,7 @@ display: flex; align-items: center; } - p.url-text::-webkit-scrollbar { - width: 3px; - height: 4px; - } + .icon { height: 33px; width: 37px; @@ -60,10 +57,6 @@ cursor: pointer; } } - div.url-wrapper::-webkit-scrollbar { - width: 3px; - height: 4px; - } .create-func-cli { font-size: 14px; font-family: 'InterMedium'; diff --git a/ui_src/src/config.js b/ui_src/src/config.js index c2482731b..4d139a1cd 100644 --- a/ui_src/src/config.js +++ b/ui_src/src/config.js @@ -19,7 +19,7 @@ export const WS_PREFIX = window.location.href?.includes('https') ? 'wss' : 'ws'; export const URL = window.location.href; export const HANDLE_REFRESH_INTERVAL = 600000; -export const SHOWABLE_ERROR_STATUS_CODE = 666; +export const SHOWABLE_ERROR_STATUS_CODE = 406; export const AUTHENTICATION_ERROR_STATUS_CODE = 401; export const DOC_URL = 'https://docs.memphis.dev/memphis/getting-started/readme'; export const CONNECT_APP_VIDEO = 'https://www.youtube.com/watch?v=-5YmxYRQsdw'; diff --git a/ui_src/src/dark-style.scss b/ui_src/src/dark-style.scss index d1d4d14b8..904a3331b 100644 --- a/ui_src/src/dark-style.scss +++ b/ui_src/src/dark-style.scss @@ -317,7 +317,7 @@ html.dark-mode { } .stations-container .err-stations-list .rows-wrapper .even, .messages-container .list-wrapper .list .even .row-message, - .generic-list-wrapper .list .rows-wrapper .pubSub-row:nth-child(even) { + .generic-list-wrapper .list .rows-wrapper .pubSub-row:nth-child(even), .messages-container .list-wrapper .even .row-message { background: #D1CFCD; } @@ -511,4 +511,37 @@ html.dark-mode { filter: $color-invert-filter-reverse !important; } + .message-detail-item { + .ant-collapse-content-box { + background: darken(#E6EAE8, 2%); + } + label { + color: $color-border-medium; + } + .content label:last-child { + color: $color-border-medium!important; + } + } + + .message-journey-container { + .canvas-wrapper svg { + filter: initial!important; + } + .poison-producer, .poison-message, .consumer-group { + background: $color-background-medium; + } + .consumer-group .content-wrapper .details, .consumer-group .content-wrapper .consumers { + background: darken(#E6EAE8, 2%); + } + .canvas-wrapper .producer { + stroke: rgba(101, 87, 255, 0.4); + } + .canvas-wrapper .consumer { + stroke: rgba(255, 54, 36, 0.4); + } + .consumer-group header { + background: #f18e85; + } + } + } \ No newline at end of file diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/customCollapse/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/customCollapse/index.js index a0bad1866..2ad7f4a45 100644 --- a/ui_src/src/domain/stationOverview/stationObservabilty/components/customCollapse/index.js +++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/customCollapse/index.js @@ -117,7 +117,7 @@ const CustomCollapse = ({ status, data, header, defaultOpen, collapsible, messag )} {(header === 'Validation error' || header === 'Error') && (
-

{data}

+
)} diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/messageDetails/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/messageDetails/index.js index 5d3be9872..5b3d2341c 100644 --- a/ui_src/src/domain/stationOverview/stationObservabilty/components/messageDetails/index.js +++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/messageDetails/index.js @@ -13,30 +13,40 @@ import './style.scss'; import React, { useContext, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import Lottie from 'lottie-react'; -import { Space } from 'antd'; - -import { convertBytes, parsingDate } from '../../../../../services/valueConvertor'; -import { ReactComponent as AttachedPlaceholderIcon } from '../../../../../assets/images/attachedPlaceholder.svg'; -import animationData from '../../../../../assets/lotties/MemphisGif.json'; +import { convertBytes, parsingDate, messageParser } from '../../../../../services/valueConvertor'; +import { httpRequest } from '../../../../../services/http'; import { ApiEndpoints } from '../../../../../const/apiEndpoints'; import { ReactComponent as JourneyIcon } from '../../../../../assets/images/journey.svg'; -import { httpRequest } from '../../../../../services/http'; +import { CiViewList } from 'react-icons/ci'; +import SegmentButton from '../../../../../components/segmentButton'; +import StatusIndication from '../../../../../components/indication'; +import Spinner from '../../../../../components/spinner'; import Button from '../../../../../components/button'; -import { StationStoreContext } from '../../..'; -import CustomCollapse from '../customCollapse'; +import Copy from '../../../../../components/copy'; +import { LOCAL_STORAGE_MSG_PARSER } from '../../../../../const/localStorageConsts'; +import Editor, { loader } from '@monaco-editor/react'; +import * as monaco from 'monaco-editor'; import MultiCollapse from '../multiCollapse'; -import StatusIndication from '../../../../../components/indication'; +import { StationStoreContext } from '../../..'; +import { Drawer } from 'antd'; -const MessageDetails = ({ isDls, isFailedSchemaMessage = false, isFailedFunctionMessage = false }) => { +loader.init(); +loader.config({ monaco }); + +const MessageDetails = ({ open, isDls, unselect, isFailedSchemaMessage = false, isFailedFunctionMessage = false }) => { const url = window.location.href; const stationName = url.split('stations/')[1]; const [stationState, stationDispatch] = useContext(StationStoreContext); const [messageDetails, setMessageDetails] = useState({}); const [loadMessageData, setLoadMessageData] = useState(false); + const [payloadType, setPayloadType] = useState('string'); const history = useHistory(); + useEffect(() => { + if (localStorage.getItem(LOCAL_STORAGE_MSG_PARSER) !== null) setPayloadType(localStorage.getItem(LOCAL_STORAGE_MSG_PARSER)); + }, []); + useEffect(() => { if (Object.keys(messageDetails).length !== 0) { setLoadMessageData(false); @@ -143,66 +153,142 @@ const MessageDetails = ({ isDls, isFailedSchemaMessage = false, isFailedFunction } }; - const loader = () => { + const generateEditor = (langCode, value) => { return ( -
- + <> + + + + ); + }; + + const loader = ; + + const messageDetailsItem = (props) => { + const { title, value, showIsActive, is_active, headers, details, payload, cg } = props; + const keysArray = headers ? Object.keys(value) : null; + return ( +
+ + + {title} + + {!headers && !details && !payload && !cg && ( + + {value} {showIsActive && } + + + )} + {headers && + keysArray && + keysArray.map((item) => ( + + + + + + ))} + {details && + value?.map((item) => ( + + + + + + ))} + {payload && ( + <> + { + setPayloadType(e); + localStorage.setItem(LOCAL_STORAGE_MSG_PARSER, e); + }} + /> + {generateEditor('json', messageParser(payloadType, value))} + + )} + + {cg && ( + + )}
); }; return ( - <> -
- {loadMessageData ? ( - loader() - ) : stationState?.selectedRowId && Object.keys(messageDetails).length > 0 ? ( - <> -
- - {!isFailedFunctionMessage && messageDetails?.validationError !== '' && ( - - )} - {isFailedFunctionMessage && messageDetails?.function_name !== '' && ( -
-
- Function - {messageDetails?.function_name} -
-
- )} - {isFailedFunctionMessage && messageDetails?.validationError !== '' && ( - - )} -
-
- Producer name - {messageDetails?.producer?.details[0].value} -
- -
- - {!isFailedSchemaMessage && !isFailedFunctionMessage && ( - - )} - - - - - -
+
e.stopPropagation()}> + { + stationDispatch({ type: 'SET_SELECTED_ROW_ID', payload: null }); + unselect(); + }} + destroyOnClose={true} + width="450px" + open={open} + mask={false} + bodyStyle={{ height: '100%', position: 'relative' }} + > + {loadMessageData && loader} + {!loadMessageData && stationState?.selectedRowId && Object.keys(messageDetails).length > 0 && ( +
+ + {isFailedFunctionMessage && + messageDetails?.validationError !== '' && + messageDetailsItem({ title: 'Error', value: messageDetails?.validationError, error: true })} + {!isFailedFunctionMessage && + messageDetails?.validationError !== '' && + messageDetailsItem({ title: 'Validation error', value: messageDetails?.validationError, error: true })} + {isFailedFunctionMessage && + messageDetails?.function_name !== '' && + messageDetailsItem({ title: 'Function', value: messageDetails?.function_name })} + {messageDetailsItem({ + title: 'Producer name', + value: messageDetails?.producer?.details[0].value, + showIsActive: true, + is_active: messageDetails?.producer.is_active + })} + + {isDls && + !isFailedSchemaMessage && + !isFailedFunctionMessage && + messageDetailsItem({ title: 'Failed CGs', value: messageDetails?.poisonedCGs, cg: true })} + {messageDetailsItem({ title: 'Metadata', value: messageDetails?.details, details: true })} + {messageDetails?.headers && + Object.keys(messageDetails?.headers)?.length > 0 && + messageDetailsItem({ title: 'Headers', value: messageDetails?.headers, headers: true })} + {messageDetailsItem({ title: 'Payload', value: messageDetails?.message, payload: true })} + {isDls && !isFailedSchemaMessage && !isFailedFunctionMessage && (
- + +
); }; diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/messageDetails/style.scss b/ui_src/src/domain/stationOverview/stationObservabilty/components/messageDetails/style.scss index 6059f605e..2b65692e0 100644 --- a/ui_src/src/domain/stationOverview/stationObservabilty/components/messageDetails/style.scss +++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/messageDetails/style.scss @@ -1,20 +1,112 @@ -.info-box{ - background: #FFFFFF; - border: 1px solid #EFEFEF; - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.06); - border-radius: 8px; +.message-wrapper { + height: 100%; + position: relative; display: flex; - padding: 12px 16px; - margin: 0; + flex-direction: column; justify-content: space-between; - .title{ - font-family: "InterSemiBold"; - font-size: 14px; + + .content-wrapper { + overflow-y: auto; + height: 100%; } - .content{ - font-family: "InterMedium"; - font-size: 14px; - color: #84818a; - margin-left: 10px; + .content-wrapper-dls { + overflow-y: auto; + height: calc(100% - 50px); } -} \ No newline at end of file + .message-detail-item { + display: flex; + flex-direction: column; + gap: 10px; + padding: 10px 0; + border-bottom: 1px solid #efefef; + .segment-button-wrapper { + width: fit-content; + } + .title { + font-family: 'InterSemiBold'; + font-size: 14px; + // color: #84818a; + color: rgba(0, 0, 0, 0.85); + margin: 0; + display: flex; + align-items: center; + gap: 5px; + } + .content { + font-family: 'Inter'; + font-size: 14px; + color: #84818a; + display: flex; + gap: 10px; + overflow-x: auto; + .val { + font-family: 'InterSemiBold' !important; + } + } + .content-json { + min-height: 100px; + height: 100%; + display: flex; + align-items: flex-start; + section { + height: 100%; + min-height: 300px; + } + } + } + .message-detail-item:last-child { + border-bottom: none; + } + .button-container { + padding-top: 5px !important; + margin-left: 3%; + + .botton-title { + display: flex; + + svg { + margin-right: 5px; + } + + p { + margin: 0; + } + } + + .noHover { + display: block !important; + } + } + + .memphis-gif { + display: flex; + justify-content: center; + + div { + width: 10vw; + } + } + + .placeholder { + align-items: center; + display: flex; + flex-direction: column; + gap: 20px; + position: absolute; + justify-self: center; + + p { + font-family: 'InterSemiBold'; + font-size: 16px; + color: rgba(74, 73, 92, 0.8); + } + } +} +.ant-drawer-body { + .spinner-container { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + } +} diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/multiCollapse/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/components/multiCollapse/index.js index 203c5012a..d82b69faf 100644 --- a/ui_src/src/domain/stationOverview/stationObservabilty/components/multiCollapse/index.js +++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/multiCollapse/index.js @@ -13,16 +13,13 @@ import './style.scss'; import React, { useEffect, useState } from 'react'; import { Collapse } from 'antd'; - -import CollapseArrow from '../../../../../assets/images/collapseArrow.svg'; import { ReactComponent as CollapseArrowIcon } from '../../../../../assets/images/collapseArrow.svg'; import StatusIndication from '../../../../../components/indication'; -import TooltipComponent from '../../../../../components/tooltip/tooltip'; const { Panel } = Collapse; -const MultiCollapse = ({ data, header, defaultOpen, tooltip = null }) => { - const [activeKey, setActiveKey] = useState(defaultOpen ? ['1'] : []); +const MultiCollapse = ({ data }) => { + const [activeKey, setActiveKey] = useState([]); const [activeChiledKey, setActiveChiledKey] = useState(); const [collapseData, setCollapseData] = useState(); @@ -38,110 +35,43 @@ const MultiCollapse = ({ data, header, defaultOpen, tooltip = null }) => { }; return ( - <> - {header !== undefined ? ( - - -
-

- {header} {collapseData?.length} -

- - - {activeKey[0] === '1' ? ( - - ) : ( - - )} - -
- - } - key="1" - > - - {collapseData?.length > 0 && - collapseData?.map((row, index) => { - return ( - -

{row.name}

- - - - -
- } - key={index} - > - {row.details?.length > 0 && - row.details?.map((row, index) => { - if (row.value !== '-1') { - return ( -
- -

{row.name}

- {row.value} - -
- ); - } - })} - - ); - })} - - - - ) : ( -
- - {collapseData?.length > 0 && - collapseData?.map((row, index) => { - return ( - -

{row.name}

- - - - +
+ + {collapseData?.length > 0 && + collapseData?.map((row, index) => { + return ( + +

{row.name}

+ + + + +
+ } + key={index} + > + {row.details?.length > 0 && + row.details?.map((row, index) => { + return ( +
+ +

{row.name}

+ {row.value} +
- } - key={index} - > - {row.details?.length > 0 && - row.details?.map((row, index) => { - return ( -
- -

{row.name}

- {row.value} - -
- ); - })} - - ); - })} - -
- )} - + ); + })} + + ); + })} + +
); }; diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/components/multiCollapse/style.scss b/ui_src/src/domain/stationOverview/stationObservabilty/components/multiCollapse/style.scss index 3c84d4792..5670ef449 100644 --- a/ui_src/src/domain/stationOverview/stationObservabilty/components/multiCollapse/style.scss +++ b/ui_src/src/domain/stationOverview/stationObservabilty/components/multiCollapse/style.scss @@ -2,6 +2,25 @@ .ant-collapse-content-box { padding: 0 !important; } + .ant-collapse-header { + padding: 0px !important; + } + .sub-collapse-header { + display: flex; + align-items: center !important; + padding: 0px 10px !important; + gap: 10px; + .title { + display: flex; + align-items: center !important; + gap: 10px; + .status { + svg { + width: 9px !important; + } + } + } + } .consumer-number { background: #dfdfdf; min-width: 20px; @@ -14,14 +33,29 @@ } .collapse-header { flex-direction: row !important; + display: flex; + align-items: center; + gap: 10px; + margin: 8px 0px; + .title { + display: flex; + align-items: center; + } } .collapse-child { .collapse-header { + flex-direction: row !important; + display: flex; + align-items: center; + padding: 0px 10px !important; p { font-size: 12px !important; + margin: 0 !important; } .status { - margin-right: 10px; + display: flex; + align-items: center; + gap: 5px; svg { width: 9px !important; } @@ -32,7 +66,6 @@ } .ant-collapse-item.ant-collapse-no-arrow { border: none; - border-bottom: 1px solid #efefef; border-radius: 0px; } .ant-collapse-item-active.ant-collapse-no-arrow { diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js index c018d3d9b..3db35a180 100644 --- a/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js +++ b/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js @@ -12,12 +12,12 @@ import './style.scss'; -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useEffect, useState, useRef } from 'react'; import { InfoOutlined } from '@material-ui/icons'; import { DEAD_LETTERED_MESSAGES_RETENTION_IN_HOURS } from '../../../../const/localStorageConsts'; import { ReactComponent as DeadLetterPlaceholderIcon } from '../../../../assets/images/deadLetterPlaceholder.svg'; -import { isCloud, messageParser, msToUnits } from '../../../../services/valueConvertor'; +import { isCloud, messageParser, msToUnits, parsingDate } from '../../../../services/valueConvertor'; import { ReactComponent as PurgeWrapperIcon } from '../../../../assets/images/purgeWrapperIcon.svg'; import { ReactComponent as WaitingMessagesIcon } from '../../../../assets/images/waitingMessages.svg'; import { ReactComponent as IdempotencyIcon } from '../../../../assets/images/idempotencyIcon.svg'; @@ -77,7 +77,7 @@ const Messages = ({ referredFunction }) => { const dls = stationState?.stationMetaData?.dls_station === '' ? null : stationState?.stationMetaData?.dls_station; const tabs = ['Messages', 'Dead-letter', 'Configuration']; const [disableLoaderCleanDisconnectedProducers, setDisableLoaderCleanDisconnectedProducers] = useState(false); - + const divRef = useRef(null); const url = window.location.href; const stationName = url.split('stations/')[1]; @@ -96,6 +96,16 @@ const Messages = ({ referredFunction }) => { activeTab === 'general' && setTabValue('Messages'); }, [activeTab]); + useEffect(() => { + const handleClickOutside = (event) => { + if (divRef.current && !divRef.current.contains(event.target)) setSelectedRowIndex(null); + }; + document.addEventListener('click', handleClickOutside); + return () => { + document.removeEventListener('click', handleClickOutside); + }; + }, []); + useEffect(() => { referredFunction && setActiveTab('functions'); setChoseReferredFunction(referredFunction); @@ -292,44 +302,55 @@ const Messages = ({ referredFunction }) => { > {selectedRowIndex === id && selectedRowPartition === partition &&
} - {tabValue === tabs[1] ? messageParser('string', message?.message?.data) : messageParser('string', message?.data)} + {tabValue === tabs[1] ? message?.id : message?.message_seq} + {tabValue === tabs[1] ? parsingDate(message?.message?.time_sent, true) : parsingDate(message?.created_at, true)} + {tabValue === tabs[1] ? messageParser('string', message?.message?.data) : messageParser('string', message?.data)} ); }; + const getHeight = (isDls, rowHeightPx) => { + return !isDls + ? stationState?.stationSocketData?.messages?.length * rowHeightPx + : subTabValue === 'Unacknowledged' + ? stationState?.stationSocketData?.poison_messages?.length * rowHeightPx + : subTabValue === 'Functions' + ? stationState?.stationSocketData?.functions_failed_messages?.length * rowHeightPx + : stationState?.stationSocketData?.schema_failed_messages?.length * rowHeightPx; + }; + const listGeneratorWrapper = () => { let isDls = tabValue === tabs[1]; return (
-
-

Messages

+

Seq ID

+

Timestamp

+ +

Payload

-
-

Information

+
-
-
- handleScroll()} - overscan={100} - itemContent={(index, message) => listGenerator(index, message)} - /> -
- +
+ handleScroll()} + overscan={100} + itemContent={(index, message) => listGenerator(index, message)} + />
); @@ -468,7 +489,6 @@ const Messages = ({ referredFunction }) => { {tabValue === tabs[1] && (
0 ? 'Unacknowledged' @@ -733,6 +753,13 @@ const Messages = ({ referredFunction }) => { /> setCloudModalOpen(false)} type="cloud" /> + setSelectedRowIndex(null)} + />
); }; diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/messages/style.scss b/ui_src/src/domain/stationOverview/stationObservabilty/messages/style.scss index 127c150ed..565108920 100644 --- a/ui_src/src/domain/stationOverview/stationObservabilty/messages/style.scss +++ b/ui_src/src/domain/stationOverview/stationObservabilty/messages/style.scss @@ -219,199 +219,110 @@ .coulmns-table { border-bottom: 1px solid #e9e9e9; - display: flex; color: #737373; font-size: 12px; font-family: 'InterMedium'; line-height: 40px; - justify-content: flex-end; - + display: grid; + grid-template-columns: 20% 40% 40%; + padding-left: 40px; + span { + display: flex; + } p { margin: 0; } - - .left-coulmn-wrapper { - width: 40%; - display: flex; - justify-content: center; - - svg { - color: #737373; - width: 11px; - margin-left: 5px; - height: 100%; - cursor: pointer; - } - } - - .right-coulmn { - width: 60%; - display: flex; - justify-content: center; + svg { + color: #737373; + width: 11px; + margin-left: 5px; + height: 100%; + cursor: pointer; } } - - .list { + .rows-wrapper { position: relative; - height: calc(100% - 40px); - min-width: 225px; - display: flex; + width: 100%; + overflow: auto; + border-right: 1px solid #e9e9e9; - .rows-wrapper { + .row-message { + height: 35px; + color: #1d1d1d; + align-items: center; + font-family: 'Inter'; + font-size: 12px; + padding-left: 8px; + display: flex; + width: 98%; + margin-left: 1%; + margin-top: 2px; + padding-left: 35px; + padding-right: 4px; + border-radius: 5px; + cursor: pointer; position: relative; - height: calc(100%); - width: 40%; - overflow: auto; - border-right: 1px solid #e9e9e9; - .row-message { - width: 100%; - height: 35px; - display: flex; - color: #1d1d1d; - align-items: center; - font-family: 'Inter'; - font-size: 12px; - padding-left: 8px; - display: flex; - width: 96%; - margin-left: 2%; - margin-top: 1%; - padding-left: 35px; - border-radius: 5px; - cursor: pointer; - position: relative; - - .ant-checkbox-wrapper { - margin-right: 10px !important; - margin-left: 3px !important; - } + .ant-checkbox-wrapper { + margin-right: 10px !important; + margin-left: 3px !important; + } - .preview-message { - min-width: 114px; + .preview-message { + min-width: 114px; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer !important; + display: grid; + grid-template-columns: 20% 40% 40%; + .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - cursor: pointer !important; - } - } - - .selected { - background: #efeefd !important; - } - - .empty-messages { - display: flex; - width: 95%; - height: 100%; - position: relative; - align-items: center; - justify-content: center; - - p { - margin: 0; - color: var(--gray); - font-family: 'InterSemiBold'; - font-size: 16px; } } } - .rows-wrapper::-webkit-scrollbar { - display: none; - } - - .even .row-message { - background-color: #f8f8f8; - border-radius: 5px; - } - - .hr-selected { - background: #6557ff; - border-radius: 0px 8px 8px 0px; - position: absolute; - height: 100%; - width: 10px; - top: 0; - left: -12px; + .selected { + background: #efeefd !important; } - } - - .message-wrapper { - width: 60%; - display: grid; - - height: calc(100% - 5px); - position: relative; - min-width: 310px; - align-items: center; - .row-data { - overflow-wrap: anywhere; - overflow: auto; + .empty-messages { + display: flex; + width: 95%; height: 100%; - padding-top: 10px; position: relative; - - .ant-space { - width: 100%; - - .ant-collapse-content-box { - max-height: 325px; - overflow: auto; - overflow-wrap: break-word; - } - } - } - - .button-container { - padding-top: 5px !important; - margin-left: 3%; - - .botton-title { - display: flex; - - svg { - margin-right: 5px; - } - - p { - margin: 0; - } - } - - .noHover { - display: block !important; - } - } - - .memphis-gif { - display: flex; - justify-content: center; - - div { - width: 10vw; - } - } - - .placeholder { align-items: center; - display: flex; - flex-direction: column; - gap: 20px; - position: absolute; - justify-self: center; + justify-content: center; p { + margin: 0; + color: var(--gray); font-family: 'InterSemiBold'; font-size: 16px; - color: rgba(74, 73, 92, 0.8); } } } - .message-wrapper-dls { - grid-template-rows: 90% 10%; + .rows-wrapper::-webkit-scrollbar { + display: none; + } + + .even .row-message { + background-color: #f8f8f8; + border-radius: 5px; + } + + .hr-selected { + background: #6557ff; + border-radius: 0px 8px 8px 0px; + position: absolute; + height: 100%; + width: 5px; + top: 0; + left: -12px; } .check-box-message {