ydb-embedded-ui 20.2.0 → 20.3.0

package/src/.eslintrc

@@ -0,0 +1,35 @@
+{
+    "extends": "@gravity-ui/eslint-config/client",
+    "rules": {
+        "react/jsx-uses-react": "off",
+        "react/react-in-jsx-scope": "off",
+        "valid-jsdoc": "off",
+        "react/jsx-fragments": ["error", "element"],
+        "no-restricted-syntax": [
+            "error",
+            {
+                "selector": "ImportDeclaration[source.value='react'] :matches(ImportNamespaceSpecifier, ImportSpecifier)",
+                "message": "Please use import React from 'react' instead.",
+            },
+            {
+                "selector": "TSTypeReference>TSQualifiedName[left.name='React'][right.name='FC']",
+                "message": "Don't use React.FC",
+            },
+            {
+                "selector": "ImportDeclaration[source.value='axios'] :matches(ImportSpecifier[imported.name='isAxiosError'])",
+                "message": "Please use isAxiosError from utils/response instead of axios",
+            },
+        ],
+        "no-restricted-imports": [
+            "error",
+            {
+                "patterns": [
+                    {
+                        "group": [".*/**/lib"],
+                        "message": "Please use direct imports instead",
+                    },
+                ],
+            },
+        ],
+    },
+}

package/src/assets/icons/cluster.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M260.353,254.878,131.538,33.1a2.208,2.208,0,0,0-3.829.009L.3,254.887A2.234,2.234,0,0,0,.3,257.122L129.116,478.9a2.208,2.208,0,0,0,3.83-.009L260.358,257.113A2.239,2.239,0,0,0,260.353,254.878Zm39.078-25.713a2.19,2.19,0,0,0,1.9,1.111h66.509a2.226,2.226,0,0,0,1.9-3.341L259.115,33.111a2.187,2.187,0,0,0-1.9-1.111H190.707a2.226,2.226,0,0,0-1.9,3.341ZM511.7,254.886,384.9,33.112A2.2,2.2,0,0,0,382.99,32h-66.6a2.226,2.226,0,0,0-1.906,3.34L440.652,256,314.481,476.66a2.226,2.226,0,0,0,1.906,3.34h66.6a2.2,2.2,0,0,0,1.906-1.112L511.7,257.114A2.243,2.243,0,0,0,511.7,254.886ZM366.016,284.917H299.508a2.187,2.187,0,0,0-1.9,1.111l-108.8,190.631a2.226,2.226,0,0,0,1.9,3.341h66.509a2.187,2.187,0,0,0,1.9-1.111l108.8-190.631A2.226,2.226,0,0,0,366.016,284.917Z"/></svg>

package/src/assets/icons/cry-cat.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" id="cry-cat">
+  <g fill="none" fill-rule="evenodd" transform="translate(-77 -498)">
+    <g fill="currentColor" fill-rule="nonzero" transform="translate(77 498)">
+      <path d="M72.8441235,36.5870324 C73.2392836,36.2011996 73.8724034,36.2087608 74.2582362,36.6039209 C76.8647227,39.2734173 78.7873582,42.4700331 79.9299589,46.1769304 C84.8454001,62.1239151 74.5567008,73 50,73 C25.4432992,73 15.1545999,62.1239151 20.0700411,46.1769304 C21.192392,42.5357287 23.0675024,39.3865755 25.6046851,36.7454586 C25.9872941,36.3471763 26.6203316,36.3344705 27.0186139,36.7170795 C27.4168962,37.0996885 27.429602,37.732726 27.046993,38.1310083 C24.7238951,40.5492704 23.0106576,43.4265664 21.9813066,46.766052 C17.5022967,61.2971388 26.6811346,71 50,71 C73.3188654,71 82.4977033,61.2971388 78.0186934,46.766052 C76.9707899,43.3663773 75.2141698,40.4457823 72.8272351,38.0011452 C72.4414022,37.6059851 72.4489635,36.9728653 72.8441235,36.5870324 Z"></path>
+      <path d="M84.8759653 52.0077221C85.4239852 51.9392196 85.9237754 52.3279453 85.9922779 52.8759653 86.0558873 53.3848409 85.7252541 53.8521307 85.2389208 53.971137L85.1240347 53.9922779 77.1240347 54.9922779C76.5760148 55.0607804 76.0762246 54.6720547 76.0077221 54.1240347 75.9441127 53.6151591 76.2747459 53.1478693 76.7610792 53.028863L76.8759653 53.0077221 84.8759653 52.0077221zM76.0384761 57.7252789C76.1793629 57.2321749 76.6666665 56.9318197 77.1607389 57.0129066L77.2747211 57.0384761 84.2747211 59.0384761C84.8057561 59.1902003 85.1132482 59.7436861 84.9615239 60.2747211 84.8206371 60.7678251 84.3333335 61.0681803 83.8392611 60.9870934L83.7252789 60.9615239 76.7252789 58.9615239C76.1942439 58.8097997 75.8867518 58.2563139 76.0384761 57.7252789z"></path>
+      <path d="M22.6046058,52.0082582 C23.1523297,51.9374274 23.6537673,52.3240257 23.724598,52.8717496 C23.7903694,53.3803504 23.461725,53.849041 22.9759018,53.9701129 L22.8611066,53.9917418 L15.1282504,54.9917418 C14.5805265,55.0625726 14.0790889,54.6759743 14.0082582,54.1282504 C13.9424868,53.6196496 14.2711312,53.150959 14.7569544,53.0298871 L14.8717496,53.0082582 L22.6046058,52.0082582 Z" transform="matrix(-1 0 0 1 37.733 0)"></path>
+      <path d="M14.7742553,57.7152469 C14.9202869,57.223642 15.4107023,56.928395 15.9039004,57.0146401 L16.0176093,57.0413991 L22.7504655,59.0413991 C23.2798861,59.1986639 23.5815781,59.7553325 23.4243133,60.2847531 C23.2782817,60.776358 22.7878662,61.071605 22.2946681,60.9853599 L22.1809593,60.9586009 L15.4481031,58.9586009 C14.9186824,58.8013361 14.6169905,58.2446675 14.7742553,57.7152469 Z" transform="matrix(-1 0 0 1 38.199 0)"></path>
+      <path d="M69.8567928,19.0103073 C70.2237946,18.9572026 70.5900499,19.1115454 70.8083531,19.4113021 C74.319444,24.2324525 75.358097,31.1568062 73.9886044,40.1505367 C73.9054653,40.6965278 73.3954545,41.0717435 72.8494633,40.9886044 C72.3034722,40.9054653 71.9282565,40.3954545 72.0113956,39.8494633 C73.2521708,31.7010456 72.4265487,25.4829743 69.5907948,21.1656458 L69.54,21.091 L69.4471801,21.1093098 C65.4215022,21.9124227 61.9987943,24.5603789 59.1563326,29.1200543 L58.9141135,29.5155669 C58.6924028,29.8840403 58.259945,30.0695086 57.8401683,29.9761503 C54.9099167,29.3244623 52.2956382,29 50,29 C47.7043618,29 45.0900833,29.3244623 42.1598317,29.9761503 C41.740055,30.0695086 41.3075972,29.8840403 41.0858865,29.5155669 C38.2788565,24.8504073 34.8931754,22.0957545 30.9061752,21.1848964 L30.459,21.091 L30.4092052,21.1656458 C27.6379003,25.3848532 26.7863958,31.4193878 27.9072075,39.2968803 L27.9886044,39.8494633 C28.0717435,40.3954545 27.6965278,40.9054653 27.1505367,40.9886044 C26.6045455,41.0717435 26.0945347,40.6965278 26.0113956,40.1505367 C24.641903,31.1568062 25.680556,24.2324525 29.1916469,19.4113021 C29.4099501,19.1115454 29.7762054,18.9572026 30.1432072,19.0103073 C34.9826506,19.710568 39.0447343,22.627996 42.3044278,27.688927 L42.421,27.873 L43.0203586,27.7525061 C45.3594976,27.293173 47.5089013,27.0436364 49.4698633,27.0052368 L50,27 C52.1018661,27 54.4278534,27.2514154 56.9796414,27.7525061 L57.578,27.873 L57.6955722,27.688927 C60.8716838,22.7577635 64.809565,19.8615889 69.4860616,19.0685453 L69.8567928,19.0103073 Z"></path>
+    </g>
+    <g transform="translate(77 498)">
+      <path fill="currentColor" fill-rule="nonzero" d="M36.7437245 52.3315138C36.7793326 52.3711296 36.84234 52.4425801 36.9288723 52.5428294 37.070962 52.7074431 37.2287392 52.8946943 37.3983439 53.10158 37.8825324 53.6921983 38.3667081 54.3243476 38.8203139 54.9749691 39.2898527 55.6484437 39.7004369 56.3048525 40.0358345 56.9340232 40.6532156 58.0921656 41 59.1190021 41 60.0244565 41 62.7737508 38.7600555 65 36 65 33.2399445 65 31 62.7737508 31 60.0244565 31 59.1190021 31.3467844 58.0921656 31.9641655 56.9340232 32.2995631 56.3048525 32.7101473 55.6484437 33.1796861 54.9749691 33.6332919 54.3243476 34.1174676 53.6921983 34.6016561 53.10158 34.7712608 52.8946943 34.929038 52.7074431 35.0711277 52.5428294 35.15766 52.4425801 35.2206674 52.3711296 35.2562755 52.3315138 35.6535774 51.8894954 36.3464226 51.8894954 36.7437245 52.3315138zM36 54.5519107C35.5964864 55.0518171 35.195729 55.5803261 34.8203139 56.118796 34.3932134 56.7314001 34.023642 57.322241 33.7290579 57.8748498 33.2523916 58.7690261 33 59.5163632 33 60.0244565 33 61.6664263 34.3417775 63 36 63 37.6582225 63 39 61.6664263 39 60.0244565 39 59.5163632 38.7476084 58.7690261 38.2709421 57.8748498 37.976358 57.322241 37.6067866 56.7314001 37.1796861 56.118796 36.804271 55.5803261 36.4035136 55.0518171 36 54.5519107zM46.7689077 64.6393597C46.4157991 65.0640158 45.7852963 65.1220164 45.3606403 64.7689077 44.9359842 64.4157991 44.8779836 63.7852963 45.2310923 63.3606403 46.4725781 61.8676027 48.1719894 61 50 61 51.8280106 61 53.5274219 61.8676027 54.7689077 63.3606403 55.1220164 63.7852963 55.0640158 64.4157991 54.6393597 64.7689077 54.2147037 65.1220164 53.5842009 65.0640158 53.2310923 64.6393597 52.3551115 63.5858865 51.2075101 63 50 63 48.7924899 63 47.6448885 63.5858865 46.7689077 64.6393597zM31.6548477 50.6380748C31.1365579 50.4473023 30.8710527 49.8724938 31.0618251 49.354204 31.2525976 48.8359142 31.8274061 48.5704089 32.3456959 48.7611814 33.0690593 49.0274375 33.9315066 49.1741653 34.8397707 49.1741653 36.2963854 49.1741653 37.6150802 48.7939106 38.3970449 48.2024862 38.8375304 47.8693331 39.4646884 47.9563433 39.7978414 48.3968288 40.1309945 48.8373143 40.0439843 49.4644723 39.6034988 49.7976254 38.4473267 50.6720747 36.7061137 51.1741653 34.8397707 51.1741653 33.7008257 51.1741653 32.6046233 50.9876688 31.6548477 50.6380748zM60.3970449 49.7976254C59.9565593 49.4644723 59.8695492 48.8373143 60.2027022 48.3968288 60.5358553 47.9563433 61.1630133 47.8693331 61.6034988 48.2024862 62.3854634 48.7939106 63.7041582 49.1741653 65.160773 49.1741653 66.0690371 49.1741653 66.9314843 49.0274375 67.6548477 48.7611814 68.1731375 48.5704089 68.7479461 48.8359142 68.9387185 49.354204 69.129491 49.8724938 68.8639857 50.4473023 68.3456959 50.6380748 67.3959204 50.9876688 66.2997179 51.1741653 65.160773 51.1741653 63.2944299 51.1741653 61.5532169 50.6720747 60.3970449 49.7976254z"></path>
+    </g>
+  </g>
+</svg>

package/src/assets/icons/databases.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currenColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 1.5C16 2.32843 14.6569 3 13 3C11.3431 3 10 2.32843 10 1.5C10 0.671573 11.3431 0 13 0C14.6569 0 16 0.671573 16 1.5ZM5 11.6V14.3C5 15.2 6.3 15.9 8 15.9C9.7 15.9 11 15.2 11 14.3V11.6C10.2 12.3 9.1 12.6 8 12.6C6.9 12.6 5.8 12.3 5 11.6ZM10 3V2.60001C10.8 3.30001 11.9 3.60001 13 3.60001C14.1 3.60001 15.2 3.30001 16 2.60001V5.40001C16 6.20001 14.8 6.90001 13.2 7.00001L10.7247 9.8714C10.9014 10.0626 11 10.2755 11 10.5C11 11.3284 9.65685 12 8 12C6.34315 12 5 11.3284 5 10.5C5 10.2947 5.08248 10.0991 5.23177 9.92086L2.8 7.10001C1.3 7.00001 0 6.30001 0 5.50001V2.60001C0.8 3.30001 1.9 3.60001 3 3.60001C4.1 3.60001 5.2 3.30001 6 2.60001V3.00001L10 3ZM9.72421 9.27234C9.23641 9.10075 8.64174 9 8 9C7.7351 9 7.47822 9.01717 7.23356 9.0494C6.84837 9.09762 6.45653 9.18116 6.1 9.3L4 6.9C5.1 6.7 6 6.1 6 5.4V4H10V5.4C10 6.1 10.7 6.7 11.8 6.9L9.72421 9.27234ZM6 1.5C6 2.32843 4.65685 3 3 3C1.34315 3 0 2.32843 0 1.5C0 0.671573 1.34315 0 3 0C4.65685 0 6 0.671573 6 1.5Z" />
+</svg>

package/src/assets/icons/decommission.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.3783 7.77147C11.0947 7.77147 11.6756 8.38548 11.6756 9.1429V10.0572C11.6756 10.8146 11.0947 11.4286 10.3783 11.4286H3.45934C2.74286 11.4286 2.16204 10.8146 2.16204 10.0572V9.1429C2.16204 8.38548 2.74286 7.77147 3.45934 7.77147H10.3783ZM11.148 6.52278L9.93505 3.95815C9.7153 3.49353 9.26609 3.20004 8.77471 3.20004H5.06289C4.57151 3.20004 4.1223 3.49353 3.90255 3.95815L2.68955 6.52278C2.93277 6.44301 3.19131 6.40004 3.45934 6.40004H10.3783C10.6463 6.40004 10.9048 6.44301 11.148 6.52278ZM12.9729 8.3935V9.1429V10.0572C12.9729 11.572 11.8112 12.8 10.3783 12.8H3.45934C2.02639 12.8 0.864746 11.572 0.864746 10.0572V9.1429V8.3935C0.864746 7.6838 1.02105 6.98386 1.32128 6.34909L2.74221 3.34483C3.18172 2.41559 4.08013 1.82861 5.06289 1.82861H8.77471C9.75747 1.82861 10.6559 2.41559 11.0954 3.34483L12.5163 6.34909C12.8166 6.98386 12.9729 7.6838 12.9729 8.3935ZM7.78366 8.91433C7.42543 8.91433 7.13502 9.22133 7.13502 9.60004C7.13502 9.97875 7.42543 10.2858 7.78366 10.2858H9.94583C10.3041 10.2858 10.5945 9.97875 10.5945 9.60004C10.5945 9.22133 10.3041 8.91433 9.94583 8.91433H7.78366Z" fill="currentColor" fill-opacity="0.85"/>
+    <path d="M15.2502 11.4284C15.2502 13.5787 13.6112 15.2498 11.6759 15.2498C9.74057 15.2498 8.10156 13.5787 8.10156 11.4284C8.10156 9.27803 9.74057 7.60693 11.6759 7.60693C13.6112 7.60693 15.2502 9.27803 15.2502 11.4284Z" fill="var(--g-color-base-background)" stroke="currentColor" stroke-width="1.5"/>
+    <path d="M11.6759 16.4998C14.3661 16.4998 16.5002 14.2027 16.5002 11.4284C16.5002 8.65403 14.3661 6.35693 11.6759 6.35693C8.98567 6.35693 6.85156 8.65403 6.85156 11.4284C6.85156 14.2027 8.98567 16.4998 11.6759 16.4998Z" stroke="var(--g-color-base-background)"/>
+    <path d="M12.973 10.0571L10.3784 12.8M10.3784 10.0571L12.973 12.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/disableFullscreen.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M13.3828 6.5C13.5352 6.5 13.6875 6.37305 13.6875 6.19531V5.17969C13.6875 5.02734 13.5352 4.875 13.3828 4.875H11.25V2.74219C11.25 2.58984 11.0977 2.4375 10.9453 2.4375H9.92969C9.75195 2.4375 9.625 2.58984 9.625 2.74219V5.89062C9.625 6.24609 9.87891 6.5 10.2344 6.5H13.3828ZM6.375 5.89062V2.74219C6.375 2.58984 6.22266 2.4375 6.07031 2.4375H5.05469C4.87695 2.4375 4.75 2.58984 4.75 2.74219V4.875H2.61719C2.43945 4.875 2.3125 5.02734 2.3125 5.17969V6.19531C2.3125 6.37305 2.43945 6.5 2.61719 6.5H5.76562C6.0957 6.5 6.375 6.24609 6.375 5.89062ZM6.375 13.5078V10.3594C6.375 10.0293 6.0957 9.75 5.76562 9.75H2.61719C2.43945 9.75 2.3125 9.90234 2.3125 10.0547V11.0703C2.3125 11.248 2.43945 11.375 2.61719 11.375H4.75V13.5078C4.75 13.6855 4.87695 13.8125 5.05469 13.8125H6.07031C6.22266 13.8125 6.375 13.6855 6.375 13.5078ZM11.25 13.5078V11.375H13.3828C13.5352 11.375 13.6875 11.248 13.6875 11.0703V10.0547C13.6875 9.90234 13.5352 9.75 13.3828 9.75H10.2344C9.87891 9.75 9.625 10.0293 9.625 10.3594V13.5078C9.625 13.6855 9.75195 13.8125 9.92969 13.8125H10.9453C11.0977 13.8125 11.25 13.6855 11.25 13.5078Z" />
+</svg>
+

package/src/assets/icons/emptyState.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 383 396" width="383" height="396" fill="none">
+    <path fillRule="evenodd" clipRule="evenodd" d="M307.333 168.43c9.4-14.2 14.1-32.6 14.1-55.3 0-34.4-11.7-61.9-35.3-82.2-23.4-20.5-63-30.7-106.7-30.7-13.1 0-24.1.9-34.8 2.7-10.7 1.8-20.1 3.9-28.2 6.3-5.4 1.6-16.1 5.7-23.3 8.6-4.1 1.7-6.9 6-6.9 10.8v39.5c0 8.2 7.8 13.8 14.9 10.5a458.74 458.74 0 0 0 1.806-.818c2.367-1.074 4.452-2.02 5.894-2.581 5.7-2.3 12.4-4.2 20.1-5.8 7.7-1.6 16.3-2.4 25.7-2.4 22.2 0 43.1 5 52.3 14.9 9.2 10 13.8 22.499 13.8 37.499 0 13-2.7 24.1-8.2 33.2-5.5 9.1-13.1 18-22.9 26.5-7.9 6.9-15.2 13.5-22 19.8-6.8 6.3-12.6 13.2-17.5 20.7s-8.7 16-11.3 25.3c-1.6 5.6-2.7 20.3-3.3 31-.3 6.6 4.5 12.2 10.7 12.2h51.2c5.4 0 10-4.4 10.6-10.2.6-5.7 2-12.5 5.5-17.8 4-5.9 8.7-11.8 14.7-17.3s13-11 20.9-16.7c8-5.6 16.2-12.1 24.9-19.4 12.8-11.4 23.9-24.1 33.3-38.3zm-167.6 212.7c9 9.5 20.1 14.2 33.4 14.2 6.3 0 12.4-1.3 18.2-4 5.8-2.6 10.9-6 15.2-10.3 4.3-4.3 7.7-9.4 10.2-15.2 2.5-5.8 3.7-12.1 3.7-19 0-6.8-1.2-13.2-3.7-19-2.5-5.8-5.9-10.9-10.2-15.4-4.3-4.5-9.4-7.9-15.2-10.3-5.8-2.4-11.9-3.6-18.2-3.6-13.3 0-24.4 4.6-33.4 13.9s-13.5 20.8-13.5 34.5c0 13.4 4.5 24.8 13.5 34.2z" fill="#ECF2F9" />
+    <path clipRule="evenodd" d="M213.933 353.03h-193.5c-10 0-18.2-8.2-18.2-18.2v-125.4c0-10 8.2-18.2 18.2-18.2h193.5c10 0 18.2 8.2 18.2 18.2v125.4c0 10.1-8.2 18.2-18.2 18.2z" stroke="#00E6C5" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4 10" />
+    <path d="M21.034 214.732a5.2 5.2 0 1 0 0-10.4 5.2 5.2 0 0 0 0 10.4zm16.899 0a5.2 5.2 0 1 0 0-10.4 5.2 5.2 0 0 0 0 10.4zm16.9 0a5.2 5.2 0 1 0 0-10.4 5.2 5.2 0 0 0 0 10.4z" fill="#2EE5C0" />
+    <path d="M2.533 228.129h228.9" stroke="#00E6C5" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4 10" />
+    <path d="M301.033 264.83l-216.9 12c-7.3.4-13.3-5.2-13.3-12.5V96.93c0-7.3 6-12.9 13.3-12.5l216.9 12c5.6.3 10.1 5.7 10.1 12v144.4c0 6.3-4.5 11.7-10.1 12z" fill="#027BF3" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M90.433 107.93c3.4.2 6.1-2.4 6.1-5.8s-2.7-6.3-6.1-6.4c-3.3-.2-6.1 2.4-6.1 5.8s2.7 6.3 6.1 6.4zm19.8.798c3.3.1 6-2.5 6-5.8s-2.7-6.1-6-6.3c-3.3-.1-6 2.5-6 5.8s2.7 6.2 6 6.3zm25.2-4.9c0 3.3-2.6 5.9-5.8 5.7-3.2-.1-5.9-2.9-5.9-6.2 0-3.3 2.6-5.9 5.9-5.7 3.2.1 5.8 2.9 5.8 6.2zm66.001 61.703l19.1-20.9 17.4 19.1-18.9 20.9 18.9 20.5-17.4 19.5-19.1-20.5-19.4 21.5-18.1-19.1 19.6-21.5-19.6-21 18.1-19.5 19.4 21z" fill="#fff" />
+    <path d="M327.433 112.83c0-28.4-21.7-37.1-33.5-37.9-.1 0-33.5 2.3-33.5 45.3 0 25.5 21.2 45.5 46 44.6 7.8-.3 14.9-2.6 21-6.4v-45.6z" fill="#67B0F8" />
+    <path d="M380.534 195.931c-2.9 3.4-7.6 3.7-10.5.8l-38.6-39 11.3-12.2 37.8 39c2.9 3 2.9 8 0 11.4z" fill="#FF4645" />
+    <path d="M342.833 145.629l-11.3 12.2 3.7 3.7c1.9 1.9 4.9 2 6.8.2 1.1-1 2.2-2.1 3.2-3.2.6-.7 1.3-1.4 1.9-2.1 1.6-1.9 1.5-4.8-.3-6.6l-4-4.2z" fill="#D93654" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M267.633 154.13c-23-21.401-23-57.3 0-78.1 21.9-19.8 55.1-17 74.4 4.3 18.4 20.399 18.4 51.7 0 71.6-19.3 20.8-52.5 22.6-74.4 2.2zm9.4-10.802c15.6 15 39.8 14.2 54.1-.9 13.8-14.6 13.8-37.8 0-52.8-14.3-15.5-38.5-17-54.1-2.5-16.2 15.1-16.2 40.7 0 56.2z" fill="#00236B" />
+    <path d="M41.034 42.73a2 2 0 1 0-4 0h4zm-4 8.3a2 2 0 0 0 4 0h-4zm4 17.2a2 2 0 1 0-4 0h4zm-4 8.9a2 2 0 0 0 4 0h-4zm19.2-15.2a2 2 0 0 0 0-4v4zm-8.2-4a2 2 0 1 0 0 4v-4zm-17.9 4a2 2 0 0 0 0-4v4zm-8.2-4a2 2 0 1 0 0 4v-4zm15.1-15.2v8.3h4v-8.3h-4zm0 25.5v8.9h4v-8.9h-4zm19.2-10.3h-8.2v4h8.2v-4zm-26.1 0h-8.2v4h8.2v-4z" fill="#2EE5C0" />
+</svg>

package/src/assets/icons/key.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 12 7"  fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 7H11V5H12V2H6.66C6.085 0.79 4.86 0 3.5 0C1.57 0 0 1.57 0 3.5C0 5.43 1.57 7 3.5 7C4.86 7 6.09 6.21 6.66 5H8V7ZM10 6H9V4H5.97L5.855 4.335C5.5 5.33 4.555 6 3.5 6C2.11929 6 1 4.88071 1 3.5C1 2.11929 2.11929 1 3.5 1C4.555 1 5.5 1.67 5.855 2.665L5.97 3H11V4H10V6ZM3.5 5C2.67157 5 2 4.32843 2 3.5C2 2.67157 2.67157 2 3.5 2C4.32843 2 5 2.67157 5 3.5C5 4.32843 4.32843 5 3.5 5ZM3 3.5C3 3.22386 3.22386 3 3.5 3C3.77614 3 4 3.22386 4 3.5C4 3.77614 3.77614 4 3.5 4C3.22386 4 3 3.77614 3 3.5Z" />
+</svg>
+
+

package/src/assets/icons/monium.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 2H0V14H16V13H1V2ZM12.5 7.5L9 2L5.5 7.5L2 4V12H16V4L12.5 7.5Z" />
+</svg>

package/src/assets/icons/network.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221 204">
+    <path d="M68.4597 2.52853V27.7564C68.4597 28.9827 69.3356 30.0339 70.562 30.2675C87.2054 33.2458 99.7025 48.0788 99.0601 65.715C98.4177 83.7599 83.7015 98.4177 65.715 99.1185C48.0788 99.7609 33.3042 87.2638 30.2675 70.6788C30.0339 69.4524 28.9827 68.5765 27.7564 68.5765H2.52853C1.01019 68.5765 -0.157769 69.8612 0.0174243 71.3212C3.4629 104.024 31.2603 129.427 64.9558 129.135C100.111 128.843 128.785 100.111 129.077 64.9558C129.369 31.2603 103.907 3.4629 71.2044 0.0174243C69.7444 -0.157769 68.4597 1.01019 68.4597 2.52853Z" fill="#EBF2FA" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M22.7358 18.3543L40.5472 36.1657C41.4231 37.0416 42.8247 37.1584 43.8758 36.3993C48.0221 33.3042 52.9275 31.2019 58.2417 30.2091C59.4681 29.9755 60.344 28.9827 60.344 27.698V2.52853C60.344 1.01019 59.0593 -0.157769 57.5409 0.0174243C44.4598 1.41897 32.4883 6.67478 22.911 14.6753C21.7431 15.6096 21.6847 17.3032 22.7358 18.3543ZM13.3334 24.4868C6.09205 33.8304 1.30343 45.1596 0.0186744 57.54C-0.156519 58.9999 1.06984 60.2846 2.52978 60.2846H27.6992C28.9256 60.2846 29.9768 59.4087 30.2103 58.1823C31.0279 53.5105 32.8382 49.1307 35.3494 45.3348C35.9917 44.342 35.8749 42.9989 35.0574 42.1229L17.1292 24.3116C16.0781 23.202 14.2677 23.3188 13.3334 24.4868ZM80.6078 131.879H113.603C115.471 131.879 116.99 133.397 117.048 135.324V200.555C117.048 202.482 115.471 204 113.603 204H80.6078C78.6807 204 77.1624 202.423 77.1624 200.555V135.324C77.1624 133.397 78.7391 131.879 80.6078 131.879ZM158.452 158.976H125.574C123.647 158.976 122.071 160.553 122.071 162.48V200.439C122.071 202.366 123.647 203.943 125.574 203.943H158.452C160.379 203.943 161.956 202.366 161.956 200.439V162.48C161.956 160.553 160.379 158.976 158.452 158.976ZM170.657 177.256H203.243C205.229 177.256 206.864 178.891 206.864 180.876V200.264C206.864 202.25 205.229 203.885 203.243 203.885H170.657C168.672 203.885 167.037 202.25 167.037 200.264V180.876C167.037 178.891 168.672 177.256 170.657 177.256Z" fill="#EBF2FA" />
+    <path d="M134.275 171.532H21.2749C15.4351 171.532 10.6465 166.743 10.6465 160.903V87.6726C10.6465 81.8328 15.4351 77.0442 21.2749 77.0442H134.216C140.056 77.0442 144.845 81.8328 144.845 87.6726V160.903C144.903 166.802 140.114 171.532 134.275 171.532V171.532Z" fillRule="evenodd" clipRule="evenodd" stroke="#2EE5C0" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M21.6246 90.7687C23.3017 90.7687 24.6613 89.4091 24.6613 87.732C24.6613 86.0549 23.3017 84.6953 21.6246 84.6953C19.9475 84.6953 18.5879 86.0549 18.5879 87.732C18.5879 89.4091 19.9475 90.7687 21.6246 90.7687Z" fill="#2EE5C0" />
+    <path d="M31.4937 90.7687C33.1708 90.7687 34.5304 89.4091 34.5304 87.732C34.5304 86.0549 33.1708 84.6953 31.4937 84.6953C29.8166 84.6953 28.457 86.0549 28.457 87.732C28.457 89.4091 29.8166 90.7687 31.4937 90.7687Z" fill="#2EE5C0" />
+    <path d="M41.3629 90.7687C43.04 90.7687 44.3995 89.4091 44.3995 87.732C44.3995 86.0549 43.04 84.6953 41.3629 84.6953C39.6857 84.6953 38.3262 86.0549 38.3262 87.732C38.3262 89.4091 39.6857 90.7687 41.3629 90.7687Z" fill="#2EE5C0" />
+    <path d="M10.8223 98.592H144.495" stroke="#2EE5C0" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M184.555 149.164L57.89 156.172C53.6269 156.406 50.123 153.135 50.123 148.872V51.1145C50.123 46.8514 53.6269 43.5812 57.89 43.8148L184.555 50.8225C187.825 50.9977 190.453 54.1512 190.453 57.8302V142.157C190.453 145.836 187.825 148.989 184.555 149.164Z" fill="#027BF3" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M65.1304 54.1512C65.1304 56.1368 63.5537 57.6551 61.5681 57.5383C59.5826 57.4799 58.0059 55.7864 58.0059 53.8009C58.0059 51.8153 59.641 50.297 61.5681 50.4138C63.4953 50.4722 65.1304 52.1657 65.1304 54.1512ZM76.6357 54.6174C76.6357 56.5445 75.059 58.0629 73.1319 58.0045C71.2047 57.9461 69.628 56.2525 69.628 54.3254C69.628 52.3983 71.2047 50.8799 73.1319 50.9383C75.059 51.0551 76.6357 52.6903 76.6357 54.6174ZM84.461 58.4718C86.3298 58.5886 87.8481 57.0702 87.8481 55.1431C87.8481 53.216 86.3298 51.5808 84.461 51.5224C82.5339 51.4056 81.0156 52.924 81.0156 54.8511C81.0156 56.7782 82.5923 58.4134 84.461 58.4718Z" fill="white" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M75.467 142.974V85.2772C71.496 84.7516 66.8826 84.8684 61.5684 85.9779V143.617L75.467 142.974ZM88.84 90.6509V142.45L77.7444 142.917V85.6871C82.0658 86.6214 85.6865 88.4318 88.84 90.6509ZM102.271 104.55C102.213 104.491 102.169 104.433 102.125 104.374C102.082 104.316 102.038 104.258 101.979 104.199C101.559 103.689 101.138 103.173 100.714 102.653L100.714 102.653C97.8391 99.1308 94.8401 95.4564 91.1759 92.4028V142.333L102.271 141.866V104.55ZM115.703 110.272C111.79 110.214 107.994 109.571 104.607 106.827V141.749L115.703 141.281V110.272ZM129.134 109.863C126.37 109.69 123.605 109.869 120.888 110.044L120.888 110.044L120.888 110.044C119.931 110.106 118.981 110.167 118.039 110.213V141.164L129.134 140.697V109.863ZM153.136 139.704L144.902 140.054V117.863C153.078 127.148 153.136 139.704 153.136 139.704ZM140.113 113.6C140.989 114.184 141.807 114.826 142.566 115.527V140.171L131.47 140.638V110.155C134.39 110.622 137.252 111.615 140.113 113.6Z" fill="#00236B" />
+    <path d="M55.7449 76.4361C55.0549 77.2986 55.1947 78.5572 56.0573 79.2472C56.9198 79.9372 58.1784 79.7974 58.8684 78.9349L55.7449 76.4361ZM61.5113 72.4297L63.0863 71.1971C62.7095 70.7157 62.1333 70.433 61.522 70.4297C60.9107 70.4264 60.3314 70.7029 59.9495 71.1803L61.5113 72.4297ZM64.1409 79.0349C64.8217 79.9048 66.0787 80.0581 66.9485 79.3773C67.8184 78.6965 67.9717 77.4395 67.2909 76.5697L64.1409 79.0349ZM172.081 132.537C171.218 131.847 169.96 131.987 169.27 132.849C168.58 133.712 168.719 134.97 169.582 135.66L172.081 132.537ZM176.087 138.303L177.301 139.893C177.79 139.52 178.08 138.942 178.087 138.326C178.094 137.711 177.817 137.126 177.337 136.742L176.087 138.303ZM169.443 140.86C168.565 141.53 168.396 142.785 169.067 143.663C169.737 144.541 170.992 144.71 171.87 144.039L169.443 140.86ZM58.8684 78.9349L63.073 73.6791L59.9495 71.1803L55.7449 76.4361L58.8684 78.9349ZM59.9363 73.6623L64.1409 79.0349L67.2909 76.5697L63.0863 71.1971L59.9363 73.6623ZM169.582 135.66L174.838 139.865L177.337 136.742L172.081 132.537L169.582 135.66ZM174.874 136.714L169.443 140.86L171.87 144.039L177.301 139.893L174.874 136.714Z" fill="white" />
+    <path d="M147.137 69.1464C146.033 69.1053 145.105 69.9668 145.064 71.0706C145.023 72.1744 145.884 73.1025 146.988 73.1436L147.137 69.1464ZM176.771 74.2532C177.875 74.2943 178.803 73.4328 178.844 72.329C178.885 71.2252 178.024 70.2971 176.92 70.256L176.771 74.2532ZM147.114 79.6573C146.01 79.6291 145.092 80.5015 145.064 81.6057C145.036 82.7099 145.908 83.6278 147.012 83.656L147.114 79.6573ZM176.795 84.4152C177.899 84.4433 178.817 83.571 178.846 82.4668C178.874 81.3626 178.001 80.4446 176.897 80.4165L176.795 84.4152ZM147.075 90.3435C145.97 90.337 145.07 91.2271 145.063 92.3317C145.057 93.4362 145.947 94.3369 147.052 94.3434L147.075 90.3435ZM176.834 94.5186C177.939 94.5251 178.84 93.635 178.846 92.5304C178.853 91.4258 177.962 90.5252 176.858 90.5187L176.834 94.5186ZM146.988 73.1436L176.771 74.2532L176.92 70.256L147.137 69.1464L146.988 73.1436ZM147.012 83.656L176.795 84.4152L176.897 80.4165L147.114 79.6573L147.012 83.656ZM147.052 94.3434L176.834 94.5186L176.858 90.5187L147.075 90.3435L147.052 94.3434Z" fill="white" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M143.442 71.2024C143.442 72.604 142.274 73.7135 140.872 73.6551C139.471 73.5967 138.303 72.3704 138.303 70.9688C138.303 69.5673 139.471 68.3993 140.872 68.5161C142.332 68.5745 143.442 69.8009 143.442 71.2024ZM143.443 81.5981C143.443 82.9996 142.275 84.1092 140.873 84.0508C139.472 83.9924 138.304 82.766 138.304 81.3645C138.304 79.9045 139.472 78.795 140.873 78.9118C142.333 78.9702 143.443 80.1965 143.443 81.5981ZM140.873 94.4457C142.275 94.5041 143.443 93.3945 143.443 91.993C143.443 90.5914 142.333 89.3651 140.873 89.3067C139.472 89.1899 138.304 90.3578 138.304 91.7594C138.304 93.1609 139.472 94.3873 140.873 94.4457Z" fill="white" />
+    <path opacity="0.2" d="M190.452 91.8753V57.771C190.452 54.0919 187.824 50.9385 184.553 50.7633L160.902 49.4785C159.793 52.8656 159.15 56.5447 159.15 60.4573C159.15 78.0934 171.94 92.2841 187.24 92.1089C188.291 92.1673 189.4 92.0505 190.452 91.8753Z" fill="#00236B" />
+    <path d="M220.645 58.8832C220.645 42.2982 209.024 28.1076 194.191 27.2316C178.891 26.3556 166.102 39.9039 166.102 57.5401C166.102 75.1762 178.891 89.3669 194.191 89.1917C209.024 89.0749 220.645 75.4682 220.645 58.8832Z" fill="#FF4645" />
+    <path d="M215.329 40.3719C210.541 32.897 202.949 27.758 194.189 27.2324V58.2417L215.329 40.3719Z" fill="#FFCC00" />
+    <path d="M215.329 40.3721L194.189 58.2418L220.644 58.8842C220.644 51.9932 218.658 45.5695 215.329 40.3721V40.3721Z" fill="#00236B" />
+    <path d="M194.248 58.2408V27.2316C178.947 26.3556 166.158 39.9039 166.158 57.5401L194.248 58.2408Z" fill="#FF4645" />
+    <path d="M161.151 14.7336C161.151 13.6291 160.256 12.7336 159.151 12.7336C158.047 12.7336 157.151 13.6291 157.151 14.7336H161.151ZM157.151 18.9383C157.151 20.0429 158.047 20.9383 159.151 20.9383C160.256 20.9383 161.151 20.0429 161.151 18.9383H157.151ZM161.151 27.8138C161.151 26.7093 160.256 25.8138 159.151 25.8138C158.047 25.8138 157.151 26.7093 157.151 27.8138H161.151ZM157.151 32.3689C157.151 33.4734 158.047 34.3689 159.151 34.3689C160.256 34.3689 161.151 33.4734 161.151 32.3689H157.151ZM167.97 25.5526C169.074 25.5526 169.97 24.6572 169.97 23.5526C169.97 22.4481 169.074 21.5526 167.97 21.5526V25.5526ZM163.707 21.5526C162.602 21.5526 161.707 22.4481 161.707 23.5526C161.707 24.6572 162.602 25.5526 163.707 25.5526V21.5526ZM154.538 25.5526C155.643 25.5526 156.538 24.6572 156.538 23.5526C156.538 22.4481 155.643 21.5526 154.538 21.5526V25.5526ZM150.275 21.5526C149.171 21.5526 148.275 22.4481 148.275 23.5526C148.275 24.6572 149.171 25.5526 150.275 25.5526V21.5526ZM157.151 14.7336V18.9383H161.151V14.7336H157.151ZM157.151 27.8138V32.3689H161.151V27.8138H157.151ZM167.97 21.5526H163.707V25.5526H167.97V21.5526ZM154.538 21.5526H150.275V25.5526H154.538V21.5526Z" fill="#2EE5C0" />
+</svg>

package/src/assets/icons/overview.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 15" ><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9801 1.82618C15.2983 1.56101 15.3413 1.08809 15.0762 0.769881C14.811 0.451673 14.3381 0.40868 14.0199 0.673853L10.3757 3.71062C10.0432 3.98775 9.59091 4.07309 9.18023 3.93619L7.02502 3.21779C5.95599 2.86145 4.77774 3.19335 4.05189 4.0553L0.926317 7.76692C0.659507 8.08375 0.700062 8.55689 1.0169 8.8237C1.33373 9.09051 1.80687 9.04996 2.07368 8.73312L5.19926 5.0215C5.52919 4.62971 6.06476 4.47884 6.55068 4.64082L8.70589 5.35922C9.60939 5.66039 10.6044 5.47264 11.336 4.86295L14.9801 1.82618ZM13.5 8.00002H11.5C11.2239 8.00002 11 8.22388 11 8.50002V10.5V13C11 13.2762 11.2239 13.5 11.5 13.5H13H13.5C13.7761 13.5 14 13.2762 14 13V8.50002C14 8.22388 13.7761 8.00002 13.5 8.00002ZM9.5 13C9.5 13.2762 9.27614 13.5 9 13.5H7C6.72386 13.5 6.5 13.2762 6.5 13V12.5V10.5C6.5 10.2239 6.72386 10 7 10H9C9.27614 10 9.5 10.2239 9.5 10.5V13ZM5 13C5 13.2762 4.77614 13.5 4.5 13.5H3.5H2.5C2.22386 13.5 2 13.2762 2 13V12.5C2 12.2239 2.22386 12 2.5 12H4.5C4.77614 12 5 12.2239 5 12.5V13ZM2.5 15H3.5H4.5H7H9H11.5H13H13.5C14.6046 15 15.5 14.1046 15.5 13V8.50002C15.5 7.39545 14.6046 6.50002 13.5 6.50002H11.5C10.3954 6.50002 9.5 7.39545 9.5 8.50002V8.56303C9.34019 8.5219 9.17265 8.50002 9 8.50002H7C5.89543 8.50002 5 9.39545 5 10.5V10.563C4.84019 10.5219 4.67265 10.5 4.5 10.5H2.5C1.39543 10.5 0.5 11.3954 0.5 12.5V13C0.5 14.1046 1.39543 15 2.5 15Z" fill="currentColor" /></svg>

package/src/assets/icons/sso-user.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="36 25 43 43" fill="none">
+  <path d="M78 46C78 57.598 68.598 67 57 67C45.402 67 36 57.598 36 46C36 34.402 45.402 25 57 25C68.598 25 78 34.402 78 46Z" fill="var(--g-color-base-background)"/>
+  <path d="M57 25.5C68.3218 25.5 77.5 34.6782 77.5 46C77.5 57.3218 68.3218 66.5 57 66.5C45.6782 66.5 36.5 57.3218 36.5 46C36.5 34.6782 45.6782 25.5 57 25.5Z" fill="url(#sso-user-image)" stroke="var(--g-color-line-generic)"/>
+  <rect x="63" y="52" width="16" height="16" rx="8" fill="var(--g-color-base-background)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M67.036 58.714C67.2922 58.4578 67.7078 58.4578 67.964 58.714C68.2203 58.9703 68.2203 59.3858 67.964 59.6421L67.3279 60.2783C66.8778 60.7283 66.625 61.3387 66.625 61.9752C66.625 63.3006 67.6994 64.375 69.0248 64.375C69.6613 64.375 70.2717 64.1222 70.7217 63.6721L71.3579 63.036C71.6142 62.7797 72.0297 62.7797 72.286 63.036C72.5422 63.2922 72.5422 63.7078 72.286 63.964L71.6498 64.6002C70.9536 65.2964 70.0094 65.6875 69.0248 65.6875C66.9746 65.6875 65.3125 64.0254 65.3125 61.9752C65.3125 60.9906 65.7036 60.0464 66.3998 59.3502L67.036 58.714ZM74.036 60.3579C73.7797 60.6142 73.7797 61.0297 74.036 61.286C74.2922 61.5422 74.7078 61.5422 74.964 61.286L75.6002 60.6498C76.2964 59.9536 76.6875 59.0094 76.6875 58.0248C76.6875 55.9746 75.0254 54.3125 72.9752 54.3125C71.9906 54.3125 71.0464 54.7036 70.3502 55.3998L69.714 56.036C69.4578 56.2922 69.4578 56.7078 69.714 56.964C69.9703 57.2203 70.3858 57.2203 70.6421 56.964L71.2783 56.3279C71.7283 55.8778 72.3387 55.625 72.9752 55.625C74.3006 55.625 75.375 56.6994 75.375 58.0248C75.375 58.6613 75.1222 59.2717 74.6721 59.7217L74.036 60.3579ZM73.214 58.714C73.4703 58.4578 73.4703 58.0422 73.214 57.786C72.9578 57.5297 72.5422 57.5297 72.286 57.786L68.786 61.286C68.5297 61.5422 68.5297 61.9578 68.786 62.214C69.0422 62.4703 69.4578 62.4703 69.714 62.214L73.214 58.714Z" fill="currentColor"/>
+  <defs>
+    <pattern id="sso-user-image" patternContentUnits="objectBoundingBox" width="1" height="1">
+      <use xlink:href="#sso-user-image-data" transform="scale(0.01)"/>
+    </pattern>
+    <image id="sso-user-image-data" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,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"/>
+  </defs>
+</svg>

package/src/assets/icons/user-secret.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M560 448H512V113.5c0-27.25-21.5-49.5-48-49.5L352 64.01V128h96V512h112c8.875 0 16-7.125 16-15.1v-31.1C576 455.1 568.9 448 560 448zM280.3 1.007l-192 49.75C73.1 54.51 64 67.76 64 82.88V448H16c-8.875 0-16 7.125-16 15.1v31.1C0 504.9 7.125 512 16 512H320V33.13C320 11.63 300.5-4.243 280.3 1.007zM232 288c-13.25 0-24-14.37-24-31.1c0-17.62 10.75-31.1 24-31.1S256 238.4 256 256C256 273.6 245.3 288 232 288z"/></svg>

package/src/assets/icons/ydb.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16C0 7.16344 7.16344 0 16 0V0C24.8366 0 32 7.16344 32 16V16C32 24.8366 24.8366 32 16 32V32C7.16344 32 0 24.8366 0 16V16Z" fill="#5282FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 9.5C24 10.3284 22.6569 11 21 11C19.3431 11 18 10.3284 18 9.5C18 8.67157 19.3431 8 21 8C22.6569 8 24 8.67157 24 9.5ZM13 19.6V22.3C13 23.2 14.3 23.9 16 23.9C17.7 23.9 19 23.2 19 22.3V19.6C18.2 20.3 17.1 20.6 16 20.6C14.9 20.6 13.8 20.3 13 19.6ZM18 11V10.6C18.8 11.3 19.9 11.6 21 11.6C22.1 11.6 23.2 11.3 24 10.6V13.4C24 14.2 22.8 14.9 21.2 15L18.7247 17.8714C18.9014 18.0626 19 18.2755 19 18.5C19 19.3284 17.6569 20 16 20C14.3431 20 13 19.3284 13 18.5C13 18.2947 13.0825 18.0991 13.2318 17.9209L10.8 15.1C9.3 15 8 14.3 8 13.5V10.6C8.8 11.3 9.9 11.6 11 11.6C12.1 11.6 13.2 11.3 14 10.6V11L18 11ZM17.7242 17.2723C17.2364 17.1007 16.6417 17 16 17C15.7351 17 15.4782 17.0172 15.2336 17.0494C14.8484 17.0976 14.4565 17.1812 14.1 17.3L12 14.9C13.1 14.7 14 14.1 14 13.4V12H18V13.4C18 14.1 18.7 14.7 19.8 14.9L17.7242 17.2723ZM14 9.5C14 10.3284 12.6569 11 11 11C9.34315 11 8 10.3284 8 9.5C8 8.67157 9.34315 8 11 8C12.6569 8 14 8.67157 14 9.5Z" fill="white"/>
+</svg>

package/src/components/AsyncReplicationState/AsyncReplicationState.tsx

@@ -0,0 +1,28 @@
+import {Label} from '@gravity-ui/uikit';
+
+import type {TReplicationState} from '../../types/api/schema/replication';
+
+interface AsyncReplicationStateProps {
+    state?: TReplicationState;
+}
+
+export function AsyncReplicationState({state}: AsyncReplicationStateProps) {
+    if (!state) {
+        return null;
+    }
+
+    if ('StandBy' in state) {
+        return <Label theme="info">Standby</Label>;
+    }
+    if ('Paused' in state) {
+        return <Label theme="info">Paused</Label>;
+    }
+    if ('Done' in state) {
+        return <Label theme="success">Done</Label>;
+    }
+    if ('Error' in state) {
+        return <Label theme="danger">Error</Label>;
+    }
+
+    return <Label size="s">Unknown</Label>;
+}

package/src/components/AsyncReplicationState/index.ts

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

package/src/components/AutoRefreshControl/AutoRefreshControl.scss

@@ -0,0 +1,5 @@
+.auto-refresh-control {
+    display: flex;
+    align-items: center;
+    gap: var(--g-spacing-1);
+}

package/src/components/AutoRefreshControl/AutoRefreshControl.tsx

@@ -0,0 +1,52 @@
+import {ArrowsRotateLeft} from '@gravity-ui/icons';
+import {Button, Select} from '@gravity-ui/uikit';
+
+import {api} from '../../store/reducers/api';
+import {cn} from '../../utils/cn';
+import {useAutoRefreshInterval, useTypedDispatch} from '../../utils/hooks';
+
+import i18n from './i18n';
+
+import './AutoRefreshControl.scss';
+
+const b = cn('auto-refresh-control');
+
+interface AutoRefreshControlProps {
+    className?: string;
+    onManualRefresh?: () => void;
+}
+
+export function AutoRefreshControl({className, onManualRefresh}: AutoRefreshControlProps) {
+    const dispatch = useTypedDispatch();
+    const [autoRefreshInterval, setAutoRefreshInterval] = useAutoRefreshInterval();
+    return (
+        <div className={b(null, className)}>
+            <Button
+                view="flat-secondary"
+                onClick={() => {
+                    dispatch(api.util.invalidateTags(['All']));
+                    onManualRefresh?.();
+                }}
+                aria-label={i18n('Refresh')}
+            >
+                <Button.Icon>
+                    <ArrowsRotateLeft />
+                </Button.Icon>
+            </Button>
+            <Select
+                value={[String(autoRefreshInterval)]}
+                onUpdate={(v) => {
+                    setAutoRefreshInterval(Number(v));
+                }}
+                width={85}
+                qa="ydb-autorefresh-select"
+            >
+                <Select.Option value="0">{i18n('None')}</Select.Option>
+                <Select.Option value="15000">{i18n('15 sec')}</Select.Option>
+                <Select.Option value="60000">{i18n('1 min')}</Select.Option>
+                <Select.Option value="120000">{i18n('2 min')}</Select.Option>
+                <Select.Option value="300000">{i18n('5 min')}</Select.Option>
+            </Select>
+        </div>
+    );
+}

package/src/components/AutoRefreshControl/i18n/en.json

@@ -0,0 +1,8 @@
+{
+  "None": "None",
+  "15 sec": "15 sec",
+  "1 min": "1 min",
+  "2 min": "2 min",
+  "5 min": "5 min",
+  "Refresh": "Refresh"
+}

package/src/components/AutoRefreshControl/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-diagnostics-autorefresh-control';
+
+export default registerKeysets(COMPONENT, {en});

package/src/components/ButtonWithConfirmDialog/ButtonWithConfirmDialog.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+
+import {Button, Popover} from '@gravity-ui/uikit';
+import type {ButtonProps, PopoverProps} from '@gravity-ui/uikit';
+
+import {CriticalActionDialog} from '../CriticalActionDialog/CriticalActionDialog';
+import {isErrorWithRetry} from '../CriticalActionDialog/utils';
+
+interface ButtonWithConfirmDialogProps<T, K> {
+    children: React.ReactNode;
+    onConfirmAction: (isRetry?: boolean) => Promise<T>;
+    onConfirmActionSuccess?: (() => Promise<K>) | VoidFunction;
+    dialogHeader: string;
+    dialogText?: string;
+    dialogWarning?: string;
+    retryButtonText?: string;
+    applyButtonText?: string;
+    buttonDisabled?: ButtonProps['disabled'];
+    buttonView?: ButtonProps['view'];
+    applyButtonView?: ButtonProps['view'];
+    buttonWidth?: ButtonProps['width'];
+    buttonClassName?: ButtonProps['className'];
+    withPopover?: boolean;
+    popoverContent?: PopoverProps['content'];
+    popoverPlacement?: PopoverProps['placement'];
+    popoverDisabled?: PopoverProps['disabled'];
+}
+
+export function ButtonWithConfirmDialog<T, K>({
+    children,
+    onConfirmAction,
+    onConfirmActionSuccess,
+    dialogHeader,
+    dialogText,
+    dialogWarning,
+    applyButtonText,
+    retryButtonText,
+    buttonDisabled = false,
+    buttonView = 'action',
+    buttonWidth,
+    buttonClassName,
+    withPopover = false,
+    popoverContent,
+    popoverPlacement = 'right',
+    popoverDisabled = true,
+    applyButtonView,
+}: ButtonWithConfirmDialogProps<T, K>) {
+    const [isConfirmDialogVisible, setIsConfirmDialogVisible] = React.useState(false);
+    const [buttonLoading, setButtonLoading] = React.useState(false);
+    const [withRetry, setWithRetry] = React.useState(false);
+
+    const handleConfirmAction = async (isRetry?: boolean) => {
+        setButtonLoading(true);
+        await onConfirmAction(isRetry);
+    };
+
+    const handleConfirmActionSuccess = async () => {
+        setWithRetry(false);
+
+        try {
+            await onConfirmActionSuccess?.();
+        } finally {
+            setButtonLoading(false);
+        }
+    };
+
+    const handleConfirmActionError = (error: unknown) => {
+        setWithRetry(isErrorWithRetry(error));
+        setButtonLoading(false);
+    };
+
+    const renderButton = () => {
+        return (
+            <Button
+                onClick={() => setIsConfirmDialogVisible(true)}
+                view={buttonView}
+                width={buttonWidth}
+                disabled={buttonDisabled}
+                loading={!buttonDisabled && buttonLoading}
+                className={buttonClassName}
+            >
+                {children}
+            </Button>
+        );
+    };
+
+    // keep <span>: if button is disabled, popover won't open without this wrapper
+    const renderContent = () => {
+        if (withPopover) {
+            return (
+                <Popover
+                    content={popoverContent}
+                    placement={popoverPlacement}
+                    disabled={popoverDisabled}
+                >
+                    <span>{renderButton()}</span>
+                </Popover>
+            );
+        }
+
+        return renderButton();
+    };
+
+    return (
+        <React.Fragment>
+            <CriticalActionDialog
+                visible={isConfirmDialogVisible}
+                header={dialogHeader}
+                description={dialogText}
+                warningText={dialogWarning}
+                applyButtonText={applyButtonText}
+                withRetry={withRetry}
+                retryButtonText={retryButtonText}
+                onConfirm={handleConfirmAction}
+                applyButtonView={applyButtonView}
+                onConfirmActionSuccess={handleConfirmActionSuccess}
+                onConfirmActionError={handleConfirmActionError}
+                onClose={() => {
+                    setIsConfirmDialogVisible(false);
+                }}
+            />
+            {renderContent()}
+        </React.Fragment>
+    );
+}

package/src/components/CellWithPopover/CellWithPopover.scss

@@ -0,0 +1,37 @@
+.ydb-cell-with-popover {
+    display: inline-flex;
+
+    max-width: 100%;
+
+    &_full-width {
+        display: flex;
+    }
+
+    &__popover {
+        display: inline-block;
+
+        max-width: 100%;
+        padding: var(--g-spacing-4);
+
+        vertical-align: middle;
+
+        .g-popover__handler {
+            display: inline;
+        }
+
+        &_full-width {
+            width: 100%;
+        }
+    }
+    &__children-wrapper {
+        overflow: hidden;
+
+        cursor: pointer;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        &_full-width {
+            width: 100%;
+        }
+    }
+}

package/src/components/CellWithPopover/CellWithPopover.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import {Popover} from '@gravity-ui/uikit';
+import type {PopoverProps} from '@gravity-ui/uikit';
+
+import {cn} from '../../utils/cn';
+
+import './CellWithPopover.scss';
+
+const b = cn('ydb-cell-with-popover');
+
+interface CellWithPopoverProps extends Omit<PopoverProps, 'children'> {
+    wrapperClassName?: string;
+    fullWidth?: boolean;
+    children: React.ReactNode;
+}
+
+const DELAY_TIMEOUT = 100;
+
+export function CellWithPopover({
+    children,
+    className,
+    wrapperClassName,
+    fullWidth,
+    ...props
+}: CellWithPopoverProps) {
+    return (
+        <div className={b({'full-width': fullWidth}, wrapperClassName)}>
+            <Popover
+                openDelay={DELAY_TIMEOUT}
+                closeDelay={DELAY_TIMEOUT}
+                className={b('popover', {'full-width': fullWidth})}
+                {...props}
+            >
+                <div className={b('children-wrapper', {'full-width': fullWidth}, className)}>
+                    {children}
+                </div>
+            </Popover>
+        </div>
+    );
+}

package/src/components/CircularProgressBar/CircularProgressBar.scss

@@ -0,0 +1,42 @@
+.ydb-circular-progress-bar {
+    display: block;
+
+    max-width: 100%;
+
+    transform: rotate(90deg);
+
+    &__wrapper {
+        position: relative;
+    }
+    &__content {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+
+        overflow: hidden;
+
+        max-width: 100%;
+
+        transform: translate(-50%, -50%);
+    }
+
+    &__circle-bg {
+        stroke: var(--g-color-base-simple-hover);
+
+        fill: none;
+    }
+
+    &__circle {
+        fill: none;
+
+        &_status_good {
+            stroke: var(--ydb-color-status-green);
+        }
+        &_status_warning {
+            stroke: var(--ydb-color-status-yellow);
+        }
+        &_status_danger {
+            stroke: var(--ydb-color-status-red);
+        }
+    }
+}

package/src/components/CircularProgressBar/CircularProgressBar.tsx

@@ -0,0 +1,57 @@
+import type {MetricStatus} from '../../store/reducers/tenants/types';
+import {normalizeProgress} from '../../store/reducers/tenants/utils';
+import {cn} from '../../utils/cn';
+
+import './CircularProgressBar.scss';
+
+const b = cn('ydb-circular-progress-bar');
+
+interface CircularProgressBarProps {
+    size?: number;
+    progress?: number;
+    strokeWidth?: number;
+    content?: React.ReactNode;
+    status?: MetricStatus;
+    circleBgClassName?: string;
+}
+
+export function CircularProgressBar({
+    size = 100,
+    progress = 0,
+    strokeWidth = 10,
+    content,
+    status,
+    circleBgClassName,
+}: CircularProgressBarProps) {
+    const center = size / 2;
+
+    const radius = size / 2 - strokeWidth / 2;
+    const circumference = 2 * Math.PI * radius;
+
+    const normalizedProgress = normalizeProgress(progress);
+
+    const offset = ((100 - normalizedProgress) / 100) * circumference;
+    return (
+        <div className={b('wrapper')}>
+            {content && <div className={b('content')}>{content}</div>}
+            <svg className={b()} width={size} height={size}>
+                <circle
+                    className={b('circle-bg', circleBgClassName)}
+                    cx={center}
+                    cy={center}
+                    r={radius}
+                    strokeWidth={strokeWidth}
+                />
+                <circle
+                    className={b('circle', {status: status?.toLocaleLowerCase()})}
+                    cx={center}
+                    cy={center}
+                    r={radius}
+                    strokeWidth={strokeWidth}
+                    strokeDasharray={circumference}
+                    strokeDashoffset={offset}
+                />
+            </svg>
+        </div>
+    );
+}