refactor: move LagPopover to a separate component

Author: artemmufazalov

src/components/LagPopover/LagPopover.scss

@@ -0,0 +1,13 @@
+.ydb-lag-popover {
+    div:nth-child(1) {
+        margin-bottom: 10px;
+    }
+
+    &_type_read {
+        max-width: 280px;
+    }
+
+    &_type_write {
+        max-width: 220px;
+    }
+}

src/components/LagPopover/LagPopover.tsx

@@ -0,0 +1,19 @@
+import block from 'bem-cn-lite';
+
+import {ReadLagImage, WriteLagImage} from '../LagImages';
+
+import './LagPopover.scss';
+
+const b = block('ydb-lag-popover');
+
+interface LagPopoverProps {
+    text: string;
+    type: 'read' | 'write';
+}
+
+export const LagPopover = ({text, type}: LagPopoverProps) => (
+    <div className={b({type})}>
+        <div>{text}</div>
+        <div>{type === 'read' ? <ReadLagImage /> : <WriteLagImage />}</div>
+    </div>
+);

src/components/LagPopover/index.ts

@@ -0,0 +1 @@
+export * from './LagPopover';

src/containers/Tenant/Diagnostics/Consumers/Headers/Headers.scss

@@ -2,12 +2,4 @@
     &__lags {
         white-space: nowrap;
     }
-
-    &__lags-popover-content {
-        max-width: 300px;
-
-        div:nth-child(1) {
-            margin-bottom: 10px;
-        }
-    }
 }

src/containers/Tenant/Diagnostics/Consumers/Headers/Headers.tsx

@@ -1,7 +1,7 @@
 import block from 'bem-cn-lite';
 
-import {ReadLagImage} from '../../../../../components/LagImages';
 import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
+import {LagPopover} from '../../../../../components/LagPopover';
 
 import {CONSUMERS_COLUMNS_IDS, CONSUMERS_COLUMNS_TITILES} from '../utils/constants';
 
@@ -15,13 +15,6 @@ export const ReadLagsHeader = () => (
     <LabelWithPopover
         className={b('lags')}
         text={CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.READ_LAGS]}
-        content={
-            <div className={b('lags-popover-content')}>
-                <div>{i18n('lagsPopover.readLags')}</div>
-                <div>
-                    <ReadLagImage />
-                </div>
-            </div>
-        }
+        content={<LagPopover text={i18n('lagsPopover.readLags')} type="read" />}
     />
 );

src/containers/Tenant/Diagnostics/Partitions/Headers/Headers.scss

@@ -19,14 +19,6 @@
         white-space: normal;
     }
 
-    &__lags-popover-content {
-        max-width: 300px;
-
-        div:nth-child(1) {
-            margin-bottom: 10px;
-        }
-    }
-
     &__messages-popover-content {
         max-width: 200px;
     }

src/containers/Tenant/Diagnostics/Partitions/Headers/Headers.tsx

@@ -1,7 +1,7 @@
 import block from 'bem-cn-lite';
 
 import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
-import {WriteLagImage, ReadLagImage} from '../../../../../components/LagImages';
+import {LagPopover} from '../../../../../components/LagPopover';
 
 import {PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITILES} from '../utils/constants';
 
@@ -29,29 +29,15 @@ export const WriteLagsHeader = () => (
     <LabelWithPopover
         className={b('lags')}
         text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_LAGS]}
-        content={
-            <div className={b('lags-popover-content')}>
-                <div>{i18n('lagsPopover.writeLags')}</div>
-                <div>
-                    <WriteLagImage />
-                </div>
-            </div>
-        }
+        content={<LagPopover text={i18n('lagsPopover.readLags')} type="read" />}
     />
 );
 
 export const ReadLagsHeader = () => (
     <LabelWithPopover
         className={b('lags')}
         text={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.WRITE_LAGS]}
-        content={
-            <div className={b('lags-popover-content')}>
-                <div>{i18n('lagsPopover.readLags')}</div>
-                <div>
-                    <ReadLagImage />
-                </div>
-            </div>
-        }
+        content={<LagPopover text={i18n('lagsPopover.writeLags')} type="write" />}
     />
 );