fix: style fixes

Author: astandrik

src/containers/Tenant/Diagnostics/Diagnostics.scss

@@ -8,7 +8,7 @@
     height: 100%;
 
     &__header-wrapper {
-        padding: 0 20px;
+        padding: 0 var(--g-spacing-5);
 
         background-color: var(--g-color-base-background);
     }

src/containers/Tenant/Diagnostics/TopQueries/QueryDetails.scss

@@ -26,7 +26,7 @@
 
     &__actions {
         display: flex;
-        gap: 8px;
+        gap: var(--g-spacing-2);
     }
 
     &__content {
@@ -56,16 +56,9 @@
 
         overflow: hidden;
 
-        margin-top: 20px;
+        margin-top: var(--g-spacing-5);
 
         border-radius: 4px;
         background-color: var(--code-background-color);
-
-        pre {
-            max-height: 100%;
-            margin: 0 !important;
-
-            background-color: transparent !important;
-        }
     }
 }

src/containers/Tenant/Diagnostics/TopQueries/i18n/en.json

@@ -8,15 +8,5 @@
   "query-details.title": "Query Details",
   "query-details.open-in-editor": "Open in Editor",
   "query-details.close": "Close",
-  "query-details.query-hash": "Query Hash",
-  "query-details.cpu-time": "CPU Time",
-  "query-details.duration": "Duration",
-  "query-details.read-bytes": "Read Bytes",
-  "query-details.request-units": "Request Units",
-  "query-details.end-time": "End Time",
-  "query-details.read-rows": "Read Rows",
-  "query-details.user-sid": "User SID",
-  "query-details.application-name": "Application Name",
-  "query-details.query-start-at": "Query Start Time",
   "query-details.query.title": "Query Text"
 }

src/containers/Tenant/Diagnostics/TopQueries/utils.ts

@@ -16,7 +16,7 @@ import {
     getRunningQueriesColumnSortField,
     getTopQueriesColumnSortField,
 } from './columns/constants';
-import i18n from './i18n';
+import columnsI18n from './columns/i18n';
 
 export const TOP_QUERIES_TABLE_SETTINGS: Settings = {
     ...QUERY_TABLE_SETTINGS,
@@ -46,70 +46,70 @@ export function createQueryInfoItems(data: KeyValueRow): InfoViewerItem[] {
 
     if (data.QueryText) {
         items.push({
-            label: i18n('query-details.query-hash'),
+            label: columnsI18n('query-hash'),
             value: generateHash(String(data.QueryText)),
         });
     }
 
     if (data.CPUTimeUs !== undefined) {
         items.push({
-            label: i18n('query-details.cpu-time'),
+            label: columnsI18n('cpu-time'),
             value: formatToMs(parseUsToMs(data.CPUTimeUs ?? undefined)),
         });
     }
 
     if (data.Duration !== undefined) {
         items.push({
-            label: i18n('query-details.duration'),
+            label: columnsI18n('duration'),
             value: formatToMs(parseUsToMs(data.Duration ?? undefined)),
         });
     }
 
     if (data.ReadBytes !== undefined) {
         items.push({
-            label: i18n('query-details.read-bytes'),
+            label: columnsI18n('read-bytes'),
             value: formatNumber(data.ReadBytes),
         });
     }
 
     if (data.RequestUnits !== undefined) {
         items.push({
-            label: i18n('query-details.request-units'),
+            label: columnsI18n('request-units'),
             value: formatNumber(data.RequestUnits),
         });
     }
 
     if (data.EndTime) {
         items.push({
-            label: i18n('query-details.end-time'),
+            label: columnsI18n('end-time'),
             value: formatDateTime(new Date(data.EndTime as string).getTime()),
         });
     }
 
     if (data.ReadRows !== undefined) {
         items.push({
-            label: i18n('query-details.read-rows'),
+            label: columnsI18n('read-rows'),
             value: formatNumber(data.ReadRows),
         });
     }
 
     if (data.UserSID) {
         items.push({
-            label: i18n('query-details.user-sid'),
+            label: columnsI18n('user'),
             value: data.UserSID,
         });
     }
 
     if (data.ApplicationName) {
         items.push({
-            label: i18n('query-details.application-name'),
+            label: columnsI18n('application'),
             value: data.ApplicationName,
         });
     }
 
     if (data.QueryStartAt) {
         items.push({
-            label: i18n('query-details.query-start-at'),
+            label: columnsI18n('start-time'),
             value: formatDateTime(new Date(data.QueryStartAt as string).getTime()),
         });
     }