fix: improve usability

Author: Raubzeug

src/components/InternalLink/InternalLink.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 
 import {Link} from 'react-router-dom';
@@ -13,3 +14,10 @@ export default function InternalLink({to, children, onClick, className}) {
         children
     );
 }
+
+InternalLink.propTypes = {
+    to: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    onClick: PropTypes.func,
+    className: PropTypes.string,
+};

src/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -74,4 +74,12 @@
 
         color: inherit;
     }
+
+    &__link {
+        display: flex;
+
+        height: 100%;
+
+        color: inherit;
+    }
 }

src/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -1,5 +1,5 @@
-import React, {useContext} from 'react';
-import HistoryContext from '../../../contexts/HistoryContext';
+import React from 'react';
+import InternalLink from '../../../components/InternalLink/InternalLink';
 import cn from 'bem-cn-lite';
 
 import './DiskStateProgressBar.scss';
@@ -26,28 +26,33 @@ function DiskStateProgressBar({
     severity,
     href,
 }: DiskStateProgressBarProps) {
-    const history = useContext(HistoryContext);
-    const onDiskClick = () => {
-        if (href) {
-            history.push(href);
-        }
+    const renderAllocatedPercent = () => {
+        return (
+            diskAllocatedPercent >= 0 && (
+                <React.Fragment>
+                    <div className={b('filled')} style={{width: `${diskAllocatedPercent}%`}} />
+                    <div className={b('filled-title')}>
+                        {`${Math.round(diskAllocatedPercent)}%`}
+                    </div>
+                </React.Fragment>
+            )
+        );
     };
+
     return (
         <div
             className={
                 severity !== undefined
                     ? b({[diskProgressColors[severity].toLowerCase()]: true})
                     : undefined
             }
-            onClick={onDiskClick}
         >
-            {diskAllocatedPercent >= 0 && (
-                <React.Fragment>
-                    <div className={b('filled')} style={{width: `${diskAllocatedPercent}%`}} />
-                    <div className={b('filled-title')}>
-                        {`${Math.round(diskAllocatedPercent)}%`}
-                    </div>
-                </React.Fragment>
+            {href ? (
+                <InternalLink to={href} className={b('link')}>
+                    {renderAllocatedPercent()}
+                </InternalLink>
+            ) : (
+                renderAllocatedPercent()
             )}
         </div>
     );

src/containers/VdiskPdiskNode/VdiskPdiskNode.js

@@ -84,7 +84,7 @@ function Vdisk({
             value: <EntityStatus status={SatisfactionRank.LevelRank.Flag} />,
         });
     }
-    vdiskInfo.push({label: 'Replicated', value: Replicated ? '✓' : '☓'});
+    vdiskInfo.push({label: 'Replicated', value: Replicated ? 'Yes' : 'No'});
     vdiskInfo.push({label: 'Allocated Size', value: bytesToGB(AllocatedSize)});
     vdiskInfo.push({label: 'Available Size', value: bytesToGB(AvailableSize)});
     if (Number(AllocatedSize) >= 0 && Number(AvailableSize) >= 0) {