feat(ClusterInfo): update versions bar, rework DC and Tablets fields (#407)

Author: artemmufazalov

src/components/ExternalLinkWithIcon/ExternalLinkWithIcon.scss

@@ -0,0 +1,7 @@
+.ydb-external-link-with-icon {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    white-space: nowrap;
+}

src/components/ExternalLinkWithIcon/ExternalLinkWithIcon.tsx

@@ -0,0 +1,24 @@
+import block from 'bem-cn-lite';
+
+import {Link} from '@gravity-ui/uikit';
+
+import {IconWrapper} from '../Icon/Icon';
+
+import './ExternalLinkWithIcon.scss';
+
+const b = block('ydb-external-link-with-icon');
+
+interface ExternalLinkWithIconProps {
+    title: string;
+    url: string;
+}
+
+export const ExternalLinkWithIcon = ({title, url}: ExternalLinkWithIconProps) => {
+    return (
+        <Link href={url} target="_blank" className={b()}>
+            {title}
+            {'\u00a0'}
+            <IconWrapper name="external" viewBox={'0 0 16 16'} width={16} height={16} />
+        </Link>
+    );
+};

src/components/Tablet/Tablet.scss

@@ -1,7 +1,6 @@
 .tablet {
     display: flex;
     justify-content: center;
-    align-items: center;
 
     width: 18px;
     height: 18px;

src/containers/Cluster/Cluster.tsx

@@ -1,10 +1,10 @@
 import {useRouteMatch} from 'react-router';
 import cn from 'bem-cn-lite';
 
-import type {AdditionalVersionsProps} from '../../types/additionalProps';
+import type {AdditionalClusterProps, AdditionalVersionsProps} from '../../types/additionalProps';
 import routes, {CLUSTER_PAGES} from '../../routes';
 
-import {ClusterInfo} from '../ClusterInfo/ClusterInfo';
+import {ClusterInfo} from './ClusterInfo/ClusterInfo';
 import Tenants from '../Tenants/Tenants';
 import {Nodes} from '../Nodes/Nodes';
 import Storage from '../Storage/Storage';
@@ -14,32 +14,36 @@ import './Cluster.scss';
 const b = cn('cluster');
 
 interface ClusterProps {
-    additionalClusterInfo?: any;
     additionalTenantsInfo?: any;
     additionalNodesInfo?: any;
+    additionalClusterProps?: AdditionalClusterProps;
     additionalVersionsProps?: AdditionalVersionsProps;
 }
 
-function Cluster(props: ClusterProps) {
+function Cluster({
+    additionalTenantsInfo,
+    additionalNodesInfo,
+    additionalClusterProps,
+    additionalVersionsProps,
+}: ClusterProps) {
     const match = useRouteMatch<{activeTab?: string}>(routes.cluster);
     const activeTab = match?.params?.activeTab ?? CLUSTER_PAGES.tenants.id;
     const renderRoutes = () => {
         switch (activeTab) {
             case CLUSTER_PAGES.tenants.id: {
-                return <Tenants {...props} />;
+                return <Tenants additionalTenantsInfo={additionalTenantsInfo} />;
             }
             case CLUSTER_PAGES.nodes.id: {
-                return <Nodes additionalNodesInfo={props.additionalNodesInfo} />;
+                return <Nodes additionalNodesInfo={additionalNodesInfo} />;
             }
             case CLUSTER_PAGES.storage.id: {
-                //@ts-ignore
-                return <Storage {...props} />;
+                return <Storage additionalNodesInfo={additionalNodesInfo} />;
             }
             case CLUSTER_PAGES.cluster.id: {
                 return (
                     <ClusterInfo
-                        additionalClusterInfo={props.additionalClusterInfo}
-                        additionalVersionsProps={props.additionalVersionsProps}
+                        additionalClusterProps={additionalClusterProps}
+                        additionalVersionsProps={additionalVersionsProps}
                     />
                 );
             }

src/containers/ClusterInfo/ClusterInfo.scss renamed to src/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -1,4 +1,4 @@
-@import '../../styles/mixins';
+@import '../../../styles/mixins';
 
 .cluster-info {
     $_: &;
@@ -20,31 +20,14 @@
         background: var(--yc-color-base-background);
     }
 
-    &__loader {
-        display: flex;
-        justify-content: center;
-
-        margin-top: 16px;
-    }
-
-    &__common {
+    &__title {
         display: flex;
         align-items: center;
 
         margin-top: 16px;
         margin-bottom: 20px;
     }
 
-    &__title {
-        margin-bottom: 15px;
-
-        font-weight: 600;
-    }
-
-    &__url {
-        margin-right: 14px;
-    }
-
     &__metric-field {
         margin-top: -8px;
     }
@@ -54,8 +37,6 @@
         flex-wrap: wrap;
         align-items: center;
 
-        margin-left: 15px;
-
         & .tablet {
             margin-bottom: 2px;
         }
@@ -81,31 +62,18 @@
         margin-left: 15px;
         padding: 0 !important;
     }
-    &__clipboard-button {
-        display: flex;
-        align-items: center;
 
-        margin-left: 5px;
-    }
-    &__progress-label {
-        margin: 0 10px 0 0;
+    &__links {
+        display: flex;
+        flex-flow: row wrap;
 
-        font-weight: 200;
+        gap: 12px;
     }
 
-    &__version-progress {
+    &__clipboard-button {
         display: flex;
         align-items: center;
 
-        width: $progress_width;
-        margin-top: 20px;
-
-        & .yc-progress {
-            width: $progress_width;
-        }
-    }
-
-    & .yc-progress__stack {
-        cursor: pointer;
+        margin-left: 5px;
     }
 }