all: sync with master

client/src/components/Logs/Cells/ClientCell.js

@@ -121,7 +121,7 @@ const ClientCell = ({
                     {options.map(({ name, onClick, disabled }) => (
                         <button
                             key={name}
-                            className="button-action--arrow-option px-4 py-2"
+                            className="button-action--arrow-option px-4 py-1"
                             onClick={onClick}
                             disabled={disabled}
                         >

client/src/components/Logs/Cells/IconTooltip.css

@@ -50,9 +50,30 @@
 }
 
 @media (max-width: 1024px) {
-    .grid .key-colon, .grid .title--border {
+    .grid .title--border {
+        margin-bottom: 4px;
         font-weight: 600;
     }
+
+    .grid .key-colon {
+        margin-right: 4px;
+        color: var(--gray-8);
+    }
+
+    .grid__row {
+        display: flex;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        margin-bottom: 2px;
+        font-size: 14px;
+        word-break: break-all;
+        overflow: hidden;
+    }
+
+    .grid__row .filteringRules__filter,
+    .grid__row .filteringRules {
+        margin-bottom: 0;
+    }
 }
 
 @media (max-width: 767.98px) {
@@ -100,7 +121,7 @@
 }
 
 .title--border {
-    padding-top: 2rem;
+    padding-top: 1rem;
 }
 
 .title--border:before {
@@ -109,7 +130,7 @@
     left: 0;
     border-top: 0.5px solid var(--gray-d8) !important;
     width: 100%;
-    margin-top: -1rem;
+    margin-top: -0.5rem;
 }
 
 .icon-cross {

client/src/components/Logs/Cells/ResponseCell.js

@@ -27,6 +27,7 @@ const ResponseCell = ({
     const filters = useSelector((state) => state.filtering.filters, shallowEqual);
     const whitelistFilters = useSelector((state) => state.filtering.whitelistFilters, shallowEqual);
     const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
+    const services = useSelector((store) => store?.services);
 
     const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
 
@@ -60,8 +61,8 @@ const ResponseCell = ({
         install_settings_dns: upstreamString,
         elapsed: formattedElapsedMs,
         response_code: status,
-        ...(service_name
-                && { service_name: getServiceName(service_name) }
+        ...(service_name && services.allServices
+                && { service_name: getServiceName(services.allServices, service_name) }
         ),
         ...(rules.length > 0
                 && { rule_label: getRulesToFilterList(rules, filters, whitelistFilters) }
@@ -80,10 +81,10 @@ const ResponseCell = ({
     const getDetailedInfo = (reason) => {
         switch (reason) {
             case FILTERED_STATUS.FILTERED_BLOCKED_SERVICE:
-                if (!service_name) {
+                if (!service_name || !services.allServices) {
                     return formattedElapsedMs;
                 }
-                return getServiceName(service_name);
+                return getServiceName(services.allServices, service_name);
             case FILTERED_STATUS.FILTERED_BLACK_LIST:
             case FILTERED_STATUS.NOT_FILTERED_WHITE_LIST:
                 return getFilterNames(rules, filters, whitelistFilters).join(', ');

client/src/components/Logs/Cells/index.js

@@ -52,6 +52,7 @@ const Row = memo(({
     const autoClients = useSelector((state) => state.dashboard.autoClients, shallowEqual);
     const processingSet = useSelector((state) => state.access.processingSet);
     const allowedСlients = useSelector((state) => state.access.allowed_clients, shallowEqual);
+    const services = useSelector((store) => store?.services);
 
     const clients = useSelector((state) => state.dashboard.clients);
 
@@ -146,7 +147,7 @@ const Row = memo(({
                     type="button"
                     className={
                         classNames(
-                            'button-action--arrow-option',
+                            'button-action--arrow-option mb-1',
                             { 'bg--danger': !isBlocked },
                             { 'bg--green': isFiltered },
                         )}
@@ -158,13 +159,13 @@ const Row = memo(({
         );
 
         const blockForClientButton = <button
-                className='text-center font-weight-bold py-2 button-action--arrow-option'
+                className='text-center font-weight-bold py-1 button-action--arrow-option'
                 onClick={onBlockingForClientClick}>
             {t(blockingForClientKey)}
         </button>;
 
         const blockClientButton = <button
-                className='text-center font-weight-bold py-2 button-action--arrow-option'
+                className='text-center font-weight-bold py-1 button-action--arrow-option'
                 onClick={onBlockingClientClick}
                 disabled={processingSet || lastRuleInAllowlist}>
             {t(blockingClientKey)}
@@ -175,8 +176,8 @@ const Row = memo(({
             date: formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS),
             encryption_status: isBlocked
                 ? <div className="bg--danger">{requestStatus}</div> : requestStatus,
-            ...(FILTERED_STATUS.FILTERED_BLOCKED_SERVICE && service_name
-                && { service_name: getServiceName(service_name) }),
+            ...(FILTERED_STATUS.FILTERED_BLOCKED_SERVICE && service_name && services.allServices
+                && { service_name: getServiceName(services.allServices, service_name) }),
             domain,
             type_table_header: type,
             protocol,