ydb-embedded-ui 3.2.2 → 3.3.0

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -19,7 +19,7 @@ import {stringifyVdiskId} from '../../../utils';
 import {getUsage, isFullDonorData} from '../../../utils/storage';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
-import Vdisk from '../Vdisk/Vdisk';
+import {VDisk} from '../VDisk';
 import {getDegradedSeverity, getUsageSeverity} from '../utils';
 
 import i18n from './i18n';
@@ -254,16 +254,16 @@ function StorageGroups({
 
                         return donors.length > 0 ? (
                             <Stack className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
-                                <Vdisk
-                                    {...el}
-                                    PoolName={row[TableColumnsIds.PoolName]}
+                                <VDisk
+                                    data={el}
+                                    poolName={row[TableColumnsIds.PoolName]}
                                     nodes={nodes}
                                 />
                                 {donors.map((donor) => (
-                                    <Vdisk
-                                        {...donor}
+                                    <VDisk
+                                        data={donor}
                                         // donor and acceptor are always in the same group
-                                        PoolName={row[TableColumnsIds.PoolName]}
+                                        poolName={row[TableColumnsIds.PoolName]}
                                         nodes={nodes}
                                         key={stringifyVdiskId(donor.VDiskId)}
                                     />
@@ -271,9 +271,9 @@ function StorageGroups({
                             </Stack>
                         ) : (
                             <div className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
-                                <Vdisk
-                                    {...el}
-                                    PoolName={row[TableColumnsIds.PoolName]}
+                                <VDisk
+                                    data={el}
+                                    poolName={row[TableColumnsIds.PoolName]}
                                     nodes={nodes}
                                 />
                             </div>

package/dist/containers/Storage/StorageNodes/StorageNodes.scss

@@ -4,6 +4,7 @@
         overflow-x: auto;
         overflow-y: hidden;
         justify-content: left;
+        align-items: flex-end;
 
         width: max-content;
     }

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -8,7 +8,7 @@ import {VisibleEntities} from '../../../store/reducers/storage';
 import {NodesUptimeFilterValues} from '../../../utils/nodes';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
-import Pdisk from '../Pdisk/Pdisk';
+import {PDisk} from '../PDisk';
 
 import i18n from './i18n';
 import './StorageNodes.scss';
@@ -132,8 +132,8 @@ function StorageNodes({
             render: ({value, row}) => (
                 <div className={b('pdisks-wrapper')}>
                     {_.map(value as any, (el) => (
-                        <div className={b('pdisks-item')}>
-                            <Pdisk key={el.PDiskId} {...el} NodeId={row.NodeId} />
+                        <div className={b('pdisks-item')} key={el.PDiskId}>
+                            <PDisk data={el} nodeId={row.NodeId} />
                         </div>
                     ))}
                 </div>
@@ -183,7 +183,10 @@ function StorageNodes({
             theme="yandex-cloud"
             data={data}
             columns={columns}
-            settings={tableSettings}
+            settings={{
+                ...tableSettings,
+                dynamicRenderType: 'variable',
+            }}
             initialSortOrder={setSortOrder(visibleEntities)}
             emptyDataMessage={i18n('empty.default')}
         />

package/dist/containers/Storage/VDisk/VDisk.scss

@@ -0,0 +1,7 @@
+.vdisk-storage {
+    border-radius: 4px; // to match interactive area with disk shape
+
+    &__content {
+        border-radius: 4px; // to match interactive area with disk shape
+    }
+}

package/dist/containers/Storage/VDisk/VDisk.tsx

@@ -0,0 +1,148 @@
+import React, {useEffect, useState, useRef, useMemo} from 'react';
+import cn from 'bem-cn-lite';
+
+import {InternalLink} from '../../../components/InternalLink';
+
+import routes, {createHref} from '../../../routes';
+import {EFlag} from '../../../types/api/enums';
+import {EVDiskState, TVDiskStateInfo} from '../../../types/api/vdisk';
+import {stringifyVdiskId} from '../../../utils';
+
+import {STRUCTURE} from '../../Node/NodePages';
+
+import {DiskStateProgressBar, EDiskStateSeverity} from '../DiskStateProgressBar';
+import type {NodesHosts} from '../PDiskPopup';
+import {VDiskPopup} from '../VDiskPopup';
+
+import {NOT_AVAILABLE_SEVERITY} from '../utils';
+
+import './VDisk.scss';
+
+const b = cn('vdisk-storage');
+
+const stateSeverity: Record<EVDiskState, EDiskStateSeverity> = {
+    Initial: EDiskStateSeverity.Yellow,
+    LocalRecoveryError: EDiskStateSeverity.Red,
+    SyncGuidRecoveryError: EDiskStateSeverity.Red,
+    SyncGuidRecovery: EDiskStateSeverity.Yellow,
+    PDiskError: EDiskStateSeverity.Red,
+    OK: EDiskStateSeverity.Green,
+};
+
+const getStateSeverity = (vDiskState?: EVDiskState) => {
+    if (!vDiskState) {
+        return NOT_AVAILABLE_SEVERITY;
+    }
+
+    return stateSeverity[vDiskState] ?? NOT_AVAILABLE_SEVERITY;
+};
+
+const getColorSeverity = (color?: EFlag) => {
+    if (!color) {
+        return EDiskStateSeverity.Grey;
+    }
+
+    return EDiskStateSeverity[color] ?? EDiskStateSeverity.Grey;
+};
+
+interface VDiskProps {
+    data?: TVDiskStateInfo;
+    poolName?: string;
+    nodes?: NodesHosts;
+    compact?: boolean;
+}
+
+export const VDisk = ({data = {}, poolName, nodes, compact}: VDiskProps) => {
+    const [severity, setSeverity] = useState(getStateSeverity(data.VDiskState));
+    const [isPopupVisible, setIsPopupVisible] = useState(false);
+
+    const anchor = useRef(null);
+
+    // determine disk status severity
+    useEffect(() => {
+        const {DiskSpace, VDiskState, FrontQueues, Replicated, DonorMode} = data;
+
+        // if the disk is not available, this determines its status severity regardless of other features
+        if (!VDiskState) {
+            setSeverity(NOT_AVAILABLE_SEVERITY);
+            return;
+        }
+
+        const DiskSpaceSeverity = getColorSeverity(DiskSpace);
+        const VDiskSpaceSeverity = getStateSeverity(VDiskState);
+        const FrontQueuesSeverity = Math.min(
+            EDiskStateSeverity.Orange,
+            getColorSeverity(FrontQueues),
+        );
+
+        let newSeverity = Math.max(DiskSpaceSeverity, VDiskSpaceSeverity, FrontQueuesSeverity);
+
+        // donors are always in the not replicated state since they are leftovers
+        // painting them blue is useless
+        if (!Replicated && !DonorMode && newSeverity === EDiskStateSeverity.Green) {
+            newSeverity = EDiskStateSeverity.Blue;
+        }
+
+        setSeverity(newSeverity);
+    }, [data]);
+
+    const showPopup = () => {
+        setIsPopupVisible(true);
+    };
+
+    const hidePopup = () => {
+        setIsPopupVisible(false);
+    };
+
+    const vdiskAllocatedPercent = useMemo(() => {
+        const {AvailableSize, AllocatedSize, PDisk} = data;
+        const available = AvailableSize ? AvailableSize : PDisk?.AvailableSize;
+
+        if (!available) {
+            return undefined;
+        }
+
+        return isNaN(Number(AllocatedSize))
+            ? undefined
+            : (Number(AllocatedSize) * 100) / (Number(available) + Number(AllocatedSize));
+    }, [data]);
+
+    return (
+        <React.Fragment>
+            <VDiskPopup
+                data={data}
+                poolName={poolName}
+                nodes={nodes}
+                anchorRef={anchor}
+                open={isPopupVisible}
+            />
+            <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
+                {data.NodeId ? (
+                    <InternalLink
+                        to={createHref(
+                            routes.node,
+                            {id: data.NodeId, activeTab: STRUCTURE},
+                            {
+                                pdiskId: data.PDisk?.PDiskId,
+                                vdiskId: stringifyVdiskId(data.VDiskId),
+                            },
+                        )}
+                        className={b('content')}
+                    >
+                        <DiskStateProgressBar
+                            diskAllocatedPercent={vdiskAllocatedPercent}
+                            severity={severity}
+                            compact={compact}
+                        />
+                    </InternalLink>
+                ) : (
+                    <DiskStateProgressBar
+                        diskAllocatedPercent={vdiskAllocatedPercent}
+                        severity={severity}
+                        compact={compact}
+                    />
+                )}
+            </div>
+        </React.Fragment>
+    );
+};

package/dist/containers/Storage/VDisk/__tests__/colors.tsx

@@ -0,0 +1,209 @@
+import {renderWithStore} from '../../../../utils/tests/providers';
+
+import {EVDiskState} from '../../../../types/api/vdisk';
+import {EFlag} from '../../../../types/api/enums';
+
+import {VDisk} from '../VDisk';
+
+describe('VDisk state', () => {
+    it('Should determine severity based on the highest value among VDiskState, DiskSpace and FrontQueues', () => {
+        const {getAllByRole} = renderWithStore(
+            <>
+                <VDisk
+                    data={{
+                        VDiskId: {Domain: 1},
+                        VDiskState: EVDiskState.OK, // severity 1, green
+                        DiskSpace: EFlag.Yellow, // severity 3, yellow
+                        FrontQueues: EFlag.Green, // severity 1, green
+                    }}
+                />
+                <VDisk
+                    data={{
+                        VDiskId: {Domain: 2},
+                        VDiskState: EVDiskState.PDiskError, // severity 5, red
+                        DiskSpace: EFlag.Yellow, // severity 3, yellow
+                        FrontQueues: EFlag.Green, // severity 1, green
+                    }}
+                />
+                <VDisk
+                    data={{
+                        VDiskId: {Domain: 3},
+                        VDiskState: EVDiskState.OK, // severity 1, green
+                        DiskSpace: EFlag.Yellow, // severity 3, yellow
+                        FrontQueues: EFlag.Orange, // severity 4, orange
+                    }}
+                />
+            </>,
+        );
+
+        const [disk1, disk2, disk3] = getAllByRole('meter');
+
+        expect(disk1.className).toMatch(/_yellow\b/i);
+        expect(disk2.className).toMatch(/_red\b/i);
+        expect(disk3.className).toMatch(/_orange\b/i);
+    });
+
+    it('Should not pick the highest severity based on FrontQueues value', () => {
+        const {getAllByRole} = renderWithStore(
+            <>
+                <VDisk
+                    data={{
+                        VDiskId: {Domain: 1},
+                        VDiskState: EVDiskState.OK, // severity 1, green
+                        DiskSpace: EFlag.Green, // severity 1, green
+                        FrontQueues: EFlag.Red, // severity 5, red
+                    }}
+                />
+                <VDisk
+                    data={{
+                        VDiskId: {Domain: 2},
+                        VDiskState: EVDiskState.OK, // severity 1, green
+                        DiskSpace: EFlag.Red, // severity 5, red
+                        FrontQueues: EFlag.Red, // severity 5, red
+                    }}
+                />
+            </>,
+        );
+
+        const [disk1, disk2] = getAllByRole('meter');
+
+        expect(disk1.className).not.toMatch(/_red\b/i);
+        expect(disk2.className).toMatch(/_red\b/i);
+    });
+
+    // prettier-ignore
+    it('Should display as unavailable when no VDiskState is provided', () => {
+        const {getAllByRole} = renderWithStore(
+            <>
+                <VDisk data={{VDiskId: {Domain: 1}}} />
+                <VDisk data={{VDiskId: {Domain: 2}, VDiskState: EVDiskState.OK}} />
+                <VDisk data={{VDiskId: {Domain: 3},                             DiskSpace: EFlag.Green}} />
+                <VDisk data={{VDiskId: {Domain: 4},                                                     FrontQueues: EFlag.Green}} />
+                <VDisk data={{VDiskId: {Domain: 5}, VDiskState: EVDiskState.OK, DiskSpace: EFlag.Green}} />
+                <VDisk data={{VDiskId: {Domain: 6}, VDiskState: EVDiskState.OK,                         FrontQueues: EFlag.Green}} />
+                <VDisk data={{VDiskId: {Domain: 7},                             DiskSpace: EFlag.Green, FrontQueues: EFlag.Green}} />
+                <VDisk data={{VDiskId: {Domain: 8}, VDiskState: EVDiskState.OK, DiskSpace: EFlag.Green, FrontQueues: EFlag.Green}} />
+            </>
+        );
+
+        const [disk1, disk2, disk3, disk4, disk5, disk6, disk7, disk8] =
+            getAllByRole('meter');
+
+        // unavailable disks display with the grey color
+        expect(disk1.className).toMatch(/_grey\b/i);
+        expect(disk2.className).not.toMatch(/_grey\b/i);
+        expect(disk3.className).toMatch(/_grey\b/i);
+        expect(disk4.className).toMatch(/_grey\b/i);
+        expect(disk5.className).not.toMatch(/_grey\b/i);
+        expect(disk6.className).not.toMatch(/_grey\b/i);
+        expect(disk7.className).toMatch(/_grey\b/i);
+        expect(disk8.className).not.toMatch(/_grey\b/i);
+    });
+
+    it('Should display as unavailable when no VDiskState is provided even if DiskSpace or FrontQueues flags are not green', () => {
+        const {getByRole} = renderWithStore(
+            <VDisk
+                data={{
+                    VDiskId: {Domain: 1},
+                    DiskSpace: EFlag.Red,
+                    FrontQueues: EFlag.Yellow,
+                }}
+            />,
+        );
+
+        const disk = getByRole('meter');
+
+        // unavailable disks display with the grey color
+        expect(disk.className).toMatch(/_grey\b/i);
+    });
+
+    it('Should display replicating VDisks in OK state with a distinct color', () => {
+        const {getAllByRole} = renderWithStore(
+            <>
+                <VDisk
+                    data={{
+                        VDiskId: {Domain: 1},
+                        VDiskState: EVDiskState.OK, // severity 1, green
+                        Replicated: false,
+                    }}
+                />
+                <VDisk
+                    data={{
+                        VDiskId: {Domain: 2},
+                        VDiskState: EVDiskState.OK, // severity 1, green
+                        Replicated: true,
+                    }}
+                />
+            </>,
+        );
+
+        const [disk1, disk2] = getAllByRole('meter');
+
+        expect(disk1.className).toMatch(/_blue\b/i);
+        expect(disk2.className).not.toMatch(/_blue\b/i);
+    });
+
+    it('Should display replicating VDisks in a not-OK state with a regular color', () => {
+        const {getAllByRole} = renderWithStore(
+            <>
+                <VDisk
+                    data={{
+                        VDiskId: {Domain: 1},
+                        VDiskState: EVDiskState.Initial, // severity 3, yellow
+                        Replicated: false,
+                    }}
+                />
+                <VDisk
+                    data={{
+                        VDiskId: {Domain: 2},
+                        VDiskState: EVDiskState.PDiskError, // severity 5, red
+                        Replicated: false,
+                    }}
+                />
+            </>,
+        );
+
+        const [disk1, disk2] = getAllByRole('meter');
+
+        expect(disk1.className).toMatch(/_yellow\b/i);
+        expect(disk2.className).toMatch(/_red\b/i);
+    });
+
+    it('Should always display donor VDisks with a regular color', () => {
+        const {getAllByRole} = renderWithStore(
+            <>
+                <VDisk
+                    data={{
+                        VDiskId: {Domain: 1},
+                        VDiskState: EVDiskState.OK, // severity 1, green
+                        Replicated: false, // donors are always in the not replicated state since they are leftovers
+                        DonorMode: true,
+                    }}
+                />
+                <VDisk
+                    data={{
+                        VDiskId: {Domain: 2},
+                        VDiskState: EVDiskState.Initial, // severity 3, yellow
+                        Replicated: false,
+                        DonorMode: true,
+                    }}
+                />
+                <VDisk
+                    data={{
+                        VDiskId: {Domain: 3},
+                        VDiskState: EVDiskState.PDiskError, // severity 5, red
+                        Replicated: false,
+                        DonorMode: true,
+                    }}
+                />
+            </>,
+        );
+
+        const [disk1, disk2, disk3] = getAllByRole('meter');
+
+        expect(disk1.className).not.toMatch(/_blue\b/i);
+        expect(disk1.className).toMatch(/_green\b/i);
+        expect(disk2.className).toMatch(/_yellow\b/i);
+        expect(disk3.className).toMatch(/_red\b/i);
+    });
+});

package/dist/containers/Storage/VDisk/index.ts

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

package/dist/containers/Storage/VDiskPopup/VDiskPopup.scss

@@ -0,0 +1,14 @@
+.vdisk-storage-popup {
+    padding: 12px;
+
+    .info-viewer + .info-viewer {
+        margin-top: 8px;
+        padding-top: 8px;
+
+        border-top: 1px solid var(--yc-color-line-generic);
+    }
+
+    &__donor-label {
+        margin-bottom: 8px;
+    }
+}

package/dist/containers/Storage/VDiskPopup/VDiskPopup.tsx

@@ -0,0 +1,134 @@
+import {useMemo} from 'react';
+import cn from 'bem-cn-lite';
+
+import {Label, Popup, PopupProps} from '@gravity-ui/uikit';
+
+import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
+
+import {EFlag} from '../../../types/api/enums';
+import {TVDiskStateInfo} from '../../../types/api/vdisk';
+import {stringifyVdiskId} from '../../../utils';
+import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
+
+import {NodesHosts, preparePDiskData} from '../PDiskPopup';
+
+import './VDiskPopup.scss';
+
+const b = cn('vdisk-storage-popup');
+
+const prepareVDiskData = (data: TVDiskStateInfo, poolName?: string) => {
+    const {
+        VDiskId,
+        VDiskState,
+        SatisfactionRank,
+        DiskSpace,
+        FrontQueues,
+        Replicated,
+        UnsyncedVDisks,
+        AllocatedSize,
+        ReadThroughput,
+        WriteThroughput,
+    } = data;
+
+    const vdiskData: InfoViewerItem[] = [
+        {label: 'VDisk', value: stringifyVdiskId(VDiskId)},
+        {label: 'State', value: VDiskState ?? 'not available'},
+    ];
+
+    if (poolName) {
+        vdiskData.push({label: 'StoragePool', value: poolName});
+    }
+
+    if (SatisfactionRank && SatisfactionRank.FreshRank?.Flag !== EFlag.Green) {
+        vdiskData.push({
+            label: 'Fresh',
+            value: SatisfactionRank.FreshRank?.Flag,
+        });
+    }
+
+    if (SatisfactionRank && SatisfactionRank.LevelRank?.Flag !== EFlag.Green) {
+        vdiskData.push({
+            label: 'Level',
+            value: SatisfactionRank.LevelRank?.Flag,
+        });
+    }
+
+    if (SatisfactionRank && SatisfactionRank.FreshRank?.RankPercent) {
+        vdiskData.push({
+            label: 'Fresh',
+            value: SatisfactionRank.FreshRank.RankPercent,
+        });
+    }
+
+    if (SatisfactionRank && SatisfactionRank.LevelRank?.RankPercent) {
+        vdiskData.push({
+            label: 'Level',
+            value: SatisfactionRank.LevelRank.RankPercent,
+        });
+    }
+
+    if (DiskSpace && DiskSpace !== EFlag.Green) {
+        vdiskData.push({label: 'Space', value: DiskSpace});
+    }
+
+    if (FrontQueues && FrontQueues !== EFlag.Green) {
+        vdiskData.push({label: 'FrontQueues', value: FrontQueues});
+    }
+
+    if (!Replicated) {
+        vdiskData.push({label: 'Replicated', value: 'NO'});
+    }
+
+    if (UnsyncedVDisks) {
+        vdiskData.push({label: 'UnsyncVDisks', value: UnsyncedVDisks});
+    }
+
+    if (Number(AllocatedSize)) {
+        vdiskData.push({
+            label: 'Allocated',
+            value: bytesToGB(AllocatedSize),
+        });
+    }
+
+    if (Number(ReadThroughput)) {
+        vdiskData.push({label: 'Read', value: bytesToSpeed(ReadThroughput)});
+    }
+
+    if (Number(WriteThroughput)) {
+        vdiskData.push({
+            label: 'Write',
+            value: bytesToSpeed(WriteThroughput),
+        });
+    }
+
+    return vdiskData;
+};
+
+interface VDiskPopupProps extends PopupProps {
+    data: TVDiskStateInfo;
+    poolName?: string;
+    nodes?: NodesHosts;
+}
+
+export const VDiskPopup = ({data, poolName, nodes, ...props}: VDiskPopupProps) => {
+    const vdiskInfo = useMemo(() => prepareVDiskData(data, poolName), [data, poolName]);
+    const pdiskInfo = useMemo(
+        () => data.PDisk && preparePDiskData(data.PDisk, nodes),
+        [data.PDisk, nodes],
+    );
+
+    return (
+        <Popup
+            className={b()}
+            placement={['top', 'bottom']}
+            // bigger offset for easier switching to neighbour nodes
+            // matches the default offset for popup with arrow out of a sense of beauty
+            offset={[0, 12]}
+            {...props}
+        >
+            {data.DonorMode && <Label className={b('donor-label')}>Donor</Label>}
+            <InfoViewer title="VDisk" info={vdiskInfo} size="s" />
+            {pdiskInfo && <InfoViewer title="PDisk" info={pdiskInfo} size="s" />}
+        </Popup>
+    );
+};

package/dist/containers/Storage/VDiskPopup/index.ts

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

package/dist/containers/Storage/utils/constants.ts

@@ -1,10 +1,3 @@
-export const colorSeverity = {
-    Grey: 0,
-    Green: 1,
-    Blue: 2,
-    Yellow: 3,
-    Orange: 4,
-    Red: 5,
-};
+import {EDiskStateSeverity} from '../DiskStateProgressBar';
 
-export const NOT_AVAILABLE_SEVERITY = colorSeverity.Red;
+export const NOT_AVAILABLE_SEVERITY = EDiskStateSeverity.Grey;

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -173,11 +173,13 @@ class TabletsFilters extends React.Component {
 
         return (
             <div className={b()}>
-                {/* {this.renderOverall(tablets)} */}
-
-                <div className={b('tenant')}>
-                    <span className={b('label')}>Database: </span> {tenantPath}
-                </div>
+                {tenantPath ? (
+                    <div className={b('tenant')}>
+                        <>
+                            <span className={b('label')}>Database: </span> {tenantPath}
+                        </>
+                    </div>
+                ) : null}
                 <MemoizedFilters
                     nodesForSelect={nodesForSelect}
                     nodeFilter={nodeFilter}
@@ -253,7 +255,9 @@ const Filters = ({
                         return (
                             <div className={b('node')}>
                                 <div>{option.content}</div>
-                                <div className={b('node-meta')} title={option.meta}>{option.meta}</div>
+                                <div className={b('node-meta')} title={option.meta}>
+                                    {option.meta}
+                                </div>
                             </div>
                         );
                     }}

package/dist/containers/Tenant/Diagnostics/Consumers/Consumers.tsx

@@ -1,6 +1,7 @@
 import {useCallback, useEffect, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
+import { escapeRegExp } from 'lodash/fp';
 
 import DataTable, {Column} from '@yandex-cloud/react-data-table';
 
@@ -73,7 +74,7 @@ export const Consumers = ({path, type}: ConsumersProps) => {
     const filterConsumersByName = (search: string) => {
         const filteredConsumers = search
             ? consumers.filter((consumer) => {
-                  const re = new RegExp(search, 'i');
+                  const re = new RegExp(escapeRegExp(search), 'i');
                   return re.test(consumer.name);
               })
             : consumers;

package/dist/containers/Tenant/Diagnostics/Diagnostics.scss

@@ -39,8 +39,8 @@
         width: 100%;
         padding: 0 20px;
 
-        & .nodes-viewer,
-        & .global-storage {
+        & .global-storage,
+        & .ydb-nodes {
             &__controls {
                 padding-top: 0;
             }