NuKVM/xen-orchestra
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(lite): infinite loader when no stats on pool dashboard (#7236)

Browse Source
This commit is contained in:
OlivierFL 2023-12-21 11:27:06 +01:00 committed by GitHub
parent b7b7af8cff
commit 2c298ef47a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 214 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
@xen-orchestra/lite/CHANGELOG.md
View File

@ -7,6 +7,7 @@
- Added tooltip on CPU provisioning warning icon (PR [#7223](https://github.com/vatesfr/xen-orchestra/pull/7223)) - Added tooltip on CPU provisioning warning icon (PR [#7223](https://github.com/vatesfr/xen-orchestra/pull/7223))
- Add indeterminate state on FormToggle component (PR [#7230](https://github.com/vatesfr/xen-orchestra/pull/7230)) - Add indeterminate state on FormToggle component (PR [#7230](https://github.com/vatesfr/xen-orchestra/pull/7230))
- Add new UiStatusPanel component (PR [#7227](https://github.com/vatesfr/xen-orchestra/pull/7227)) - Add new UiStatusPanel component (PR [#7227](https://github.com/vatesfr/xen-orchestra/pull/7227))
- Fix infinite loader when no stats on pool dashboard (PR [#7236](https://github.com/vatesfr/xen-orchestra/pull/7236))
## **0.1.6** (2023-11-30) ## **0.1.6** (2023-11-30)

51
@xen-orchestra/lite/src/assets/no-result.svg Normal file
View File

@ -0,0 +1,51 @@
<svg width="214" height="166" viewBox="0 0 214 166" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_location_search_re_ttoj 1" clip-path="url(#clip0_2650_135967)">
<path id="Vector" d="M121.852 81.1686C126.667 81.1686 130.571 77.2695 130.571 72.4598C130.571 67.65 126.667 63.751 121.852 63.751C117.036 63.751 113.133 67.65 113.133 72.4598C113.133 77.2695 117.036 81.1686 121.852 81.1686Z" fill="#E6E6E6"/>
<path id="Vector_2" d="M143.221 83.6511L134.11 74.5502C134.808 73.4652 135.282 72.2511 135.502 70.98C135.722 69.7089 135.684 68.4066 135.391 67.1503C135.098 65.894 134.556 64.7092 133.796 63.6661C133.036 62.623 132.074 61.7428 130.968 61.0778C128.884 59.8344 126.409 59.4181 124.032 59.9112C121.655 60.4042 119.551 61.7708 118.135 63.7402C116.833 65.5645 116.207 67.785 116.366 70.0201C116.525 72.2552 117.458 74.3651 119.006 75.9872C120.554 77.6093 122.619 78.6422 124.846 78.9083C127.074 79.1744 129.324 78.6571 131.211 77.4453L140.323 86.5462C140.707 86.9298 141.229 87.1451 141.772 87.145C142.315 87.1448 142.836 86.9292 143.221 86.5454C143.605 86.1616 143.821 85.6411 143.821 85.0984C143.821 84.5557 143.605 84.0351 143.221 83.6511ZM130.871 74.2105C129.742 75.3382 128.257 76.04 126.668 76.1963C125.079 76.3527 123.485 75.9539 122.157 75.0679C120.83 74.1819 119.851 72.8635 119.387 71.3374C118.924 69.8113 119.004 68.1719 119.615 66.6985C120.226 65.2252 121.33 64.009 122.738 63.2572C124.146 62.5054 125.772 62.2646 127.338 62.5757C128.904 62.8868 130.313 63.7306 131.326 64.9634C132.339 66.1962 132.892 67.7416 132.892 69.3364C132.894 70.2418 132.716 71.1385 132.369 71.9749C132.022 72.8114 131.513 73.5711 130.871 74.2105Z" fill="#3F3D56"/>
<path id="Vector_3" d="M209.27 97.0758C232.572 122.815 165.024 159.908 110.444 159.908C55.8631 159.908 18.1019 131.167 11.6168 97.0758C-4.10723 14.4151 145.59 -38.1235 110.444 34.2431C59.2141 139.726 190.92 76.8058 209.27 97.0758Z" fill="#E6E6E6"/>
<path id="Vector_4" d="M198.815 103.168C222.117 128.907 154.569 166 99.9884 166C45.408 166 7.64682 137.259 1.16175 103.168C-14.5623 20.5069 135.135 -32.0317 99.9884 40.3349C48.759 145.818 180.464 82.8976 198.815 103.168Z" fill="#3F3D56"/>
<path id="Vector_5" d="M32.5842 42.8207C16.2334 42.1016 3.55577 38.5788 3.72233 34.8006C3.82218 32.5354 8.44961 30.7139 16.418 29.8033C16.4465 29.7999 16.4755 29.8021 16.5031 29.8099C16.5308 29.8176 16.5566 29.8308 16.5792 29.8485C16.6017 29.8663 16.6205 29.8884 16.6345 29.9134C16.6485 29.9385 16.6574 29.9661 16.6606 29.9946C16.6639 30.0231 16.6615 30.052 16.6535 30.0795C16.6456 30.1071 16.6322 30.1328 16.6143 30.1552C16.5964 30.1776 16.5741 30.1963 16.549 30.2101C16.5238 30.2239 16.4961 30.2326 16.4675 30.2356C8.96128 31.0935 4.24436 32.85 4.15753 34.8197C4.00691 38.2363 17.0335 41.7013 32.6034 42.386C48.1732 43.0707 61.4543 40.7628 61.6049 37.3462C61.6921 35.3682 57.1186 33.1983 49.6692 31.6835C49.6411 31.6778 49.6143 31.6667 49.5905 31.6508C49.5668 31.6348 49.5464 31.6143 49.5305 31.5904C49.5147 31.5666 49.5037 31.5399 49.4982 31.5118C49.4927 31.4837 49.4928 31.4548 49.4985 31.4267C49.5043 31.3987 49.5155 31.372 49.5315 31.3483C49.5476 31.3246 49.5681 31.3043 49.5921 31.2885C49.616 31.2727 49.6428 31.2618 49.6709 31.2565C49.6991 31.2511 49.728 31.2513 49.7561 31.2571C57.663 32.8649 62.1404 35.0913 62.0401 37.3653C61.8736 41.1435 48.935 43.5398 32.5842 42.8207Z" fill="#8F84FF"/>
<path id="Vector_6" d="M18.0625 43.4541C19.4303 46.0495 21.4566 48.2406 23.9385 49.8081C26.4204 51.3757 29.2709 52.2648 32.2048 52.3864C35.1388 52.5081 38.0533 51.858 40.6567 50.5012C43.2601 49.1445 45.4612 47.1286 47.0396 44.6554C37.3658 44.7856 27.6922 44.3846 18.0625 43.4541Z" fill="#8F84FF"/>
<path id="Vector_7" d="M48.8472 40.0787C49.6704 37.6124 49.9076 34.9886 49.5401 32.4149C49.1725 29.8413 48.2102 27.3884 46.7294 25.2504C45.2486 23.1124 43.29 21.348 41.0084 20.0968C38.7269 18.8457 36.1851 18.1421 33.5842 18.0418C30.9834 17.9415 28.3949 18.4472 26.0235 19.5188C23.6522 20.5905 21.5631 22.1988 19.9216 24.2164C18.2802 26.2339 17.1314 28.6054 16.5662 31.1431C16.001 33.6808 16.0349 36.3151 16.6653 38.8374C27.2937 40.6395 38.1113 41.0568 48.8472 40.0787Z" fill="#8F84FF"/>
<path id="Vector_8" d="M36.7748 28.8487C37.8574 28.8487 38.7351 27.972 38.7351 26.8906C38.7351 25.8093 37.8574 24.9326 36.7748 24.9326C35.6921 24.9326 34.8145 25.8093 34.8145 26.8906C34.8145 27.972 35.6921 28.8487 36.7748 28.8487Z" fill="white"/>
<path id="Vector_9" d="M26.6852 36.4613C28.4896 36.4613 29.9524 35.0003 29.9524 33.1979C29.9524 31.3956 28.4896 29.9346 26.6852 29.9346C24.8808 29.9346 23.418 31.3956 23.418 33.1979C23.418 35.0003 24.8808 36.4613 26.6852 36.4613Z" fill="white"/>
<path id="Vector_10" d="M75.9965 33.2641C77.1994 33.2641 78.1745 32.2901 78.1745 31.0886C78.1745 29.8871 77.1994 28.9131 75.9965 28.9131C74.7935 28.9131 73.8184 29.8871 73.8184 31.0886C73.8184 32.2901 74.7935 33.2641 75.9965 33.2641Z" fill="#8F84FF"/>
<path id="Vector_11" d="M26.7698 99.8373C27.4916 99.8373 28.0767 99.2529 28.0767 98.5319C28.0767 97.811 27.4916 97.2266 26.7698 97.2266C26.048 97.2266 25.4629 97.811 25.4629 98.5319C25.4629 99.2529 26.048 99.8373 26.7698 99.8373Z" fill="#E6E6E6"/>
<path id="Vector_12" d="M118.252 144.654C118.974 144.654 119.559 144.069 119.559 143.348C119.559 142.627 118.974 142.043 118.252 142.043C117.53 142.043 116.945 142.627 116.945 143.348C116.945 144.069 117.53 144.654 118.252 144.654Z" fill="#E6E6E6"/>
<path id="Vector_13" d="M33.087 74.6003C33.4479 74.6003 33.7405 74.3081 33.7405 73.9476C33.7405 73.5871 33.4479 73.2949 33.087 73.2949C32.7262 73.2949 32.4336 73.5871 32.4336 73.9476C32.4336 74.3081 32.7262 74.6003 33.087 74.6003Z" fill="#E6E6E6"/>
<path id="Vector_14" d="M87.1046 123.334C87.4655 123.334 87.7581 123.041 87.7581 122.681C87.7581 122.321 87.4655 122.028 87.1046 122.028C86.7437 122.028 86.4512 122.321 86.4512 122.681C86.4512 123.041 86.7437 123.334 87.1046 123.334Z" fill="#E6E6E6"/>
<path id="Vector_15" d="M185.339 117.024C185.7 117.024 185.992 116.732 185.992 116.371C185.992 116.011 185.7 115.719 185.339 115.719C184.978 115.719 184.686 116.011 184.686 116.371C184.686 116.732 184.978 117.024 185.339 117.024Z" fill="#E6E6E6"/>
<path id="Vector_16" d="M154.628 136.386C154.989 136.386 155.282 136.094 155.282 135.734C155.282 135.373 154.989 135.081 154.628 135.081C154.267 135.081 153.975 135.373 153.975 135.734C153.975 136.094 154.267 136.386 154.628 136.386Z" fill="#E6E6E6"/>
<path id="Vector_17" d="M122.609 112.89C122.969 112.89 123.262 112.598 123.262 112.238C123.262 111.877 122.969 111.585 122.609 111.585C122.248 111.585 121.955 111.877 121.955 112.238C121.955 112.598 122.248 112.89 122.609 112.89Z" fill="#E6E6E6"/>
<path id="Vector_18" d="M81.2238 48.4929C81.5847 48.4929 81.8772 48.2007 81.8772 47.8402C81.8772 47.4797 81.5847 47.1875 81.2238 47.1875C80.8629 47.1875 80.5703 47.4797 80.5703 47.8402C80.5703 48.2007 80.8629 48.4929 81.2238 48.4929Z" fill="#E6E6E6"/>
<path id="Vector_19" d="M86.4523 16.2946C86.8132 16.2946 87.1057 16.0024 87.1057 15.6419C87.1057 15.2815 86.8132 14.9893 86.4523 14.9893C86.0914 14.9893 85.7988 15.2815 85.7988 15.6419C85.7988 16.0024 86.0914 16.2946 86.4523 16.2946Z" fill="#E6E6E6"/>
<path id="Vector_20" d="M83.4015 151.834C83.7624 151.834 84.055 151.541 84.055 151.181C84.055 150.821 83.7624 150.528 83.4015 150.528C83.0406 150.528 82.748 150.821 82.748 151.181C82.748 151.541 83.0406 151.834 83.4015 151.834Z" fill="#E6E6E6"/>
<path id="Vector_21" d="M51.1652 138.128C51.5261 138.128 51.8186 137.835 51.8186 137.475C51.8186 137.114 51.5261 136.822 51.1652 136.822C50.8043 136.822 50.5117 137.114 50.5117 137.475C50.5117 137.835 50.8043 138.128 51.1652 138.128Z" fill="#E6E6E6"/>
<path id="Vector_22" d="M153.321 114.631C153.682 114.631 153.975 114.338 153.975 113.978C153.975 113.617 153.682 113.325 153.321 113.325C152.961 113.325 152.668 113.617 152.668 113.978C152.668 114.338 152.961 114.631 153.321 114.631Z" fill="#E6E6E6"/>
<path id="Vector_23" d="M32.3178 50.8653C33.4004 50.8653 34.2781 49.9886 34.2781 48.9072C34.2781 47.8259 33.4004 46.9492 32.3178 46.9492C31.2351 46.9492 30.3574 47.8259 30.3574 48.9072C30.3574 49.9886 31.2351 50.8653 32.3178 50.8653Z" fill="white"/>
<path id="Vector_24" d="M76.6492 78.9516C76.6492 84.7996 67.597 98.4265 64.9516 102.284C64.8718 102.401 64.7647 102.496 64.6396 102.562C64.5145 102.628 64.3752 102.662 64.2338 102.662C64.0924 102.662 63.9531 102.628 63.828 102.562C63.7029 102.496 63.5958 102.401 63.516 102.284C60.8706 98.4265 51.8184 84.7996 51.8184 78.9516C51.8184 77.3231 52.1395 75.7105 52.7634 74.206C53.3874 72.7015 54.3019 71.3344 55.4548 70.1829C56.6076 69.0314 57.9763 68.1179 59.4826 67.4947C60.9889 66.8715 62.6034 66.5508 64.2338 66.5508C65.8642 66.5508 67.4787 66.8715 68.985 67.4947C70.4913 68.1179 71.86 69.0314 73.0128 70.1829C74.1657 71.3344 75.0802 72.7015 75.7042 74.206C76.3281 75.7105 76.6492 77.3231 76.6492 78.9516Z" fill="white"/>
<path id="Vector_25" d="M64.2346 84.3908C67.7232 84.3908 70.5512 81.5661 70.5512 78.0816C70.5512 74.5972 67.7232 71.7725 64.2346 71.7725C60.746 71.7725 57.918 74.5972 57.918 78.0816C57.918 81.5661 60.746 84.3908 64.2346 84.3908Z" fill="#8F84FF"/>
<path id="Vector_26" d="M64.1249 109.409C68.1548 109.409 71.4217 108.776 71.4217 107.995C71.4217 107.214 68.1548 106.581 64.1249 106.581C60.095 106.581 56.8281 107.214 56.8281 107.995C56.8281 108.776 60.095 109.409 64.1249 109.409Z" fill="white"/>
<path id="Vector_27" d="M177.922 69.1662C177.867 69.2732 177.82 69.3844 177.783 69.4988L167.375 72.3872L165.499 70.554L162.359 73.0196L165.364 76.5873C165.607 76.8756 165.936 77.0774 166.304 77.1625C166.671 77.2475 167.056 77.2113 167.401 77.0592L178.644 72.1022C179.025 72.3666 179.478 72.5088 179.943 72.5098C180.407 72.5109 180.861 72.3707 181.243 72.1079C181.626 71.8451 181.919 71.4723 182.084 71.0389C182.25 70.6055 182.279 70.1321 182.168 69.6817C182.057 69.2313 181.812 68.8253 181.465 68.5175C181.117 68.2098 180.684 68.015 180.224 67.9591C179.763 67.9031 179.296 67.9886 178.885 68.2043C178.473 68.4199 178.138 68.7554 177.922 69.1662H177.922Z" fill="#FFB8B8"/>
<path id="Vector_28" d="M167.009 72.5566L163.102 75.5936C162.991 75.68 162.863 75.7415 162.726 75.7738C162.589 75.8062 162.446 75.8086 162.308 75.781C162.17 75.7534 162.039 75.6964 161.925 75.6138C161.811 75.5313 161.716 75.4252 161.647 75.3027L159.219 71.0108C158.78 70.4403 158.584 69.719 158.677 69.005C158.769 68.291 159.141 67.6427 159.711 67.2022C160.281 66.7617 161.002 66.565 161.718 66.6552C162.433 66.7454 163.083 67.1152 163.525 67.6835L167.084 71.076C167.186 71.1732 167.265 71.2911 167.317 71.4218C167.37 71.5525 167.393 71.6929 167.386 71.8334C167.379 71.9739 167.341 72.1113 167.276 72.2361C167.211 72.3608 167.12 72.4702 167.009 72.5566V72.5566Z" fill="#8F84FF"/>
<path id="Vector_29" d="M178.921 67.7293L182.883 69.5095C183.048 69.5841 183.178 69.7214 183.242 69.8913C183.307 70.0612 183.301 70.2497 183.227 70.4154L182.758 71.4567C182.813 71.4817 182.856 71.5275 182.877 71.5841C182.899 71.6406 182.897 71.7034 182.872 71.7587L182.685 72.1752C182.66 72.2303 182.614 72.2733 182.557 72.2947C182.501 72.3162 182.438 72.3144 182.382 72.2898L182.195 72.7063C182.25 72.7313 182.293 72.7771 182.314 72.8336C182.336 72.8902 182.334 72.953 182.309 73.0082L182.122 73.4248C182.097 73.4799 182.051 73.5229 181.994 73.5443C181.938 73.5658 181.875 73.564 181.82 73.5393L179.287 79.1624C179.212 79.3281 179.075 79.4574 178.905 79.5218C178.734 79.5863 178.546 79.5806 178.38 79.5061L174.418 77.7258C174.252 77.6512 174.123 77.5139 174.058 77.344C173.994 77.1742 173.999 76.9856 174.074 76.8199L178.014 68.073C178.089 67.9073 178.226 67.778 178.396 67.7135C178.566 67.649 178.755 67.6547 178.921 67.7293Z" fill="#3F3D56"/>
<path id="Vector_30" d="M175.137 77.172L178.315 78.6016C178.474 78.6727 178.655 78.678 178.818 78.6164C178.981 78.5548 179.114 78.4313 179.186 78.2727L180.654 75.0116L181.164 73.8812L182.492 70.9307C182.563 70.7719 182.568 70.5916 182.507 70.429C182.445 70.2664 182.321 70.1348 182.163 70.0629L181.164 69.613L178.982 68.6333C178.823 68.5623 178.642 68.5573 178.479 68.6194C178.317 68.6814 178.185 68.8056 178.114 68.9644L176.829 71.8168L175.365 75.0642L174.808 76.3042C174.736 76.4629 174.731 76.6434 174.793 76.806C174.854 76.9687 174.978 77.1003 175.137 77.172Z" fill="#F2F2F2"/>
<path id="Vector_31" d="M168.497 117.578L171.167 117.578L172.437 107.29L168.496 107.29L168.497 117.578Z" fill="#FFB8B8"/>
<path id="Vector_32" d="M167.814 116.707L173.073 116.707H173.074C173.514 116.707 173.949 116.794 174.356 116.962C174.763 117.13 175.132 117.377 175.443 117.687C175.755 117.998 176.001 118.367 176.17 118.773C176.338 119.18 176.425 119.615 176.425 120.054V120.163L167.815 120.164L167.814 116.707Z" fill="#2F2E41"/>
<path id="Vector_33" d="M175.467 116.925L178.138 116.925L179.408 106.637L175.467 106.637L175.467 116.925Z" fill="#FFB8B8"/>
<path id="Vector_34" d="M174.785 116.054L180.044 116.054H180.044C180.484 116.054 180.92 116.14 181.327 116.308C181.733 116.477 182.103 116.723 182.414 117.034C182.725 117.345 182.972 117.714 183.141 118.12C183.309 118.526 183.396 118.962 183.396 119.401V119.51L174.785 119.51L174.785 116.054Z" fill="#2F2E41"/>
<path id="Vector_35" d="M156.518 93.4361C157.087 95.1206 158.166 96.5868 159.606 97.6318C161.046 98.6768 162.776 99.2488 164.555 99.2688L164.69 99.271C166.069 99.3101 167.688 98.8663 169.275 98.2289C172.412 96.9692 175.424 94.9524 176.224 94.3977L174.869 107.405L174.32 112.679C174.306 112.816 174.321 112.953 174.364 113.084C174.406 113.214 174.476 113.334 174.568 113.436C174.66 113.538 174.772 113.619 174.897 113.675C175.023 113.731 175.159 113.76 175.296 113.76H178.678C178.895 113.76 179.106 113.689 179.278 113.557C179.45 113.424 179.573 113.239 179.628 113.029L185.213 91.7848C185.38 91.1489 185.394 90.4823 185.252 89.8402C185.111 89.1981 184.818 88.5989 184.398 88.0922C183.979 87.5856 183.444 87.186 182.839 86.9265C182.235 86.6671 181.576 86.5553 180.92 86.6004L169.319 87.3945L170.129 84.1572L159.774 83.4697L159.744 83.4915C159.496 83.6721 159.254 83.8613 159.023 84.0593C158.446 84.5469 157.934 85.1071 157.5 85.7258C156.725 86.8359 156.23 88.1173 156.059 89.4602C155.888 90.803 156.046 92.1673 156.518 93.4361Z" fill="#2F2E41"/>
<path id="Vector_36" d="M156.518 93.4368C157.087 95.1213 158.166 96.5876 159.606 97.6325C161.046 98.6775 162.776 99.2496 164.555 99.2696C166.257 98.4092 167.9 97.436 169.471 96.3565L169.275 98.2296L167.568 114.638C167.554 114.774 167.569 114.912 167.611 115.042C167.654 115.173 167.724 115.293 167.816 115.395C167.908 115.496 168.02 115.578 168.145 115.634C168.271 115.69 168.406 115.719 168.544 115.719H171.926C172.143 115.719 172.354 115.648 172.526 115.515C172.698 115.383 172.821 115.198 172.876 114.988L174.869 107.406L178.461 93.7436C178.628 93.1077 178.642 92.4411 178.5 91.799C178.358 91.1569 178.066 90.5577 177.646 90.051C177.226 89.5443 176.692 89.1448 176.087 88.8853C175.482 88.6259 174.824 88.5141 174.167 88.5592L162.567 89.3533L163.377 86.116L157.5 85.7266C156.725 86.8367 156.23 88.1181 156.059 89.461C155.888 90.8038 156.046 92.1681 156.518 93.4368Z" fill="#2F2E41"/>
<path id="Vector_37" d="M159.008 84.8101L158.93 84.8007L157.123 75.9276C157.108 75.8505 155.631 68.197 160.159 64.1959L160.238 63.6483C160.258 63.5081 160.308 63.374 160.385 63.2552C160.462 63.1364 160.564 63.0357 160.684 62.96C160.804 62.8844 160.939 62.8356 161.079 62.817C161.22 62.7985 161.363 62.8106 161.498 62.8525L165.764 64.1741C166.005 64.2484 166.209 64.4132 166.331 64.6339C166.454 64.8546 166.486 65.1141 166.422 65.358L166.007 66.9335C166.582 67.608 173.35 75.7473 170.993 82.018L169.937 86.1411L159.008 84.8101Z" fill="#8F84FF"/>
<path id="Vector_38" d="M176.721 77.8854C176.619 77.9495 176.522 78.0216 176.431 78.1009L165.998 75.3035L165.316 72.7725L161.357 73.3013L162.129 77.8993C162.191 78.2707 162.373 78.612 162.646 78.8718C162.919 79.1316 163.269 79.2959 163.643 79.3401L175.848 80.7801C176.041 81.2015 176.359 81.5539 176.759 81.7906C177.158 82.0272 177.62 82.1368 178.083 82.1048C178.546 82.0728 178.989 81.9007 179.352 81.6114C179.714 81.3221 179.981 80.9292 180.114 80.4852C180.248 80.0411 180.244 79.5669 180.101 79.1255C179.959 78.6842 179.685 78.2966 179.317 78.0144C178.948 77.7321 178.502 77.5686 178.039 77.5456C177.575 77.5226 177.115 77.6411 176.721 77.8854H176.721Z" fill="#FFB8B8"/>
<path id="Vector_39" d="M165.597 75.2624L160.687 75.8941C160.548 75.9121 160.406 75.8998 160.271 75.858C160.137 75.8163 160.013 75.746 159.908 75.6521C159.803 75.5582 159.72 75.4428 159.663 75.3138C159.607 75.1849 159.58 75.0453 159.582 74.9046L159.676 69.9759C159.588 69.2615 159.787 68.5413 160.23 67.9733C160.672 67.4054 161.323 67.036 162.038 66.9461C162.753 66.8562 163.474 67.0532 164.044 67.4939C164.614 67.9346 164.986 68.5831 165.077 69.297L166.415 74.0255C166.454 74.1609 166.462 74.3029 166.44 74.4419C166.419 74.5809 166.367 74.7137 166.29 74.831C166.212 74.9484 166.11 75.0477 165.991 75.1222C165.871 75.1966 165.737 75.2444 165.597 75.2624Z" fill="#8F84FF"/>
<path id="Vector_40" d="M164.215 61.6478C167.17 61.6478 169.565 59.2555 169.565 56.3044C169.565 53.3533 167.17 50.9609 164.215 50.9609C161.26 50.9609 158.865 53.3533 158.865 56.3044C158.865 59.2555 161.26 61.6478 164.215 61.6478Z" fill="#FFB8B8"/>
<path id="Vector_41" d="M163.934 56.7515L163.265 55.5332C161.996 60.6964 164.237 64.9694 164.237 64.9694L155.539 60.9226L155.622 59.4867L154.761 60.4623L153.525 59.7816L153.361 58.8503L152.428 59.0813L155.835 52.9054C159.142 47.0284 163.95 49.2722 163.95 49.2722C171.598 48.909 170.664 56.4463 170.664 56.4463L163.934 56.7515Z" fill="#2F2E41"/>
<path id="Vector_42" d="M103.036 96.5712C104.269 95.7814 102.769 91.2461 99.6852 86.4413C96.6014 81.6365 93.1016 78.3817 91.8681 79.1715C90.6347 79.9613 92.1347 84.4966 95.2185 89.3014C98.3023 94.1062 101.802 97.361 103.036 96.5712Z" fill="#3F3D56"/>
</g>
<defs>
<clipPath id="clip0_2650_135967">
<rect width="214" height="166" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

32
@xen-orchestra/lite/src/components/NoResult.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div class="no-result">
<img alt="" class="img" src="@/assets/no-result.svg" />
<p class="text-info">{{ $t("no-result") }}</p>
</div>
</template>
<style lang="postcss" scoped>
.no-result {
margin-top: 2rem;
text-align: center;
}
.img {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
width: 17em;
height: 13em;
}
.text-info {
margin: auto;
width: 8em;
font-style: normal;
font-weight: 500;
font-size: 2rem;
line-height: 150%;
color: var(--color-extra-blue-base);
}
</style>

47
@xen-orchestra/lite/src/components/UsageBar.vue
View File

@ -1,43 +1,32 @@
<template> <template>
<div class="usage-bar"> <div class="usage-bar">
<template v-if="data !== undefined"> <div
<div v-for="item in computedData.sortedArray"
v-for="item in computedData.sortedArray" :key="item.id"
:key="item.id" :class="{
:class="{ warning: item.value > MIN_WARNING_VALUE,
warning: item.value > MIN_WARNING_VALUE, error: item.value > MIN_DANGEROUS_VALUE,
error: item.value > MIN_DANGEROUS_VALUE, }"
}" class="progress-item"
class="progress-item" >
> <UiProgressBar :value="item.value" color="custom" />
<UiProgressBar :value="item.value" color="custom" /> <UiProgressLegend
<UiProgressLegend :label="item.label"
:label="item.label" :value="item.badgeLabel ?? `${item.value}%`"
:value="item.badgeLabel ?? `${item.value}%`" />
/> </div>
</div> <slot :total-percent="computedData.totalPercentUsage" name="footer" />
<slot :total-percent="computedData.totalPercentUsage" name="footer" />
</template>
<UiCardSpinner v-else />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import UiProgressBar from "@/components/ui/progress/UiProgressBar.vue"; import UiProgressBar from "@/components/ui/progress/UiProgressBar.vue";
import UiProgressLegend from "@/components/ui/progress/UiProgressLegend.vue"; import UiProgressLegend from "@/components/ui/progress/UiProgressLegend.vue";
import UiCardSpinner from "@/components/ui/UiCardSpinner.vue"; import type { StatData } from "@/types/stat";
import { computed } from "vue"; import { computed } from "vue";
interface Data {
id: string;
value: number;
label?: string;
badgeLabel?: string;
maxValue?: number;
}
interface Props { interface Props {
data?: Data[]; data: StatData[];
nItems?: number; nItems?: number;
} }

8
@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardStorageUsage.vue
View File

@ -5,11 +5,8 @@
:right="$t('top-#', { n: N_ITEMS })" :right="$t('top-#', { n: N_ITEMS })"
/> />
<NoDataError v-if="hasError" /> <NoDataError v-if="hasError" />
<UsageBar <UiCardSpinner v-else-if="!isReady" />
v-else <UsageBar v-else :data="data.result" :nItems="N_ITEMS">
:data="isReady ? data.result : undefined"
:nItems="N_ITEMS"
>
<template #footer> <template #footer>
<SizeStatsSummary :size="data.maxSize" :usage="data.usedSize" /> <SizeStatsSummary :size="data.maxSize" :usage="data.usedSize" />
</template> </template>
@ -21,6 +18,7 @@
import NoDataError from "@/components/NoDataError.vue"; import NoDataError from "@/components/NoDataError.vue";
import SizeStatsSummary from "@/components/ui/SizeStatsSummary.vue"; import SizeStatsSummary from "@/components/ui/SizeStatsSummary.vue";
import UiCard from "@/components/ui/UiCard.vue"; import UiCard from "@/components/ui/UiCard.vue";
import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
import UiCardTitle from "@/components/ui/UiCardTitle.vue"; import UiCardTitle from "@/components/ui/UiCardTitle.vue";
import UsageBar from "@/components/UsageBar.vue"; import UsageBar from "@/components/UsageBar.vue";
import { useSrCollection } from "@/stores/xen-api/sr.store"; import { useSrCollection } from "@/stores/xen-api/sr.store";

32
@xen-orchestra/lite/src/components/pool/dashboard/cpuUsage/HostsCpuUsage.vue
View File

@ -1,33 +1,39 @@
<template> <template>
<UiCardTitle <UiCardTitle
:level="UiCardTitleLevel.SubtitleWithUnderline"
:left="$t('hosts')" :left="$t('hosts')"
:level="UiCardTitleLevel.SubtitleWithUnderline"
:right="$t('top-#', { n: N_ITEMS })" :right="$t('top-#', { n: N_ITEMS })"
/> />
<NoDataError v-if="hasError" /> <NoDataError v-if="hasError" />
<UsageBar v-else :data="statFetched ? data : undefined" :n-items="N_ITEMS" /> <UiCardSpinner v-else-if="isLoading" />
<NoResult v-else-if="isStatEmpty" />
<UsageBar v-else :data="data" :n-items="N_ITEMS" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject, type ComputedRef } from "vue";
import { getAvgCpuUsage } from "@/libs/utils";
import { IK_HOST_STATS } from "@/types/injection-keys";
import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
import NoDataError from "@/components/NoDataError.vue"; import NoDataError from "@/components/NoDataError.vue";
import NoResult from "@/components/NoResult.vue";
import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
import UiCardTitle from "@/components/ui/UiCardTitle.vue"; import UiCardTitle from "@/components/ui/UiCardTitle.vue";
import { UiCardTitleLevel } from "@/types/enums";
import UsageBar from "@/components/UsageBar.vue"; import UsageBar from "@/components/UsageBar.vue";
import { useStatStatus } from "@/composables/stat-status.composable";
import { getAvgCpuUsage } from "@/libs/utils";
import { useHostCollection } from "@/stores/xen-api/host.store"; import { useHostCollection } from "@/stores/xen-api/host.store";
import { UiCardTitleLevel } from "@/types/enums";
import { IK_HOST_STATS } from "@/types/injection-keys";
import type { StatData } from "@/types/stat";
import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
import { computed, inject } from "vue";
const { hasError } = useHostCollection(); const { hasError, isFetching } = useHostCollection();
const stats = inject( const stats = inject(
IK_HOST_STATS, IK_HOST_STATS,
computed(() => []) computed(() => [])
); );
const data = computed<{ id: string; label: string; value: number }[]>(() => { const data = computed<StatData[]>(() => {
const result: { id: string; label: string; value: number }[] = []; const result: StatData[] = [];
stats.value.forEach((stat) => { stats.value.forEach((stat) => {
if (stat.stats == null) { if (stat.stats == null) {
@ -50,9 +56,5 @@ const data = computed<{ id: string; label: string; value: number }[]>(() => {
return result; return result;
}); });
const statFetched: ComputedRef<boolean> = computed(() => const { isLoading, isStatEmpty } = useStatStatus(stats, data, isFetching);
statFetched.value
? true
: stats.value.length > 0 && stats.value.length === data.value.length
);
</script> </script>

30
@xen-orchestra/lite/src/components/pool/dashboard/cpuUsage/VmsCpuUsage.vue
View File

@ -1,33 +1,39 @@
<template> <template>
<UiCardTitle <UiCardTitle
:level="UiCardTitleLevel.SubtitleWithUnderline"
:left="$t('vms')" :left="$t('vms')"
:level="UiCardTitleLevel.SubtitleWithUnderline"
:right="$t('top-#', { n: N_ITEMS })" :right="$t('top-#', { n: N_ITEMS })"
/> />
<NoDataError v-if="hasError" /> <NoDataError v-if="hasError" />
<UsageBar v-else :data="statFetched ? data : undefined" :n-items="N_ITEMS" /> <UiCardSpinner v-else-if="isLoading" />
<NoResult v-else-if="isStatEmpty" />
<UsageBar v-else :data="data" :n-items="N_ITEMS" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { type ComputedRef, computed, inject } from "vue";
import NoDataError from "@/components/NoDataError.vue"; import NoDataError from "@/components/NoDataError.vue";
import NoResult from "@/components/NoResult.vue";
import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
import UiCardTitle from "@/components/ui/UiCardTitle.vue"; import UiCardTitle from "@/components/ui/UiCardTitle.vue";
import UsageBar from "@/components/UsageBar.vue"; import UsageBar from "@/components/UsageBar.vue";
import { useVmCollection } from "@/stores/xen-api/vm.store"; import { useStatStatus } from "@/composables/stat-status.composable";
import { getAvgCpuUsage } from "@/libs/utils"; import { getAvgCpuUsage } from "@/libs/utils";
import { IK_VM_STATS } from "@/types/injection-keys"; import { useVmCollection } from "@/stores/xen-api/vm.store";
import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
import { UiCardTitleLevel } from "@/types/enums"; import { UiCardTitleLevel } from "@/types/enums";
import { IK_VM_STATS } from "@/types/injection-keys";
import type { StatData } from "@/types/stat";
import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
import { computed, inject } from "vue";
const { hasError } = useVmCollection(); const { hasError, isFetching } = useVmCollection();
const stats = inject( const stats = inject(
IK_VM_STATS, IK_VM_STATS,
computed(() => []) computed(() => [])
); );
const data = computed<{ id: string; label: string; value: number }[]>(() => { const data = computed<StatData[]>(() => {
const result: { id: string; label: string; value: number }[] = []; const result: StatData[] = [];
stats.value.forEach((stat) => { stats.value.forEach((stat) => {
if (!stat.stats) { if (!stat.stats) {
@ -50,9 +56,5 @@ const data = computed<{ id: string; label: string; value: number }[]>(() => {
return result; return result;
}); });
const statFetched: ComputedRef<boolean> = computed(() => const { isLoading, isStatEmpty } = useStatStatus(stats, data, isFetching);
statFetched.value
? true
: stats.value.length > 0 && stats.value.length === data.value.length
);
</script> </script>

41
@xen-orchestra/lite/src/components/pool/dashboard/ramUsage/HostsRamUsage.vue
View File

@ -1,25 +1,31 @@
<template> <template>
<UiCardTitle <UiCardTitle
:level="UiCardTitleLevel.SubtitleWithUnderline"
:left="$t('hosts')" :left="$t('hosts')"
:level="UiCardTitleLevel.SubtitleWithUnderline"
:right="$t('top-#', { n: N_ITEMS })" :right="$t('top-#', { n: N_ITEMS })"
/> />
<NoDataError v-if="hasError" /> <NoDataError v-if="hasError" />
<UsageBar v-else :data="statFetched ? data : undefined" :n-items="N_ITEMS" /> <UiCardSpinner v-else-if="isLoading" />
<NoResult v-else-if="isStatEmpty" />
<UsageBar v-else :data="data" :n-items="N_ITEMS" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import UiCardTitle from "@/components/ui/UiCardTitle.vue";
import { useHostCollection } from "@/stores/xen-api/host.store";
import { IK_HOST_STATS } from "@/types/injection-keys";
import { type ComputedRef, computed, inject } from "vue";
import { UiCardTitleLevel } from "@/types/enums";
import UsageBar from "@/components/UsageBar.vue";
import { formatSize, parseRamUsage } from "@/libs/utils";
import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
import NoDataError from "@/components/NoDataError.vue"; import NoDataError from "@/components/NoDataError.vue";
import NoResult from "@/components/NoResult.vue";
import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
import UiCardTitle from "@/components/ui/UiCardTitle.vue";
import UsageBar from "@/components/UsageBar.vue";
import { useStatStatus } from "@/composables/stat-status.composable";
import { formatSize, parseRamUsage } from "@/libs/utils";
import { useHostCollection } from "@/stores/xen-api/host.store";
import { UiCardTitleLevel } from "@/types/enums";
import { IK_HOST_STATS } from "@/types/injection-keys";
import type { StatData } from "@/types/stat";
import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
import { computed, inject } from "vue";
const { hasError } = useHostCollection(); const { hasError, isFetching } = useHostCollection();
const stats = inject( const stats = inject(
IK_HOST_STATS, IK_HOST_STATS,
@ -27,12 +33,7 @@ const stats = inject(
); );
const data = computed(() => { const data = computed(() => {
const result: { const result: StatData[] = [];
id: string;
label: string;
value: number;
badgeLabel: string;
}[] = [];
stats.value.forEach((stat) => { stats.value.forEach((stat) => {
if (stat.stats == null) { if (stat.stats == null) {
@ -50,9 +51,5 @@ const data = computed(() => {
return result; return result;
}); });
const statFetched: ComputedRef<boolean> = computed( const { isLoading, isStatEmpty } = useStatStatus(stats, data, isFetching);
() =>
statFetched.value ||
(stats.value.length > 0 && stats.value.length === data.value.length)
);
</script> </script>

35
@xen-orchestra/lite/src/components/pool/dashboard/ramUsage/VmsRamUsage.vue
View File

@ -1,25 +1,31 @@
<template> <template>
<UiCardTitle <UiCardTitle
:level="UiCardTitleLevel.SubtitleWithUnderline"
:left="$t('vms')" :left="$t('vms')"
:level="UiCardTitleLevel.SubtitleWithUnderline"
:right="$t('top-#', { n: N_ITEMS })" :right="$t('top-#', { n: N_ITEMS })"
/> />
<NoDataError v-if="hasError" /> <NoDataError v-if="hasError" />
<UsageBar v-else :data="statFetched ? data : undefined" :n-items="N_ITEMS" /> <UiCardSpinner v-else-if="isLoading" />
<NoResult v-else-if="isStatEmpty" />
<UsageBar v-else :data="data" :n-items="N_ITEMS" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject, type ComputedRef } from "vue";
import { formatSize, parseRamUsage } from "@/libs/utils";
import { IK_VM_STATS } from "@/types/injection-keys";
import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
import NoDataError from "@/components/NoDataError.vue"; import NoDataError from "@/components/NoDataError.vue";
import NoResult from "@/components/NoResult.vue";
import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
import UiCardTitle from "@/components/ui/UiCardTitle.vue"; import UiCardTitle from "@/components/ui/UiCardTitle.vue";
import { UiCardTitleLevel } from "@/types/enums";
import UsageBar from "@/components/UsageBar.vue"; import UsageBar from "@/components/UsageBar.vue";
import { useStatStatus } from "@/composables/stat-status.composable";
import { formatSize, parseRamUsage } from "@/libs/utils";
import { useVmCollection } from "@/stores/xen-api/vm.store"; import { useVmCollection } from "@/stores/xen-api/vm.store";
import { UiCardTitleLevel } from "@/types/enums";
import { IK_VM_STATS } from "@/types/injection-keys";
import type { StatData } from "@/types/stat";
import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
import { computed, inject } from "vue";
const { hasError } = useVmCollection(); const { hasError, isFetching } = useVmCollection();
const stats = inject( const stats = inject(
IK_VM_STATS, IK_VM_STATS,
@ -27,12 +33,7 @@ const stats = inject(
); );
const data = computed(() => { const data = computed(() => {
const result: { const result: StatData[] = [];
id: string;
label: string;
value: number;
badgeLabel: string;
}[] = [];
stats.value.forEach((stat) => { stats.value.forEach((stat) => {
if (stat.stats == null) { if (stat.stats == null) {
@ -50,9 +51,5 @@ const data = computed(() => {
return result; return result;
}); });
const statFetched: ComputedRef<boolean> = computed( const { isLoading, isStatEmpty } = useStatStatus(stats, data, isFetching);
() =>
statFetched.value ||
(stats.value.length > 0 && stats.value.length === data.value.length)
);
</script> </script>

32
@xen-orchestra/lite/src/composables/stat-status.composable.ts Normal file
View File

@ -0,0 +1,32 @@
import type { Stat } from "@/composables/fetch-stats.composable";
import type { StatData } from "@/types/stat";
import type { MaybeRef } from "@vueuse/core";
import { computed, type ComputedRef, toRef } from "vue";
export const useStatStatus = (
_stats: MaybeRef<Stat<any>[]>,
_data: MaybeRef<StatData[]>,
_isFetching: MaybeRef<boolean>
) => {
const stats = toRef(_stats);
const data = toRef(_data);
const isFetching = toRef(_isFetching);
const _isStatFetched: ComputedRef<boolean> = computed(
() => stats.value.length === data.value.length
);
const isStatEmpty: ComputedRef<boolean> = computed(
() =>
!isFetching.value && stats.value.length === 0 && data.value.length === 0
);
const isLoading: ComputedRef<boolean> = computed(
() => isFetching.value || !_isStatFetched.value
);
return {
isStatEmpty,
isLoading,
};
};

1
@xen-orchestra/lite/src/locales/en.json
View File

@ -112,6 +112,7 @@
"news": "News", "news": "News",
"news-name": "{name} news", "news-name": "{name} news",
"no-alarm-triggered": "No alarm triggered", "no-alarm-triggered": "No alarm triggered",
"no-result": "No result",
"no-selected-vm-can-be-exported": "No selected VM can be exported", "no-selected-vm-can-be-exported": "No selected VM can be exported",
"no-selected-vm-can-be-migrated": "No selected VM can be migrated", "no-selected-vm-can-be-migrated": "No selected VM can be migrated",
"no-tasks": "No tasks", "no-tasks": "No tasks",

1
@xen-orchestra/lite/src/locales/fr.json
View File

@ -112,6 +112,7 @@
"news": "Actualités", "news": "Actualités",
"news-name": "Actualités {name}", "news-name": "Actualités {name}",
"no-alarm-triggered": "Aucune alarme déclenchée", "no-alarm-triggered": "Aucune alarme déclenchée",
"no-result": "Aucun résultat",
"no-selected-vm-can-be-exported": "Aucune VM sélectionnée ne peut être exportée", "no-selected-vm-can-be-exported": "Aucune VM sélectionnée ne peut être exportée",
"no-selected-vm-can-be-migrated": "Aucune VM sélectionnée ne peut être migrée", "no-selected-vm-can-be-migrated": "Aucune VM sélectionnée ne peut être migrée",
"no-tasks": "Aucune tâche", "no-tasks": "Aucune tâche",

7
@xen-orchestra/lite/src/types/stat.ts Normal file
View File

@ -0,0 +1,7 @@
export interface StatData {
id: string;
value: number;
label?: string;
badgeLabel?: string;
maxValue?: number;
}