diff options
| author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 09:43:34 +0300 |
|---|---|---|
| committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 09:43:34 +0300 |
| commit | 6facd12596ec8b55bab4be04b473de65e1f22018 (patch) | |
| tree | 9e82b684a4945431b9d798e2e52293477212ec51 /src | |
| parent | 5c7a1dd3d6a22e02b983a01be39b654b8eaa6ad1 (diff) | |
| download | webui-vue-6facd12596ec8b55bab4be04b473de65e1f22018.tar.xz | |
Add depend: highcarts. Pages: power, analytical motherboard, memory, fans, event logs, Fix styles, add global components.
Diffstat (limited to 'src')
127 files changed, 13805 insertions, 1039 deletions
diff --git a/src/assets/images/amperage-icon.svg b/src/assets/images/amperage-icon.svg new file mode 100644 index 00000000..299777ff --- /dev/null +++ b/src/assets/images/amperage-icon.svg @@ -0,0 +1,3 @@ +<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M2.78183 7.57895H5.48287L2.70925 13.1779L9.21817 8.42106H6.6L9.29075 2.82209L2.78183 7.57895ZM11.7614 0L11.1557 1.39631L8.19869 7.57895H12L0.238644 16L0.844344 14.6037L3.88418 8.42106H0L11.7614 0Z" fill="#E11717"/> +</svg> diff --git a/src/assets/images/arrow-left.svg b/src/assets/images/arrow-left.svg new file mode 100644 index 00000000..feeb6c2f --- /dev/null +++ b/src/assets/images/arrow-left.svg @@ -0,0 +1,3 @@ +<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M5.2584 8.23332L2.02506 4.99998L5.2584 1.76665C5.5834 1.44165 5.5834 0.91665 5.2584 0.59165C4.9334 0.26665 4.4084 0.26665 4.0834 0.59165L0.258398 4.41665C-0.0666016 4.74165 -0.0666016 5.26665 0.258398 5.59165L4.0834 9.41665C4.4084 9.74165 4.9334 9.74165 5.2584 9.41665C5.57507 9.09165 5.5834 8.55832 5.2584 8.23332Z" fill="#040A0F" fill-opacity="0.6"/> +</svg> diff --git a/src/assets/images/arrow-right.svg b/src/assets/images/arrow-right.svg new file mode 100644 index 00000000..ce3658eb --- /dev/null +++ b/src/assets/images/arrow-right.svg @@ -0,0 +1,3 @@ +<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M0.741553 8.23332L3.97489 4.99998L0.741553 1.76665C0.416553 1.44165 0.416553 0.91665 0.741553 0.59165C1.06655 0.26665 1.59155 0.26665 1.91655 0.59165L5.74155 4.41665C6.06655 4.74165 6.06655 5.26665 5.74155 5.59165L1.91655 9.41665C1.59155 9.74165 1.06655 9.74165 0.741553 9.41665C0.424886 9.09165 0.416553 8.55832 0.741553 8.23332Z" fill="#040A0F" fill-opacity="0.6"/> +</svg> diff --git a/src/assets/images/calendar-icon.svg b/src/assets/images/calendar-icon.svg new file mode 100644 index 00000000..cee494ec --- /dev/null +++ b/src/assets/images/calendar-icon.svg @@ -0,0 +1,3 @@ +<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M12.3334 1.99935H11.6667V1.33268C11.6667 0.966016 11.3667 0.666016 11 0.666016C10.6334 0.666016 10.3334 0.966016 10.3334 1.33268V1.99935H3.66671V1.33268C3.66671 0.966016 3.36671 0.666016 3.00004 0.666016C2.63337 0.666016 2.33337 0.966016 2.33337 1.33268V1.99935H1.66671C0.933374 1.99935 0.333374 2.59935 0.333374 3.33268V13.9993C0.333374 14.7327 0.933374 15.3327 1.66671 15.3327H12.3334C13.0667 15.3327 13.6667 14.7327 13.6667 13.9993V3.33268C13.6667 2.59935 13.0667 1.99935 12.3334 1.99935ZM11.6667 13.9993H2.33337C1.96671 13.9993 1.66671 13.6993 1.66671 13.3327V5.33268H12.3334V13.3327C12.3334 13.6993 12.0334 13.9993 11.6667 13.9993Z" fill="#0C1C29" fill-opacity="0.9"/> +</svg> diff --git a/src/assets/images/clear-icon.svg b/src/assets/images/clear-icon.svg new file mode 100644 index 00000000..2f50ed01 --- /dev/null +++ b/src/assets/images/clear-icon.svg @@ -0,0 +1,3 @@ +<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M1.00004 10.6667C1.00004 11.4 1.60004 12 2.33337 12H7.66671C8.40004 12 9.00004 11.4 9.00004 10.6667V4C9.00004 3.26667 8.40004 2.66667 7.66671 2.66667H2.33337C1.60004 2.66667 1.00004 3.26667 1.00004 4V10.6667ZM3.00004 4H7.00004C7.36671 4 7.66671 4.3 7.66671 4.66667V10C7.66671 10.3667 7.36671 10.6667 7.00004 10.6667H3.00004C2.63337 10.6667 2.33337 10.3667 2.33337 10V4.66667C2.33337 4.3 2.63337 4 3.00004 4ZM7.33337 0.666667L6.86004 0.193333C6.74004 0.0733333 6.56671 0 6.39337 0H3.60671C3.43337 0 3.26004 0.0733333 3.14004 0.193333L2.66671 0.666667H1.00004C0.633374 0.666667 0.333374 0.966667 0.333374 1.33333C0.333374 1.7 0.633374 2 1.00004 2H9.00004C9.36671 2 9.66671 1.7 9.66671 1.33333C9.66671 0.966667 9.36671 0.666667 9.00004 0.666667H7.33337Z" fill="#E11717"/> +</svg> diff --git a/src/assets/images/console-images.svg b/src/assets/images/console-images.svg new file mode 100644 index 00000000..741f9d36 --- /dev/null +++ b/src/assets/images/console-images.svg @@ -0,0 +1,12 @@ +<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M20 40C31.0457 40 40 31.0457 40 20C40 8.95431 31.0457 0 20 0C8.95431 0 0 8.95431 0 20C0 31.0457 8.95431 40 20 40ZM20 30C14.4772 30 10 25.5228 10 20C10 14.4772 14.4772 10 20 10C25.5228 10 30 14.4772 30 20C30 25.5228 25.5228 30 20 30ZM20 27.5C24.1421 27.5 27.5 24.1421 27.5 20C27.5 15.8579 24.1421 12.5 20 12.5C15.8579 12.5 12.5 15.8579 12.5 20C12.5 24.1421 15.8579 27.5 20 27.5ZM20 23.75C17.9289 23.75 16.25 22.0711 16.25 20C16.25 17.9289 17.9289 16.25 20 16.25C22.0711 16.25 23.75 17.9289 23.75 20C23.75 22.0711 22.0711 23.75 20 23.75Z" fill="url(#paint0_linear_1642_14684)"/> +<defs> +<linearGradient id="paint0_linear_1642_14684" x1="6.25" y1="5" x2="35" y2="33.75" gradientUnits="userSpaceOnUse"> +<stop stop-color="#E11717"/> +<stop offset="0.135118" stop-color="#E82424"/> +<stop offset="0.307292" stop-color="#FF6A6A"/> +<stop offset="0.536458" stop-color="#E51E1E"/> +<stop offset="1" stop-color="#E51E1E"/> +</linearGradient> +</defs> +</svg> diff --git a/src/assets/images/event-logs/archive.svg b/src/assets/images/event-logs/archive.svg new file mode 100644 index 00000000..3fe4703f --- /dev/null +++ b/src/assets/images/event-logs/archive.svg @@ -0,0 +1,3 @@ +<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M15.1167 2.35833L13.9583 0.958333C13.7333 0.675 13.3917 0.5 13 0.5H3C2.60833 0.5 2.26667 0.675 2.03333 0.958333L0.883333 2.35833C0.641667 2.64167 0.5 3.01667 0.5 3.41667V13.8333C0.5 14.75 1.25 15.5 2.16667 15.5H13.8333C14.75 15.5 15.5 14.75 15.5 13.8333V3.41667C15.5 3.01667 15.3583 2.64167 15.1167 2.35833ZM7.70833 12.2917L3.41667 8H6.33333V6.33333H9.66667V8H12.5833L8.29167 12.2917C8.13333 12.45 7.86667 12.45 7.70833 12.2917ZM2.26667 2.16667L2.94167 1.33333H12.9417L13.725 2.16667H2.26667Z" fill="white"/> +</svg> diff --git a/src/assets/images/event-logs/fans.svg b/src/assets/images/event-logs/fans.svg new file mode 100644 index 00000000..ecee5ea3 --- /dev/null +++ b/src/assets/images/event-logs/fans.svg @@ -0,0 +1,3 @@ +<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M5.0071 14.5899C5.88063 15.1221 6.9438 15.3043 7.65225 15.3043L7.65225 9.70443C7.02871 9.57786 6.52632 9.1177 6.33946 8.51834C5.89187 8.63106 5.42752 8.80613 5.0071 9.06226C4.15196 9.58323 3.47829 10.4354 3.47829 11.8261C3.47829 13.2168 4.15196 14.0689 5.0071 14.5899ZM6.29572 7.65225H0.695659C0.695659 6.9438 0.877919 5.88063 1.41009 5.0071C1.93106 4.15196 2.7832 3.47829 4.17391 3.47829C5.56463 3.47829 6.41677 4.15196 6.93774 5.0071C7.19388 5.42754 7.36896 5.8919 7.48167 6.33951C6.88238 6.5264 6.42228 7.02876 6.29572 7.65225ZM8.34791 7.01596C8.23911 6.97751 8.12204 6.95659 8.00008 6.95659C7.86275 6.95659 7.73161 6.98312 7.61152 7.03133C7.3343 7.14262 7.11592 7.36946 7.01596 7.65225C6.97751 7.76104 6.95659 7.87812 6.95659 8.00008C6.95659 8.13735 6.9831 8.26843 7.03127 8.38849C7.14254 8.66578 7.36941 8.88422 7.65225 8.98419C7.76104 9.02264 7.87812 9.04356 8.00008 9.04356C8.18346 9.04356 8.35579 8.99625 8.50554 8.91318C8.7268 8.79044 8.89876 8.58961 8.98419 8.34791C9.02264 8.23911 9.04356 8.12204 9.04356 8.00008C9.04356 7.81664 8.99623 7.64425 8.91311 7.49447C8.79035 7.27328 8.58956 7.10138 8.34791 7.01596ZM9.586 7.28526C9.35937 6.78322 8.90135 6.40806 8.34791 6.29572V0.746159C8.96378 0.831471 9.67823 1.03288 10.2974 1.41009C11.1525 1.93106 11.8262 2.7832 11.8262 4.17391C11.8262 5.56463 11.1525 6.41677 10.2974 6.93774C10.0699 7.07632 9.82958 7.19117 9.586 7.28526ZM9.70444 8.34791C9.59208 8.9014 9.21686 9.35945 8.71476 9.58606C8.80884 9.82962 8.92369 10.0699 9.06226 10.2974C9.58323 11.1525 10.4354 11.8262 11.8261 11.8262C13.2168 11.8262 14.0689 11.1525 14.5899 10.2974C14.9671 9.67823 15.1685 8.96378 15.2538 8.34791H9.70444ZM8.34791 10.4501V16L7.65225 16C6.85343 16 5.65572 15.7997 4.64517 15.184C3.61623 14.5571 2.78264 13.4962 2.78264 11.8261C2.78264 10.1559 3.61623 9.09503 4.64517 8.46817C4.7141 8.42617 4.78391 8.38611 4.8544 8.34791H1.9281e-06L0 7.65225C0 6.85343 0.200349 5.65572 0.816001 4.64517C1.44286 3.61623 2.50376 2.78264 4.17391 2.78264C5.84407 2.78264 6.90497 3.61623 7.53183 4.64517C7.57388 4.7142 7.614 4.7841 7.65225 4.85469V0.695659V0.347832V0C8.45106 0 9.64878 0.200348 10.6593 0.816001C11.6883 1.44286 12.5219 2.50376 12.5219 4.17391C12.5219 5.84407 11.6883 6.90497 10.6593 7.53183C10.5903 7.57388 10.5204 7.614 10.4498 7.65225H15.3043H15.6522H16C16 8.45106 15.7997 9.64878 15.184 10.6593C14.5571 11.6883 13.4962 12.5219 11.8261 12.5219C10.1559 12.5219 9.09503 11.6883 8.46817 10.6593C8.42617 10.5904 8.38611 10.5206 8.34791 10.4501Z" fill="#0C1C29" fill-opacity="0.6"/> +</svg> diff --git a/src/assets/images/event-logs/memory-module.svg b/src/assets/images/event-logs/memory-module.svg new file mode 100644 index 00000000..842ad676 --- /dev/null +++ b/src/assets/images/event-logs/memory-module.svg @@ -0,0 +1,3 @@ +<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M0.827586 0.820513V11.4872H11.1724V0.820513H0.827586ZM0.827586 15.1795V12.7179H11.1724V15.1795H0.827586ZM0.413793 0C0.185262 0 0 0.183678 0 0.410256V15.5897C0 15.8163 0.185262 16 0.413793 16H11.5862C11.8147 16 12 15.8163 12 15.5897V0.410256C12 0.183678 11.8147 0 11.5862 0H0.413793ZM2.89655 5.12821C2.55375 5.12821 2.27586 5.40372 2.27586 5.74359V6.13886C2.27586 6.41637 2.4632 6.65955 2.73324 6.73256L3.82216 6.9599C3.91217 6.98424 3.93103 7.12062 3.93103 7.21312V7.38462C3.93103 7.4979 3.8384 7.58974 3.72414 7.58974H2.48276V8H3.72414C4.06694 8 4.34483 7.72448 4.34483 7.38462V7.21312C4.34483 6.93561 4.20107 6.63712 3.93103 6.5641L2.84211 6.33676C2.7521 6.31242 2.68966 6.23137 2.68966 6.13886V5.74359C2.68966 5.6303 2.78229 5.53846 2.89655 5.53846H4.13793V5.12821H2.89655ZM5.37931 5.12821C5.03651 5.12821 4.75862 5.40372 4.75862 5.74359V6.13886C4.75862 6.41637 4.94596 6.65955 5.216 6.73256L6.30492 6.9599C6.39493 6.98424 6.41379 7.12062 6.41379 7.21312V7.38462C6.41379 7.4979 6.32116 7.58974 6.2069 7.58974H4.96552V8H6.2069C6.54969 8 6.82759 7.72448 6.82759 7.38462V7.21312C6.82759 6.93561 6.68383 6.63712 6.41379 6.5641L5.32487 6.33676C5.23486 6.31242 5.17241 6.23137 5.17241 6.13886V5.74359C5.17241 5.6303 5.26504 5.53846 5.37931 5.53846H6.62069V5.12821H5.37931ZM2.89655 1.64103H1.65517V2.87179H2.89655V1.64103ZM10.3448 13.5385H7.44828V14.359H10.3448V13.5385ZM9.10345 1.64103H10.3448V2.87179H9.10345V1.64103ZM7.86207 5.12821H7.65517V5.33333V7.79487V8H7.86207H8.81085C9.05307 8 9.28537 7.9046 9.45664 7.73479C9.62792 7.56498 9.72414 7.33467 9.72414 7.09452V6.03368C9.72414 5.79354 9.62792 5.56322 9.45664 5.39341C9.28537 5.2236 9.05307 5.12821 8.81085 5.12821H7.86207ZM8.06897 7.58974V5.53846H8.81085C8.94333 5.53846 9.07037 5.59064 9.16405 5.68351C9.25772 5.77638 9.31035 5.90234 9.31035 6.03368V7.09452C9.31035 7.22586 9.25772 7.35182 9.16405 7.4447C9.07037 7.53757 8.94333 7.58974 8.81085 7.58974H8.06897Z" fill="#0C1C29" fill-opacity="0.6"/> +</svg> diff --git a/src/assets/images/event-logs/not-resolved.svg b/src/assets/images/event-logs/not-resolved.svg new file mode 100644 index 00000000..6778cd17 --- /dev/null +++ b/src/assets/images/event-logs/not-resolved.svg @@ -0,0 +1,3 @@ +<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M5.99996 2.9998V4.19313C5.99996 4.49313 6.35996 4.6398 6.56663 4.42646L8.42663 2.56646C8.55996 2.43313 8.55996 2.22646 8.42663 2.09313L6.56663 0.233131C6.35996 0.0264643 5.99996 0.173131 5.99996 0.473131V1.66646C3.05329 1.66646 0.666626 4.05313 0.666626 6.9998C0.666626 7.69313 0.799959 8.3598 1.04663 8.96646C1.22663 9.41313 1.79996 9.53313 2.13996 9.19313C2.31996 9.01313 2.39329 8.7398 2.29329 8.4998C2.09996 8.0398 1.99996 7.52646 1.99996 6.9998C1.99996 4.79313 3.79329 2.9998 5.99996 2.9998ZM9.85996 4.80646C9.67996 4.98646 9.60663 5.26646 9.70662 5.4998C9.89329 5.96646 9.99996 6.47313 9.99996 6.9998C9.99996 9.20646 8.20663 10.9998 5.99996 10.9998V9.80646C5.99996 9.50646 5.63996 9.3598 5.43329 9.57313L3.57329 11.4331C3.43996 11.5665 3.43996 11.7731 3.57329 11.9065L5.43329 13.7665C5.63996 13.9731 5.99996 13.8265 5.99996 13.5331V12.3331C8.94663 12.3331 11.3333 9.94646 11.3333 6.9998C11.3333 6.30646 11.2 5.6398 10.9533 5.03313C10.7733 4.58646 10.2 4.46646 9.85996 4.80646Z" fill="#0C1C29" fill-opacity="0.3"/> +</svg> diff --git a/src/assets/images/event-logs/processor.svg b/src/assets/images/event-logs/processor.svg new file mode 100644 index 00000000..fdf1a119 --- /dev/null +++ b/src/assets/images/event-logs/processor.svg @@ -0,0 +1,3 @@ +<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M5.05263 0H4.21053V2.10526H2.94737H2.10526V2.94737V4.63158H0V5.47368H2.10526V6.73684H0V7.57895H2.10526V8.8421H0V9.68421H2.10526V10.9474H0V11.7895H2.10526L2.10526 13.0526V13.8947H2.94737H4.21053V16H5.05263V13.8947H6.31579V16H7.15789V13.8947H8.42105V16H9.26316V13.8947H10.5263V16H11.3684V13.8947H13.0526H13.8947V13.0526V11.7895H16V10.9474H13.8947V9.68421H16V8.8421H13.8947V7.57895H16V6.73684H13.8947V5.47368H16V4.63158H13.8947V2.94737V2.10526H13.0526H11.3684V0H10.5263V2.10526H9.26316V0H8.42105V2.10526H7.15789V0H6.31579V2.10526H5.05263V0ZM13.0526 2.94737H2.94737V13.0526H13.0526V2.94737ZM5.47368 5.47368H10.5263V10.5263H5.47368V5.47368ZM4.63158 4.63158H5.47368H10.5263H11.3684V5.47368V10.5263V11.3684H10.5263H5.47368H4.63158V10.5263V5.47368V4.63158Z" fill="#0C1C29" fill-opacity="0.6"/> +</svg> diff --git a/src/assets/images/event-logs/raid-controllers.svg b/src/assets/images/event-logs/raid-controllers.svg new file mode 100644 index 00000000..a81c887a --- /dev/null +++ b/src/assets/images/event-logs/raid-controllers.svg @@ -0,0 +1,3 @@ +<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M0.559671 12.461V0.539024H1.21811V12.461H0.559671ZM0 0.253659C0 0.113567 0.117917 0 0.263374 0H1.5144C1.65986 0 1.77778 0.113567 1.77778 0.253659V0.665854H15.7037C15.8673 0.665854 16 0.793615 16 0.951219V12.0963C16 12.2539 15.8673 12.3817 15.7037 12.3817H6.32099C6.15734 12.3817 6.02469 12.2539 6.02469 12.0963V11.0341V10.8915C6.02469 10.6375 5.81097 10.4317 5.54733 10.4317C5.28368 10.4317 5.06996 10.6375 5.06996 10.8915V11.0341V12.0963C5.06996 12.2539 4.9373 12.3817 4.77366 12.3817H1.77778V12.7463C1.77778 12.8864 1.65986 13 1.5144 13H0.263374C0.117917 13 0 12.8864 0 12.7463V0.253659ZM6.55144 11.0341V11.8744H7.11111V11.5415C7.11111 11.4189 7.21429 11.3195 7.34156 11.3195H7.37449C7.50176 11.3195 7.60494 11.4189 7.60494 11.5415V11.8744H8.16461V11.5415C8.16461 11.4189 8.26779 11.3195 8.39506 11.3195H8.42798C8.55526 11.3195 8.65844 11.4189 8.65844 11.5415V11.8744H9.18518V11.5415C9.18518 11.4189 9.28836 11.3195 9.41564 11.3195H9.44856C9.57584 11.3195 9.67901 11.4189 9.67901 11.5415V11.8744H10.2387V11.5415C10.2387 11.4189 10.3419 11.3195 10.4691 11.3195H10.5021C10.6293 11.3195 10.7325 11.4189 10.7325 11.5415V11.8744H11.2922V11.5415C11.2922 11.4189 11.3954 11.3195 11.5226 11.3195H11.5556C11.6828 11.3195 11.786 11.4189 11.786 11.5415V11.8744H12.3457V11.5415C12.3457 11.4189 12.4489 11.3195 12.5761 11.3195H12.6091C12.7363 11.3195 12.8395 11.4189 12.8395 11.5415V11.8744H13.3663V11.5415C13.3663 11.4189 13.4694 11.3195 13.5967 11.3195H13.6296C13.7569 11.3195 13.8601 11.4189 13.8601 11.5415V11.8744H14.4198V11.5098C14.4198 11.3872 14.5229 11.2878 14.6502 11.2878H14.6831C14.8104 11.2878 14.9136 11.3872 14.9136 11.5098V11.8744H15.4733V11.0341H6.55144ZM15.4733 10.5268V1.17317H1.77778V10.5268H4.61703C4.7665 10.1735 5.12671 9.92439 5.54733 9.92439C5.96794 9.92439 6.32815 10.1735 6.47762 10.5268H15.4733ZM1.77778 11.8744V11.0341H4.54321V11.8744H4.01646V11.5415C4.01646 11.4189 3.91328 11.3195 3.78601 11.3195H3.75309C3.62581 11.3195 3.52263 11.4189 3.52263 11.5415V11.8744H2.96296V11.5415C2.96296 11.4189 2.85979 11.3195 2.73251 11.3195H2.69959C2.57231 11.3195 2.46914 11.4189 2.46914 11.5415V11.8744H1.77778ZM3.16049 2.6V4.3439H6.09053V2.6H3.16049ZM2.83128 2.06098C2.704 2.06098 2.60082 2.16035 2.60082 2.28293V4.66098C2.60082 4.78356 2.704 4.88293 2.83128 4.88293H6.41975C6.54703 4.88293 6.65021 4.78356 6.65021 4.66098V2.28293C6.65021 2.16035 6.54703 2.06098 6.41975 2.06098H2.83128ZM3.16049 8.02195V6.27805H6.09053V8.02195H3.16049ZM2.60082 5.96098C2.60082 5.8384 2.704 5.73902 2.83128 5.73902H6.41975C6.54703 5.73902 6.65021 5.8384 6.65021 5.96098V8.33902C6.65021 8.4616 6.54703 8.56098 6.41975 8.56098H2.83128C2.704 8.56098 2.60082 8.4616 2.60082 8.33902V5.96098ZM10.4362 3.42439V6.02439H13.1358V3.42439H10.4362ZM10.107 2.88537C9.97972 2.88537 9.87654 2.98474 9.87654 3.10732V6.34146C9.87654 6.46404 9.97972 6.56341 10.107 6.56341H13.465C13.5923 6.56341 13.6955 6.46404 13.6955 6.34146V3.10732C13.6955 2.98474 13.5923 2.88537 13.465 2.88537H10.107ZM12.3457 4.72439C12.3457 5.04594 12.0812 5.29512 11.7695 5.29512C11.4579 5.29512 11.1934 5.04594 11.1934 4.72439C11.1934 4.40284 11.4579 4.15366 11.7695 4.15366C12.0812 4.15366 12.3457 4.40284 12.3457 4.72439ZM12.7737 4.72439C12.7737 5.26725 12.3241 5.70732 11.7695 5.70732C11.215 5.70732 10.7654 5.26725 10.7654 4.72439C10.7654 4.18153 11.215 3.74146 11.7695 3.74146C12.3241 3.74146 12.7737 4.18153 12.7737 4.72439ZM9.0535 8.68781C9.0535 8.56523 9.15667 8.46585 9.28395 8.46585H9.87654C10.0038 8.46585 10.107 8.56523 10.107 8.68781V8.75122C10.107 8.8738 10.0038 8.97317 9.87654 8.97317H9.28395C9.15667 8.97317 9.0535 8.8738 9.0535 8.75122V8.68781ZM12.3786 8.46585C12.2513 8.46585 12.1481 8.56523 12.1481 8.68781V8.75122C12.1481 8.8738 12.2513 8.97317 12.3786 8.97317H12.9712C13.0985 8.97317 13.2016 8.8738 13.2016 8.75122V8.68781C13.2016 8.56523 13.0985 8.46585 12.9712 8.46585H12.3786ZM13.8601 3.55122C13.8601 3.42864 13.9633 3.32927 14.0905 3.32927H14.4856C14.6129 3.32927 14.716 3.42864 14.716 3.55122V3.58293C14.716 3.70551 14.6129 3.80488 14.4856 3.80488H14.0905C13.9633 3.80488 13.8601 3.70551 13.8601 3.58293V3.55122ZM9.08642 3.32927C8.95914 3.32927 8.85597 3.42864 8.85597 3.55122V3.58293C8.85597 3.70551 8.95914 3.80488 9.08642 3.80488H9.48148C9.60876 3.80488 9.71193 3.70551 9.71193 3.58293V3.55122C9.71193 3.42864 9.60876 3.32927 9.48148 3.32927H9.08642ZM13.0041 1.87073C13.1314 1.87073 13.2346 1.9701 13.2346 2.09268V2.47317C13.2346 2.59575 13.1314 2.69512 13.0041 2.69512H12.9712C12.8439 2.69512 12.7407 2.59575 12.7407 2.47317V2.09268C12.7407 1.9701 12.8439 1.87073 12.9712 1.87073H13.0041ZM13.2346 6.97561C13.2346 6.85303 13.1314 6.75366 13.0041 6.75366H12.9712C12.8439 6.75366 12.7407 6.85303 12.7407 6.97561V7.3561C12.7407 7.47868 12.8439 7.57805 12.9712 7.57805H13.0041C13.1314 7.57805 13.2346 7.47868 13.2346 7.3561V6.97561ZM14.0905 4.12195C13.9633 4.12195 13.8601 4.22132 13.8601 4.3439V4.37561C13.8601 4.49819 13.9633 4.59756 14.0905 4.59756H14.4856C14.6129 4.59756 14.716 4.49819 14.716 4.37561V4.3439C14.716 4.22132 14.6129 4.12195 14.4856 4.12195H14.0905ZM8.85597 4.3439C8.85597 4.22132 8.95914 4.12195 9.08642 4.12195H9.48148C9.60876 4.12195 9.71193 4.22132 9.71193 4.3439V4.37561C9.71193 4.49819 9.60876 4.59756 9.48148 4.59756H9.08642C8.95914 4.59756 8.85597 4.49819 8.85597 4.37561V4.3439ZM12.4115 2.09268C12.4115 1.9701 12.3083 1.87073 12.1811 1.87073H12.1481C12.0209 1.87073 11.9177 1.9701 11.9177 2.09268V2.47317C11.9177 2.59575 12.0209 2.69512 12.1481 2.69512H12.1811C12.3083 2.69512 12.4115 2.59575 12.4115 2.47317V2.09268ZM12.1811 6.75366C12.3083 6.75366 12.4115 6.85303 12.4115 6.97561V7.3561C12.4115 7.47868 12.3083 7.57805 12.1811 7.57805H12.1481C12.0209 7.57805 11.9177 7.47868 11.9177 7.3561V6.97561C11.9177 6.85303 12.0209 6.75366 12.1481 6.75366H12.1811ZM13.8601 5.10488C13.8601 4.9823 13.9633 4.88293 14.0905 4.88293H14.4856C14.6129 4.88293 14.716 4.9823 14.716 5.10488V5.13659C14.716 5.25916 14.6129 5.35854 14.4856 5.35854H14.0905C13.9633 5.35854 13.8601 5.25916 13.8601 5.13659V5.10488ZM9.08642 4.88293C8.95914 4.88293 8.85597 4.9823 8.85597 5.10488V5.13659C8.85597 5.25916 8.95914 5.35854 9.08642 5.35854H9.48148C9.60876 5.35854 9.71193 5.25916 9.71193 5.13659V5.10488C9.71193 4.9823 9.60876 4.88293 9.48148 4.88293H9.08642ZM11.3909 1.87073C11.5182 1.87073 11.6214 1.9701 11.6214 2.09268V2.47317C11.6214 2.59575 11.5182 2.69512 11.3909 2.69512H11.358C11.2307 2.69512 11.1276 2.59575 11.1276 2.47317V2.09268C11.1276 1.9701 11.2307 1.87073 11.358 1.87073H11.3909ZM11.6214 6.97561C11.6214 6.85303 11.5182 6.75366 11.3909 6.75366H11.358C11.2307 6.75366 11.1276 6.85303 11.1276 6.97561V7.3561C11.1276 7.47868 11.2307 7.57805 11.358 7.57805H11.3909C11.5182 7.57805 11.6214 7.47868 11.6214 7.3561V6.97561ZM13.8601 5.86585C13.8601 5.74327 13.9633 5.6439 14.0905 5.6439H14.4856C14.6129 5.6439 14.716 5.74327 14.716 5.86585V5.89756C14.716 6.02014 14.6129 6.11951 14.4856 6.11951H14.0905C13.9633 6.11951 13.8601 6.02014 13.8601 5.89756V5.86585ZM9.08642 5.6439C8.95914 5.6439 8.85597 5.74327 8.85597 5.86585V5.89756C8.85597 6.02014 8.95914 6.11951 9.08642 6.11951H9.48148C9.60876 6.11951 9.71193 6.02014 9.71193 5.89756V5.86585C9.71193 5.74327 9.60876 5.6439 9.48148 5.6439H9.08642ZM10.6008 1.87073C10.7281 1.87073 10.8313 1.9701 10.8313 2.09268V2.47317C10.8313 2.59575 10.7281 2.69512 10.6008 2.69512H10.5679C10.4406 2.69512 10.3374 2.59575 10.3374 2.47317V2.09268C10.3374 1.9701 10.4406 1.87073 10.5679 1.87073H10.6008ZM10.8313 6.97561C10.8313 6.85303 10.7281 6.75366 10.6008 6.75366H10.5679C10.4406 6.75366 10.3374 6.85303 10.3374 6.97561V7.3561C10.3374 7.47868 10.4406 7.57805 10.5679 7.57805H10.6008C10.7281 7.57805 10.8313 7.47868 10.8313 7.3561V6.97561ZM13.6955 8.68781C13.6955 8.56523 13.7986 8.46585 13.9259 8.46585H14.5185C14.6458 8.46585 14.749 8.56523 14.749 8.68781V8.75122C14.749 8.8738 14.6458 8.97317 14.5185 8.97317H13.9259C13.7986 8.97317 13.6955 8.8738 13.6955 8.75122V8.68781ZM13.9259 9.44878C13.7986 9.44878 13.6955 9.54815 13.6955 9.67073V9.73415C13.6955 9.85673 13.7986 9.9561 13.9259 9.9561H14.5185C14.6458 9.9561 14.749 9.85673 14.749 9.73415V9.67073C14.749 9.54815 14.6458 9.44878 14.5185 9.44878H13.9259ZM10.6008 9.67073C10.6008 9.54815 10.704 9.44878 10.8313 9.44878H11.4239C11.5511 9.44878 11.6543 9.54815 11.6543 9.67073V9.73415C11.6543 9.85673 11.5511 9.9561 11.4239 9.9561H10.8313C10.704 9.9561 10.6008 9.85673 10.6008 9.73415V9.67073ZM9.28395 9.44878C9.15667 9.44878 9.0535 9.54815 9.0535 9.67073V9.73415C9.0535 9.85673 9.15667 9.9561 9.28395 9.9561H9.87654C10.0038 9.9561 10.107 9.85673 10.107 9.73415V9.67073C10.107 9.54815 10.0038 9.44878 9.87654 9.44878H9.28395Z" fill="#0C1C29" fill-opacity="0.6"/> +</svg> diff --git a/src/assets/images/event-logs/resolved-button.svg b/src/assets/images/event-logs/resolved-button.svg new file mode 100644 index 00000000..40e76bf0 --- /dev/null +++ b/src/assets/images/event-logs/resolved-button.svg @@ -0,0 +1,3 @@ +<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M9.00001 0.666748C4.40001 0.666748 0.666672 4.40008 0.666672 9.00008C0.666672 13.6001 4.40001 17.3334 9.00001 17.3334C13.6 17.3334 17.3333 13.6001 17.3333 9.00008C17.3333 4.40008 13.6 0.666748 9.00001 0.666748ZM9.00001 15.6667C5.32501 15.6667 2.33334 12.6751 2.33334 9.00008C2.33334 5.32508 5.32501 2.33341 9.00001 2.33341C12.675 2.33341 15.6667 5.32508 15.6667 9.00008C15.6667 12.6751 12.675 15.6667 9.00001 15.6667ZM12.2333 5.90841L7.33334 10.8084L5.76667 9.24175C5.44167 8.91675 4.91667 8.91675 4.59167 9.24175C4.26667 9.56675 4.26667 10.0917 4.59167 10.4167L6.75001 12.5751C7.07501 12.9001 7.60001 12.9001 7.92501 12.5751L13.4167 7.08342C13.7417 6.75841 13.7417 6.23342 13.4167 5.90841C13.0917 5.58342 12.5583 5.58342 12.2333 5.90841Z" fill="#E11717"/> +</svg> diff --git a/src/assets/images/event-logs/resolved.svg b/src/assets/images/event-logs/resolved.svg new file mode 100644 index 00000000..ae48e6aa --- /dev/null +++ b/src/assets/images/event-logs/resolved.svg @@ -0,0 +1,3 @@ +<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M7.00004 0.333496C3.32004 0.333496 0.333374 3.32016 0.333374 7.00016C0.333374 10.6802 3.32004 13.6668 7.00004 13.6668C10.68 13.6668 13.6667 10.6802 13.6667 7.00016C13.6667 3.32016 10.68 0.333496 7.00004 0.333496ZM7.00004 12.3335C4.06004 12.3335 1.66671 9.94016 1.66671 7.00016C1.66671 4.06016 4.06004 1.66683 7.00004 1.66683C9.94004 1.66683 12.3334 4.06016 12.3334 7.00016C12.3334 9.94016 9.94004 12.3335 7.00004 12.3335ZM9.58671 4.52683L5.66671 8.44683L4.41337 7.1935C4.15337 6.9335 3.73337 6.9335 3.47337 7.1935C3.21337 7.4535 3.21337 7.8735 3.47337 8.1335L5.20004 9.86016C5.46004 10.1202 5.88004 10.1202 6.14004 9.86016L10.5334 5.46683C10.7934 5.20683 10.7934 4.78683 10.5334 4.52683C10.2734 4.26683 9.84671 4.26683 9.58671 4.52683Z" fill="#4EBF19"/> +</svg> diff --git a/src/assets/images/event-logs/sort-icon-rotate.svg b/src/assets/images/event-logs/sort-icon-rotate.svg new file mode 100644 index 00000000..b4c8833a --- /dev/null +++ b/src/assets/images/event-logs/sort-icon-rotate.svg @@ -0,0 +1,3 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M3 6H9V8H3V6ZM3 18V16H21V18H3ZM3 11H15V13H3V11Z" fill="#0C1C29"/> +</svg> diff --git a/src/assets/images/event-logs/sort-icon.svg b/src/assets/images/event-logs/sort-icon.svg new file mode 100644 index 00000000..885ae23d --- /dev/null +++ b/src/assets/images/event-logs/sort-icon.svg @@ -0,0 +1,3 @@ +<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M1.33333 10H4.66667C5.125 10 5.5 9.625 5.5 9.16667C5.5 8.70833 5.125 8.33333 4.66667 8.33333H1.33333C0.875 8.33333 0.5 8.70833 0.5 9.16667C0.5 9.625 0.875 10 1.33333 10ZM0.5 0.833333C0.5 1.29167 0.875 1.66667 1.33333 1.66667H14.6667C15.125 1.66667 15.5 1.29167 15.5 0.833333C15.5 0.375 15.125 0 14.6667 0H1.33333C0.875 0 0.5 0.375 0.5 0.833333ZM1.33333 5.83333H9.66667C10.125 5.83333 10.5 5.45833 10.5 5C10.5 4.54167 10.125 4.16667 9.66667 4.16667H1.33333C0.875 4.16667 0.5 4.54167 0.5 5C0.5 5.45833 0.875 5.83333 1.33333 5.83333Z" fill="#0C1C29" fill-opacity="0.3"/> +</svg> diff --git a/src/assets/images/event-logs/time.svg b/src/assets/images/event-logs/time.svg new file mode 100644 index 00000000..2a8c2cfd --- /dev/null +++ b/src/assets/images/event-logs/time.svg @@ -0,0 +1,3 @@ +<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M8.33328 0.666504H5.66661C5.29994 0.666504 4.99994 0.966504 4.99994 1.33317C4.99994 1.69984 5.29994 1.99984 5.66661 1.99984H8.33328C8.69994 1.99984 8.99994 1.69984 8.99994 1.33317C8.99994 0.966504 8.69994 0.666504 8.33328 0.666504ZM6.99994 9.33317C7.36661 9.33317 7.66661 9.03317 7.66661 8.6665V5.99984C7.66661 5.63317 7.36661 5.33317 6.99994 5.33317C6.63328 5.33317 6.33328 5.63317 6.33328 5.99984V8.6665C6.33328 9.03317 6.63328 9.33317 6.99994 9.33317ZM11.6866 4.9265L12.1866 4.4265C12.4399 4.17317 12.4466 3.75317 12.1866 3.49317L12.1799 3.4865C11.9199 3.2265 11.5066 3.23317 11.2466 3.4865L10.7466 3.9865C9.71328 3.15984 8.41328 2.6665 6.99994 2.6665C3.79994 2.6665 1.07994 5.3065 0.999945 8.5065C0.913278 11.8932 3.62661 14.6665 6.99994 14.6665C10.3199 14.6665 12.9999 11.9798 12.9999 8.6665C12.9999 7.25317 12.5066 5.95317 11.6866 4.9265ZM6.99994 13.3332C4.41994 13.3332 2.33328 11.2465 2.33328 8.6665C2.33328 6.0865 4.41994 3.99984 6.99994 3.99984C9.57994 3.99984 11.6666 6.0865 11.6666 8.6665C11.6666 11.2465 9.57994 13.3332 6.99994 13.3332Z" fill="#0C1C29" fill-opacity="0.3"/> +</svg> diff --git a/src/assets/images/fans-page/fans-icon.svg b/src/assets/images/fans-page/fans-icon.svg new file mode 100644 index 00000000..eddb89ab --- /dev/null +++ b/src/assets/images/fans-page/fans-icon.svg @@ -0,0 +1,3 @@ +<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M5.0071 14.5899C5.88063 15.1221 6.9438 15.3043 7.65225 15.3043L7.65225 9.70443C7.02871 9.57786 6.52632 9.1177 6.33946 8.51834C5.89187 8.63106 5.42752 8.80613 5.0071 9.06226C4.15196 9.58323 3.47829 10.4354 3.47829 11.8261C3.47829 13.2168 4.15196 14.0689 5.0071 14.5899ZM6.29572 7.65225H0.695659C0.695659 6.9438 0.877919 5.88063 1.41009 5.0071C1.93106 4.15196 2.7832 3.47829 4.17391 3.47829C5.56463 3.47829 6.41677 4.15196 6.93774 5.0071C7.19388 5.42754 7.36896 5.8919 7.48167 6.33951C6.88238 6.5264 6.42228 7.02876 6.29572 7.65225ZM8.34791 7.01596C8.23911 6.97751 8.12204 6.95659 8.00008 6.95659C7.86275 6.95659 7.73161 6.98312 7.61152 7.03133C7.3343 7.14262 7.11592 7.36946 7.01596 7.65225C6.97751 7.76104 6.95659 7.87812 6.95659 8.00008C6.95659 8.13735 6.9831 8.26843 7.03127 8.38849C7.14254 8.66578 7.36941 8.88422 7.65225 8.98419C7.76104 9.02264 7.87812 9.04356 8.00008 9.04356C8.18346 9.04356 8.35579 8.99625 8.50554 8.91318C8.7268 8.79044 8.89876 8.58961 8.98419 8.34791C9.02264 8.23911 9.04356 8.12204 9.04356 8.00008C9.04356 7.81664 8.99623 7.64425 8.91311 7.49447C8.79035 7.27328 8.58956 7.10138 8.34791 7.01596ZM9.586 7.28526C9.35937 6.78322 8.90135 6.40806 8.34791 6.29572V0.746159C8.96378 0.831471 9.67823 1.03288 10.2974 1.41009C11.1525 1.93106 11.8262 2.7832 11.8262 4.17391C11.8262 5.56463 11.1525 6.41677 10.2974 6.93774C10.0699 7.07632 9.82958 7.19117 9.586 7.28526ZM9.70444 8.34791C9.59208 8.9014 9.21686 9.35945 8.71476 9.58606C8.80884 9.82962 8.92369 10.0699 9.06226 10.2974C9.58323 11.1525 10.4354 11.8262 11.8261 11.8262C13.2168 11.8262 14.0689 11.1525 14.5899 10.2974C14.9671 9.67823 15.1685 8.96378 15.2538 8.34791H9.70444ZM8.34791 10.4501V16L7.65225 16C6.85343 16 5.65572 15.7997 4.64517 15.184C3.61623 14.5571 2.78264 13.4962 2.78264 11.8261C2.78264 10.1559 3.61623 9.09503 4.64517 8.46817C4.7141 8.42617 4.78391 8.38611 4.8544 8.34791H1.9281e-06L0 7.65225C0 6.85343 0.200349 5.65572 0.816001 4.64517C1.44286 3.61623 2.50376 2.78264 4.17391 2.78264C5.84407 2.78264 6.90497 3.61623 7.53183 4.64517C7.57388 4.7142 7.614 4.7841 7.65225 4.85469V0.695659V0.347832V0C8.45106 0 9.64878 0.200348 10.6593 0.816001C11.6883 1.44286 12.5219 2.50376 12.5219 4.17391C12.5219 5.84407 11.6883 6.90497 10.6593 7.53183C10.5903 7.57388 10.5204 7.614 10.4498 7.65225H15.3043H15.6522H16C16 8.45106 15.7997 9.64878 15.184 10.6593C14.5571 11.6883 13.4962 12.5219 11.8261 12.5219C10.1559 12.5219 9.09503 11.6883 8.46817 10.6593C8.42617 10.5904 8.38611 10.5206 8.34791 10.4501Z" fill="#E11717"/> +</svg> diff --git a/src/assets/images/fans-page/notWorking.svg b/src/assets/images/fans-page/notWorking.svg new file mode 100644 index 00000000..d84bedbc --- /dev/null +++ b/src/assets/images/fans-page/notWorking.svg @@ -0,0 +1,3 @@ +<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M10.5751 6.25033L9.00008 7.82533L7.42508 6.25033C7.10008 5.92533 6.57508 5.92533 6.25008 6.25033C5.92508 6.57533 5.92508 7.10033 6.25008 7.42533L7.82508 9.00033L6.25008 10.5753C5.92508 10.9003 5.92508 11.4253 6.25008 11.7503C6.57508 12.0753 7.10008 12.0753 7.42508 11.7503L9.00008 10.1753L10.5751 11.7503C10.9001 12.0753 11.4251 12.0753 11.7501 11.7503C12.0751 11.4253 12.0751 10.9003 11.7501 10.5753L10.1751 9.00033L11.7501 7.42533C12.0751 7.10033 12.0751 6.57533 11.7501 6.25033C11.4251 5.93366 10.8917 5.93366 10.5751 6.25033ZM9.00008 0.666992C4.39175 0.666992 0.666748 4.39199 0.666748 9.00033C0.666748 13.6087 4.39175 17.3337 9.00008 17.3337C13.6084 17.3337 17.3334 13.6087 17.3334 9.00033C17.3334 4.39199 13.6084 0.666992 9.00008 0.666992ZM9.00008 15.667C5.32508 15.667 2.33341 12.6753 2.33341 9.00033C2.33341 5.32533 5.32508 2.33366 9.00008 2.33366C12.6751 2.33366 15.6667 5.32533 15.6667 9.00033C15.6667 12.6753 12.6751 15.667 9.00008 15.667Z" fill="#FF4141"/> +</svg> diff --git a/src/assets/images/fans-page/working.svg b/src/assets/images/fans-page/working.svg new file mode 100644 index 00000000..e97abf4a --- /dev/null +++ b/src/assets/images/fans-page/working.svg @@ -0,0 +1,3 @@ +<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M9.00008 0.666992C4.40008 0.666992 0.666748 4.40033 0.666748 9.00033C0.666748 13.6003 4.40008 17.3337 9.00008 17.3337C13.6001 17.3337 17.3334 13.6003 17.3334 9.00033C17.3334 4.40033 13.6001 0.666992 9.00008 0.666992ZM9.00008 15.667C5.32508 15.667 2.33341 12.6753 2.33341 9.00033C2.33341 5.32533 5.32508 2.33366 9.00008 2.33366C12.6751 2.33366 15.6667 5.32533 15.6667 9.00033C15.6667 12.6753 12.6751 15.667 9.00008 15.667ZM12.2334 5.90866L7.33342 10.8087L5.76675 9.24199C5.44175 8.91699 4.91675 8.91699 4.59175 9.24199C4.26675 9.56699 4.26675 10.092 4.59175 10.417L6.75008 12.5753C7.07508 12.9003 7.60008 12.9003 7.92508 12.5753L13.4167 7.08366C13.7417 6.75866 13.7417 6.23366 13.4167 5.90866C13.0917 5.58366 12.5584 5.58366 12.2334 5.90866Z" fill="#4EBF19"/> +</svg> diff --git a/src/assets/images/frequency-icon.svg b/src/assets/images/frequency-icon.svg new file mode 100644 index 00000000..65a3d913 --- /dev/null +++ b/src/assets/images/frequency-icon.svg @@ -0,0 +1,3 @@ +<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M2.19997 12.7795L7.49997 7.47954L10.75 10.7295C11.16 11.1395 11.82 11.1195 12.2 10.6895L19.37 2.61954C19.72 2.22954 19.7 1.62954 19.33 1.24954C18.93 0.84954 18.26 0.85954 17.88 1.28954L11.49 8.46954L8.19997 5.17954C7.80997 4.78954 7.17997 4.78954 6.78997 5.17954L0.699971 11.2795C0.309971 11.6695 0.309971 12.2995 0.699971 12.6895L0.789971 12.7795C1.17997 13.1695 1.81997 13.1695 2.19997 12.7795Z" fill="#E11717"/> +</svg> diff --git a/src/assets/images/icon-chevron.svg b/src/assets/images/icon-chevron.svg new file mode 100644 index 00000000..597287ef --- /dev/null +++ b/src/assets/images/icon-chevron.svg @@ -0,0 +1,3 @@ +<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M8.23332 0.741797L4.99998 3.97513L1.76665 0.741797C1.44165 0.416797 0.91665 0.416797 0.59165 0.741797C0.26665 1.0668 0.26665 1.5918 0.59165 1.9168L4.41665 5.7418C4.74165 6.0668 5.26665 6.0668 5.59165 5.7418L9.41665 1.9168C9.74165 1.5918 9.74165 1.0668 9.41665 0.741797C9.09165 0.42513 8.55832 0.416797 8.23332 0.741797Z" fill="#0C1C29" fill-opacity="0.9"/> +</svg> diff --git a/src/assets/images/icon-no.svg b/src/assets/images/icon-no.svg new file mode 100644 index 00000000..4cb0d8e8 --- /dev/null +++ b/src/assets/images/icon-no.svg @@ -0,0 +1,3 @@ +<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M11.2496 0.258431C10.9246 -0.0665688 10.3996 -0.0665688 10.0746 0.258431L5.99961 4.3251L1.92461 0.250098C1.59961 -0.0749023 1.07461 -0.0749023 0.749609 0.250098C0.424609 0.575098 0.424609 1.1001 0.749609 1.4251L4.82461 5.5001L0.749609 9.5751C0.424609 9.9001 0.424609 10.4251 0.749609 10.7501C1.07461 11.0751 1.59961 11.0751 1.92461 10.7501L5.99961 6.6751L10.0746 10.7501C10.3996 11.0751 10.9246 11.0751 11.2496 10.7501C11.5746 10.4251 11.5746 9.9001 11.2496 9.5751L7.17461 5.5001L11.2496 1.4251C11.5663 1.10843 11.5663 0.575098 11.2496 0.258431Z" fill="#FF4141"/> +</svg> diff --git a/src/assets/images/icon-ok.svg b/src/assets/images/icon-ok.svg new file mode 100644 index 00000000..2534daca --- /dev/null +++ b/src/assets/images/icon-ok.svg @@ -0,0 +1,3 @@ +<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M4.49993 9.0001L1.58327 6.08343C1.25827 5.75843 0.741602 5.75843 0.416602 6.08343C0.0916016 6.40843 0.0916016 6.9251 0.416602 7.2501L3.90827 10.7418C4.23327 11.0668 4.75827 11.0668 5.08327 10.7418L13.9166 1.91676C14.2416 1.59176 14.2416 1.0751 13.9166 0.750098C13.5916 0.425098 13.0749 0.425098 12.7499 0.750098L4.49993 9.0001Z" fill="#4EBF19"/> +</svg> diff --git a/src/assets/images/labels/critical.svg b/src/assets/images/labels/critical.svg new file mode 100644 index 00000000..a154ad18 --- /dev/null +++ b/src/assets/images/labels/critical.svg @@ -0,0 +1,4 @@ +<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"> +<rect width="8" height="8" rx="2" fill="#FF4141" fill-opacity="0.1"/> +<rect x="0.5" y="0.5" width="7" height="7" rx="1.5" stroke="#040A0F" stroke-opacity="0.3"/> +</svg> diff --git a/src/assets/images/labels/non-normal.svg b/src/assets/images/labels/non-normal.svg new file mode 100644 index 00000000..2a31e325 --- /dev/null +++ b/src/assets/images/labels/non-normal.svg @@ -0,0 +1,4 @@ +<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"> +<rect width="8" height="8" rx="2" fill="#F0AC0C" fill-opacity="0.1"/> +<rect x="0.5" y="0.5" width="7" height="7" rx="1.5" stroke="#040A0F" stroke-opacity="0.3"/> +</svg> diff --git a/src/assets/images/labels/shutdown.svg b/src/assets/images/labels/shutdown.svg new file mode 100644 index 00000000..0404f277 --- /dev/null +++ b/src/assets/images/labels/shutdown.svg @@ -0,0 +1,3 @@ +<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"> +<rect width="8" height="8" rx="2" fill="#1A3E5B" fill-opacity="0.75"/> +</svg> diff --git a/src/assets/images/labels/warning.svg b/src/assets/images/labels/warning.svg new file mode 100644 index 00000000..3d31df37 --- /dev/null +++ b/src/assets/images/labels/warning.svg @@ -0,0 +1,3 @@ +<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"> +<rect width="8" height="8" rx="2" fill="#E11717"/> +</svg> diff --git a/src/assets/images/power-error-icon.svg b/src/assets/images/power-error-icon.svg new file mode 100644 index 00000000..e9400b20 --- /dev/null +++ b/src/assets/images/power-error-icon.svg @@ -0,0 +1,3 @@ +<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M6.5 1.99378L11.52 10.6671H1.48L6.5 1.99378ZM0.326666 10.0004C-0.186667 10.8871 0.453333 12.0004 1.48 12.0004H11.52C12.5467 12.0004 13.1867 10.8871 12.6733 10.0004L7.65333 1.32711C7.14 0.440443 5.86 0.440443 5.34667 1.32711L0.326666 10.0004ZM5.83333 5.33378V6.66711C5.83333 7.03378 6.13333 7.33378 6.5 7.33378C6.86667 7.33378 7.16667 7.03378 7.16667 6.66711V5.33378C7.16667 4.96711 6.86667 4.66711 6.5 4.66711C6.13333 4.66711 5.83333 4.96711 5.83333 5.33378ZM5.83333 8.66711H7.16667V10.0004H5.83333V8.66711Z" fill="#FF4141"/> +</svg> diff --git a/src/assets/images/power-icon.svg b/src/assets/images/power-icon.svg new file mode 100644 index 00000000..9af28988 --- /dev/null +++ b/src/assets/images/power-icon.svg @@ -0,0 +1,3 @@ +<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M0.5 14H4.02205L4.77627 9.65234H7.15277C10.5183 9.65234 12.9232 7.76563 13.4142 4.84668C13.9123 1.96191 12.2188 0 8.9387 0H2.91919L0.5 14ZM5.23876 6.98633L5.97875 2.72754H7.71487C9.30157 2.72754 9.98464 3.54102 9.77118 4.84668C9.55061 6.13867 8.57582 6.98633 6.96777 6.98633H5.23876Z" fill="#E11717"/> +</svg> diff --git a/src/assets/images/processors-page/error-icon.svg b/src/assets/images/processors-page/error-icon.svg new file mode 100644 index 00000000..a154ad18 --- /dev/null +++ b/src/assets/images/processors-page/error-icon.svg @@ -0,0 +1,4 @@ +<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"> +<rect width="8" height="8" rx="2" fill="#FF4141" fill-opacity="0.1"/> +<rect x="0.5" y="0.5" width="7" height="7" rx="1.5" stroke="#040A0F" stroke-opacity="0.3"/> +</svg> diff --git a/src/assets/images/refresh.svg b/src/assets/images/refresh.svg new file mode 100644 index 00000000..0b84e1a1 --- /dev/null +++ b/src/assets/images/refresh.svg @@ -0,0 +1,3 @@ +<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M9.76672 2.23365C8.68005 1.14699 7.14005 0.52032 5.44672 0.693654C3.00005 0.94032 0.986722 2.92699 0.713388 5.37365C0.346722 8.60699 2.84672 11.3337 6.00005 11.3337C8.12672 11.3337 9.95339 10.087 10.8067 8.29365C11.0201 7.84699 10.7001 7.33365 10.2067 7.33365C9.96005 7.33365 9.72672 7.46699 9.62006 7.68699C8.86672 9.30699 7.06005 10.3337 5.08672 9.89365C3.60672 9.56699 2.41339 8.36032 2.10005 6.88032C1.54005 4.29365 3.50672 2.00032 6.00005 2.00032C7.10672 2.00032 8.09339 2.46032 8.81339 3.18699L7.80672 4.19365C7.38672 4.61365 7.68005 5.33365 8.27339 5.33365H10.6667C11.0334 5.33365 11.3334 5.03365 11.3334 4.66699V2.27365C11.3334 1.68032 10.6134 1.38032 10.1934 1.80032L9.76672 2.23365Z" fill="#040A0F" fill-opacity="0.6"/> +</svg> diff --git a/src/assets/images/temperature-icon.svg b/src/assets/images/temperature-icon.svg new file mode 100644 index 00000000..8feecae4 --- /dev/null +++ b/src/assets/images/temperature-icon.svg @@ -0,0 +1,3 @@ +<svg width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M2.59649 8.70217V2.11563C2.72082 1.71432 3.14137 1.08777 3.96881 1.08777C4.80097 1.08777 5.25676 1.71835 5.40351 2.1269V8.5628V8.70217H5.40718L5.1428 9.2957C6.08491 9.74384 6.73684 10.7272 6.73684 11.8665C6.73684 13.4284 5.51152 14.6947 4 14.6947C2.48848 14.6947 1.26316 13.4284 1.26316 11.8665C1.26316 10.7267 1.91563 9.74303 2.85836 9.29515L2.59455 8.70217H2.59649ZM1.47368 8.66168V2.07598C1.47368 2.01444 1.48068 1.94562 1.50067 1.87278C1.67069 1.25325 2.37741 0 3.96881 0C5.54465 0 6.29377 1.23221 6.49026 1.84692C6.51676 1.92982 6.52632 2.00947 6.52632 2.08119V8.66168C7.42514 9.4192 8 10.5731 8 11.8665C8 14.1494 6.20914 16 4 16C1.79086 16 0 14.1494 0 11.8665C0 10.5731 0.574857 9.4192 1.47368 8.66168ZM6 12C6 13.1046 5.10457 14 4 14C2.89543 14 2 13.1046 2 12C2 11.2597 2.5 10 3.5 10V4H4.5V10C5.5 10 6 11.2597 6 12Z" fill="#E11717"/> +</svg> diff --git a/src/assets/images/usage-icon.svg b/src/assets/images/usage-icon.svg new file mode 100644 index 00000000..9fda1696 --- /dev/null +++ b/src/assets/images/usage-icon.svg @@ -0,0 +1,3 @@ +<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M3.16321 0.102643C4.54537 -0.192399 6.29362 0.133249 7.39198 1.27964C7.98027 1.89366 8.2714 2.72271 8.40553 3.48547C8.53189 4.20407 8.52564 4.90096 8.47505 5.38722L15.8329 13.0669C16.0557 13.2994 16.0557 13.6764 15.8329 13.9089L14.0101 15.8115C13.7873 16.044 13.4261 16.044 13.2033 15.8115L5.70737 7.9877C4.77612 8.37143 2.93189 8.6634 1.52967 7.19986C0.171603 5.78239 0.192261 3.81534 0.401181 2.77598C0.496812 2.30021 1.03059 2.1886 1.32768 2.47483L3.32312 4.39732L4.68077 3.12199L2.86961 1.07409C2.59026 0.758221 2.70918 0.199563 3.16321 0.102643ZM3.68069 0.820729L5.37031 2.7312C5.58592 2.97499 5.56902 3.35569 5.33275 3.57764L3.70313 5.10844C3.48413 5.31417 3.15105 5.31198 2.93456 5.10339L1.08634 3.32274C0.981164 4.26701 1.11097 5.64009 2.06752 6.63848C3.20578 7.82653 4.75518 7.5583 5.516 7.21114C5.72564 7.11548 5.98261 7.15223 6.15778 7.33506L13.6067 15.1098L15.1606 13.4879L7.87306 5.88164C7.74401 5.74696 7.68786 5.56053 7.70995 5.3803C7.76124 4.96181 7.77604 4.3035 7.65739 3.62879C7.53814 2.95063 7.29165 2.29767 6.85413 1.84101C6.06616 1.01859 4.7991 0.691294 3.68069 0.820729ZM14.8253 0.944666L12.6624 1.54665L9.12165 5.24229L8.5838 4.68092L12.1607 0.947577C12.2317 0.8735 12.3201 0.820278 12.4171 0.793285L14.9247 0.0953439C15.3331 -0.0183267 15.714 0.354845 15.6311 0.787439L15.1319 3.39272C15.1098 3.50799 15.0555 3.61386 14.9759 3.69698L11.2134 7.624L10.6756 7.06263L14.3973 3.1781L14.8253 0.944666ZM5.12832 9.01333L2.74696 11.4988L4.46764 13.1451L7.25269 10.2382L7.79054 10.7996L4.748 13.9752L2.97515 15.8256C2.75918 16.051 2.41143 16.0589 2.18628 15.8435L0.184992 13.9287C-0.0544278 13.6997 -0.0625714 13.3085 0.16709 13.0688L1.92824 11.2306L4.59047 8.45196L5.12832 9.01333ZM2.20861 12.0607L3.92928 13.707L2.56605 15.1299L0.845376 13.4836L2.20861 12.0607Z" fill="#E11717"/> +</svg> diff --git a/src/assets/images/voltage-icon.svg b/src/assets/images/voltage-icon.svg new file mode 100644 index 00000000..dce7dae8 --- /dev/null +++ b/src/assets/images/voltage-icon.svg @@ -0,0 +1,3 @@ +<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M10.4778 0L8.95907 8.62681C8.72378 10.0579 7.46177 11.0974 5.8789 11.0974C4.3103 11.0974 3.41904 10.0579 3.65434 8.62681L5.17303 0H1.64367L0.0821938 8.91707C-0.452558 12.0087 1.65793 14 5.36554 14C9.05176 14 11.9038 12.0087 12.4385 8.91707L14 0H10.4778Z" fill="#E11717"/> +</svg> diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss index 8281ff52..6009774c 100644 --- a/src/assets/styles/bmc/custom/_base.scss +++ b/src/assets/styles/bmc/custom/_base.scss @@ -13,7 +13,7 @@ body { &::-webkit-scrollbar-thumb { margin-top: $header-height; border: 4px solid transparent; - background: rgba(14, 32, 48, 0.384); + background: $faint-secondary-primary-20; border-radius: 16px; background-clip: content-box; } @@ -48,7 +48,7 @@ h6, } .regular-12px { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 12px; font-style: normal; font-weight: 400; @@ -62,10 +62,13 @@ h6, &.tretiatry { color: $text-tretiatry; } + &.quaternary { + color: $text-quaternary; + } } .light-12px { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 12px; font-style: normal; font-weight: 300; @@ -75,8 +78,20 @@ h6, color: $text-secondary; } +.caption-12px { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-tretiatry; +} + + .semi-bold-12px { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 12px; font-style: normal; font-weight: 600; @@ -86,7 +101,7 @@ h6, } .semi-bold-12px__caps { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 12px; font-style: normal; font-weight: 600; @@ -94,14 +109,17 @@ h6, letter-spacing: 0em; text-align: left; text-transform: uppercase; - color: $text-primary !important; + color: $text-primary; &:hover { - color: $text-primary !important; + color: $text-primary; + } + &.tretiatry { + color: $text-tretiatry !important; } } .bold-12px__caps { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 12px; font-style: normal; font-weight: 700; @@ -113,7 +131,7 @@ h6, } .medium-12px { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 12px; font-style: normal; font-weight: 500; @@ -123,8 +141,31 @@ h6, color: $text-primary; } +.regular-14px { + font-family: 'Inter', sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; +} + + +.regular-16px { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 20px; + letter-spacing: 0em; + text-align: left; +} + + .semi-bold-16px { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 16px; font-style: normal; font-weight: 600; @@ -132,8 +173,29 @@ h6, color: $text-primary; } +.medium-16px { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: $text-primary; +} + +.bold-16px { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; +} + .bold-16px__caps { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 16px; font-style: normal; font-weight: 700; @@ -144,9 +206,18 @@ h6, color: $text-secondary; } +.semi-bold-20px { + font-family: 'Inter', sans-serif; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: 24px; + letter-spacing: 0em; + text-align: center; +} .bold-24px { - font-family: Inter; + font-family: 'Inter', sans-serif; font-style: normal; font-weight: bold; font-weight: 700; @@ -156,18 +227,8 @@ h6, margin: 0; } -.text-login { - font-family: Inter; - font-style: normal; - font-weight: 500; - font-size: 12px; - line-height: 16px; - color: $login-page-description-color; - margin: 0 0 0 15px; -} - .auth-description { - font-family: Inter; + font-family: 'Inter', sans-serif; font-style: normal; font-weight: normal; font-size: 12px; diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss index 1afcac0b..e128a6db 100644 --- a/src/assets/styles/bmc/custom/_buttons.scss +++ b/src/assets/styles/bmc/custom/_buttons.scss @@ -24,7 +24,7 @@ background-color: $red-brand-primary; border-radius: 8px; border: none; - font-family: Inter; + font-family: 'Inter', sans-serif; font-style: normal; font-weight: 600; font-size: 16px; @@ -51,11 +51,31 @@ } .btn-secondary { - fill: currentColor; - &:focus, - &:not(:disabled):not(.disabled):active:focus { - border-color: $white; - box-shadow: inset 0 0 0 2px theme-color('secondary'); + background-color: $faint-secondary-primary-5; + color: $red-brand-primary; + border-radius: 8px; + border: none; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 20px; + &:hover { + background-color: $faint-secondary-primary-5-hover; + color: $red-brand-primary; + } + &:focus { + border: none; + box-shadow: 0px 0px 0px 4px rgba(225, 23, 23, 0.5); + color: $red-brand-primary; + background-color: $faint-secondary-primary-5; + } + &:not(:disabled):not(.disabled):active:focus, + &:focus-visible { + border: none; + box-shadow: none; + color: $red-brand-primary; + background-color: $faint-secondary-primary-20; } } @@ -106,4 +126,22 @@ .input-action-btn { padding: 7px; margin: 1px; +} + +.collapse-button { + height: 56px; + width: 100%; + padding: 0 0 0 2rem; + margin: 0; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + gap: 8px; + &:active, + &:focus { + box-shadow: none; + } + &:hover { + color: $text-primary; + } }
\ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss index 9e30359c..7c0a0bd6 100644 --- a/src/assets/styles/bmc/custom/_forms.scss +++ b/src/assets/styles/bmc/custom/_forms.scss @@ -41,13 +41,25 @@ } } +.form-control::-webkit-outer-spin-button, +.form-control::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +.form-control[type='number'] { + -moz-appearance: textfield; +} + // .custom-select, // .custom-control-label, -// .form-control { - // color: theme-color("dark") !important; - // font-size: 1rem; - // border-radius: 8px; -// } +.form-control { + border-radius: 8px; + border: none; + background-color: $faint-secondary-primary-5; + &:hover { + background-color: $faint-secondary-primary-5-hover; + } +} // Inverted form colors .form-background { @@ -79,6 +91,13 @@ line-height: $form-line-height; } +.custom-checkbox ::before { + box-shadow: none !important; + border: 2px solid $on-surface-secondary; + background-color: #fff; + border-radius: 3px; +} + .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after, .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before, .custom-control-input:checked ~ .custom-control-label::before { diff --git a/src/assets/styles/bmc/custom/_popover.scss b/src/assets/styles/bmc/custom/_popover.scss index 681547d1..f539ef54 100644 --- a/src/assets/styles/bmc/custom/_popover.scss +++ b/src/assets/styles/bmc/custom/_popover.scss @@ -15,7 +15,7 @@ background-color: transparent; border: none; padding: 24px 0px 0px 24px; - width: 389px; + width: 400px; } .arrow { diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss index 48d49b2b..bc3be1b2 100644 --- a/src/assets/styles/bmc/custom/_tables.scss +++ b/src/assets/styles/bmc/custom/_tables.scss @@ -60,8 +60,7 @@ .b-table-details { background-color: theme-color("light"); td { - padding-left: calc(50px + (#{$table-cell-padding} * 2)); - padding-right: calc(50px + (#{$table-cell-padding} * 2)); + padding: 0px 16px 16px 16px; } dl { margin: 0; @@ -208,8 +207,16 @@ -moz-border-radius: 0 0 0 0; } +.bootstrap-rounded-table__without-border { + border-top: none !important; + border-radius: 0 0 0 0; + -webkit-border-radius: 0 0 0 0; + -moz-border-radius: 0 0 0 0; +} + .bootstrap-rounded-table__head_bg { background-color: $faint-secondary-primary-10 !important; + color: $text-primary !important; } .bootstrap-rounded-table__td { @@ -225,10 +232,53 @@ } } - .bootstrap-table { border-top: none !important; border: 1px solid rgba(26, 62, 91, 0.1); background-color: $faint-secondary-primary-5; } +.bootstrap-analytical-table { + border: 1px solid rgba(26, 62, 91, 0.3); + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; +} + +.bootstrap-analytical-table__head_bg { + background-color: transparent !important; + color: $text-primary !important; +} + +.bootstrap-analytical-table__column-first { + border-top: none !important; + border-radius: 10px 0 0 0; + -webkit-border-radius: 10px 0 0 0; + -moz-border-radius: 10px 0 0 0; +} + +.bootstrap-analytical-table__column-last { + border-top: none !important; + border-radius: 0 10px 0 0; + -webkit-border-radius: 0 10px 0 0; + -moz-border-radius: 0 10px 0 0; +} + +.bootstrap-analytical-table__column-center { + border-top: none !important; + border-radius: 0 0 0 0; + -webkit-border-radius: 0 0 0 0; + -moz-border-radius: 0 0 0 0; +} + +.bootstrap-analytical-table__td { + border-radius: 0; + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + -khtml-border-radius: 0; + &:hover { + background-color: $faint-secondary-primary-5; + } +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss index 584a7785..e15aef87 100644 --- a/src/assets/styles/bmc/helpers/_colors.scss +++ b/src/assets/styles/bmc/helpers/_colors.scss @@ -44,9 +44,20 @@ $login-page-description-color: rgba(12, 28, 41, 0.6); $text-primary: #0C1C29; $text-secondary: #0C1C29E5; $text-tretiatry: rgba(12, 28, 41, 0.6); +$text-quaternary: rgba(12, 28, 41, 0.3); + +$indicators-errors: #FF4141; +$indicators-succes: #4EBF19; +$indicators-warning: #F0AC0C; +$indicators-complementary:rgba(26, 62, 91, 0.6);; + +$on-surface-primary: #040A0F; $surface-secondary: #F3F4F5; +$on-surface-secondary: rgba(4, 10, 15, 0.6); +$on-surface-tretiatry: #040A0F4D; +$faint-secondary-primary-2: rgba(26, 62, 91, 0.02); $faint-secondary-primary-5: rgba(26, 62, 91, 0.05); $faint-secondary-primary-5-hover: rgba(20, 39, 53, 0.103); $faint-secondary-primary-10: rgba(26, 62, 91, 0.1); @@ -59,10 +70,3 @@ $red-brand-primary-active: #df2323; $red-brand-primary-disabled: #E17171; $red-brand-primary-click: #C71414; $red-brand-primary-5: rgba(225, 23, 23, 0.05); - -$button-color: #E11717; -$button-color-hover: #FC2A2A; -$button-color-active: #df2323; -$button-color-disabled: #E17171; -$button-color-click: #C71414; - diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index eca1e4c8..70631fbf 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -38,7 +38,6 @@ <img class="header-logo" src="@/assets/images/logo-header-sila.svg" - :alt="altLogo" /> </b-navbar-brand> <div v-if="isNavTagPresent" :key="routerKey" class="pl-2 nav-tags"> @@ -108,7 +107,6 @@ <img class="header-clock__icon" src="@/assets/images/header/header-clock.svg" - :alt="altLogo" /> <span style="color: white">15:54:00</span> <b-nav-item @@ -174,11 +172,14 @@ src="@/assets/images/header/icon-notification.svg" /> </b-button> - <b-button id="app-header-logout" class="app-header-logout"> + <b-button + id="app-header-logout" + class="app-header-logout" + @click="logout" + > <img class="header-logout__icon" src="@/assets/images/header/logout-icon.svg" - :alt="altLogo" /> </b-button> </b-navbar> @@ -212,7 +213,6 @@ export default { data() { return { isNavigationOpen: false, - altLogo: process.env.VUE_APP_COMPANY_NAME || 'Built on OpenBMC', }; }, computed: { diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index dc7a58d0..84b81ac6 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -6,7 +6,6 @@ <img class="server__icon" src="@/assets/images/sila-server-navbar-icon.svg" - :alt="altLogo" /> <b-form-group class="server-pagination-select"> <b-form-select @@ -19,11 +18,7 @@ <div class="nav-line"></div> <div class="form-control server-search"> <button class="search-button"> - <img - class="server__icon" - src="@/assets/images/search-icon.svg" - :alt="altLogo" - /> + <img class="server__icon" src="@/assets/images/search-icon.svg" /> </button> <b-form-input type="text" @@ -56,7 +51,7 @@ > {{ navItem.label }} <component :is="navItem.icon" class="icon-expand" /> - <icon-expand class="icon-expand" /> + <!-- <icon-expand class="icon-expand" /> --> </b-button> <b-collapse :id="navItem.id" tag="ul" class="nav-item__nav"> <li class="nav-item"> @@ -92,6 +87,7 @@ //Exact match alias set to support //dotenv customizations. import { AppNavigationMixin, KvmNavigationMixin } from './AppNavigationMixin'; + export default { name: 'AppNavigation', mixins: [AppNavigationMixin, KvmNavigationMixin], @@ -300,7 +296,7 @@ svg { } &::-webkit-scrollbar-thumb { border: 4px solid transparent; - background: rgba(14, 32, 48, 0.384); + background: $faint-secondary-primary-20; border-radius: 16px; background-clip: content-box; } @@ -387,6 +383,7 @@ svg { width: 237px; border: none; height: 48px; + background-image: url('../../assets/images/icon-chevron.svg'); &:focus { box-shadow: none; } diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js index ad5f58b5..7c981ec6 100644 --- a/src/components/AppNavigation/AppNavigationMixin.js +++ b/src/components/AppNavigation/AppNavigationMixin.js @@ -20,12 +20,12 @@ export const AppNavigationMixin = { { id: 'network', label: this.$t('appNavigation.networkParametrs'), - route: '/network', + route: '/network-parametrs', }, { - id: 'post-code-logs', + id: 'event-logs', label: this.$t('appNavigation.eventLogs'), - route: '/logs/post-code-logs', + route: '/event-logs', }, { id: 'server-parametrs', @@ -40,97 +40,114 @@ export const AppNavigationMixin = { icon: 'iconChevronUp', children: [ { - id: 'configuration', + id: 'bmc-configuration', label: this.$t('appNavigation.config'), route: '/bmc-configuration', }, { - id: 'post-code-logs', + id: 'bmc-firmware', label: this.$t('appNavigation.deviceFirmware'), - route: '/logs/post-code-logs', + route: '/bmc-firmware', }, { - id: 'post-code-logs', + id: 'bmc-settings', label: this.$t('appNavigation.broadcast'), - route: '/logs/post-code-logs', + route: '/bmc-settings', }, ], }, + // { + // id: 'analytical-panel', + // label: this.$t('appNavigation.analyticalPanel'), + // route: '/', + // }, + // { + // id: 'RAID', + // label: this.$t('appNavigation.raidControllers'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'overview-info', + // label: this.$t('appNavigation.specifications'), + // route: '/logs/event-logs', + // }, + // { + // id: 'post-code-logs', + // label: this.$t('appNavigation.settings'), + // route: '/logs/post-code-logs', + // }, + // { + // id: 'post-code-logs', + // label: this.$t('appNavigation.cachRaid'), + // route: '/logs/post-code-logs', + // }, + // ], + // }, + // { + // id: 'power-supplies', + // label: this.$t('appNavigation.powerSupplies'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'overview-info', + // label: this.$t('appNavigation.specifications'), + // route: '/logs/event-logs', + // }, + // { + // id: 'post-code-logs', + // label: this.$t('appNavigation.analyticalPanel'), + // route: '/logs/post-code-logs', + // }, + // ], + // }, { - id: 'analytical-panel', - label: this.$t('appNavigation.analyticalPanel'), - route: '/', - }, - { - id: 'RAID', - label: this.$t('appNavigation.raidControllers'), - icon: 'iconChevronUp', - children: [ - { - id: 'overview-info', - label: this.$t('appNavigation.specifications'), - route: '/logs/event-logs', - }, - { - id: 'post-code-logs', - label: this.$t('appNavigation.settings'), - route: '/logs/post-code-logs', - }, - { - id: 'post-code-logs', - label: this.$t('appNavigation.cachRaid'), - route: '/logs/post-code-logs', - }, - ], - }, - { - id: 'memoryModules', - label: this.$t('appNavigation.memoryModules'), + id: 'processors', + label: this.$t('appNavigation.processors'), icon: 'iconChevronUp', children: [ { - id: 'overview-info', - label: this.$t('appNavigation.specifications'), - route: '/logs/event-logs', + id: 'processors-specification', + label: this.$t('appNavigation.specification'), + route: '/processors-specification', }, { - id: 'post-code-logs', + id: 'processors-dynamic-info', label: this.$t('appNavigation.analyticalPanel'), - route: '/logs/post-code-logs', + route: '/processors-dynamic-info', }, ], }, { - id: 'processors', - label: this.$t('appNavigation.processors'), + id: 'power', + label: this.$t('appNavigation.powerSupplies'), icon: 'iconChevronUp', children: [ { - id: 'overview-info', - label: this.$t('appNavigation.specifications'), - route: '/logs/event-logs', + id: 'power-specification', + label: this.$t('appNavigation.specification'), + route: '/power-specification', }, { - id: 'post-code-logs', + id: 'power-dynamic-info', label: this.$t('appNavigation.analyticalPanel'), - route: '/logs/post-code-logs', + route: '/power-dynamic-info', }, ], }, { - id: 'power-supplies', - label: this.$t('appNavigation.powerSupplies'), + id: 'memory', + label: this.$t('appNavigation.memoryModules'), icon: 'iconChevronUp', children: [ { - id: 'overview-info', - label: this.$t('appNavigation.specifications'), - route: '/logs/event-logs', + id: 'memory-specification', + label: this.$t('appNavigation.specification'), + route: '/memory-specification', }, { - id: 'post-code-logs', + id: 'memory-dynamic-info', label: this.$t('appNavigation.analyticalPanel'), - route: '/logs/post-code-logs', + route: '/memory-dynamic-info', }, ], }, @@ -140,58 +157,14 @@ export const AppNavigationMixin = { icon: 'iconChevronUp', children: [ { - id: 'overview-info', + id: 'fans-static', label: this.$t('appNavigation.statisticInformation'), - route: '/logs/event-logs', + route: '/fans-static', }, { - id: 'post-code-logs', + id: 'fans', label: this.$t('appNavigation.dynamicInformation'), - route: '/logs/post-code-logs', - }, - ], - }, - { - id: 'physical-drives', - label: this.$t('appNavigation.physicalDrives'), - icon: 'iconChevronUp', - children: [ - { - id: 'overview-info', - label: this.$t('appNavigation.specifications'), - route: '/logs/event-logs', - }, - { - id: 'post-code-logs', - label: this.$t('appNavigation.analyticalPanel'), - route: '/logs/post-code-logs', - }, - ], - }, - { - id: 'virtual-drives', - label: this.$t('appNavigation.virtualDrives'), - route: '/', - }, - { - id: 'network-adapters', - label: this.$t('appNavigation.networkAdapters'), - icon: 'iconChevronUp', - children: [ - { - id: 'overview-info', - label: this.$t('appNavigation.ethernetAdapters'), - route: '/logs/event-logs', - }, - { - id: 'post-code-logs', - label: this.$t('appNavigation.fcHbaAdapters'), - route: '/logs/post-code-logs', - }, - { - id: 'post-code-logs', - label: this.$t('appNavigation.analyticalPanel'), - route: '/logs/post-code-logs', + route: '/fans', }, ], }, @@ -201,28 +174,71 @@ export const AppNavigationMixin = { icon: 'iconChevronUp', children: [ { - id: 'overview-info', - label: this.$t('appNavigation.specifications'), - route: '/logs/event-logs', + id: 'motherboard-specification', + label: this.$t('appNavigation.specification'), + route: '/motherboard-specification', }, { - id: 'post-code-logs', + id: 'motherboard-dynamic-info', label: this.$t('appNavigation.analyticalPanel'), - route: '/logs/post-code-logs', + route: '/motherboard-dynamic-info', }, ], }, - { - id: 'pci-devises', - label: this.$t('appNavigation.pciDevises'), - route: '/', - }, + // { + // id: 'physical-drives', + // label: this.$t('appNavigation.physicalDrives'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'overview-info', + // label: this.$t('appNavigation.specifications'), + // route: '/logs/event-logs', + // }, + // { + // id: 'post-code-logs', + // label: this.$t('appNavigation.analyticalPanel'), + // route: '/logs/post-code-logs', + // }, + // ], + // }, + // { + // id: 'virtual-drives', + // label: this.$t('appNavigation.virtualDrives'), + // route: '/', + // }, + // { + // id: 'network-adapters', + // label: this.$t('appNavigation.networkAdapters'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'overview-info', + // label: this.$t('appNavigation.ethernetAdapters'), + // route: '/logs/event-logs', + // }, + // { + // id: 'post-code-logs', + // label: this.$t('appNavigation.fcHbaAdapters'), + // route: '/logs/post-code-logs', + // }, + // { + // id: 'post-code-logs', + // label: this.$t('appNavigation.analyticalPanel'), + // route: '/logs/post-code-logs', + // }, + // ], + // }, + // { + // id: 'pci-devises', + // label: this.$t('appNavigation.pciDevises'), + // route: '/', + // }, //old tabs { id: 'overview', - label: 'СТАРЫЕ ВКЛАДКИ', + label: 'Страницы BMC webui-vue', route: '/Info', - icon: 'iconOverview', }, { id: 'logs', @@ -232,7 +248,7 @@ export const AppNavigationMixin = { { id: 'event-logs', label: this.$t('appNavigation.eventLogs'), - route: '/logs/event-logs', + route: '/logs/event-logs-old', }, { id: 'post-code-logs', @@ -298,7 +314,6 @@ export const AppNavigationMixin = { { id: 'settings', label: this.$t('appNavigation.settings'), - icon: 'iconSettings', children: [ { id: 'date-time', @@ -320,7 +335,6 @@ export const AppNavigationMixin = { { id: 'security-and-access', label: this.$t('appNavigation.securityAndAccess'), - icon: 'iconSecurityAndAccess', children: [ { id: 'sessions', @@ -352,7 +366,6 @@ export const AppNavigationMixin = { { id: 'resource-management', label: this.$t('appNavigation.resourceManagement'), - icon: 'iconResourceManagement', children: [ { id: 'power', diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue index 12dde551..20bc8050 100644 --- a/src/components/Global/PageTitle.vue +++ b/src/components/Global/PageTitle.vue @@ -1,7 +1,11 @@ <template> - <div class="page-title"> + <div v-if="description" class="page-title"> <h1 class="bold-24px text-title">{{ title }}</h1> - <p v-if="description" class="page-description">{{ description }}</p> + <p class="page-description">{{ description }}</p> + </div> + <div v-else class="page-title no_description"> + <h1 class="bold-24px text-title">{{ title }}</h1> + <p class="page-description">{{ description }}</p> </div> </template> @@ -29,6 +33,9 @@ export default { flex-flow: column nowrap; align-items: flex-start; justify-content: center; + &.no_description { + height: 64px; + } } .text-title { @@ -37,7 +44,7 @@ export default { .page-description { color: $text-secondary; - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; diff --git a/src/components/Global/Popover.vue b/src/components/Global/Popover.vue index b91aa08b..bae121c3 100644 --- a/src/components/Global/Popover.vue +++ b/src/components/Global/Popover.vue @@ -1,7 +1,22 @@ <template> <div id="my-container"> + <div v-if="isclear" :id="id" ref="button" variant="primary" class="pointer"> + <img src="@/assets/images/clear-icon.svg" /> + <span class="regular-12px red-font">{{ $t(description) }}</span> + </div> + <div + v-else-if="isMicrocode" + :id="id" + ref="button" + variant="primary" + class="pointer" + > + <img src="@/assets/images/icon-reload-red.svg" /> + <span class="regular-12px red-font">{{ $t(description) }}</span> + </div> + <span - v-if="!microcode" + v-else :id="id" ref="button" class="regular-12px underline pointer" @@ -9,13 +24,6 @@ > {{ $t(description) }} </span> - <div v-else :id="id" ref="button" variant="primary" class="pointer"> - <img src="@/assets/images/icon-reload-red.svg" /> - <span class="regular-12px microcode-reload-font">{{ - $t(description) - }}</span> - </div> - <!-- Our popover title and content render container --> <b-popover ref="popover" @@ -92,7 +100,11 @@ export default { type: String, default: '', }, - microcode: { + isMicrocode: { + type: Boolean, + default: false, + }, + isclear: { type: Boolean, default: false, }, @@ -198,9 +210,6 @@ export default { .form-control { width: 341px; height: 52px; - background: rgba(26, 62, 91, 0.05); - border-radius: 8px; - border: none; margin: -25px auto; padding-top: 30px; } @@ -211,7 +220,7 @@ export default { display: flex; justify-content: center; align-items: center; - background: rgba(26, 62, 91, 0.05); + background: $faint-secondary-primary-5; border-radius: 8px; border: none; margin: 0 auto; @@ -241,7 +250,10 @@ export default { } .popover-info { - background-color: #040a0f; + background-color: $on-surface-primary; + // border: 1px solid $text-primary; + // box-shadow: 0px 6px 16px -12px rgba(23, 40, 77, 0.06); + border-radius: 8px; width: 168px; height: 76px; &.arrow { @@ -249,7 +261,7 @@ export default { } } -.microcode-reload-font { +.red-font { padding-left: 5px; color: $red-brand-primary; } diff --git a/src/components/Global/SilaComponents/DateSwitch.vue b/src/components/Global/SilaComponents/DateSwitch.vue new file mode 100644 index 00000000..0769c734 --- /dev/null +++ b/src/components/Global/SilaComponents/DateSwitch.vue @@ -0,0 +1,123 @@ +<template> + <div class="fans-date-switch"> + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'hour' }" + @click="switchTimeScale('hour')" + >{{ $t('global.date.lastHour') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'day' }" + @click="switchTimeScale('day')" + >{{ $t('global.date.lastDay') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'week' }" + @click="switchTimeScale('week')" + >{{ $t('global.date.lastWeek') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'mounth' }" + @click="switchTimeScale('mounth')" + >{{ $t('global.date.lastMounth') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'year' }" + @click="switchTimeScale('year')" + >{{ $t('global.date.lastYear') }}</span + > + <div class="slider" /> + <div class="date-picker"> + <img src="@/assets/images/calendar-icon.svg" /> + <span class="medium-12px scale-item">{{ + $t('global.date.selectDate') + }}</span> + </div> + <img class="date-clear" src="@/assets/images/clear-icon.svg" /> + </div> +</template> + +<script> +export default { + props: { + timeScale: { + type: String, + default: 'hour', + }, + switchTimeScale: { + type: Function, + required: true, + }, + }, +}; +</script> +<style lang="scss" scoped> +.fans-date-switch { + position: relative; + + height: 48px; + padding: 0 16px 0 32px; + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: 24px; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.switch-active { + color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.slider { + position: absolute; + height: 0px; + border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 0px; +} + +.scale-item { + cursor: pointer; +} + +.scale-item:nth-child(1).switch-active ~ .slider { + width: 92px; + left: 31px; +} + +.scale-item:nth-child(2).switch-active ~ .slider { + left: 135px; + width: 105px; +} + +.scale-item:nth-child(3).switch-active ~ .slider { + left: 255px; + width: 112px; +} + +.scale-item:nth-child(4).switch-active ~ .slider { + left: 383px; + width: 107px; +} + +.scale-item:nth-child(5).switch-active ~ .slider { + left: 508px; + width: 90px; +} + +.date-picker { + display: flex; + align-items: center; + gap: 9px; +} + +.date-clear { + margin-left: auto; + cursor: pointer; +} +</style> diff --git a/src/views/SystemDescription/Info/InventoryControlSystem.vue b/src/components/Global/SilaComponents/InventoryControlSystem.vue index f47b4868..9760f24f 100644 --- a/src/views/SystemDescription/Info/InventoryControlSystem.vue +++ b/src/components/Global/SilaComponents/InventoryControlSystem.vue @@ -19,7 +19,10 @@ popup="SystemDescription.ReloadServer_popup" /> <div> - <span class="regular-12px underline"> + <span + class="regular-12px underline pointer" + @click="redirectConsole" + > {{ $t('SystemDescription.ConnectToDesktop') }} </span> </div> @@ -112,7 +115,7 @@ <script> import PageSection from '@/components/Global/PageSection'; import Popover from '@/components/Global/Popover'; -import NtpPopover from './NtpPopover'; +import NtpPopover from '@/components/Global/SilaComponents/NtpPopover'; export default { components: { @@ -136,6 +139,11 @@ export default { }, }; }, + methods: { + redirectConsole() { + this.$router.push('/console/kvm'); + }, + }, }; </script> <style lang="scss" scoped> @@ -143,6 +151,10 @@ a { list-style-type: none; } +.pointer { + cursor: pointer; +} + .system-control-section { position: relative; margin: 16px 2rem 2rem !important; diff --git a/src/views/SystemDescription/Info/NtpPopover.vue b/src/components/Global/SilaComponents/NtpPopover.vue index 81e95e4d..918b1220 100644 --- a/src/views/SystemDescription/Info/NtpPopover.vue +++ b/src/components/Global/SilaComponents/NtpPopover.vue @@ -10,8 +10,6 @@ container="my-container" :show.sync="popoverShow" @show="onShow" - @shown="onShown" - @hidden="onHidden" > <template #title> <div class="popup-title"> @@ -113,9 +111,6 @@ export default { .form-control { width: 341px; height: 52px; - background: rgba(26, 62, 91, 0.05); - border-radius: 8px; - border: none; margin: -25px auto; padding-top: 30px; } diff --git a/src/components/Global/SilaComponents/Tables/AccessoryTable.vue b/src/components/Global/SilaComponents/Tables/AccessoryTable.vue new file mode 100644 index 00000000..2b25d880 --- /dev/null +++ b/src/components/Global/SilaComponents/Tables/AccessoryTable.vue @@ -0,0 +1,101 @@ +<template> + <section class="bootstrap-table__section"> + <b-table + responsive="md" + class="bootstrap-fans-table bootstrap-fans-table__stripes" + :items="records.items" + :fields="records.fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="light-12px"> + {{ value }} + </span> + </template> + <template #cell(minDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #head(currentPower)="{ label }"> + <span class="semi-bold-12px"> + {{ label }} + </span> + <span class="semi-bold-12px errors"> + {{ '(15)' }} + </span> + </template> + <template #cell(currentPower)="{ value }"> + <row> + <span class="light-12px"> + {{ value }} + </span> + </row> + </template> + </b-table> + </section> +</template> + +<script> +import { colors } from '../colors'; + +export default { + props: { + records: { + type: Object, + default: null, + }, + }, + data() { + return { + colors, + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-fans-table__th { + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + padding: 10px 5px !important; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.bootstrap-fans-table__td { + padding: 5px !important; + border-top: none !important; +} +</style> + +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} + +.errors { + color: $indicators-errors; +} +</style> diff --git a/src/components/Global/SilaComponents/Tables/AccessoryTableDrivers.vue b/src/components/Global/SilaComponents/Tables/AccessoryTableDrivers.vue new file mode 100644 index 00000000..120a03a3 --- /dev/null +++ b/src/components/Global/SilaComponents/Tables/AccessoryTableDrivers.vue @@ -0,0 +1,116 @@ +<template> + <section class="bootstrap-table__section"> + <span class="bold-12px__caps"> + {{ $t('fansPage.valueIndicators') }} + </span> + <b-table + responsive="md" + class="bootstrap-fans-table bootstrap-fans-table__stripes" + :items="records.items" + :fields="records.fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="light-12px"> + {{ value }} + </span> + </template> + <template #cell(minDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #head(currentPower)="{ label }"> + <span class="semi-bold-12px"> + {{ label }} + </span> + <span class="semi-bold-12px errors"> + {{ '(15)' }} + </span> + </template> + <template #cell(currentPower)="{ value }"> + <row> + <span class="light-12px"> + {{ value }} + </span> + </row> + </template> + </b-table> + </section> +</template> + +<script> +import { colors } from '../colors'; + +export default { + props: { + records: { + type: Object, + default: null, + }, + }, + data() { + return { + colors, + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-fans-table__th { + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + padding: 10px 5px !important; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.bootstrap-fans-table__td { + padding: 5px !important; + border-top: none !important; +} + +.SMART-table-col-first { + width: 34%; +} + +.SMART-table-col-second { + width: 32%; +} + +.SMART-table-col-last { + width: 39%; +} +</style> + +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} + +.errors { + color: $indicators-errors; +} +</style> diff --git a/src/components/Global/SilaComponents/Tables/AccessoryTablePower.vue b/src/components/Global/SilaComponents/Tables/AccessoryTablePower.vue new file mode 100644 index 00000000..6f696b82 --- /dev/null +++ b/src/components/Global/SilaComponents/Tables/AccessoryTablePower.vue @@ -0,0 +1,105 @@ +<template> + <section class="bootstrap-table__section"> + <span class="bold-12px__caps"> + {{ $t('fansPage.valueIndicators') }} + </span> + <b-table + responsive="md" + class="bootstrap-fans-table bootstrap-fans-table__stripes" + :items="records.items" + :fields="records.fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="light-12px"> + {{ value }} + </span> + </template> + <template #cell(minDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #head(currentPower)="{ label }"> + <span class="semi-bold-12px"> + {{ label }} + </span> + <span class="semi-bold-12px errors"> + {{ '(15)' }} + </span> + </template> + <template #cell(currentPower)="{ value }"> + <row> + <span class="light-12px"> + {{ value }} + </span> + <img src="@/assets/images/power-error-icon.svg" /> + </row> + </template> + </b-table> + </section> +</template> + +<script> +import { colors } from '../../../../views/Processors/DynamicInfo/helpers'; + +export default { + props: { + records: { + type: Object, + default: null, + }, + }, + data() { + return { + colors, + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-fans-table__th { + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + padding: 10px 5px !important; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.bootstrap-fans-table__td { + padding: 5px !important; + border-top: none !important; +} +</style> + +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} + +.errors { + color: $indicators-errors; +} +</style> diff --git a/src/components/Global/SilaComponents/Tables/AccessoryTableWithLabel.vue b/src/components/Global/SilaComponents/Tables/AccessoryTableWithLabel.vue new file mode 100644 index 00000000..4974750a --- /dev/null +++ b/src/components/Global/SilaComponents/Tables/AccessoryTableWithLabel.vue @@ -0,0 +1,104 @@ +<template> + <section class="bootstrap-table__section"> + <span class="bold-12px__caps"> + {{ $t('fansPage.valueIndicators') }} + </span> + <b-table + responsive="md" + class="bootstrap-fans-table bootstrap-fans-table__stripes" + :items="records.items" + :fields="records.fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="light-12px"> + {{ value }} + </span> + </template> + <template #cell(minDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #head(currentPower)="{ label }"> + <span class="semi-bold-12px"> + {{ label }} + </span> + <span class="semi-bold-12px errors"> + {{ '(15)' }} + </span> + </template> + <template #cell(currentPower)="{ value }"> + <row> + <span class="light-12px"> + {{ value }} + </span> + </row> + </template> + </b-table> + </section> +</template> + +<script> +import { colors } from '../../../../views/MemoryModules/DynamicInfo/helpers'; + +export default { + props: { + records: { + type: Object, + default: null, + }, + }, + data() { + return { + colors, + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-fans-table__th { + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + padding: 10px 5px !important; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.bootstrap-fans-table__td { + padding: 5px !important; + border-top: none !important; +} +</style> + +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} + +.errors { + color: $indicators-errors; +} +</style> diff --git a/src/components/Global/SilaComponents/colors.js b/src/components/Global/SilaComponents/colors.js new file mode 100644 index 00000000..de832de2 --- /dev/null +++ b/src/components/Global/SilaComponents/colors.js @@ -0,0 +1,8 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue index 5235feae..3ac8e2ce 100644 --- a/src/components/Global/TableToolbar.vue +++ b/src/components/Global/TableToolbar.vue @@ -7,7 +7,7 @@ </p> <div class="toolbar-actions d-flex"> <slot name="toolbar-buttons"></slot> - <b-button + <!-- <b-button v-for="(action, index) in actions" :key="index" :data-test-id="`table-button-${action.value}Selected`" @@ -16,14 +16,14 @@ @click="$emit('batch-action', action.value)" > {{ action.label }} - </b-button> - <b-button + </b-button> --> + <!-- <b-button variant="secondary" class="d-block" @click="$emit('clear-selected')" > {{ $t('global.action.cancel') }} - </b-button> + </b-button> --> </div> </div> </div> @@ -69,17 +69,19 @@ export default { </script> <style lang="scss" scoped> -$toolbar-height: 46px; +$toolbar-height: 64px; .toolbar-container { width: 100%; - position: relative; + position: fixed; + bottom: 0; + right: 0; z-index: $zindex-dropdown + 1; } .toolbar-content { height: $toolbar-height; - background-color: theme-color('primary'); + background-color: $white; color: $white; position: absolute; left: 0; @@ -87,7 +89,9 @@ $toolbar-height: 46px; top: -$toolbar-height; display: flex; flex-direction: row; + align-items: center; justify-content: space-between; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06); } .toolbar-selected { diff --git a/src/components/SubHeader/SubHeader.vue b/src/components/SubHeader/SubHeader.vue index dd99f0d3..4ab6b094 100644 --- a/src/components/SubHeader/SubHeader.vue +++ b/src/components/SubHeader/SubHeader.vue @@ -6,9 +6,18 @@ <b-navbar-nav> <b-nav-item to="/" - exact data-test-id="appHeader-container-health" class="subheader-button" + :class="{ + 'active-route-top': ![ + 'profile-settings', + 'information-and-faq', + 'support', + 'console-settings', + 'console', + 'security-and-access', + ].includes($route.path.split('/')[1]), + }" > {{ $t('subHeader.serverInfo') }} </b-nav-item> @@ -18,9 +27,10 @@ data-test-id="appHeader-container-health" class="subheader-button" :class="{ - 'active-route-top': ''.includes( - $route.path.split('/console-settings')[1] - ), + 'active-route-top': + ''.includes($route.path.split('/console-settings')[1]) || + ''.includes($route.path.split('/console/serial-over-lan')[1]) || + ''.includes($route.path.split('/console/kvm')[1]), }" > {{ $t('subHeader.console') }} @@ -101,12 +111,6 @@ export default { margin-left: 10px; } - .active-route-top { - background-color: $white; - color: #1a3e5b !important; - border-radius: 4px; - } - .navbar-text, .nav-link, .btn-link { @@ -150,9 +154,6 @@ export default { .navbar-nav { align-items: baseline; padding-left: 24px; - .nav-link { - color: white; - } .nav-tags { @include media-breakpoint-down(xs) { @include sr-only; @@ -164,11 +165,14 @@ export default { } } } +} +#sub-header .nav-item.active-route-top > a { + background-color: $white; + color: #1a3e5b; + border-radius: 4px; +} - .router-link-active { - color: #1a3e5b !important; - background-color: white; - padding: 0.68rem 1rem !important; - } +.navbar-dark .navbar-nav .nav-link { + color: rgba(255, 255, 255, 1); } </style> diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue index f17b84cb..ea9004a9 100644 --- a/src/layouts/LoginLayout.vue +++ b/src/layouts/LoginLayout.vue @@ -30,7 +30,6 @@ export default { name: 'LoginLayout', data() { return { - // altLogo: process.env.VUE_APP_COMPANY_NAME || 'OpenBMC', customizableGuiName: process.env.VUE_APP_GUI_NAME || '', }; }, diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json index d0cb9631..512631e6 100644 --- a/src/locales/ru-RU.json +++ b/src/locales/ru-RU.json @@ -2,6 +2,7 @@ "global": { "action": { "add": "Добавить", + "addNew": "Добавить новый", "cancel": "Отменить", "clearAll": "Очистить всё", "confirm": "Подтвердить", @@ -13,6 +14,7 @@ "edit": "Редактировать", "enable": "Включить", "export": "Экспортировать", + "import": "Импортировать", "exportAll": "Экспортировать всё", "filter": "Фильтровать", "refresh": "Обновить", @@ -20,9 +22,11 @@ "reset": "Сбросить", "save": "Сохранить", "saveSettings": "Сохранить настройки", + "saveChanges": "Сохранить изменеия", "reload": "Перезагрузить", "off": "Выключить", - "selected": "Выбрано" + "selected": "Выбрано", + "acceptChanges": "Применить изменения" }, "ariaLabel": { "clearSearch": "Очистить поле поиска", @@ -30,7 +34,16 @@ "scrollToTop": "Прокрутить наверх", "showPassword": "Отобразить пароль. Примечание: это может раскрыть пароль третьим лицам", "tooltip": "Подсказка", - "progressBar": "Индикатор загрузки страницы" + "progressBar": "Индикатор загрузки страницы", + "notificationTime": "Время ожидания отправки уведомлений, секунды" + }, + "date": { + "lastHour": "Последний час", + "lastDay": "Последние сутки", + "lastWeek": "Последняя неделя", + "lastMounth": "Последний месяц", + "lastYear": "Последний год", + "selectDate": "Выбрать период" }, "calendar": { "selectDate": "Выбрать дату", @@ -56,6 +69,7 @@ "valueMustBeBetween": "Значение должно быть между %{min} – %{max}" }, "status": { + "status":"Статус", "copied": "Скопировано", "disabled": "Выключено", "enabled": "Включено", @@ -65,7 +79,8 @@ "on": "Вкл.", "success": "Успешно", "warning": "Предупреждение", - "informational": "Информация" + "informational": "Информация", + "indicators": "Показатели" }, "table": { "collapseTableRow": "Свернуть", @@ -79,7 +94,13 @@ "selectItem": "Выбрать объект", "selectedItems": "%{filterCount} из %{count} объектов", "toDate": "Заканчивая датой", - "viewAll": "Смотреть всё" + "viewAll": "Смотреть всё", + "attributes": "Атрибуты", + "value": "Значение", + "info": "Общая информация", + "memorySlots": "Слоты памяти", + "memoryModules": "Модуль памяти" + }, "toast": { "unAuthTitle": "Недоступно", @@ -106,7 +127,10 @@ "subHeader": { "serverInfo": "Информаци о сервере", "console": "Виртуальная консоль", - "administration": "Администрирование" + "administration": "Администрирование", + "temperature": "Показатели температуры", + "frequency": "Показатели частоты", + "powerConsumption": "Показатели потребляемой мощности" }, "appNavigation": { "systemInformaion": "Краткое описание системы", @@ -118,11 +142,11 @@ "config" : "Конфигурация", "deviceFirmware" : "Прошивка устройства", "broadcast" : "Передача информации", + "broadcastSettings": "Настройка передачи информации", "analyticalPanel" : "Аналитическая панель", "raidControllers" : "RAID-контроллеры", - "specifications" : "Характеристики", + "specification" : "Характеристики", "settings": "Настройки", - "cachRaid" : "Cach RAID-контроллеров", "memoryModules" : "Модули памяти", "processors": "Процессоры", "powerSupplies": "Источники питания", @@ -130,12 +154,13 @@ "statisticInformation": "Статическая информация", "dynamicInformation": "Динамическая информация", "physicalDrives": "Физические накопители", - "virtualDrives": "Виртуальные накопители", + "virtualDrivers": "Виртуальные накопители", "motherboard": "Материнская плата", + "motherboardParam": "Параметры материнской платы", "networkAdapters": "Сетевые и HBA адаптеры", "ethernetAdapters": "Ethetnet-адаптеры", "fcHbaAdapters": "FC-HBA-адаптеры", - "pciDevises": "PCI-устройства", + "pciDevices": "PCI-устройства", "resourceManagement": "Управление ресурсами", "securityAndAccess": "Безопасность и доступ", @@ -200,8 +225,8 @@ "serialOverLan": "Консоль Serial over LAN (SOL)", "serverPowerOperations": "Управление питанием сервера", "certificates": "Сертификаты", - "virtualMedia": "Виртуальные носители", - "keyClear": "Удаление ключей" + "keyClear": "Очистка ключа", + "virtualMedia": "Виртуальные носители" }, "pageChangePassword": { "changePassword": "Изменить пароль", @@ -295,9 +320,18 @@ "pageEventLogs": { "additionalDataUri": "Загрузить дополнительные данные", "resolve": "Разрешить", - "resolved": "Разрешено", + "event_resolve": "Событие решено", + "archive": "Архивировать", + "resolved": "Решено", "unresolve": "Отменить разрешение", - "unresolved": "Нерешённое", + "unresolved": "Не решено", + "clearLogs": "Очистить журнал", + "clearLogs_popup": "Очистка журнала", + "clear": "Очистить", + "eventFilter": "Располежение события", + "eventTypeFilter": "Тип события", + "eventSourseFilter": "Тип источника", + "eventDateFilter": "Период событий", "modal": { "deleteAllTitle": "Удалить все логи", "deleteAllMessage": "Вы уверены, что хотите удалить все логи? Действие не может быть отменено.", @@ -307,13 +341,16 @@ "table": { "date": "Дата", "description": "Описание", - "id": "Идентификатор", + "about_event": "О событии", + "id": "ID", "modifiedDate": "Дата последнего изменения", "name": "Имя", "searchLogs": "Поиск записей в журнале событий", - "severity": "Уровень", + "severity": "Тип события", "status": "Статус", - "type": "Тип" + "type": "Тип", + "source": "Источник" + }, "toast": { "errorDelete": "Ошибка удаления %{count} записи. | Ошибка уделения %{count} записей.", @@ -422,6 +459,9 @@ "quicklinkTitle": "Быстрые ссылки к компонентам оборудования", "assemblies": "Сборки", "system": "Система", + "installedProcessors": "Установленные процессоры", + "installedAccelerator": "Установленные акселераторы", + "powerSources": "Установленые источники питания", "systemIndicator": { "powerStatus": "Состояние питания", "identifyLed": "Идентификационный LED системы", @@ -484,7 +524,10 @@ "totalSystemMemoryGiB": "Общий объём памяти", "totalThreads": "Общее количество потоков", "uuid": "UUID", - "version": "Версия" + "version": "Версия", + "processorCapabilityInfo": "Информация о возможностях процессора", + "processorCacheInfo": "Информация о возможностях КЭША", + "SupportedTechnologies": "Поддерживаемый набор технологий" }, "toast": { "errorDisableIdentifyLed": "Ошибка выключения идентификационного LED.", @@ -529,7 +572,15 @@ "status": "Статус", "connected": "Подключено", "connecting": "Подключение", - "disconnected": "Отключено" + "disconnected": "Отключено", + "addImage": "Подключить образ", + "addImage_modal": "Подключение образа", + "fromPC": "С компьютера", + "fromServer": "С сервера", + "upload": "Начать загрузку", + "urlAdress": "URL-адрес сервера", + "connectionType": "Тип подключения" + }, "pageLdap": { "pageDescription": "Настройка параметров LDAP и управление группами", @@ -842,7 +893,8 @@ "powerCapSettingData": "Применить ограничение мощности", "powerCapSettingLabel": "Настройки порога электропитания", "powerConsumption": "Текущее энергопотребление", - "serverPowCapSetting": "Настройки ограничения электропитания сервера" + "serverPowCapSetting": "Настройки ограничения электропитания сервера", + "usingPercent": "Процент использования" }, "pageSensors": { "exportFilePrefix": "sensors_", @@ -986,9 +1038,22 @@ "ReloadBmc": "Перезагрузить ВМС", "ReloadBmc_popup": "Перезагрузка BMC", "ExportImport": "Экспорт / Импорт настроек", + "ExportImport_button": "Экспортировать настроки", "Parametrs": "Параметры сети", "ReloadMicrocodeBios": "Обновить микрокод BIOS", - "ReloadicrocodeBmc": "Обновить микрокод BMC" + "ReloadicrocodeBmc": "Обновить микрокод BMC", + "testMessage": "Тестовое сообщение", + "smnp": "Настройки SNMP", + "smnpWarning": "Предупреждения SNMP", + "system": "Расположение системы", + "contacts": "Контакты системы", + "community": "Community String", + "smnpIp": "IP адрес SNMP", + "smnpPort": "SNMP-порт", + "syslogSettings": "Настройки Syslog", + "syslogPort": "Syslog - порт", + "syslogIP": "IP-адрес syslog сервера" + }, "SystemDescription": { @@ -1019,7 +1084,57 @@ "Reload": "Перезагрузить", "Off": "Выключить", "LoadingQueue": "Последовательность загрузки", - "DiskParametrs": "Параметры выбранного диска" + "DiskParametrs": "Параметры выбранного диска", + "FansDynamicInformation": "Динамические показатели", + "FansStaticInformation": "Статические показатели", + "onBootRom": "Включить boot ROM", + "onBootRom_popup": "Включение boot ROM", + "offBootRom": "Выключить boot ROM", + "offBootRom_popup": "ВЫключение boot ROM", + "microcodeDrivers": "Микрокод накопителя", + "reloadMicrocodeDrivers": "Обновить микрокод накопителя" + }, + "fansPage": { + "speedDescription": "Показатели скорости", + "speedWarhihg": "Пороговое значение предупреждения, об/мин", + "speedShutdown": "Пороговое значение отказа, об/мин", + "valueIndicators": "Значения Показателей", + "inWork": "Работоспособен", + "notWorking": "Не работоспособен" + }, + "tablesDescription": { + "speedWarhihg": "Пороговое значение предупреждения, об/мин", + "speedShutdown": "Пороговое значение отказа, об/мин", + "valueIndicators": "Значения Показателей", + "installedFans": "Установленные вентиляторы", + "inWork": "Работоспособен", + "notWorking": "Не работоспособен", + "temperatureWarning": "Пороговое значениe предупреждения, С°", + "nonNormalMode": "Не штатный режим, С°", + "criticalMode": "Критический режим, С°", + "frequencyWarning": "Пороговое значение предупреждения, Hz", + "frequencyShutdown": "Пороговое значениe отказа, Hz", + "powerWarning": "Пороговое значениe предупреждения, Вт", + "powerShutdown": "Пороговое значениe отказа, Вт", + "warningPercent": "Пороговое значение предупреждения, %", + "nonNormalModePercent": "Не штатный режим, %", + "criticalModePercent": "Критический режим, %", + "inputVoltage": "Входное напряжение", + "outputVoltage": "Выходное напряжение", + "inputPower": "Входная мощность", + "outputPower": "Выходная мощность", + "voltageWarning": "Пороговое значение предупреждения, B", + "voltageShutdown": "Пороговое значениe отказа, B", + "amperage": "Сила тока" + }, + "RAID": { + "cache": "Cache RAID-контроллеров", + "cache_info": "Статическая и динамическая информация о состоянии cache RAID-контроллеров", + "extraParam": "Дополнительные параметры", + "microcode": "Микрокод RAID-контроллеров", + "microcode_update": "Обновить микрокод контроллера", + "microcode_popoveer": "Обновление микрокода контроллера", + "lun": "Настройки LUN" }, "countries": { diff --git a/src/main.js b/src/main.js index 6ee6525e..79bab44f 100644 --- a/src/main.js +++ b/src/main.js @@ -42,6 +42,7 @@ import { import Vuelidate from 'vuelidate'; import i18n from './i18n'; import { format } from 'date-fns-tz'; +import HighchartsVue from 'highcharts-vue'; // Filters Vue.filter('shortTimeZone', function (value) { @@ -130,6 +131,7 @@ Vue.use(ToastPlugin); Vue.use(TooltipPlugin); Vue.use(PopoverPlugin); Vue.use(Vuelidate); +Vue.use(HighchartsVue); new Vue({ router, diff --git a/src/router/routes.js b/src/router/routes.js index 3bb7c90b..10d4c5dc 100644 --- a/src/router/routes.js +++ b/src/router/routes.js @@ -34,9 +34,25 @@ import InformationAndFAQ from '@/views/InformationAndFAQ'; import SystemDescription from '@/views/SystemDescription/Info'; import SystemNetwork from '@/views/SystemDescription/Network'; import ServerParametrs from '@/views/SystemDescription/ServerParametrs'; -import SystemEventLogs from '@/views/SystemDescription/SystemEventLogs'; +// import SystemEventLogs from '@/views/SystemDescription/SystemEventLogs'; + import BMCConfiguration from '@/views/BMC/Configuration'; +import BMCFirmware from '@/views/BMC/Firmware'; +import BMCSettings from '@/views/BMC/Settings'; + import ConsoleSettings from '@/views/Operations/ConsoleSettings'; +import FansDynamic from '@/views/Fans/DynamicInformation'; +import FansStatic from '@/views/Fans/StaticInformation'; +import ProcessorsSpecificationPage from '@/views/Processors/Specification'; +import ProcessorsDynamicPage from '@/views/Processors/DynamicInfo'; +import MemoryDynamicPage from '@/views/MemoryModules/DynamicInfo'; +import MemoryStaticPage from '@/views/MemoryModules/Specification'; +import PowerStaticPage from '@/views/PowerSupplies/Specification'; +import PowerDynamicPage from '@/views/PowerSupplies/DynamicInfo'; + +import SILAEventLogs from '@/views/SILA/EventLogs'; +import MotherboardSpecificationPage from '@/views/Motherboard/Specification'; +import MotherboardDynamicPage from '@/views/Motherboard/DynamicInfo'; import Support from '@/views/Support'; @@ -116,7 +132,7 @@ const routes = [ }, }, { - path: '/network', + path: '/network-parametrs', name: 'network', component: SystemNetwork, meta: { @@ -127,10 +143,9 @@ const routes = [ { path: '/event-logs', name: 'event-logs', - component: SystemEventLogs, + component: SILAEventLogs, meta: { - title: i18n.t('appNavigation.systemInformaion'), - description: i18n.t('appNavigation.eventLogs'), + title: i18n.t('appNavigation.eventLogs'), }, }, { @@ -152,6 +167,114 @@ const routes = [ }, }, { + path: '/bmc-firmware', + name: 'bmc-Firmware', + component: BMCFirmware, + meta: { + title: i18n.t('appNavigation.bmc'), + description: i18n.t('appNavigation.deviceFirmware'), + }, + }, + { + path: '/bmc-settings', + name: 'bmc-settings', + component: BMCSettings, + meta: { + title: i18n.t('appNavigation.bmc'), + description: i18n.t('appNavigation.broadcastSettings'), + }, + }, + { + path: '/processors-specification', + name: 'processors-specification', + component: ProcessorsSpecificationPage, + meta: { + title: i18n.t('appNavigation.processors'), + description: i18n.t('appNavigation.specification'), + }, + }, + { + path: '/processors-dynamic-info', + name: 'processors-dynamic-info', + component: ProcessorsDynamicPage, + meta: { + title: i18n.t('appNavigation.processors'), + description: i18n.t('appNavigation.analyticalPanel'), + }, + }, + { + path: '/power-specification', + name: 'power-specification', + component: PowerStaticPage, + meta: { + title: i18n.t('appNavigation.powerSupplies'), + description: i18n.t('appNavigation.specification'), + }, + }, + { + path: '/power-dynamic-info', + name: 'power-dynamic-info', + component: PowerDynamicPage, + meta: { + title: i18n.t('appNavigation.powerSupplies'), + description: i18n.t('appNavigation.analyticalPanel'), + }, + }, + { + path: '/memory-specification', + name: 'memory-specification', + component: MemoryStaticPage, + meta: { + title: i18n.t('appNavigation.memoryModules'), + description: i18n.t('appNavigation.specification'), + }, + }, + { + path: '/memory-dynamic-info', + name: 'memory-dynamic-info', + component: MemoryDynamicPage, + meta: { + title: i18n.t('appNavigation.memoryModules'), + description: i18n.t('appNavigation.analyticalPanel'), + }, + }, + { + path: '/fans-static', + name: 'fans-static', + component: FansStatic, + meta: { + title: i18n.t('appNavigation.fans'), + description: i18n.t('SystemDescription.FansStaticInformation'), + }, + }, + { + path: '/fans', + name: 'fans', + component: FansDynamic, + meta: { + title: i18n.t('appNavigation.fans'), + description: i18n.t('SystemDescription.FansDynamicInformation'), + }, + }, + { + path: '/motherboard-specification', + name: 'motherboard-specification', + component: MotherboardSpecificationPage, + meta: { + title: i18n.t('appNavigation.motherboard'), + description: i18n.t('appNavigation.specification'), + }, + }, + { + path: '/motherboard-dynamic-info', + name: 'motherboard-dynamic-info', + component: MotherboardDynamicPage, + meta: { + title: i18n.t('appNavigation.motherboard'), + description: i18n.t('appNavigation.analyticalPanel'), + }, + }, + { path: '/Info', name: 'overview', component: Overview, @@ -168,7 +291,7 @@ const routes = [ }, }, { - path: '/logs/event-logs', + path: '/logs/event-logs-old', name: 'event-logs', component: EventLogs, meta: { diff --git a/src/views/BMC/Configuration/BMCConfiguration.vue b/src/views/BMC/Configuration/BMCConfiguration.vue index 92f4f051..8202f225 100644 --- a/src/views/BMC/Configuration/BMCConfiguration.vue +++ b/src/views/BMC/Configuration/BMCConfiguration.vue @@ -10,7 +10,7 @@ <b-button v-b-toggle.toggle-collapse_1 variant="link" - class="bmc-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" > {{ $t('BMC.BmcTitle') }} <component :is="iconChevronUp" class="icon-expand" /> @@ -32,7 +32,7 @@ <b-button v-b-toggle.toggle-collapse_2 variant="link" - class="bmc-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" > {{ $t('BMC.ControlTitle') }} <component :is="iconChevronUp" class="icon-expand" /> @@ -74,23 +74,6 @@ export default { padding: 0; } -.bmc-collapse__button { - height: 56px; - width: 100%; - padding: 0 0 0 2rem; - margin: 0; - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - &:active, - &:focus { - box-shadow: none; - } - &:hover { - color: $text-primary; - } -} - .nav-item { list-style-type: none; } diff --git a/src/views/BMC/Configuration/BMCConfigurationControl.vue b/src/views/BMC/Configuration/BMCConfigurationControl.vue index cacd54ed..7f3de021 100644 --- a/src/views/BMC/Configuration/BMCConfigurationControl.vue +++ b/src/views/BMC/Configuration/BMCConfigurationControl.vue @@ -11,13 +11,18 @@ popup="BMC.ReloadBmc_popup" button="BMC.ReloadBmc" /> + <settings-import-popup + id="popover-reactive-2" + description="BMC.ExportImport" + popup="BMC.ExportImport" + button="BMC.ExportImport_button" + /> <div> - <span class="regular-12px underline">{{ - $t('BMC.ExportImport') - }}</span> - </div> - <div> - <span class="regular-12px underline">{{ $t('BMC.Parametrs') }}</span> + <span + class="regular-12px underline pointer" + @click="redirectNetworkParametrs" + >{{ $t('BMC.Parametrs') }}</span + > </div> </div> @@ -26,18 +31,18 @@ <span class="semi-bold-12px">{{ $t('BMC.microcode') }}</span> </div> <popover - id="popover-reactive-2" + id="popover-reactive-3" description="BMC.ReloadMicrocodeBios" popup="BMC.ReloadMicrocodeBios" button="global.action.refresh" - :microcode="true" + :is-microcode="true" /> <popover - id="popover-reactive-3" + id="popover-reactive-4" description="BMC.ReloadicrocodeBmc" popup="BMC.ReloadicrocodeBmc" button="global.action.refresh" - :microcode="true" + :is-microcode="true" /> </div> </div> @@ -45,11 +50,16 @@ </template> <script> +import SettingsImportPopup from './SettingsImportPopup'; import PageSection from '@/components/Global/PageSection'; import Popover from '@/components/Global/Popover'; export default { - components: { PageSection, Popover }, + components: { + PageSection, + Popover, + SettingsImportPopup, + }, data() { return { timeOption: 'resetBios', @@ -66,6 +76,11 @@ export default { }, }; }, + methods: { + redirectNetworkParametrs() { + this.$router.push('/network-parametrs'); + }, + }, }; </script> <style lang="scss" scoped> @@ -100,4 +115,8 @@ a { label { padding-top: 5px; } + +.pointer { + cursor: pointer; +} </style> diff --git a/src/views/BMC/Configuration/BMCConfigurationTable.vue b/src/views/BMC/Configuration/BMCConfigurationTable.vue index dd0033e7..a550743e 100644 --- a/src/views/BMC/Configuration/BMCConfigurationTable.vue +++ b/src/views/BMC/Configuration/BMCConfigurationTable.vue @@ -8,6 +8,23 @@ :fields="fields" :empty-text="$t('global.table.emptyMessage')" > + <template #cell(value)="data"> + <b-row v-if="data.index === 2"> + <b-col> + <span v-if="isAddersСolon"> + {{ '487566942332' }} + </span> + <span v-else> + {{ data.value }} + </span> + </b-col> + <b-col class="macAddresCol"> + <b-form-checkbox v-model="isAddersСolon"> </b-form-checkbox> + <span> {{ 'XXXX формат' }} </span> + </b-col> + </b-row> + <span v-else>{{ data.value }}</span> + </template> </b-table> </page-section> </template> @@ -26,6 +43,7 @@ export default { data() { return { isBusy: true, + isAddersСolon: false, fields: [ { key: 'param', @@ -52,7 +70,7 @@ export default { value: '14:20', }, { param: 'Версия прошивки', value: '1.214.248 beta' }, - { param: 'MAC - адреса', value: '487566947' }, + { param: 'MAC - адреса', value: '48:75:66:94:23:32' }, { param: 'IP - адреса', value: '192.168.48.1' }, { param: 'Имя ВМС', value: 'ВМС-007' }, ], @@ -64,4 +82,12 @@ export default { .bootstrap-rounded-table__column-first___bmc_conf { width: 50%; } + +.macAddresCol { + height: 15px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-end; + align-items: center; +} </style> diff --git a/src/views/BMC/Configuration/SettingsImportPopup.vue b/src/views/BMC/Configuration/SettingsImportPopup.vue new file mode 100644 index 00000000..c7309ba3 --- /dev/null +++ b/src/views/BMC/Configuration/SettingsImportPopup.vue @@ -0,0 +1,295 @@ +<template> + <div id="my-container"> + <span + :id="id" + ref="button" + class="regular-12px underline pointer" + variant="primary" + > + {{ $t(description) }} + </span> + <!-- Our popover title and content render container --> + <b-popover + id="export-popup" + ref="popover" + :target="id" + triggers="click" + :show.sync="popoverShow" + placement="auto" + container="my-container" + @show="onShow" + @shown="onShown" + @hidden="onHidden" + > + <template #title> + <div class="popup-title"> + <span class="semi-bold-20px">{{ $t(popup) }}</span> + <b-button class="popup-title__button_close" @click="onClose"> + <img src="@/assets/images/popups/x-icon.svg" /> + </b-button> + </div> + </template> + <div class="popup-switch"> + <span + class="medium-16px popup-item" + :class="{ 'switch-active': isExport }" + @click="switchExport" + >{{ $t('global.action.export') }}</span + > + <span + class="medium-16px popup-item" + :class="{ 'switch-active': !isExport }" + @click="switchImport" + >{{ $t('global.action.import') }}</span + > + <div class="slider" /> + </div> + <div v-if="isExport" class="popup-body"> + <div class="ip-container"> + <span class="regular-16px" + >Оставить IP адрес из настроек сервера</span + > + <b-form-checkbox switch> </b-form-checkbox> + </div> + <b-button class="popover-button" variant="primary" @click="onClose"> + {{ $t(button) }} + </b-button> + </div> + <div v-else class="settings-import_container"> + <b-form-file + id="settings-import__file-input" + placeholder="Нажмите на область или перетащите в нее файл с настройками" + ></b-form-file> + </div> + </b-popover> + </div> +</template> + +<script> +export default { + props: { + description: { + type: String, + default: '', + }, + id: { + type: String, + default: '', + }, + button: { + type: String, + default: 'global.action.reload', + }, + popup: { + type: String, + default: '', + }, + }, + data() { + return { + input1: '', + input1state: null, + input1Return: '', + popoverShow: false, + isExport: true, + }; + }, + watch: { + input1(val) { + if (val) { + this.input1state = true; + } + }, + }, + methods: { + onClose() { + this.popoverShow = false; + }, + onOk() { + if (!this.input1) { + this.input1state = false; + } + if (this.input1) { + this.onClose(); + // Return our popover form results + this.input1Return = this.input1; + } + }, + onShow() { + this.$root.$emit('bv::hide::popover'); + // This is called just before the popover is shown + // Reset our popover form variables + this.input1 = ''; + this.input1state = null; + this.input1Return = ''; + }, + onShown() { + // Called just after the popover has been shown + // Transfer focus to the first input + this.focusRef(this.$refs.input1); + }, + onHidden() { + // Called just after the popover has finished hiding + // Bring focus back to the button + this.focusRef(this.$refs.button); + }, + focusRef(ref) { + // Some references may be a component, functional component, or plain element + // This handles that check before focusing, assuming a `focus()` method exists + // We do this in a double `$nextTick()` to ensure components have + // updated & popover positioned first + this.$nextTick(() => { + this.$nextTick(() => { + (ref.$el || ref).focus(); + }); + }); + }, + switchExport() { + this.isExport = true; + }, + switchImport() { + this.isExport = false; + }, + }, +}; +</script> +<style lang="scss"> +.custom-file { + width: 432px; + height: 108px; +} + +#settings-import__file-input ~ .custom-file-label { + background-color: transparent; + border: 1px dashed rgba(12, 28, 41, 0.6); + box-sizing: border-box; + border-radius: 8px; + width: 432px; + height: 108px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + white-space: normal; + padding: 0 65px; +} + +#settings-import__file-input ~ .custom-file-label::after { + display: none; +} +</style> +<style lang="scss" scoped> +#export-popup { + flex-direction: column; + align-items: flex-start; + background: #ffffff; + box-shadow: 0px -4px 12px rgb(0 0 0 / 5%); + border-radius: 16px !important; + border-radius: 4px; + max-width: 480px; + width: 480px; + height: auto; +} + +.form-group { + margin: 0; +} + +.popup-title { + display: flex; + align-items: baseline; + width: 465px; +} + +.popup-title__button_close { + margin: 0 28px 0 auto; + background: none; + border: none; + &:active { + background-color: $faint-secondary-primary-5-hover !important; + box-shadow: none !important; + border-radius: 8px; + } + &:focus-visible { + border: none !important; + border-radius: 8px; + } + &:focus { + box-shadow: none; + border-radius: 8px; + } +} + +.popup-body { + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; +} + +.pointer { + cursor: pointer; +} + +.medium-16px { + display: inline-block; + height: 45px; + margin: 10px; + cursor: pointer; +} + +.popup-switch { + position: relative; + display: flex; + flex-flow: row nowrap; + border-bottom: 1px solid #f3f4f5; +} + +.switch-active { + color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.slider { + position: absolute; + width: 130px; + height: 0px; + border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 14px; + left: 10px; +} + +.popup-item:nth-child(1).switch-active ~ .slider { + left: 10px; +} + +.popup-item:nth-child(2).switch-active ~ .slider { + left: 160px; +} + +.ip-container { + display: flex; + width: 461px; + height: 75px; + padding: 30px 15px 25px 15px; +} + +.popover-button { + width: 432px; + height: 52px; + margin: 0 auto 10px; +} + +.settings-import_container { + width: 478px; + height: 160px; + background-color: $surface-secondary; + margin: -15px -15px -8px -12px; + border-radius: 0 0 16px 16px; + + display: flex; + align-items: center; + justify-content: center; +} +</style> diff --git a/src/views/BMC/Firmware/FirmwarePage.vue b/src/views/BMC/Firmware/FirmwarePage.vue new file mode 100644 index 00000000..c9d2ab70 --- /dev/null +++ b/src/views/BMC/Firmware/FirmwarePage.vue @@ -0,0 +1,309 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <!-- BMC table --> + <div class="main-container"> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + sort-by="id" + class="bootstrap-fans-table bootstrap-fans-table__stripes" + sort-icon-left + no-sort-reset + :sort-desc="sortDesc" + :items="items" + :fields="fields" + > + <template #cell(name)="{ value }"> + <span class="regular-12px tretiatry"> + {{ value }} + </span> + </template> + <template #cell(minSpeedDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxSpeedDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </div> + </b-container> +</template> + +<script> +import TableSortMixin from '@/components/Mixins/TableSortMixin'; +import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; +import BVPaginationMixin from '@/components/Mixins/BVPaginationMixin'; +import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; +import TableRowExpandMixin from '@/components/Mixins/TableRowExpandMixin'; + +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +export default { + components: { + PageTitle, + PageSection, + }, + mixins: [ + BVPaginationMixin, + BVTableSelectableMixin, + BVToastMixin, + LoadingBarMixin, + TableFilterMixin, + DataFormatterMixin, + TableSortMixin, + TableRowExpandMixin, + ], + data() { + return { + text: '', + iconChevronUp: iconChevronUp, + sortDesc: true, + fields: [ + { + key: 'name', + label: 'Устройство', + sortable: true, + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'version', + label: 'Версия прошивки', + sortable: false, + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'date', + label: 'Дата прошивки', + sortable: true, + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Встроенный контроллер Порт 1|Бокс 1|Вау 1', + version: 'HGP1', + date: '03.11.2021', + }, + { + name: 'Встроенный девайс', + version: '2.5', + date: '03.11.2021', + }, + { + name: 'Встроенный ALOM', + version: '10.52.7', + date: '03.11.2021', + }, + { + name: 'Встроенный RAID', + version: '3.00', + date: '03.11.2021', + }, + { + name: 'Системная плата', + version: '2.30 Aug 24 2020', + date: '03.11.2021', + }, + + { + name: 'Системная плата', + version: '11.0.0 Build 23', + date: '03.11.2021', + }, + { + name: 'Системная плата', + version: '3.46.4', + date: '03.11.2021', + }, + { + name: 'Системная плата', + version: '1.0.7', + date: '03.11.2021', + }, + { + name: 'Встроенный контроллер Порт 1|Бокс 1|Вау 1', + version: 'HPG0.9', + date: '02.11.2021', + }, + { + name: 'Встроенный девайс', + version: '2.5', + date: '02.11.2021', + }, + { + name: 'Встроенный ALOM', + version: '10.52.7', + date: '02.11.2021', + }, + { + name: 'Встроенный RAID', + version: '3.00', + date: '02.11.2021', + }, + { + name: 'Системная плата', + version: '2.30 Aug 24 2020', + date: '02.11.2021', + }, + { + name: 'Системная плата', + version: '11.0.0 Build 23', + date: '02.11.2021', + }, + { + name: 'Системная плата', + version: '3.46.4', + date: '02.11.2021', + }, + { + name: 'Системная плата', + version: '1.0.7', + date: '02.11.2021', + }, + { + name: 'Встроенный контроллер Порт 1|Бокс 1|Вау 1', + version: 'HPG0.8', + date: '01.11.2021', + }, + { + name: 'Встроенный девайс', + version: '2.5', + date: '01.11.2021', + }, + { + name: 'Встроенный ALOM', + version: '10.52.7', + date: '01.11.2021', + }, + { + name: 'Встроенный RAID', + version: '3.00', + date: '01.11.2021', + }, + { + name: 'Системная плата', + version: '2.30 Aug 24 2020', + date: '01.11.2021', + }, + + { + name: 'Системная плата', + version: '11.0.0 Build 23', + date: '01.11.2021', + }, + { + name: 'Системная плата', + version: '3.46.4', + date: '01.11.2021', + }, + { + name: 'Системная плата', + version: '1.0.7', + date: '01.11.2021', + }, + ], + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-table__section + .table.b-table + > thead + > tr + > [aria-sort='ascending'] { + background-image: url('../../../assets/images/event-logs/sort-icon-rotate.svg'); +} + +.bootstrap-table__section + .table.b-table + > thead + > tr + > [aria-sort='descending'], +.table.b-table > thead > tr > [aria-sort='none'] { + background-image: url('../../../assets/images/event-logs/sort-icon.svg'); +} + +.bootstrap-fans-table__th { + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + padding: 10px 5px !important; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.bootstrap-fans-table__td { + padding: 5px !important; + border-top: none !important; +} +</style> +<style lang="scss" scoped> +//nav items style +.nav-item, +.nav-link { + padding: 0; +} + +.nav-item { + list-style-type: none; +} + +.semi-bold-12px { + display: inline-block; + padding: 16px 0 0 2rem; +} + +.bmc-configuration__bios-version { + display: inline-block; + color: #0c1c29; + padding: 8px 2px 2rem 2rem; +} + +a { + color: $text-primary !important; + &:hover { + color: $text-primary !important; + } +} + +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} +.medium-12px { + color: $text-primary !important; +} +</style> diff --git a/src/views/BMC/Firmware/index.js b/src/views/BMC/Firmware/index.js new file mode 100644 index 00000000..55a8c296 --- /dev/null +++ b/src/views/BMC/Firmware/index.js @@ -0,0 +1,2 @@ +import FirmwarePage from './FirmwarePage.vue'; +export default FirmwarePage; diff --git a/src/views/BMC/Settings/SettingsPage.vue b/src/views/BMC/Settings/SettingsPage.vue new file mode 100644 index 00000000..c9a0df8d --- /dev/null +++ b/src/views/BMC/Settings/SettingsPage.vue @@ -0,0 +1,308 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <!-- BMC table --> + <div class="main-container"> + <div class="smnp-section"> + <div class="smnp-settings-container"> + <span class="bold-12px__caps section-label">{{ + $t('BMC.smnp') + }}</span> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ $t('BMC.system') }}</label> + <b-form-input + v-model="system" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.contacts') + }}</label> + <b-form-input + type="text" + class="form-control medium-16px" + placeholder="Введите значение" + > + </b-form-input> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.community') + }}</label> + <b-form-input + v-model="community" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('global.status.status') + }}</label> + <b-form-select + v-model="connectionType" + :options="connectionTypes" + class="select-connection medium-16px" + /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ $t('BMC.smnpIp') }}</label> + <b-form-input + v-model="smnpIp" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.smnpPort') + }}</label> + <b-form-input + v-model="smnpPort" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <div class="accept-container"> + <b-button variant="primary" class="accept-button"> + {{ $t('global.action.acceptChanges') }} + </b-button> + </div> + </div> + </div> + <div class="smnp-section"> + <div class="smnp-settings-container"> + <span class="bold-12px__caps section-label">{{ + $t('BMC.smnpWarning') + }}</span> + <div class="table-section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + > + <template #cell(value)="{ index }"> + <b-row> + <b-col> + <span v-if="items[index].value"> + {{ $t('global.status.enabled') }} + </span> + <span v-else> + {{ $t('global.status.disabled') }} + </span> + </b-col> + <b-col> + <b-form-checkbox v-model="items[index].value" switch> + </b-form-checkbox> + </b-col> + </b-row> + </template> + </b-table> + </div> + <div class="accept-container"> + <b-button variant="secondary" class="test-message-button"> + {{ $t('BMC.testMessage') }} + </b-button> + <b-button variant="primary" class="accept-button"> + {{ $t('global.action.acceptChanges') }} + </b-button> + </div> + </div> + </div> + + <div class="smnp-section"> + <div class="smnp-settings-container"> + <span class="bold-12px__caps section-label">{{ + $t('BMC.syslogSettings') + }}</span> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('global.status.status') + }}</label> + <b-form-select + v-model="connectionType" + :options="connectionTypes" + class="select-connection medium-16px" + /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.syslogIP') + }}</label> + <b-form-input + v-model="syslogIp" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.syslogPort') + }}</label> + <b-form-input + v-model="syslogPort" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <div class="accept-container"> + <b-button variant="primary" class="accept-button"> + {{ $t('global.action.acceptChanges') }} + </b-button> + </div> + </div> + </div> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +// import PageSection from '@/components/Global/PageSection'; + +export default { + components: { + PageTitle, + // PageSection, + }, + data() { + return { + text: '', + system: '2КА04.02_г17', + community: 'public', + smnpIp: '0.0.0.0', + smnpPort: '161', + syslogIp: '0.0.0.0', + syslogPort: '161', + fields: [ + { + key: 'name', + label: 'Тип предупреждения', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + bootstrap-table_smnp-table`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-last + smnp-table-col-last`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items: [ + { + name: 'SNMPv1', + value: true, + }, + { + name: 'SNMPv3', + value: true, + }, + { + name: 'Постоянные запросы и предупреждения SNMPv1', + value: true, + }, + ], + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-table_smnp-table { + width: 70%; +} +.smnp-table-col-last { + width: 30%; +} +</style> +<style lang="scss" scoped> +.main-container { + margin-top: 16px; +} +.smnp-section { + border-bottom: 1px solid $faint-secondary-primary-10; +} +.smnp-settings-container { + display: flex; + flex-flow: row wrap; + gap: 16px; + justify-content: flex-start; + align-items: flex-start; + margin: 16px 0 16px 28px; +} + +.section-label { + display: block; + width: 100%; +} +.form-group { + width: 341px; + height: 35px; +} +.form-control { + margin: -31px 0px 0 -15px; + height: 52px; + width: 341px; + padding: 17px 0 0 15px; +} +.clear-icon { + margin: -80px 0px 0px 300px; +} + +.select-connection { + height: 52px; + width: 341px; + padding-top: 30px; + border: none; + border-radius: 8px; + margin: -31px 0 18px -15px; + background-color: $faint-secondary-primary-5; + background-image: url('../../../assets/images/icon-chevron.svg'); +} +.accept-container { + width: 100%; + display: flex; + justify-content: flex-end; +} + +.accept-button { + width: 245px; + height: 36px; + margin-right: 33px; +} +.test-message-button { + width: 245px; + height: 36px; + margin-right: 16px; + background-color: $faint-secondary-primary-5; +} + +.table-section { + width: 100%; + margin: 0 20px 0 0; +} +</style> diff --git a/src/views/BMC/Settings/index.js b/src/views/BMC/Settings/index.js new file mode 100644 index 00000000..f74e1f4d --- /dev/null +++ b/src/views/BMC/Settings/index.js @@ -0,0 +1,2 @@ +import SettingsPage from './SettingsPage.vue'; +export default SettingsPage; diff --git a/src/views/Fans/DynamicInformation/FansDynamicPage.vue b/src/views/Fans/DynamicInformation/FansDynamicPage.vue new file mode 100644 index 00000000..c56d2f83 --- /dev/null +++ b/src/views/Fans/DynamicInformation/FansDynamicPage.vue @@ -0,0 +1,127 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <div class="speed-description"> + <img src="@/assets/images/fans-page/fans-icon.svg" /> + <span class="bold-16px">{{ $t('fansPage.speedDescription') }}</span> + </div> + <div class="limit-speed-container"> + <div class="speed-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ $t('fansPage.speedWarhihg') }}</span> + <b-form-input + v-model="fanSpeedWarninigInput" + type="number" + :min="0" + :max="fanSpeedShutdownInput" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="speed-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ $t('fansPage.speedShutdown') }}</span> + <b-form-input + v-model="fanSpeedShutdownInput" + :min="fanSpeedWarninigInput" + :max="4000" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateFansSpeed" + > + {{ $t('global.action.save') }} + </b-button> + </div> + + <fans-dynamic-table + :speed-warninig="fanSpeedWarninig" + :speed-shutdown="fanSpeedShutdown" + :time-scale="timeScale" + /> + <indicators-table /> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; +import FansDynamicTable from './FansDynamicTable'; +import IndicatorsTable from './IndicatorsTable'; + +export default { + components: { PageTitle, DateSwitch, FansDynamicTable, IndicatorsTable }, + data() { + return { + timeScale: 'hour', + fanSpeedWarninigInput: 2450, + fanSpeedShutdownInput: 3150, + fanSpeedWarninig: 2450, + fanSpeedShutdown: 3150, + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateFansSpeed() { + this.fanSpeedWarninig = +this.fanSpeedWarninigInput; + this.fanSpeedShutdown = +this.fanSpeedShutdownInput; + }, + }, +}; +</script> +<style lang="scss" scoped> +.speed-description { + height: 56px; + padding-left: 36px; + display: flex; + align-items: center; + gap: 8px; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.limit-speed-container { + height: 85px; + padding: 0 0 10px 32px; + display: flex; + align-items: flex-end; + gap: 24px; +} + +.speed-limt { + height: 60px; + max-width: 312px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} + +.save-button { + width: 151px; + height: 36px; +} + +.form-control { + height: 36px; +} + +.main-container { + overflow: auto; +} +</style> diff --git a/src/views/Fans/DynamicInformation/FansDynamicTable.vue b/src/views/Fans/DynamicInformation/FansDynamicTable.vue new file mode 100644 index 00000000..b0818255 --- /dev/null +++ b/src/views/Fans/DynamicInformation/FansDynamicTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setSpeed } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + speedWarninig: { + type: Number, + default: 2450, + }, + speedShutdown: { + type: Number, + default: 3150, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, this.timeScale), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setSpeed(4000), + min: 0, + title: null, + minRange: 4000, + minTickInterval: 1000, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.speedWarninig, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значения предупреждение', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + { + color: '#1A3E5B', + dashStyle: 'solid', + value: this.speedShutdown, + width: 2, + label: { + text: 'Пороговое значения отказ', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }, + series: Series[this.timeScale].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/Fans/DynamicInformation/IndicatorsTable.vue b/src/views/Fans/DynamicInformation/IndicatorsTable.vue new file mode 100644 index 00000000..de0823c0 --- /dev/null +++ b/src/views/Fans/DynamicInformation/IndicatorsTable.vue @@ -0,0 +1,191 @@ +<template> + <page-section class="bootstrap-table__section"> + <span class="bold-12px__caps"> + {{ $t('fansPage.valueIndicators') }} + </span> + <b-table + responsive="md" + class="bootstrap-fans-table bootstrap-fans-table__stripes" + :items="items" + :fields="fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="regular-12px tretiatry"> + {{ value }} + </span> + </template> + <template #cell(minSpeedDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxSpeedDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> +</template> + +<script> +import PageSection from '@/components/Global/PageSection'; +import { colors } from './helpers'; + +export default { + components: { PageSection }, + data() { + return { + colors, + fields: [ + { + key: 'name', + label: 'Имя модуля', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentSpeed', + label: 'Текущая', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleSpeed', + label: 'Средняя', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minSpeed', + label: 'Минимальная', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minSpeedDate', + label: 'Дата минимальной', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxSpeed', + label: 'Максимальная', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxSpeedDate', + label: 'Дата максимальной', + formatter: this.dataFormatter, + thClass: 'bootstrap-fans-table__th medium-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Вентилятор 1', + currentSpeed: 1900, + middleSpeed: 1200, + minSpeed: 950, + minSpeedDate: { time: '15:15', date: '11.11.2021' }, + maxSpeed: 2100, + maxSpeedDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Вентилятор 2', + currentSpeed: 1850, + middleSpeed: 1450, + minSpeed: 850, + minSpeedDate: { time: '15:45', date: '11.11.2021' }, + maxSpeed: 2150, + maxSpeedDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Вентилятор 3', + currentSpeed: 1870, + middleSpeed: 1450, + minSpeed: 1000, + minSpeedDate: { time: '15:23', date: '11.11.2021' }, + maxSpeed: 2050, + maxSpeedDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Вентилятор 4', + currentSpeed: 1790, + middleSpeed: 780, + minSpeed: 950, + minSpeedDate: { time: '16:45', date: '25.11.2021' }, + maxSpeed: 1800, + maxSpeedDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Вентилятор 5', + currentSpeed: 1950, + middleSpeed: 1260, + minSpeed: 880, + minSpeedDate: { time: '15:23', date: '11.11.2021' }, + maxSpeed: 1950, + maxSpeedDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Вентилятор 6', + currentSpeed: 1900, + middleSpeed: 1300, + minSpeed: 960, + minSpeedDate: { time: '16:45', date: '25.11.2021' }, + maxSpeed: 2000, + maxSpeedDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-fans-table__th { + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + padding: 10px 5px !important; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.bootstrap-fans-table__td { + padding: 5px !important; + border-top: none !important; +} +</style> + +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} +.medium-12px { + color: $text-primary !important; +} +</style> diff --git a/src/views/Fans/DynamicInformation/helpers.js b/src/views/Fans/DynamicInformation/helpers.js new file mode 100644 index 00000000..1268d34a --- /dev/null +++ b/src/views/Fans/DynamicInformation/helpers.js @@ -0,0 +1,820 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + hour: [ + { + name: 'Sean', + data: [ + 526, + 526, + 526, + 526, + 526, + 1100, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 2100, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 1526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 1526, + 526, + 526, + 526, + 526, + 526, + 526, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 315, + 315, + 315, + 315, + 315, + 315, + 1315, + 315, + 315, + 315, + 315, + 315, + 315, + 2200, + 315, + 315, + 315, + 315, + 315, + 315, + 1100, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 1600, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 1400, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 1359, + 359, + 359, + 359, + 359, + 2000, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 2100, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 1400, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 1350, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 1590, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 1490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 1487, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 1924, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 1924, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 1924, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 410, + 410, + 410, + 410, + 1300, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 2110, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 410, + 410, + ], + color: '#139BB9', + }, + ], + day: [ + { + name: 'Sean', + data: [ + 526, + 526, + 526, + 526, + 626, + 626, + 626, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 726, + 1026, + 726, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 526, + 1326, + 1526, + 1326, + 526, + 526, + 526, + 526, + 526, + 526, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 315, + 315, + 315, + 315, + 315, + 315, + 815, + 315, + 315, + 315, + 315, + 315, + 315, + 1100, + 315, + 315, + 315, + 315, + 315, + 315, + 800, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 900, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 900, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + 315, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 1500, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 1500, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 500, + 1200, + 500, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + 359, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 950, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 890, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 990, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + 490, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 1087, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 1424, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 1424, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 1224, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + 794, + 467, + 467, + 467, + 467, + 467, + 467, + 467, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 410, + 1410, + 410, + 410, + 1300, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 410, + 2110, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 410, + 1410, + 410, + 410, + 410, + 1410, + 410, + 410, + ], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${String(i).padStart(2, '0')}`; + } + return arr; +}; + +export const setSpeed = (count) => { + const arr = [...new Array(count)].map((i, k) => `${k}`); + return arr; +}; diff --git a/src/views/Fans/DynamicInformation/index.js b/src/views/Fans/DynamicInformation/index.js new file mode 100644 index 00000000..a3dadd5a --- /dev/null +++ b/src/views/Fans/DynamicInformation/index.js @@ -0,0 +1,2 @@ +import FansDynamicPage from './FansDynamicPage.vue'; +export default FansDynamicPage; diff --git a/src/views/Fans/StaticInformation/FansStaticPage.vue b/src/views/Fans/StaticInformation/FansStaticPage.vue new file mode 100644 index 00000000..45bd1914 --- /dev/null +++ b/src/views/Fans/StaticInformation/FansStaticPage.vue @@ -0,0 +1,147 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <span class="bold-16px">{{ $t('tablesDescription.installedFans') }}</span> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(status)="{ value }"> + <div v-if="value" class="fans-table-col-first__cell"> + <img + class="status__img" + src="@/assets/images/fans-page/working.svg" + /> + <span> + {{ $t('fansPage.inWork') }} + </span> + </div> + <div v-else class="fans-table-col-first__cell"> + <img + class="status__img" + src="@/assets/images/fans-page/notWorking.svg" + /> + <span> + {{ $t('fansPage.notWorking') }} + </span> + </div> + </template> + </b-table> + </page-section> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; + +export default { + components: { PageTitle, PageSection }, + data() { + return { + isBusy: true, + isAddersСolon: false, + fields: [ + { + key: 'status', + label: 'Статус', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + fans-table-col-first`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'name', + label: 'Имя', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-center + fans-table-col-second`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'type', + label: 'Тип', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-center + fans-table-col-third`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'value', + label: 'Номинальная скорость, об/мин', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-last + fans-table-col-third`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items: [ + { + status: true, + name: 'Венититор 1', + type: 'Системная плата', + value: '2100', + }, + { + status: true, + name: 'Венититор 2', + type: 'Системная плата', + value: '2300', + }, + { + status: false, + name: 'Венититор 3', + type: 'Системная плата', + value: '2400', + }, + ], + }; + }, +}; +</script> +<style lang="scss"> +.fans-table-col-first { + width: 25%; +} + +.fans-table-col-second { + width: 25%; +} + +.fans-table-col-third { + width: 25%; +} +</style> + +<style lang="scss" scoped> +.row { + margin: 0px; +} + +.fans-table-col-first__cell { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: flex-start; +} + +.status__img { + margin-right: 7px; +} + +.bold-16px { + margin: 24px 0 0 2rem; +} +</style> diff --git a/src/views/Fans/StaticInformation/index.js b/src/views/Fans/StaticInformation/index.js new file mode 100644 index 00000000..9a5d913d --- /dev/null +++ b/src/views/Fans/StaticInformation/index.js @@ -0,0 +1,2 @@ +import FansStaticPage from './FansStaticPage.vue'; +export default FansStaticPage; diff --git a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue index 7d5dd700..49281e14 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue @@ -207,6 +207,20 @@ export default { sortable: false, }, ], + processors: [ + { + id: 'Процессор №1', + health: 'v3.1.5', + locationNumber: '2.4', + identifyLed: '4', + }, + { + id: 'Процессор №1', + health: 'v3.1.5', + locationNumber: '2.4', + identifyLed: '4', + }, + ], searchFilter: searchFilter, searchTotalFilteredRows: 0, expandRowLabel: expandRowLabel, @@ -218,9 +232,9 @@ export default { ? this.searchTotalFilteredRows : this.processors.length; }, - processors() { - return this.$store.getters['processors/processors']; - }, + // processors() { + // return this.$store.getters['processors/processors']; + // }, }, created() { this.$store.dispatch('processors/getProcessorsInfo').finally(() => { diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index 520daf60..244fdcd7 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -26,7 +26,7 @@ ></b-form-group> <b-form-group> - <label class="text-login" for="username">{{ + <label class="regular-12px tretiatry" for="username">{{ $t('pageLogin.username') }}</label> <b-form-input @@ -50,7 +50,7 @@ <b-form-group> <input-password-toggle> - <label class="text-login" for="password">{{ + <label class="regular-12px tretiatry" for="password">{{ $t('pageLogin.password') }}</label> <b-form-input @@ -170,7 +170,7 @@ export default { height: 56px; margin: -30px 0 0 0; padding-top: 30px; - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; diff --git a/src/views/MemoryModules/DynamicInfo/MemoryDynamicPage.vue b/src/views/MemoryModules/DynamicInfo/MemoryDynamicPage.vue new file mode 100644 index 00000000..640513f5 --- /dev/null +++ b/src/views/MemoryModules/DynamicInfo/MemoryDynamicPage.vue @@ -0,0 +1,206 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="notification__container"> + <span class="semi-bold-12px">{{ + $t('global.ariaLabel.notificationTime') + }}</span> + <div class="form-control notification"> + <b-form-input + v-model="notificationInput" + type="number" + class="notification__input" + > + </b-form-input> + <button class="notification_button"> + <img class="notification__icon" src="@/assets/images/refresh.svg" /> + </button> + </div> + </div> + <div class="main-container"> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <div class="limit-container"> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/non-normal.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.nonNormalMode') + }}</span> + <b-form-input + v-model="temperatureNonNormalInput" + type="number" + :min="0" + :max="temperatureCritical" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/critical.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.criticalMode') + }}</span> + <b-form-input + v-model="temperatureCritical" + type="number" + :min="temperatureNonNormalInput" + :max="temperatureWarningInput" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.temperatureWarning') + }}</span> + <b-form-input + v-model="temperatureWarningInput" + type="number" + :min="temperatureCritical" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateTemperatureLimits" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Temperature Table --> + <temperature-table + :time-scale="timeScale" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical-start="temperatureCriticalStart" + /> + <accessory-table :records="accessoryData.temperatureTable" /> + </div> + </b-container> +</template> +<script> +import PageTitle from '@/components/Global/PageTitle'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; +import TemperatureTable from './TemperatureTable'; +import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTableWithLabel'; +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +import { AccessoryData } from './helpers'; + +export default { + components: { + PageTitle, + DateSwitch, + TemperatureTable, + AccessoryTable, + }, + data() { + return { + timeScale: 'hour', + temperatureWarning: 72, + temperatureWarningInput: 72, + temperatureNonNormal: 44, + temperatureNonNormalInput: 44, + temperatureCriticalStart: 55, + temperatureCritical: 55, + notificationInput: 42, + accessoryData: AccessoryData, + iconChevronUp: iconChevronUp, + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateTemperatureLimits() { + this.temperatureWarning = +this.temperatureWarningInput; + this.temperatureNonNormal = +this.temperatureNonNormalInput; + this.temperatureCriticalStart = +this.temperatureCritical; + }, + }, +}; +</script> +<style lang="scss" scoped> +.notification__container { + position: absolute; + top: calc(#{$header-height}); + right: 0px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; +} + +.notification { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + border: none; + box-shadow: none; + border-radius: 8px; + margin: 12px 32px 12px 8px; + width: 236px; + height: 40px; + z-index: 1001; +} + +.notification__icon { + width: 20px; + height: 20px; +} + +.notification__input { + border: none; + background: none; + box-shadow: none; +} + +.notification_button { + border: none; + background: none; +} + +.semi-bold-12px { + z-index: 1001; +} + +// temperature limit comtainer +.limit-container { + height: 85px; + width: 100%; + padding: 0 32px 10px 32px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: flex-end; + gap: 24px; +} + +.trmperature-limt { + height: 60px; + width: 100%; + max-width: 270px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} + +.form-control { + height: 36px; +} +.save-button { + width: 151px; + height: 36px; +} +</style> diff --git a/src/views/MemoryModules/DynamicInfo/TemperatureTable.vue b/src/views/MemoryModules/DynamicInfo/TemperatureTable.vue new file mode 100644 index 00000000..f9c149c3 --- /dev/null +++ b/src/views/MemoryModules/DynamicInfo/TemperatureTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + nonNormal: { + type: Number, + default: 70, + }, + criticalStart: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'С°'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения, С°', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + plotBands: [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.nonNormal, + to: this.criticalStart, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.criticalStart, + to: this.warning, + }, + ], + }, + series: Series['temperature'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/MemoryModules/DynamicInfo/helpers.js b/src/views/MemoryModules/DynamicInfo/helpers.js new file mode 100644 index 00000000..8e54e01f --- /dev/null +++ b/src/views/MemoryModules/DynamicInfo/helpers.js @@ -0,0 +1,527 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + temperature: [ + { + name: 'Sean', + data: [ + 15, + 15, + 45, + 15, + 65, + 15, + 75, + 15, + 15, + 15, + 55, + 15, + 25, + 15, + 45, + 15, + 55, + 15, + 75, + 15, + 35, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 65, + 15, + 45, + 15, + 25, + 15, + 45, + 15, + 65, + 15, + 35, + 35, + 35, + 15, + 55, + 15, + 15, + 35, + 15, + 25, + 15, + 35, + 15, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 62, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 22, + 12, + 42, + 12, + 52, + 12, + 72, + 12, + 52, + 12, + 62, + 12, + 72, + 12, + 82, + 12, + 12, + 42, + 12, + 12, + 52, + 12, + 42, + 12, + 12, + 62, + 12, + 42, + 12, + 22, + 12, + 42, + 12, + 62, + 12, + 12, + 32, + 12, + 62, + 12, + 52, + 12, + 32, + 12, + 22, + 12, + 32, + 12, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 13, + 13, + 33, + 13, + 23, + 13, + 33, + 13, + 63, + 13, + 63, + 13, + 13, + 13, + 43, + 13, + 13, + 13, + 53, + 13, + 23, + 13, + 43, + 13, + 53, + 13, + 63, + 13, + 53, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 53, + 13, + 43, + 13, + 13, + 63, + 13, + 43, + 13, + 23, + 13, + 43, + 13, + 63, + 13, + 13, + 13, + 53, + 13, + 53, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 24, + 14, + 44, + 14, + 64, + 14, + 64, + 14, + 34, + 14, + 54, + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 64, + 14, + 64, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 54, + 14, + 14, + 14, + 44, + 14, + 54, + 14, + 14, + 14, + 54, + 14, + 64, + 14, + 14, + 14, + 84, + 14, + 94, + 14, + 54, + 4, + 54, + 14, + 44, + 14, + 44, + 64, + 14, + 44, + 14, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 16, + 46, + 16, + 26, + 16, + 46, + 16, + 66, + 16, + 16, + 16, + 16, + 16, + 56, + 16, + 16, + 36, + 16, + 26, + 16, + 36, + 16, + 66, + 16, + 76, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 56, + 16, + 26, + 16, + 46, + 16, + 56, + 16, + 76, + 16, + 56, + 16, + 66, + 16, + 76, + 16, + 16, + 16, + 96, + 16, + 16, + 16, + 56, + 16, + 46, + 16, + 46, + 16, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 49, + 19, + 19, + 69, + 19, + 49, + 19, + 29, + 19, + 49, + 19, + 69, + 19, + 39, + 39, + 39, + 19, + 59, + 19, + 19, + 39, + 19, + 29, + 19, + 39, + 19, + 69, + 19, + 69, + 19, + 19, + 19, + 49, + 19, + 19, + 19, + 59, + 19, + 29, + 19, + 49, + 19, + 59, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + ], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${String(i).padStart(2, '0')}`; + } + return arr; +}; + +export const setCategories = (count, desc) => { + const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`); + return arr; +}; + +export const AccessoryData = { + temperatureTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentTemperature', + label: 'Текущее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleTemperature', + label: 'Среднее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minTemperature', + label: 'Минимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minDate', + label: 'Дата минимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxTemperature', + label: 'Максимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxDate', + label: 'Дата максимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Модуль памяти 1', + currentTemperature: 19, + middleTemperature: 40, + minTemperature: 31, + minDate: { time: '15:15', date: '11.11.2021' }, + maxTemperature: 88, + maxDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Модуль памяти 2', + currentTemperature: 29, + middleTemperature: 40, + minTemperature: 20, + minDate: { time: '15:45', date: '11.11.2021' }, + maxTemperature: 76, + maxDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Модуль памяти 3', + currentTemperature: 48, + middleTemperature: 46, + minTemperature: 31, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 69, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Модуль памяти 4', + currentTemperature: 48, + middleTemperature: 45, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 75, + maxDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Модуль памяти 5', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 30, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Модуль памяти 6', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }, +}; diff --git a/src/views/MemoryModules/DynamicInfo/index.js b/src/views/MemoryModules/DynamicInfo/index.js new file mode 100644 index 00000000..b840772c --- /dev/null +++ b/src/views/MemoryModules/DynamicInfo/index.js @@ -0,0 +1,2 @@ +import MemoryDynamicPage from './MemoryDynamicPage.vue'; +export default MemoryDynamicPage; diff --git a/src/views/MemoryModules/Specification/MemoryStaticPage.vue b/src/views/MemoryModules/Specification/MemoryStaticPage.vue new file mode 100644 index 00000000..09ef7f23 --- /dev/null +++ b/src/views/MemoryModules/Specification/MemoryStaticPage.vue @@ -0,0 +1,248 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <page-section class="bootstrap-table__section info_section"> + <span class="bold-16px">{{ $t('global.table.info') }}</span> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + </b-table> + <span class="bold-16px">{{ $t('global.table.memorySlots') }}</span> + </page-section> + <memory-switch + :slots="memorySlots" + :switch-memory="switchMemorySlot" + :current-memory="currentMemorySlot" + /> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items_slots" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(value)="{ index, value }"> + <b-row v-if="index === 0"> + <b-col cols="11"> + <span> + {{ 'Работоспособность' }} + </span> + </b-col> + <b-col cols="1"> + <img + src="@/assets/images/fans-page/working.svg" + class="icon-chevron" + /> + </b-col> + </b-row> + <b-row v-else> + <b-col> + <span>{{ value }}</span> + </b-col> + </b-row> + </template> + </b-table> + </page-section> + <page-section class="bootstrap-table__section"> + <span class="bold-16px">{{ $t('global.table.memoryModules') }}</span> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items_modules" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(value)="{ index, value }"> + <b-row v-if="index === 0"> + <b-col cols="11"> + <span> + {{ 'Работоспособность' }} + </span> + </b-col> + <b-col cols="1"> + <img + src="@/assets/images/fans-page/working.svg" + class="icon-chevron" + /> + </b-col> + </b-row> + <b-row v-else> + <b-col> + <span>{{ value }}</span> + </b-col> + </b-row> + </template> + </b-table> + </page-section> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import MemorySwitch from './MemorySwitch'; + +export default { + components: { PageTitle, PageSection, MemorySwitch }, + data() { + return { + currentMemorySlot: 1, + memorySlots: [ + { id: 1, name: 'CPU_1-DIMM_A1' }, + { id: 2, name: 'CPU_1-DIMM_A2' }, + { id: 3, name: 'CPU_1-DIMM_A3' }, + { id: 4, name: 'CPU_1-DIMM_B1' }, + { id: 5, name: 'CPU_1-DIMM_B2' }, + { id: 6, name: 'CPU_1-DIMM_B3' }, + { id: 7, name: 'CPU_1-DIMM_C1' }, + { id: 8, name: 'CPU_1-DIMM_C2' }, + { id: 9, name: 'CPU_1-DIMM_C3' }, + { id: 10, name: 'CPU_1-DIMM_D1' }, + { id: 11, name: 'CPU_1-DIMM_D2' }, + { id: 12, name: 'CPU_1-DIMM_D3' }, + { id: 13, name: 'CPU_1-DIMM_E1' }, + { id: 14, name: 'CPU_1-DIMM_E2' }, + { id: 15, name: 'CPU_1-DIMM_E3' }, + ], + fields: [ + { + key: 'parametr', + label: 'Статус', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + memory-table-col-first`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items: [ + { + parametr: 'Установленный объем памяти', + value: '8096 мб', + }, + { + parametr: 'Максимальный объем', + value: '4048 мб', + }, + { + parametr: 'Общее количество слотов', + value: '10', + }, + { + parametr: 'Используемое количество слотов', + value: '10', + }, + ], + items_slots: [ + { + parametr: 'Статус', + value: true, + }, + { + parametr: 'Имя слота', + value: 'Cлот 2', + }, + { + parametr: 'Технология', + value: 'Название технологии', + }, + { + parametr: 'Тип памяти', + value: 'Оперативная', + }, + { + parametr: 'Объем', + value: '2024', + }, + { + parametr: 'Состояние', + value: 'Отлично', + }, + { + parametr: 'Класс', + value: '1', + }, + { + parametr: 'Скорость', + value: '2000 МТ/сек', + }, + ], + items_modules: [ + { + parametr: 'Статус', + value: true, + }, + { + parametr: 'Имя коннектора', + value: 'DIMM A2', + }, + { + parametr: 'Тип памяти', + value: 'DDR-4', + }, + { + parametr: 'Объем', + value: '32 GB', + }, + { + parametr: 'Состояние', + value: 'Presence Detected', + }, + { + parametr: 'Ранг', + value: 'Dual Rank', + }, + { + parametr: 'Скорость', + value: '2400 MHz', + }, + ], + }; + }, + methods: { + switchMemorySlot(period) { + this.currentMemorySlot = period; + }, + }, +}; +</script> +<style lang="scss"> +.memory-table-col-first { + width: 50%; +} +</style> + +<style lang="scss" scoped> +.bootstrap-table__section { + margin-bottom: 24px; +} +.info_section { + margin-bottom: 0px; +} + +.bold-16px { + display: block; + margin: 25px 0 16px 0; +} +</style> diff --git a/src/views/MemoryModules/Specification/MemorySwitch.vue b/src/views/MemoryModules/Specification/MemorySwitch.vue new file mode 100644 index 00000000..27101daa --- /dev/null +++ b/src/views/MemoryModules/Specification/MemorySwitch.vue @@ -0,0 +1,112 @@ +<template> + <div + ref="content" + class="memory-switch" + @wheel.prevent="wheelItBetter($event)" + > + <span + v-for="item in slots" + :key="item.id" + class="medium-12px scale-item" + :class="{ 'switch-active': currentMemory === item.id }" + @click="switchMemory(item.id)" + >{{ $t(item.name) }}</span + > + <div + class="slider" + :style="`width: 98px; left: ${ + ((currentMemory ? currentMemory : 1) - 1) * 120 + 32 + }px`" + /> + </div> +</template> + +<script> +export default { + props: { + slots: { + type: Array, + default: null, + }, + currentMemory: { + type: Number, + default: 1, + }, + switchMemory: { + type: Function, + required: true, + }, + }, + data() { + return { + upHere: false, + container: this.$refs.content, + }; + }, + methods: { + wheelItBetter(event) { + if (event.deltaY < 0) { + this.$refs.content.scrollLeft -= 25; + } else { + this.$refs.content.scrollLeft += 25; + } + }, + }, +}; +</script> +<style lang="scss" scoped> +.memory-switch { + position: relative; + width: calc(93vw - 320px); + height: 50px; + padding: 0 16px 0 32px; + display: grid; + grid-auto-flow: column; + grid-auto-columns: 120px; + grid-template-rows: 32px; + align-items: end; + border-bottom: 1px solid $faint-secondary-primary-10; + overflow-x: auto; + white-space: nowrap; + &::-webkit-scrollbar { + height: 2px; + } + &::-webkit-scrollbar-thumb { + background: rgba(26, 62, 91, 0.2); + border-radius: 16px; + background-clip: content-box; + height: 10px; + } +} + +.switch-active { + color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.slider { + position: absolute; + height: 0px; + border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 0px; +} + +.scale-item { + display: inline-block; + width: 120px; + margin-right: 6px; + cursor: pointer; +} + +.date-picker { + display: flex; + align-items: center; + gap: 9px; +} + +.date-clear { + margin-left: auto; + cursor: pointer; +} +</style> diff --git a/src/views/MemoryModules/Specification/index.js b/src/views/MemoryModules/Specification/index.js new file mode 100644 index 00000000..4916f58a --- /dev/null +++ b/src/views/MemoryModules/Specification/index.js @@ -0,0 +1,2 @@ +import MemoryStaticPage from './MemoryStaticPage.vue'; +export default MemoryStaticPage; diff --git a/src/views/Motherboard/DynamicInfo/MotherboardDynamicPage.vue b/src/views/Motherboard/DynamicInfo/MotherboardDynamicPage.vue new file mode 100644 index 00000000..95267ece --- /dev/null +++ b/src/views/Motherboard/DynamicInfo/MotherboardDynamicPage.vue @@ -0,0 +1,140 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <div class="limit-container"> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.temperatureWarning') + }}</span> + <b-form-input + v-model="temperatureWarningInput" + type="number" + :min="0" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateTemperature" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Temperature Table --> + <temperature-table + :time-scale="timeScale" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical-start="temperatureCriticalStart" + /> + <accessory-table :records="accessoryData.temperatureTable" /> + </div> + </b-container> +</template> +<script> +import PageTitle from '@/components/Global/PageTitle'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; +import TemperatureTable from './TemperatureTable'; +import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTableWithLabel'; +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +import { AccessoryData } from './helpers'; + +export default { + components: { + PageTitle, + DateSwitch, + TemperatureTable, + AccessoryTable, + }, + data() { + return { + timeScale: 'hour', + temperatureWarning: 72, + temperatureWarningInput: 72, + notificationInput: 42, + accessoryData: AccessoryData, + iconChevronUp: iconChevronUp, + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateTemperature() { + this.temperatureWarning = +this.temperatureWarningInput; + }, + }, +}; +</script> +<style lang="scss" scoped> +//nav items style +.nav-item, +.nav-link { + padding: 0; +} +.nav-item { + list-style-type: none; +} + +a { + color: $text-primary !important; + &:hover { + color: $text-primary !important; + } +} + +.notification-button { + border: none; + background: none; +} + +.semi-bold-12px { + z-index: 1001; +} + +// temperature limit comtainer +.limit-container { + height: 85px; + width: 100%; + padding: 0 32px 10px 32px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: flex-end; + gap: 24px; +} + +.trmperature-limt { + height: 60px; + width: 100%; + max-width: 270px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} + +.form-control { + height: 36px; + &.non-normal { + width: 125px; + } +} +.save-button { + width: 151px; + height: 36px; +} +</style> diff --git a/src/views/Motherboard/DynamicInfo/TemperatureTable.vue b/src/views/Motherboard/DynamicInfo/TemperatureTable.vue new file mode 100644 index 00000000..1bbf7e08 --- /dev/null +++ b/src/views/Motherboard/DynamicInfo/TemperatureTable.vue @@ -0,0 +1,112 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + nonNormal: { + type: Number, + default: 70, + }, + criticalStart: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'С°'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения, С°', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }, + series: Series['temperature'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/Motherboard/DynamicInfo/helpers.js b/src/views/Motherboard/DynamicInfo/helpers.js new file mode 100644 index 00000000..807de83a --- /dev/null +++ b/src/views/Motherboard/DynamicInfo/helpers.js @@ -0,0 +1,527 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + temperature: [ + { + name: 'Sean', + data: [ + 7, + 7, + 7, + 17, + 7, + 27, + 7, + 7, + 47, + 7, + 7, + 7, + 37, + 7, + 7, + 7, + 27, + 7, + 7, + 7, + 27, + 7, + 7, + 7, + 47, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 27, + 7, + 7, + 7, + 7, + 7, + 27, + 7, + 7, + 7, + 7, + 7, + 7, + 37, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 20, + 10, + 10, + 30, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 50, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 20, + 10, + 10, + 10, + 10, + 10, + 30, + 10, + 10, + 10, + 10, + 10, + 10, + 19, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 13, + 13, + 13, + 13, + 23, + 13, + 33, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 23, + 13, + 43, + 13, + 53, + 13, + 13, + 13, + 53, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 53, + 13, + 43, + 13, + 13, + 63, + 13, + 43, + 13, + 23, + 13, + 43, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 24, + 14, + 44, + 14, + 14, + 14, + 14, + 14, + 34, + 14, + 14, + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 44, + 14, + 54, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 84, + 14, + 94, + 14, + 14, + 14, + 54, + 14, + 44, + 14, + 44, + 14, + 14, + 44, + 14, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 16, + 16, + 16, + 26, + 16, + 46, + 16, + 66, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 36, + 16, + 66, + 16, + 76, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 56, + 16, + 16, + 16, + 56, + 16, + 66, + 16, + 76, + 16, + 16, + 16, + 96, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 29, + 19, + 19, + 19, + 19, + 19, + 39, + 39, + 39, + 19, + 59, + 19, + 19, + 39, + 19, + 29, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 29, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + ], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${String(i).padStart(2, '0')}`; + } + return arr; +}; + +export const setCategories = (count, desc) => { + const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`); + return arr; +}; + +export const AccessoryData = { + temperatureTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentTemperature', + label: 'Текущее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleTemperature', + label: 'Среднее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minTemperature', + label: 'Минимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minDate', + label: 'Дата минимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxTemperature', + label: 'Максимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxDate', + label: 'Дата максимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Материнская плата 1', + currentTemperature: 19, + middleTemperature: 40, + minTemperature: 31, + minDate: { time: '15:15', date: '11.11.2021' }, + maxTemperature: 88, + maxDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Материнская плата 2', + currentTemperature: 29, + middleTemperature: 40, + minTemperature: 20, + minDate: { time: '15:45', date: '11.11.2021' }, + maxTemperature: 76, + maxDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Материнская плата 3', + currentTemperature: 48, + middleTemperature: 46, + minTemperature: 31, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 69, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Материнская плата 4', + currentTemperature: 48, + middleTemperature: 45, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 75, + maxDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Материнская плата 5', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 30, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Материнская плата 6', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }, +}; diff --git a/src/views/Motherboard/DynamicInfo/index.js b/src/views/Motherboard/DynamicInfo/index.js new file mode 100644 index 00000000..bd155997 --- /dev/null +++ b/src/views/Motherboard/DynamicInfo/index.js @@ -0,0 +1,2 @@ +import MotherboardDynamicPage from './MotherboardDynamicPage.vue'; +export default MotherboardDynamicPage; diff --git a/src/views/Motherboard/Specification/MotherboardSpecificationPage.vue b/src/views/Motherboard/Specification/MotherboardSpecificationPage.vue new file mode 100644 index 00000000..2146663d --- /dev/null +++ b/src/views/Motherboard/Specification/MotherboardSpecificationPage.vue @@ -0,0 +1,97 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <page-section class="bootstrap-table__section"> + <span class="bold-16px">{{ $t('global.table.info') }}</span> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + </b-table> + <span class="bold-16px">{{ + $t('appNavigation.motherboardParam') + }}</span> + <popover + id="popover-reactive-1" + description="SystemDescription.onBootRom" + popup="SystemDescription.onBootRom_popup" + button="global.action.refresh" + /> + <popover + id="popover-reactive-2" + description="SystemDescription.offBootRom" + popup="SystemDescription.offBootRom_popup" + button="global.action.refresh" + /> + </page-section> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; + +import Popover from '@/components/Global/Popover'; + +export default { + components: { PageTitle, PageSection, Popover }, + data() { + return { + fields: [ + { + key: 'parametr', + label: 'Параметр', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-first', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items: [ + { + parametr: 'Модель', + value: 'R2132', + }, + { + parametr: 'Производитель', + value: 'Asus', + }, + { + parametr: 'Версия', + value: '4.2', + }, + { + parametr: 'Серийный номер', + value: '231232132133', + }, + { + parametr: 'Версия BIOS', + value: '2', + }, + ], + }; + }, +}; +</script> +<style lang="scss" scoped> +.bootstrap-rounded-table { + margin: 16px 0; +} +</style> diff --git a/src/views/Motherboard/Specification/index.js b/src/views/Motherboard/Specification/index.js new file mode 100644 index 00000000..5458039a --- /dev/null +++ b/src/views/Motherboard/Specification/index.js @@ -0,0 +1,2 @@ +import MotherboardSpecificationPage from './MotherboardSpecificationPage.vue'; +export default MotherboardSpecificationPage; diff --git a/src/views/Operations/ConsoleSettings/ConsoleSettings.vue b/src/views/Operations/ConsoleSettings/ConsoleSettings.vue index bd95fa46..21b3ead9 100644 --- a/src/views/Operations/ConsoleSettings/ConsoleSettings.vue +++ b/src/views/Operations/ConsoleSettings/ConsoleSettings.vue @@ -4,20 +4,63 @@ fluid="xxl pt-0 m-0" > <page-title /> - <!-- BMC table --> - <div class="main-container"> - <page-section class="bootstrap-table__section"> - <b-table - responsive="md" - show-empty - class="bootstrap-rounded-table" - :items="systems" - :fields="fields" - :empty-text="$t('global.table.emptyMessage')" - > - </b-table> - </page-section> - </div> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="systems" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(value)="data"> + <b-row v-if="typeof data.value === 'boolean'"> + <b-col> + <span v-if="systems[data.index].value"> + {{ $t('global.status.enabled') }} + </span> + <span v-else> + {{ $t('global.status.disabled') }} + </span> + </b-col> + <b-col> + <b-form-checkbox v-model="systems[data.index].value" switch> + </b-form-checkbox> + </b-col> + </b-row> + <b-row + v-else-if="data.index === 1 || data.index === 6 || data.index === 8" + > + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <img :is="iconChevron" class="icon-chevron" /> + </b-col> + </b-row> + <b-row v-else-if="data.index === 3"> + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <img src="@/assets/images/icon-edit.svg" class="icon-chevron" /> + </b-col> + </b-row> + <b-row v-else> + <span>{{ data.value }}</span></b-row + > + </template> + </b-table> + <div class="save-button"> + <b-button variant="primary" class="console-settings__save-button"> + {{ $t('global.action.saveChanges') }} + </b-button> + </div> + </page-section> </b-container> </template> @@ -31,6 +74,7 @@ import BVToastMixin from '@/components/Mixins/BVToastMixin'; import TableRowExpandMixin, { expandRowLabel, } from '@/components/Mixins/TableRowExpandMixin'; +import iconChevron from '@carbon/icons-vue/es/chevron--down/16'; export default { components: { @@ -63,14 +107,15 @@ export default { tdClass: 'regular-12px bootstrap-rounded-table__td', }, ], + iconChevron, expandRowLabel: expandRowLabel, systems: [ - { attributes: 'Включена', value: 'Включено' }, + { attributes: 'Состояние', value: true }, { attributes: 'Максимальное количество сеансов', value: '6' }, { attributes: 'Активные сеансы', value: '0' }, { attributes: 'Порт удаленного доступа', value: '5900' }, - { attributes: 'Статус шифрования видео', value: 'Включено' }, - { attributes: 'Видео с локального сервера', value: 'Включено' }, + { attributes: 'Статус шифрования видео', value: true }, + { attributes: 'Видео с локального сервера', value: true }, { attributes: 'Действие по умолчанию при истечении времени ожидания запроса на общий доступ к сеансу', @@ -78,7 +123,7 @@ export default { }, { attributes: 'Автоматическая блокировка системы', - value: 'Не включено', + value: false, }, { attributes: 'Состояние подключения клавиатуры/мыши', @@ -95,3 +140,34 @@ export default { width: 30%; } </style> +<style lang="scss" scoped> +.row { + margin: 0px; + height: 15px; + flex-wrap: nowrap; + align-items: center; +} +.col { + padding: 0; +} + +.icon-chevron { + margin: 0 0 0 85%; + cursor: pointer; +} + +.save-button { + display: flex; + justify-content: flex-end; +} + +.console-settings__save-button { + width: 241px; + height: 36px; + margin-right: 0.5rem; +} + +.bootstrap-table__section { + width: auto; +} +</style> diff --git a/src/views/Operations/Kvm/ImagesModal.vue b/src/views/Operations/Kvm/ImagesModal.vue new file mode 100644 index 00000000..ce4e6ebf --- /dev/null +++ b/src/views/Operations/Kvm/ImagesModal.vue @@ -0,0 +1,296 @@ +<template> + <b-modal id="modal-images" class="modal-images" hide-footer> + <template #modal-title> + <div class="popup-title"> + <span class="semi-bold-20px">{{ $t('pageKvm.addImage_modal') }}</span> + </div> + </template> + <div class="popup-switch"> + <span + class="medium-16px popup-item" + :class="{ 'switch-active': isImportFromPC }" + @click="switchExport" + >{{ $t('pageKvm.fromPC') }}</span + > + <span + class="medium-16px popup-item" + :class="{ 'switch-active': !isImportFromPC }" + @click="switchImport" + >{{ $t('pageKvm.fromServer') }}</span + > + <div class="slider" /> + </div> + <div v-if="isImportFromPC" class="images-import_container"> + <b-form-file + id="images-import__file-input" + placeholder="Нажмите на область или перетащите в нее файл образа" + ></b-form-file> + </div> + <div v-else class="popup-body"> + <div class="connection-type-container"> + <span class="regular-12px tretiatry select-label" for="username">{{ + $t('pageKvm.urlAdress') + }}</span> + <b-form-select + v-model="connectionType" + :options="connectionTypes" + class="select-connection regular-14px" + /> + <label class="regular-12px tretiatry" for="username">{{ + $t('pageKvm.connectionType') + }}</label> + <b-form-input id="url" type="text" class="form-control url-input"> + </b-form-input> + <b-form-group> + <label class="regular-12px tretiatry" for="username">{{ + $t('pageLogin.username') + }}</label> + <b-form-input + id="username" + v-model="userInfo.username" + aria-describedby="login-error-alert username-required" + :state="getValidationState($v.userInfo.username)" + type="text" + data-test-id="login-input-username" + class="form-control image-username-input" + @input="$v.userInfo.username.$touch()" + > + </b-form-input> + <b-form-invalid-feedback id="username-required" role="alert"> + <template v-if="!$v.userInfo.username.required"> + {{ $t('global.form.fieldRequired') }} + </template> + </b-form-invalid-feedback> + </b-form-group> + + <b-form-group> + <input-password-toggle> + <label class="regular-12px tretiatry" for="password">{{ + $t('pageLogin.password') + }}</label> + <b-form-input + id="password" + v-model="userInfo.password" + aria-describedby="login-error-alert password-required" + :state="getValidationState($v.userInfo.password)" + type="password" + data-test-id="login-input-password" + class="form-control image-password-input" + @input="$v.userInfo.password.$touch()" + > + </b-form-input> + <b-form-invalid-feedback id="password-required" role="alert"> + <template v-if="!$v.userInfo.password.required"> + {{ $t('global.form.fieldRequired') }} + </template> + </b-form-invalid-feedback> + </input-password-toggle> + </b-form-group> + <b-button class="upload-button" variant="primary"> + {{ $t('pageKvm.upload') }} + </b-button> + </div> + </div> + </b-modal> +</template> +<script> +import { required } from 'vuelidate/lib/validators'; +import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; +import InputPasswordToggle from '@/components/Global/InputPasswordToggle'; + +export default { + components: { InputPasswordToggle }, + mixins: [VuelidateMixin], + data() { + return { + isImportFromPC: true, + userInfo: { + username: null, + password: null, + }, + connectionType: 1, + connectionTypes: [ + { + value: 1, + text: 'HTTPS', + }, + ], + }; + }, + validations: { + userInfo: { + username: { + required, + }, + password: { + required, + }, + }, + }, + methods: { + switchExport() { + this.isImportFromPC = true; + }, + switchImport() { + this.isImportFromPC = false; + }, + }, +}; +</script> +<style lang="scss"> +.modal-dialog { + margin: 25vh auto; +} +.modal-content { + border-radius: 16px; + width: 480px; +} +.modal-header { + border-bottom: none; +} + +.images-import_container > .custom-file { + width: 432px; + height: 357px; +} + +#images-import__file-input ~ .custom-file-label { + background-color: transparent; + border: 1px dashed rgba(12, 28, 41, 0.6); + box-sizing: border-box; + border-radius: 8px; + width: 432px; + height: 357px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + white-space: normal; + padding: 0 65px; +} + +#images-import__file-input ~ .custom-file-label::after { + display: none; +} +</style> +<style lang="scss" scoped> +.popup-switch { + position: relative; + display: flex; + flex-flow: row nowrap; + border-bottom: 1px solid #f3f4f5; + width: 100%; + height: 36px; +} + +.switch-active { + color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.medium-16px { + margin-left: 20px; +} + +.slider { + position: absolute; + height: 0px; + border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 0px; +} + +.popup-item:nth-child(1).switch-active ~ .slider { + width: 110px; + left: 21px; +} + +.popup-item:nth-child(2).switch-active ~ .slider { + left: 157px; + width: 82px; +} + +.popup-body { + margin: 24px 0 0 0; +} + +.images-import_container { + width: 478px; + height: 405px; + background-color: $surface-secondary; + margin: 0px 0px -16px -16px; + border-radius: 0 0 16px 16px; + + display: flex; + align-items: center; + justify-content: center; +} + +.image-username-input, +.image-password-input { + height: 56px; + margin: -30px 0 5px 0; + padding-top: 30px; + font-family: 'Inter', sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; +} + +.url-input { + height: 56px; + padding-top: 30px; + font-family: 'Inter', sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; + margin: -30px 0 20px 0; +} + +.connection-type-container { + width: 446px; +} + +.caption-12px { + padding-left: 10px; +} + +.text-input { + margin: 0 0 0 50px; + padding: 0 0 0 5px; +} + +.login-button { + height: 36px; + width: 380px; +} + +.select-connection { + height: 56px; + padding-top: 30px; + border: none; + border-radius: 8px; + margin: -0px 0 18px 0; + background-color: $surface-secondary; + background-image: url('../../../assets/images/icon-chevron.svg'); +} +.select-label { + position: absolute; + top: 84px; +} + +.form-background .custom-select, +.form-background .form-control { + border-radius: 8px; + border: none; + background-color: rgba(26, 62, 91, 0.05); +} + +.upload-button { + width: 100%; + height: 52px; + margin: 0 auto 10px; +} +</style> diff --git a/src/views/Operations/Kvm/Kvm.vue b/src/views/Operations/Kvm/Kvm.vue index 1a41baaf..8c51ace4 100644 --- a/src/views/Operations/Kvm/Kvm.vue +++ b/src/views/Operations/Kvm/Kvm.vue @@ -1,24 +1,121 @@ <template> - <b-container fluid="xl"> + <b-container fluid="xxl pt-0 m-0"> + <b-button + class="btn-primary semi-bold-16px images_add-image-button" + @click="$bvModal.show('modal-images')" + > + {{ $t('pageKvm.addImage') }}</b-button + > <page-title /> - <div class="terminal-container"> - <kvm-console :is-full-window="false" /> + <div class="images"> + <div class="images_desc"> + <span class="regular-12px tretiatry">Подключенные образы:</span> + </div> + <div class="images-container"> + <div class="images-container_image"> + <img src="@/assets/images/console-images.svg" class="images-image" /> + <span class="semi-bold-12px">Win-11-2022</span> + <span class="light-12px">с носителя</span> + </div> + <div class="images-container_image"> + <img src="@/assets/images/console-images.svg" class="images-image" /> + <span class="semi-bold-12px">Win-10-2017</span> + <span class="light-12px">с сервера</span> + </div> + <div class="images-container_image"> + <img src="@/assets/images/console-images.svg" class="images-image" /> + <span class="semi-bold-12px">Win-7-2010</span> + <span class="light-12px">с сервера</span> + </div> + </div> </div> + <div class="console"></div> + <!-- <kvm-console :is-full-window="false" /> --> + <images-modal /> </b-container> </template> <script> import PageTitle from '@/components/Global/PageTitle'; -import KvmConsole from './KvmConsole'; +import ImagesModal from './ImagesModal'; +// import KvmConsole from './KvmConsole'; export default { name: 'Kvm', - components: { PageTitle, KvmConsole }, + components: { + PageTitle, + ImagesModal, + // KvmConsole + }, }; </script> +<style lang="scss" scoped> +.images_add-image-button { + position: absolute; + top: calc(#{$header-height}); + right: 0px; + border: none; + box-shadow: none; + background-color: $faint-secondary-primary-5; + color: $red-brand-primary; + border-radius: 8px; + margin: 12px 32px; + width: 236px; + height: 40px; + z-index: 1001; + &:active { + background-color: $faint-secondary-primary-5-hover !important; + color: $red-brand-primary-active !important; + border: none; + } + &:focus { + box-shadow: none !important; + } + &:focus-visible { + box-shadow: none !important; + } +} + +.images { + display: flex; + flex-flow: row wrap; + height: 144px; +} + +.images_desc { + margin: 16px 0 16px 32px; + width: 100%; +} + +.images-container { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + margin: 0 0 16px 32px; +} + +.images-container_image { + display: flex; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: center; + margin-right: 24px; +} + +.images-image { + width: 40px; + height: 40px; + margin-bottom: 8px; +} + +.semi-bold-12px { + color: $text-primary; +} -<style scoped> -.terminal-container { +.console { + background-color: black; width: 100%; + height: 70vh; } </style> diff --git a/src/views/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue index 08a67d84..6f6852cf 100644 --- a/src/views/Operations/SerialOverLan/SerialOverLan.vue +++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue @@ -1,23 +1,133 @@ <template> - <b-container fluid="xl"> + <b-container fluid="xxl pt-0 m-0"> <page-title /> + <b-button + class="btn-primary semi-bold-16px images_add-image-button" + @click="$bvModal.show('modal-images')" + > + {{ $t('pageKvm.addImage') }}</b-button + > <page-section class="mb-0"> - <serial-over-lan-console :is-full-window="false" /> + <div class="images"> + <div class="images_desc"> + <span class="regular-12px tretiatry">Подключенные образы:</span> + </div> + <div class="images-container"> + <div class="images-container_image"> + <img + src="@/assets/images/console-images.svg" + class="images-image" + /> + <span class="semi-bold-12px">Win-11-2022</span> + <span class="light-12px">с носителя</span> + </div> + <div class="images-container_image"> + <img + src="@/assets/images/console-images.svg" + class="images-image" + /> + <span class="semi-bold-12px">Win-10-2017</span> + <span class="light-12px">с сервера</span> + </div> + <div class="images-container_image"> + <img + src="@/assets/images/console-images.svg" + class="images-image" + /> + <span class="semi-bold-12px">Win-7-2010</span> + <span class="light-12px">с сервера</span> + </div> + </div> + </div> + <div class="console"></div> + <!-- <serial-over-lan-console :is-full-window="false" /> --> </page-section> + <images-modal /> </b-container> </template> <script> import PageTitle from '@/components/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; -import SerialOverLanConsole from './SerialOverLanConsole'; +// import SerialOverLanConsole from './SerialOverLanConsole'; +import ImagesModal from '../Kvm/ImagesModal'; export default { name: 'SerialOverLan', components: { PageSection, PageTitle, - SerialOverLanConsole, + ImagesModal, + // SerialOverLanConsole, }, }; </script> +<style lang="scss" scoped> +.images_add-image-button { + position: absolute; + top: 95px; + right: 0px; + border: none; + box-shadow: none; + background-color: $faint-secondary-primary-5; + color: $red-brand-primary; + border-radius: 8px; + margin: 12px 32px; + width: 236px; + height: 40px; + z-index: 1001; + &:active { + background-color: $faint-secondary-primary-5-hover !important; + color: $red-brand-primary-active !important; + border: none; + } + &:focus { + box-shadow: none !important; + } + &:focus-visible { + box-shadow: none !important; + } +} +.images { + display: flex; + flex-flow: row wrap; + height: 144px; +} + +.images_desc { + margin: 16px 0 16px 32px; + width: 100%; +} + +.images-container { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + margin: 0 0 16px 32px; +} + +.images-container_image { + display: flex; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: center; + margin-right: 24px; +} + +.images-image { + width: 40px; + height: 40px; + margin-bottom: 8px; +} + +.semi-bold-12px { + color: $text-primary; +} + +.console { + background-color: black; + width: 100%; + height: 70vh; +} +</style> diff --git a/src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue b/src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue new file mode 100644 index 00000000..3039bebb --- /dev/null +++ b/src/views/PowerSupplies/DynamicInfo/PowerDynamicPage.vue @@ -0,0 +1,625 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="notification-time__container"> + <span class="semi-bold-12px">{{ + $t('global.ariaLabel.notificationTime') + }}</span> + <div class="form-control notification-time"> + <b-form-input + v-model="notificationInput" + type="number" + class="notification-time__input" + > + </b-form-input> + <button class="notification-button"> + <img + class="notification-time__icon" + src="@/assets/images/refresh.svg" + /> + </button> + </div> + </div> + <div class="main-container"> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <!-- Temperature Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_1 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/temperature-icon.svg" /> + <span class="bold-16px">{{ $t('subHeader.temperature') }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_1" class="nav-item__nav"> + <!-- Temperature Limit Inputs --> + <div class="limit-container"> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/non-normal.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.nonNormalMode') + }}</span> + <b-form-input + v-model="temperatureNonNormalInput" + type="number" + :min="0" + :max="temperatureCritical" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/critical.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.criticalMode') + }}</span> + <b-form-input + v-model="temperatureCritical" + type="number" + :min="temperatureNonNormalInput" + :max="temperatureWarningInput" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.temperatureWarning') + }}</span> + <b-form-input + v-model="temperatureWarningInput" + type="number" + :min="temperatureCritical" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateTemperature" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Temperature Tables --> + <temperature-table + :time-scale="timeScale" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical="temperatureCritical" + /> + <accessory-table :records="accessoryData.temperatureTable" /> + </b-collapse> + </div> + <!-- using Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_2 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/usage-icon.svg" /> + <span class="bold-16px">{{ $t('pagePower.usingPercent') }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_2" class="nav-item__nav"> + <!-- using Limit Inputs --> + <div class="limit-container"> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.warningPercent') + }}</span> + <b-form-input + v-model="usingNonNormalInput" + type="number" + :min="0" + :max="usingCritical" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/non-normal.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.nonNormalModePercent') + }}</span> + <b-form-input + v-model="usingCritical" + type="number" + :min="usingNonNormalInput" + :max="usingWarningInput" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/critical.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.criticalModePercent') + }}</span> + <b-form-input + v-model="usingWarningInput" + type="number" + :min="usingCritical" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateUsage" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- using Tables --> + <using-table + :time-scale="timeScale" + :warning="usingWarning" + :non-normal="usingNonNormal" + :critical-start="usingCritical" + /> + <accessory-table :records="accessoryData.usingTable" /> + </b-collapse> + </div> + <!-- Input Voltage Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_3 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/voltage-icon.svg" /> + <span class="bold-16px">{{ + $t('tablesDescription.inputVoltage') + }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_3" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Input Voltage Tables --> + <voltage-table :time-scale="timeScale" :warning="frequencyWarning" /> + <accessory-table :records="accessoryData.voltageTable" /> + </b-collapse> + </div> + <!-- Input Power Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_4 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/power-icon.svg" /> + <span class="bold-16px">{{ + $t('tablesDescription.inputPower') + }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_4" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Input Power Table --> + <power-table + :time-scale="timeScale" + :warning="powerWarning" + :shutdown="powerShutdown" + /> + <accessory-table :records="accessoryData.powerTable" /> + </b-collapse> + </div> + <!-- Output Voltage Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_5 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/voltage-icon.svg" /> + <span class="bold-16px">{{ + $t('tablesDescription.outputVoltage') + }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_5" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Output Voltage Tables --> + <voltage-table :time-scale="timeScale" :warning="frequencyWarning" /> + <accessory-table :records="accessoryData.voltageTable" /> + </b-collapse> + </div> + <!-- Output Power Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_6 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/power-icon.svg" /> + <span class="bold-16px">{{ + $t('tablesDescription.outputPower') + }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_6" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Output Power Table --> + <power-table + :time-scale="timeScale" + :warning="powerWarning" + :shutdown="powerShutdown" + /> + <accessory-table :records="accessoryData.powerTable" /> + </b-collapse> + </div> + <!-- Amperage Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_7 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/amperage-icon.svg" /> + <span class="bold-16px">{{ $t('tablesDescription.amperage') }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_7" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.voltageShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Amperage Table --> + <voltage-table :time-scale="timeScale" :warning="frequencyWarning" /> + <accessory-table :records="accessoryData.voltageTable" /> + </b-collapse> + </div> + </div> + </b-container> +</template> +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; + +import TemperatureTable from './TemperatureTable'; +import UsingTable from './UsingTable'; +import PowerTable from './PowerTable'; +import VoltageTable from './VoltageTable'; +import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTablePower'; +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +import { AccessoryData } from './helpers'; + +export default { + components: { + PageTitle, + PageSection, + DateSwitch, + TemperatureTable, + UsingTable, + PowerTable, + VoltageTable, + AccessoryTable, + }, + data() { + return { + timeScale: 'hour', + temperatureNonNormalInput: 44, + temperatureNonNormal: 44, + temperatureCriticalInput: 55, + temperatureCritical: 55, + temperatureWarningInput: 72, + temperatureWarning: 72, + usingNonNormalInput: 50, + usingNonNormal: 50, + usingCriticalInput: 55, + usingCritical: 55, + usingWarningInput: 72, + usingWarning: 72, + // frequencyWarning: 660, + // frequencyWarningInput: 660, + powerWarning: 66, + powerWarningInput: 66, + powerShutdown: 88, + powerShutdownInput: 88, + notificationInput: 42, + accessoryData: AccessoryData, + iconChevronUp: iconChevronUp, + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateTemperature() { + this.temperatureNonNormal = +this.temperatureNonNormalInput; + this.temperatureCritical = +this.temperatureCriticalInput; + this.temperatureWarning = +this.temperatureWarningInput; + }, + updateUsage() { + this.usingNonNormal = +this.usingNonNormalInput; + this.usingCritical = +this.usingCriticalInput; + this.usingWarning = +this.usingWarningInput; + }, + updateFrequency() { + this.frequencyWarning = +this.frequencyWarningInput; + }, + updatePower() { + this.powerWarning = +this.powerWarningInput; + this.powerShutdown = +this.powerShutdownInput; + }, + }, +}; +</script> +<style lang="scss" scoped> +//nav items style +.nav-item, +.nav-link { + padding: 0; +} +.nav-item { + list-style-type: none; +} + +a { + color: $text-primary !important; + &:hover { + color: $text-primary !important; + } +} + +.notification-time__container { + position: absolute; + top: calc(#{$header-height}); + right: 0px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; +} + +.notification-time { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + border: none; + box-shadow: none; + border-radius: 8px; + margin: 12px 32px 12px 8px; + width: 236px; + height: 40px; + z-index: 1001; +} + +.notification-time__icon { + width: 20px; + height: 20px; +} + +.notification-time__input { + border: none; + background: none; + box-shadow: none; +} + +.notification-button { + border: none; + background: none; +} + +.semi-bold-12px { + z-index: 1001; +} +// temperature limit comtainer +.limit-container { + height: 85px; + width: 100%; + padding: 0 32px 10px 32px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: flex-end; + gap: 24px; +} + +.trmperature-limt { + height: 60px; + width: 100%; + max-width: 270px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} + +.form-control { + height: 36px; + &.non-normal { + width: 125px; + } +} +.save-button { + width: 151px; + height: 36px; +} + +.frequency-limt { + height: 60px; + width: 100%; + max-width: 288px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} +</style> diff --git a/src/views/PowerSupplies/DynamicInfo/PowerTable.vue b/src/views/PowerSupplies/DynamicInfo/PowerTable.vue new file mode 100644 index 00000000..4ccb8aac --- /dev/null +++ b/src/views/PowerSupplies/DynamicInfo/PowerTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 66, + }, + shutdown: { + type: Number, + default: 88, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, this.timeScale), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'Вт'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значения предупреждение', + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + { + color: '#1A3E5B', + dashStyle: 'solid', + value: this.shutdown, + width: 2, + label: { + text: 'Пороговое значения отказ', + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }, + series: Series['power'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/PowerSupplies/DynamicInfo/TemperatureTable.vue b/src/views/PowerSupplies/DynamicInfo/TemperatureTable.vue new file mode 100644 index 00000000..9ae92c06 --- /dev/null +++ b/src/views/PowerSupplies/DynamicInfo/TemperatureTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + nonNormal: { + type: Number, + default: 70, + }, + critical: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'С°'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения, С°', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + plotBands: [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.nonNormal, + to: this.criticalStart, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.criticalStart, + to: this.warning, + }, + ], + }, + series: Series['temperature'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/PowerSupplies/DynamicInfo/UsingTable.vue b/src/views/PowerSupplies/DynamicInfo/UsingTable.vue new file mode 100644 index 00000000..322a7f7b --- /dev/null +++ b/src/views/PowerSupplies/DynamicInfo/UsingTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + nonNormal: { + type: Number, + default: 70, + }, + criticalStart: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, '%'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения, %', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + plotBands: [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.nonNormal, + to: this.criticalStart, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.criticalStart, + to: this.warning, + }, + ], + }, + series: Series['temperature'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/PowerSupplies/DynamicInfo/VoltageTable.vue b/src/views/PowerSupplies/DynamicInfo/VoltageTable.vue new file mode 100644 index 00000000..b7b2a973 --- /dev/null +++ b/src/views/PowerSupplies/DynamicInfo/VoltageTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 66, + }, + shutdown: { + type: Number, + default: 88, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, this.timeScale), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'В'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значения предупреждение', + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + { + color: '#1A3E5B', + dashStyle: 'solid', + value: this.shutdown, + width: 2, + label: { + text: 'Пороговое значения отказ', + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }, + series: Series['voltage'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/PowerSupplies/DynamicInfo/helpers.js b/src/views/PowerSupplies/DynamicInfo/helpers.js new file mode 100644 index 00000000..f5d2aee7 --- /dev/null +++ b/src/views/PowerSupplies/DynamicInfo/helpers.js @@ -0,0 +1,1572 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + temperature: [ + { + name: 'Sean', + data: [ + 10, + 10, + 10, + 30, + 10, + 10, + 10, + 37, + 10, + 10, + 10, + 10, + 10, + 25, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 35, + 10, + 10, + 10, + 10, + 10, + 45, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 50, + 10, + 10, + 10, + 10, + 10, + 10, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 11, + 11, + 11, + 30, + 11, + 11, + 11, + 11, + 57, + 11, + 11, + 11, + 11, + 25, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 61, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 31, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 21, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 51, + 11, + 11, + 11, + 11, + 11, + 11, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 15, + 15, + 15, + 35, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 25, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 45, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 35, + 15, + 15, + 55, + 15, + 15, + 15, + 15, + 15, + 15, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 21, + 21, + 21, + 51, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 40, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 35, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 53, + 21, + 21, + 30, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 19, + 19, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 29, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 59, + 19, + 19, + 19, + 19, + 19, + 19, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 16, + 16, + 16, + 56, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 76, + 16, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + ], + color: '#139BB9', + }, + ], + //////////////////////////////voltage//////////////// + voltage: [ + { + name: 'Sean', + data: [ + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 56, + 16, + 26, + 16, + 16, + 36, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 36, + 16, + 16, + 16, + 16, + 16, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 11, + 11, + 11, + 44, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 21, + 11, + 11, + 11, + 11, + 11, + 11, + 21, + 11, + 31, + 11, + 11, + 11, + 11, + 11, + 11, + 55, + 11, + 21, + 11, + 11, + 31, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 31, + 11, + 11, + 41, + 11, + 11, + 11, + 21, + 11, + 11, + 11, + 35, + 11, + 11, + 11, + 11, + 11, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 31, + 31, + 31, + 51, + 31, + 31, + 31, + 31, + 31, + 90, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 50, + 31, + 31, + 31, + 31, + 31, + 31, + 35, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 40, + 31, + 31, + 31, + 31, + 53, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 21, + 21, + 21, + 51, + 21, + 21, + 21, + 21, + 21, + 40, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 50, + 21, + 21, + 21, + 21, + 21, + 21, + 35, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 60, + 21, + 21, + 21, + 10, + 53, + 21, + 21, + 30, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 39, + 19, + 19, + 39, + 19, + 19, + 19, + 29, + 19, + 19, + 59, + 19, + 19, + 69, + 19, + 19, + 19, + 19, + 29, + 19, + 19, + 49, + 19, + 19, + 59, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 17, + 17, + 17, + 15, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 27, + 17, + 17, + 17, + 17, + 17, + 17, + 21, + 17, + 17, + 17, + 59, + 17, + 17, + 17, + 17, + 17, + 59, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 57, + 17, + 17, + 17, + 17, + 17, + 77, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + 17, + ], + color: '#139BB9', + }, + ], + //////////////////////////////power//////////////// + power: [ + { + name: 'Sean', + data: [ + 15, + 15, + 45, + 15, + 65, + 15, + 75, + 15, + 15, + 15, + 55, + 15, + 25, + 15, + 45, + 15, + 55, + 15, + 75, + 15, + 35, + 15, + 55, + 15, + 75, + 15, + 85, + 15, + 15, + 45, + 15, + 15, + 45, + 15, + 45, + 15, + 15, + 65, + 15, + 45, + 15, + 25, + 15, + 45, + 15, + 65, + 15, + 35, + 35, + 35, + 15, + 55, + 15, + 15, + 35, + 15, + 25, + 15, + 35, + 15, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 62, + 12, + 72, + 12, + 12, + 12, + 42, + 12, + 12, + 12, + 52, + 12, + 22, + 12, + 42, + 12, + 52, + 12, + 72, + 12, + 52, + 12, + 62, + 12, + 72, + 12, + 82, + 12, + 12, + 42, + 12, + 12, + 52, + 12, + 42, + 12, + 12, + 62, + 12, + 42, + 12, + 22, + 12, + 42, + 12, + 62, + 12, + 12, + 32, + 12, + 62, + 12, + 52, + 12, + 32, + 12, + 22, + 12, + 32, + 12, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 64, + 14, + 74, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 54, + 14, + 24, + 14, + 44, + 14, + 54, + 14, + 74, + 14, + 54, + 14, + 64, + 14, + 74, + 14, + 84, + 14, + 14, + 44, + 14, + 14, + 54, + 14, + 44, + 14, + 14, + 64, + 14, + 44, + 14, + 24, + 14, + 44, + 14, + 64, + 14, + 14, + 14, + 54, + 14, + 54, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 24, + 14, + 44, + 14, + 64, + 14, + 64, + 14, + 34, + 14, + 54, + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 64, + 14, + 74, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 54, + 14, + 14, + 14, + 44, + 14, + 54, + 14, + 74, + 14, + 54, + 14, + 64, + 14, + 74, + 14, + 84, + 14, + 94, + 14, + 54, + 4, + 54, + 14, + 44, + 14, + 44, + 64, + 14, + 44, + 14, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 16, + 46, + 16, + 26, + 16, + 46, + 16, + 66, + 16, + 16, + 16, + 36, + 16, + 56, + 16, + 16, + 36, + 16, + 26, + 16, + 36, + 16, + 66, + 16, + 76, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 56, + 16, + 26, + 16, + 46, + 16, + 56, + 16, + 76, + 16, + 56, + 16, + 66, + 16, + 76, + 16, + 86, + 16, + 96, + 16, + 16, + 16, + 56, + 16, + 46, + 16, + 46, + 16, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 49, + 19, + 19, + 69, + 19, + 49, + 19, + 29, + 19, + 49, + 19, + 69, + 19, + 39, + 39, + 39, + 19, + 59, + 19, + 19, + 39, + 19, + 29, + 19, + 39, + 19, + 69, + 19, + 79, + 19, + 19, + 19, + 49, + 19, + 19, + 19, + 59, + 19, + 29, + 19, + 49, + 19, + 59, + 19, + 79, + 19, + 59, + 19, + 69, + 19, + 79, + 19, + 89, + 19, + 99, + 19, + 19, + 69, + 59, + 19, + ], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${String(i).padStart(2, '0')}`; + } + return arr; +}; + +export const setCategories = (count, desc) => { + const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`); + return arr; +}; + +export const AccessoryData = { + temperatureTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentTemperature', + label: 'Текущее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleTemperature', + label: 'Среднее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minTemperature', + label: 'Минимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minDate', + label: 'Дата минимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxTemperature', + label: 'Максимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxDate', + label: 'Дата максимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Источник 1', + currentTemperature: 19, + middleTemperature: 40, + minTemperature: 31, + minDate: { time: '15:15', date: '11.11.2021' }, + maxTemperature: 88, + maxDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Источник 2', + currentTemperature: 29, + middleTemperature: 40, + minTemperature: 20, + minDate: { time: '15:45', date: '11.11.2021' }, + maxTemperature: 76, + maxDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Источник 3', + currentTemperature: 48, + middleTemperature: 46, + minTemperature: 31, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 69, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Источник 4', + currentTemperature: 48, + middleTemperature: 45, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 75, + maxDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Источник 5', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 30, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Источник 6', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }, + usingTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentTemperature', + label: 'Текущее, %', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleTemperature', + label: 'Среднее, %', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minTemperature', + label: 'Минимальное, %', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minDate', + label: 'Дата минимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxTemperature', + label: 'Максимальное, %', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxDate', + label: 'Дата максимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Источник 1', + currentTemperature: 19, + middleTemperature: 40, + minTemperature: 31, + minDate: { time: '15:15', date: '11.11.2021' }, + maxTemperature: 88, + maxDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Источник 2', + currentTemperature: 29, + middleTemperature: 40, + minTemperature: 20, + minDate: { time: '15:45', date: '11.11.2021' }, + maxTemperature: 76, + maxDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Источник 3', + currentTemperature: 48, + middleTemperature: 46, + minTemperature: 31, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 69, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Источник 4', + currentTemperature: 48, + middleTemperature: 45, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 75, + maxDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Источник 5', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 30, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Источник 6', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }, + voltageTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentTemperature', + label: 'Текущее, В', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleTemperature', + label: 'Среднее, В', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minTemperature', + label: 'Минимальное, В', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minDate', + label: 'Дата минимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxTemperature', + label: 'Максимальное, В', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxDate', + label: 'Дата максимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Источник 1', + currentTemperature: 19, + middleTemperature: 40, + minTemperature: 31, + minDate: { time: '15:15', date: '11.11.2021' }, + maxTemperature: 88, + maxDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Источник 2', + currentTemperature: 29, + middleTemperature: 40, + minTemperature: 20, + minDate: { time: '15:45', date: '11.11.2021' }, + maxTemperature: 76, + maxDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Источник 3', + currentTemperature: 48, + middleTemperature: 46, + minTemperature: 31, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 69, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Источник 4', + currentTemperature: 48, + middleTemperature: 45, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 75, + maxDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Источник 5', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 30, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Источник 6', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }, + powerTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentPower', + label: 'Текущее, Вт', + label2: '', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Источник 1', + currentPower: 91, + }, + { + name: 'Источник 2', + currentPower: 77, + }, + { + name: 'Источник 3', + currentPower: 76, + }, + { + name: 'Источник 4', + currentPower: 74, + }, + { + name: 'Источник 5', + currentPower: 73, + }, + { + name: 'Источник 6', + currentPower: 71, + }, + ], + }, +}; diff --git a/src/views/PowerSupplies/DynamicInfo/index.js b/src/views/PowerSupplies/DynamicInfo/index.js new file mode 100644 index 00000000..c45d5c89 --- /dev/null +++ b/src/views/PowerSupplies/DynamicInfo/index.js @@ -0,0 +1,2 @@ +import PowerDynamicPage from './PowerDynamicPage.vue'; +export default PowerDynamicPage; diff --git a/src/views/PowerSupplies/Specification/PowerStaticPage.vue b/src/views/PowerSupplies/Specification/PowerStaticPage.vue new file mode 100644 index 00000000..463e9ea2 --- /dev/null +++ b/src/views/PowerSupplies/Specification/PowerStaticPage.vue @@ -0,0 +1,154 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <page-section class="bootstrap-table__section info_section"> + <span class="bold-16px">{{ $t('pageInventory.powerSources') }}</span> + </page-section> + <power-switch + :slots="memorySlots" + :switch-memory="switchMemorySlot" + :current-memory="currentMemorySlot" + /> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items_slots" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(value)="{ index, value }"> + <b-row v-if="index === 0"> + <b-col cols="11"> + <span> + {{ 'Работоспособность' }} + </span> + </b-col> + <b-col cols="1"> + <img + src="@/assets/images/fans-page/working.svg" + class="icon-chevron" + /> + </b-col> + </b-row> + <b-row v-else> + <b-col> + <span>{{ value }}</span> + </b-col> + </b-row> + </template> + </b-table> + </page-section> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import PowerSwitch from './PowerSwitch'; + +export default { + components: { PageTitle, PageSection, PowerSwitch }, + data() { + return { + currentMemorySlot: 1, + memorySlots: [ + { id: 1, name: 'Источник 1' }, + { id: 2, name: 'Источник 2' }, + { id: 3, name: 'Источник 3' }, + { id: 4, name: 'Источник 4' }, + { id: 5, name: 'Источник 5' }, + { id: 6, name: 'Источник 6' }, + { id: 7, name: 'Источник 7' }, + { id: 8, name: 'Источник 8' }, + { id: 9, name: 'Источник 9' }, + { id: 10, name: 'Источник 10' }, + { id: 11, name: 'Источник 11' }, + { id: 12, name: 'Источник 12' }, + { id: 13, name: 'Источник 13' }, + { id: 14, name: 'Источник 14' }, + { id: 15, name: 'Источник 15' }, + ], + fields: [ + { + key: 'parametr', + label: 'Параметр', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + memory-table-col-first`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items_slots: [ + { + parametr: 'Статус', + value: true, + }, + { + parametr: 'Название', + value: 'Источник 1', + }, + { + parametr: 'Версия прошивки', + value: '1.1.2257', + }, + { + parametr: 'Серийный номер', + value: '4789564478551', + }, + { + parametr: 'Номинальное напряжение', + value: '220 В', + }, + { + parametr: 'Номинальная мощность', + value: '400 Вт', + }, + { + parametr: 'Поддержка горячей замены', + value: 'Есть', + }, + ], + }; + }, + methods: { + switchMemorySlot(period) { + this.currentMemorySlot = period; + }, + }, +}; +</script> +<style lang="scss"> +.memory-table-col-first { + width: 50%; +} +</style> + +<style lang="scss" scoped> +.bootstrap-table__section { + margin-bottom: 24px; +} +.info_section { + margin-bottom: 0px; +} + +.bold-16px { + display: block; + margin: 25px 0 16px 0; +} +</style> diff --git a/src/views/PowerSupplies/Specification/PowerSwitch.vue b/src/views/PowerSupplies/Specification/PowerSwitch.vue new file mode 100644 index 00000000..824c2549 --- /dev/null +++ b/src/views/PowerSupplies/Specification/PowerSwitch.vue @@ -0,0 +1,112 @@ +<template> + <div + ref="content" + class="memory-switch" + @wheel.prevent="wheelItBetter($event)" + > + <span + v-for="item in slots" + :key="item.id" + class="medium-12px scale-item" + :class="{ 'switch-active': currentMemory === item.id }" + @click="switchMemory(item.id)" + >{{ $t(item.name) }}</span + > + <div + class="slider" + :style="`width: 68px; left: ${ + ((currentMemory ? currentMemory : 1) - 1) * 100 + 30 + }px`" + /> + </div> +</template> + +<script> +export default { + props: { + slots: { + type: Array, + default: null, + }, + currentMemory: { + type: Number, + default: 1, + }, + switchMemory: { + type: Function, + required: true, + }, + }, + data() { + return { + upHere: false, + container: this.$refs.content, + }; + }, + methods: { + wheelItBetter(event) { + if (event.deltaY < 0) { + this.$refs.content.scrollLeft -= 25; + } else { + this.$refs.content.scrollLeft += 25; + } + }, + }, +}; +</script> +<style lang="scss" scoped> +.memory-switch { + position: relative; + width: calc(100vw - 320px); + height: 50px; + padding: 0 16px 0 32px; + display: grid; + grid-auto-flow: column; + grid-auto-columns: 100px; + grid-template-rows: 32px; + align-items: end; + border-bottom: 1px solid $faint-secondary-primary-10; + overflow-x: auto; + white-space: nowrap; + &::-webkit-scrollbar { + height: 2px; + } + &::-webkit-scrollbar-thumb { + background: rgba(26, 62, 91, 0.2); + border-radius: 16px; + background-clip: content-box; + height: 10px; + } +} + +.switch-active { + color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.slider { + position: absolute; + height: 0px; + border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 0px; +} + +.scale-item { + display: inline-block; + width: 100px; + margin-right: 6px; + cursor: pointer; +} + +.date-picker { + display: flex; + align-items: center; + gap: 9px; +} + +.date-clear { + margin-left: auto; + cursor: pointer; +} +</style> diff --git a/src/views/PowerSupplies/Specification/index.js b/src/views/PowerSupplies/Specification/index.js new file mode 100644 index 00000000..14c4ef64 --- /dev/null +++ b/src/views/PowerSupplies/Specification/index.js @@ -0,0 +1,2 @@ +import PowerStaticPage from './PowerStaticPage.vue'; +export default PowerStaticPage; diff --git a/src/views/Processors/DynamicInfo/FrequencyTable.vue b/src/views/Processors/DynamicInfo/FrequencyTable.vue new file mode 100644 index 00000000..c749905d --- /dev/null +++ b/src/views/Processors/DynamicInfo/FrequencyTable.vue @@ -0,0 +1,107 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(1001, 'Hz'), + min: 0, + max: 1000, + title: null, + minTickInterval: 250, + minorGridLineColor: '#1A3E5B1A', + labels: { + padding: 4, + }, + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }, + series: Series['frequency'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/Processors/DynamicInfo/PowerTable.vue b/src/views/Processors/DynamicInfo/PowerTable.vue new file mode 100644 index 00000000..4ccb8aac --- /dev/null +++ b/src/views/Processors/DynamicInfo/PowerTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 66, + }, + shutdown: { + type: Number, + default: 88, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, this.timeScale), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'Вт'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значения предупреждение', + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + { + color: '#1A3E5B', + dashStyle: 'solid', + value: this.shutdown, + width: 2, + label: { + text: 'Пороговое значения отказ', + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }, + series: Series['power'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/Processors/DynamicInfo/ProcessorsDynamicPage.vue b/src/views/Processors/DynamicInfo/ProcessorsDynamicPage.vue new file mode 100644 index 00000000..9ba32a4d --- /dev/null +++ b/src/views/Processors/DynamicInfo/ProcessorsDynamicPage.vue @@ -0,0 +1,373 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="notification-time__container"> + <span class="semi-bold-12px">{{ + $t('global.ariaLabel.notificationTime') + }}</span> + <div class="form-control notification-time"> + <b-form-input + v-model="notificationInput" + type="number" + class="notification-time__input" + > + </b-form-input> + <button class="notification-button"> + <img + class="notification-time__icon" + src="@/assets/images/refresh.svg" + /> + </button> + </div> + </div> + <div class="main-container"> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <!-- Temperature Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_1 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/temperature-icon.svg" /> + <span class="bold-16px">{{ $t('subHeader.temperature') }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_1" class="nav-item__nav"> + <!-- Temperature Limit Inputs --> + <div class="limit-container"> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/non-normal.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.nonNormalMode') + }}</span> + <b-form-input + v-model="temperatureNonNormalInput" + type="number" + :min="0" + :max="temperatureCriticalInput" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/critical.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.criticalMode') + }}</span> + <b-form-input + v-model="temperatureCriticalInput" + type="number" + :min="temperatureNonNormalInput" + :max="temperatureWarningInput" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.temperatureWarning') + }}</span> + <b-form-input + v-model="temperatureWarningInput" + type="number" + :min="temperatureCriticalInput" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateTemperature" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Temperature Tables --> + <temperature-table + :time-scale="timeScale" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical-start="temperatureCritical" + /> + <accessory-table :records="accessoryData.temperatureTable" /> + </b-collapse> + </div> + <!-- Frequency Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_2 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/frequency-icon.svg" /> + <span class="bold-16px">{{ $t('subHeader.frequency') }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_2" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.frequencyWarning') + }}</span> + <b-form-input + v-model="frequencyWarningInput" + :min="0" + :max="1000" + type="number" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateFrequency" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Frequency Table --> + <frequency-table + :time-scale="timeScale" + :warning="frequencyWarning" + /> + <accessory-table :records="accessoryData.frequencyTable" /> + <!-- <frequency-table /> --> + </b-collapse> + </div> + <!-- Power Consumption Section --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_3 + variant="link" + class="collapse-button semi-bold-16px" + > + <img src="@/assets/images/power-icon.svg" /> + <span class="bold-16px">{{ $t('subHeader.powerConsumption') }}</span> + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_3" class="nav-item__nav"> + <div class="limit-container"> + <div class="frequency-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerWarning') + }}</span> + <b-form-input + v-model="powerWarningInput" + type="number" + :min="0" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="frequency-limt"> + <img src="@/assets/images/labels/shutdown.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.powerShutdown') + }}</span> + <b-form-input + v-model="powerShutdownInput" + type="number" + :min="0" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updatePower" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Power Consumption Table --> + <power-table + :time-scale="timeScale" + :warning="powerWarning" + :shutdown="powerShutdown" + /> + <!-- <power-table /> --> + <accessory-table :records="accessoryData.powerTable" /> + </b-collapse> + </div> + <!-- <page-section class="bootstrap-table__section"> </page-section> --> + </div> + </b-container> +</template> +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; +import FrequencyTable from './FrequencyTable'; +import PowerTable from './PowerTable'; +import TemperatureTable from './TemperatureTable'; +import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTablePower'; + +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +import { AccessoryData } from './helpers'; + +export default { + components: { + PageTitle, + PageSection, + DateSwitch, + FrequencyTable, + TemperatureTable, + PowerTable, + AccessoryTable, + }, + data() { + return { + timeScale: 'hour', + temperatureWarning: 72, + temperatureWarningInput: 72, + temperatureNonNormal: 44, + temperatureNonNormalInput: 44, + temperatureCritical: 55, + temperatureCriticalInput: 55, + frequencyWarning: 660, + frequencyWarningInput: 660, + powerWarning: 66, + powerWarningInput: 66, + powerShutdown: 88, + powerShutdownInput: 88, + notificationInput: 42, + accessoryData: AccessoryData, + iconChevronUp: iconChevronUp, + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateTemperature() { + this.temperatureWarning = +this.temperatureWarningInput; + this.temperatureNonNormal = +this.temperatureNonNormalInput; + this.temperatureCritical = +this.temperatureCriticalInput; + }, + updateFrequency() { + this.frequencyWarning = +this.frequencyWarningInput; + }, + updatePower() { + this.powerWarning = +this.powerWarningInput; + this.powerShutdown = +this.powerShutdownInput; + }, + }, +}; +</script> +<style lang="scss" scoped> +//nav items style +.nav-item, +.nav-link { + padding: 0; +} +.nav-item { + list-style-type: none; +} + +a { + color: $text-primary !important; + &:hover { + color: $text-primary !important; + } +} + +.notification-time__container { + position: absolute; + top: calc(#{$header-height}); + right: 0px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; +} + +.notification-time { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + border: none; + box-shadow: none; + border-radius: 8px; + margin: 12px 32px 12px 8px; + width: 236px; + height: 40px; + z-index: 1001; +} + +.notification-time__icon { + width: 20px; + height: 20px; +} + +.notification-time__input { + border: none; + background: none; + box-shadow: none; +} + +.notification-button { + border: none; + background: none; +} + +.semi-bold-12px { + z-index: 1001; +} +// temperature limit comtainer +.limit-container { + height: 85px; + width: 100%; + padding: 0 32px 10px 32px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: flex-end; + gap: 24px; +} + +.trmperature-limt { + height: 60px; + width: 100%; + max-width: 270px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} + +.form-control { + height: 36px; +} +.save-button { + width: 151px; + height: 36px; +} + +.frequency-limt { + height: 60px; + width: 100%; + max-width: 288px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} +</style> diff --git a/src/views/Processors/DynamicInfo/TemperatureTable.vue b/src/views/Processors/DynamicInfo/TemperatureTable.vue new file mode 100644 index 00000000..f9c149c3 --- /dev/null +++ b/src/views/Processors/DynamicInfo/TemperatureTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + nonNormal: { + type: Number, + default: 70, + }, + criticalStart: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'С°'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения, С°', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + plotBands: [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.nonNormal, + to: this.criticalStart, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.criticalStart, + to: this.warning, + }, + ], + }, + series: Series['temperature'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/Processors/DynamicInfo/helpers.js b/src/views/Processors/DynamicInfo/helpers.js new file mode 100644 index 00000000..bc62bfa0 --- /dev/null +++ b/src/views/Processors/DynamicInfo/helpers.js @@ -0,0 +1,1422 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + temperature: [ + { + name: 'Sean', + data: [ + 10, + 10, + 10, + 30, + 10, + 10, + 10, + 37, + 10, + 10, + 10, + 10, + 10, + 25, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 35, + 10, + 10, + 10, + 10, + 10, + 45, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 50, + 10, + 10, + 10, + 10, + 10, + 10, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 11, + 11, + 11, + 30, + 11, + 11, + 11, + 11, + 57, + 11, + 11, + 11, + 11, + 25, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 61, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 31, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 21, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 11, + 51, + 11, + 11, + 11, + 11, + 11, + 11, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 15, + 15, + 15, + 35, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 25, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 45, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 35, + 15, + 15, + 55, + 15, + 15, + 15, + 15, + 15, + 15, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 21, + 21, + 21, + 51, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 40, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 35, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 53, + 21, + 21, + 30, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + 21, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 19, + 19, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 29, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 39, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 59, + 19, + 19, + 19, + 19, + 19, + 19, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 16, + 16, + 16, + 56, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 76, + 16, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + ], + color: '#139BB9', + }, + ], + //////////////////////////////frequency//////////////// + frequency: [ + { + name: 'Sean', + data: [ + 100, + 100, + 450, + 100, + 100, + 100, + 100, + 137, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 125, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 100, + 135, + 100, + 100, + 100, + 100, + 100, + 145, + 100, + 100, + 360, + 100, + 100, + 450, + 100, + 100, + 100, + 100, + 100, + 100, + 150, + 100, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 120, + 120, + 120, + 140, + 120, + 157, + 120, + 120, + 120, + 210, + 120, + 125, + 120, + 120, + 120, + 350, + 120, + 120, + 120, + 120, + 120, + 590, + 120, + 120, + 120, + 120, + 450, + 120, + 120, + 120, + 120, + 120, + 125, + 120, + 120, + 120, + 120, + 120, + 162, + 120, + 120, + 120, + 120, + 120, + 220, + 120, + 120, + 120, + 120, + 120, + 360, + 120, + 210, + 120, + 200, + 120, + 120, + 120, + 120, + 120, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 110, + 110, + 110, + 450, + 110, + 110, + 110, + 157, + 110, + 110, + 110, + 110, + 110, + 165, + 110, + 110, + 110, + 110, + 110, + 310, + 110, + 110, + 110, + 590, + 110, + 110, + 175, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 110, + 152, + 110, + 310, + 110, + 110, + 210, + 110, + 110, + 110, + 110, + 110, + 110, + 360, + 110, + 110, + 110, + 210, + 110, + 110, + 110, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 221, + 221, + 221, + 251, + 221, + 221, + 221, + 221, + 221, + 590, + 221, + 221, + 421, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 221, + 450, + 221, + 221, + 221, + 221, + 421, + 221, + 235, + 221, + 221, + 221, + 221, + 221, + 421, + 221, + 360, + 221, + 221, + 221, + 210, + 253, + 221, + 221, + 230, + 221, + 221, + 221, + 590, + 221, + 221, + 221, + 221, + 221, + 221, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 590, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 590, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + 159, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 176, + 176, + 176, + 156, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 276, + 176, + 176, + 176, + 176, + 176, + 176, + 210, + 176, + 176, + 176, + 590, + 176, + 176, + 176, + 176, + 176, + 590, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 570, + 176, + 176, + 176, + 176, + 176, + 770, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + 176, + ], + color: '#139BB9', + }, + ], + //////////////////////////////power//////////////// + power: [ + { + name: 'Sean', + data: [ + 15, + 15, + 45, + 15, + 65, + 15, + 75, + 15, + 15, + 15, + 55, + 15, + 25, + 15, + 45, + 15, + 55, + 15, + 75, + 15, + 35, + 15, + 55, + 15, + 75, + 15, + 85, + 15, + 15, + 45, + 15, + 15, + 45, + 15, + 45, + 15, + 15, + 65, + 15, + 45, + 15, + 25, + 15, + 45, + 15, + 65, + 15, + 35, + 35, + 35, + 15, + 55, + 15, + 15, + 35, + 15, + 25, + 15, + 35, + 15, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 62, + 12, + 72, + 12, + 12, + 12, + 42, + 12, + 12, + 12, + 52, + 12, + 22, + 12, + 42, + 12, + 52, + 12, + 72, + 12, + 52, + 12, + 62, + 12, + 72, + 12, + 82, + 12, + 12, + 42, + 12, + 12, + 52, + 12, + 42, + 12, + 12, + 62, + 12, + 42, + 12, + 22, + 12, + 42, + 12, + 62, + 12, + 12, + 32, + 12, + 62, + 12, + 52, + 12, + 32, + 12, + 22, + 12, + 32, + 12, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 64, + 14, + 74, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 54, + 14, + 24, + 14, + 44, + 14, + 54, + 14, + 74, + 14, + 54, + 14, + 64, + 14, + 74, + 14, + 84, + 14, + 14, + 44, + 14, + 14, + 54, + 14, + 44, + 14, + 14, + 64, + 14, + 44, + 14, + 24, + 14, + 44, + 14, + 64, + 14, + 14, + 14, + 54, + 14, + 54, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 24, + 14, + 44, + 14, + 64, + 14, + 64, + 14, + 34, + 14, + 54, + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 64, + 14, + 74, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 54, + 14, + 14, + 14, + 44, + 14, + 54, + 14, + 74, + 14, + 54, + 14, + 64, + 14, + 74, + 14, + 84, + 14, + 94, + 14, + 54, + 4, + 54, + 14, + 44, + 14, + 44, + 64, + 14, + 44, + 14, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 16, + 46, + 16, + 26, + 16, + 46, + 16, + 66, + 16, + 16, + 16, + 36, + 16, + 56, + 16, + 16, + 36, + 16, + 26, + 16, + 36, + 16, + 66, + 16, + 76, + 16, + 16, + 16, + 46, + 16, + 16, + 16, + 56, + 16, + 26, + 16, + 46, + 16, + 56, + 16, + 76, + 16, + 56, + 16, + 66, + 16, + 76, + 16, + 86, + 16, + 96, + 16, + 16, + 16, + 56, + 16, + 46, + 16, + 46, + 16, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 49, + 19, + 19, + 69, + 19, + 49, + 19, + 29, + 19, + 49, + 19, + 69, + 19, + 39, + 39, + 39, + 19, + 59, + 19, + 19, + 39, + 19, + 29, + 19, + 39, + 19, + 69, + 19, + 79, + 19, + 19, + 19, + 49, + 19, + 19, + 19, + 59, + 19, + 29, + 19, + 49, + 19, + 59, + 19, + 79, + 19, + 59, + 19, + 69, + 19, + 79, + 19, + 89, + 19, + 99, + 19, + 19, + 69, + 59, + 19, + ], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${String(i).padStart(2, '0')}`; + } + return arr; +}; + +export const setCategories = (count, desc) => { + const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`); + return arr; +}; + +export const AccessoryData = { + temperatureTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentTemperature', + label: 'Текущее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleTemperature', + label: 'Среднее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minTemperature', + label: 'Минимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minDate', + label: 'Дата минимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxTemperature', + label: 'Максимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxDate', + label: 'Дата максимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Процессор 1', + currentTemperature: 19, + middleTemperature: 40, + minTemperature: 31, + minDate: { time: '15:15', date: '11.11.2021' }, + maxTemperature: 88, + maxDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Процессор 2', + currentTemperature: 29, + middleTemperature: 40, + minTemperature: 20, + minDate: { time: '15:45', date: '11.11.2021' }, + maxTemperature: 76, + maxDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Процессор 3', + currentTemperature: 48, + middleTemperature: 46, + minTemperature: 31, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 69, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Процессор 4', + currentTemperature: 48, + middleTemperature: 45, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 75, + maxDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Процессор 5', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 30, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Процессор 6', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }, + frequencyTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentFrequency', + label: 'Текущее, Hz', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'baseFrequency', + label: 'Базовое, Hz', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Процессор 1', + currentFrequency: 600, + baseFrequency: 400, + }, + { + name: 'Процессор 2', + currentFrequency: 500, + baseFrequency: 470, + }, + { + name: 'Процессор 3', + currentFrequency: 500, + baseFrequency: 450, + }, + { + name: 'Процессор 4', + currentFrequency: 500, + baseFrequency: 470, + }, + { + name: 'Процессор 5', + currentFrequency: 600, + baseFrequency: 470, + }, + { + name: 'Процессор 6', + currentFrequency: 500, + baseFrequency: 400, + }, + ], + }, + powerTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentPower', + label: 'Текущее, Вт', + label2: '', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Процессор 1', + currentPower: 91, + }, + { + name: 'Процессор 2', + currentPower: 77, + }, + { + name: 'Процессор 3', + currentPower: 76, + }, + { + name: 'Процессор 4', + currentPower: 74, + }, + { + name: 'Процессор 5', + currentPower: 73, + }, + { + name: 'Процессор 6', + currentPower: 71, + }, + ], + }, +}; diff --git a/src/views/Processors/DynamicInfo/index.js b/src/views/Processors/DynamicInfo/index.js new file mode 100644 index 00000000..121c0316 --- /dev/null +++ b/src/views/Processors/DynamicInfo/index.js @@ -0,0 +1,2 @@ +import ProcessorsDynamicPage from './ProcessorsDynamicPage.vue'; +export default ProcessorsDynamicPage; diff --git a/src/views/Processors/Specification/AcceleratorSpecificationTable.vue b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue new file mode 100644 index 00000000..2baa7d5d --- /dev/null +++ b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue @@ -0,0 +1,194 @@ +<template> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="accelerators" + :fields="fields" + > + <template #cell(expandRow)=""> + <b-button + variant="link" + data-test-id="hardwareStatus-button-expandAccelerators" + :title="expandRowLabel" + > + <icon-chevron /> + <span class="sr-only">{{ expandRowLabel }}</span> + </b-button> + </template> + <template #cell(status)="{ value }"> + <div v-if="value" class="fans-table-col-first__cell"> + <img class="status__img" src="@/assets/images/fans-page/working.svg" /> + <span> + {{ $t('fansPage.inWork') }} + </span> + </div> + <div v-else class="fans-table-col-first__cell"> + <img + class="status__img" + src="@/assets/images/fans-page/notWorking.svg" + /> + <span> + {{ $t('fansPage.notWorking') }} + </span> + </div> + </template> + </b-table> +</template> + +<script> +import TableRowExpandMixin, { + expandRowLabel, +} from '@/components/Mixins/TableRowExpandMixin'; +import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; + +import { Accelerators } from './mock'; +export default { + components: { IconChevron }, + mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin], + data() { + return { + isBusy: true, + isAddersСolon: false, + accelerators: Accelerators, + fields: [ + { + key: 'expandRow', + label: '', + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-expand`, + tdClass: 'table-row-expand bootstrap-rounded-table__td', + sortable: false, + }, + { + key: 'status', + label: 'Статус', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-first`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'name', + label: 'Имя', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-third`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'slot_number', + label: '№ Слота', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-fourth`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'board_number', + label: '№ Платы', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-fourth`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'serial_number', + label: 'Серийный номер', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-first`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'frequency', + label: '№ Детали', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-fourth`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'cores', + label: 'Версия прошивки', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-last + fans-table-col-third`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + expandRowLabel: expandRowLabel, + }; + }, +}; +</script> +<style lang="scss"> +.fans-table-col-expand { + width: 3%; +} +.fans-table-col-first { + width: 15%; +} + +.fans-table-col-second { + width: 12%; +} + +.fans-table-col-third { + width: 10%; +} + +.fans-table-col-fourth { + width: 8%; +} +</style> + +<style lang="scss" scoped> +.row { + margin: 0px; + flex-wrap: nowrap; +} +.fans-table-col-first__cell { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: flex-start; +} + +.status__img { + margin-right: 7px; +} + +.bold-16px { + margin: 24px 0 0 2rem; +} + +.bold-12px__caps { + color: $text-secondary; +} + +.attrib-names { + border-bottom: 1px solid $faint-secondary-primary-10; + color: $text-secondary !important; + font-weight: 600; +} + +.custom-switch { + margin: 0; +} + +.btn-link { + width: 30px !important; + height: 20px !important; +} +</style> diff --git a/src/views/Processors/Specification/ProcessorsSpecificationPage.vue b/src/views/Processors/Specification/ProcessorsSpecificationPage.vue new file mode 100644 index 00000000..3f9525ae --- /dev/null +++ b/src/views/Processors/Specification/ProcessorsSpecificationPage.vue @@ -0,0 +1,44 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <page-section class="bootstrap-table__section"> + <span class="bold-16px">{{ + $t('pageInventory.installedProcessors') + }}</span> + <!-- Processors Specification Table --> + <processors-specification-table /> + <span class="bold-16px">{{ + $t('pageInventory.installedAccelerator') + }}</span> + <!-- Accelerators Specification Table --> + <accelerator-specification-table /> + </page-section> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; + +import ProcessorsSpecificationTable from './ProcessorsSpecificationTable'; +import AcceleratorSpecificationTable from './AcceleratorSpecificationTable'; +export default { + components: { + PageTitle, + PageSection, + ProcessorsSpecificationTable, + AcceleratorSpecificationTable, + }, +}; +</script> +<style lang="scss" scoped> +.bold-16px { + display: block; + margin: 25px 0 16px 0; +} +</style> diff --git a/src/views/Processors/Specification/ProcessorsSpecificationTable.vue b/src/views/Processors/Specification/ProcessorsSpecificationTable.vue new file mode 100644 index 00000000..6efc2e21 --- /dev/null +++ b/src/views/Processors/Specification/ProcessorsSpecificationTable.vue @@ -0,0 +1,352 @@ +<template> + <b-table + sort-icon-left + no-sort-reset + :sort-desc="true" + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="processors" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :empty-filtered-text="$t('global.table.emptySearchMessage')" + > + <template #cell(expandRow)="row"> + <b-button + variant="link" + data-test-id="hardwareStatus-button-expandProcessors" + :title="expandRowLabel" + class="btn-icon-only" + @click="toggleRowDetails(row)" + > + <icon-chevron /> + <span class="sr-only">{{ expandRowLabel }}</span> + </b-button> + </template> + <template #cell(status)="{ value }"> + <div v-if="value" class="fans-table-col-first__cell"> + <img class="status__img" src="@/assets/images/fans-page/working.svg" /> + <span> + {{ $t('fansPage.inWork') }} + </span> + </div> + <div v-else class="fans-table-col-first__cell"> + <img + class="status__img" + src="@/assets/images/fans-page/notWorking.svg" + /> + <span> + {{ $t('fansPage.notWorking') }} + </span> + </div> + </template> + + <template #row-details="{ index }"> + <b-container fluid> + <!-- ProcessorCapabilityInfo --> + <b-row> + <b-col class="mt-0 mb-2 p-0 bold-12px__caps"> + {{ $t('pageInventory.table.processorCapabilityInfo') }} + </b-col> + </b-row> + <b-row> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <dd class="attrib-names">{{ $t('global.table.attributes') }}</dd> + <dd>{{ 'Многопоточность' }}</dd> + <dd>{{ 'Виртуализация' }}</dd> + <dd>{{ 'Турбо режим' }}</dd> + </dl> + </b-col> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <dd class="attrib-names">{{ 'Состояние присутсвия' }}</dd> + <dd + v-for="item in processors[index].presence_status" + :key="item.presence_status" + > + {{ dataFormatter(item) }} + </dd> + </dl> + </b-col> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <!-- Status state --> + <dd class="attrib-names">{{ 'Включен' }}</dd> + <dd> + <b-form-checkbox + v-model="processors[index].statuses.multithreading" + switch + > + </b-form-checkbox> + </dd> + <dd> + <b-form-checkbox + v-model="processors[index].statuses.virtualization" + switch + > + </b-form-checkbox> + </dd> + <dd> + <b-form-checkbox + v-model="processors[index].statuses.turbo" + switch + > + </b-form-checkbox> + </dd> + </dl> + </b-col> + </b-row> + <b-row> + <b-col class="mt-3 mb-2 p-0 bold-12px__caps"> + {{ $t('pageInventory.table.processorCacheInfo') }} + </b-col> + </b-row> + <b-row> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <!-- Attributes Names --> + <dd class="attrib-names">{{ $t('global.table.attributes') }}</dd> + <dd>{{ 'Уровень кеша' }}</dd> + <dd>{{ 'Максимальный объем' }}</dd> + <dd>{{ 'Установленный объем' }}</dd> + <dd>{{ 'Тип кэша' }}</dd> + <dd>{{ 'Локализация' }}</dd> + <dd>{{ 'Политика записи' }}</dd> + <dd>{{ 'Ассоциативность' }}</dd> + <dd>{{ 'Тип исправления ошибки' }}</dd> + </dl> + </b-col> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <!-- Status КЭШ-1 --> + <dd class="attrib-names">{{ 'КЭШ-1' }}</dd> + <dd v-for="item in processors[index].cache_1" :key="item.cache_1"> + {{ dataFormatter(item) }} + </dd> + </dl> + </b-col> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <!-- Status state --> + <dd class="attrib-names">{{ 'КЭШ-2' }}</dd> + <dd v-for="item in processors[index].cache_2" :key="item.cache_2"> + {{ dataFormatter(item) }} + </dd> + </dl> + </b-col> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <dd class="attrib-names">{{ 'КЭШ-3' }}</dd> + <dd v-for="item in processors[index].cache_3" :key="item.cache_3"> + {{ dataFormatter(item) }} + </dd> + </dl> + </b-col> + </b-row> + <b-row> + <b-col class="mt-3 mb-2 p-0 bold-12px__caps"> + {{ $t('pageInventory.table.SupportedTechnologies') }} + </b-col> + </b-row> + <b-row> + <b-col class="mt-2 p-0" sm="6" xl="6"> + <dl class="light-12px"> + <dd class="attrib-names">{{ $t('global.table.attributes') }}</dd> + <dd></dd> + <dd>{{ 'processor' }}</dd> + <dd>{{ 'vendor_id' }}</dd> + <dd>{{ 'cpu family' }}</dd> + <dd>{{ 'model' }}</dd> + <dd>{{ 'model name' }}</dd> + <dd>{{ 'stepping' }}</dd> + <dd>{{ 'microcode' }}</dd> + <dd>{{ 'cpu MHz' }}</dd> + <dd>{{ 'cache size' }}</dd> + <dd>{{ 'physical id' }}</dd> + <dd>{{ 'siblings' }}</dd> + <dd>{{ 'core id' }}</dd> + <dd>{{ 'cpu cores' }}</dd> + <dd>{{ 'apicid' }}</dd> + <dd>{{ 'initial apicid' }}</dd> + <dd>{{ 'fpu' }}</dd> + <dd>{{ 'fpu_exception' }}</dd> + <dd>{{ 'cpuid level' }}</dd> + <dd>{{ 'wp' }}</dd> + <dd>{{ 'flags' }}</dd> + <dd>{{ 'bugs' }}</dd> + </dl> + </b-col> + <b-col class="mt-2 p-0" sm="6" xl="6"> + <dl class="light-12px"> + <dd class="attrib-names">{{ $t('global.table.value') }}</dd> + <dd + v-for="item in processors[index].description" + :key="item.description" + > + {{ dataFormatter(item) }} + </dd> + </dl> + </b-col> + </b-row> + </b-container> + </template> + </b-table> +</template> + +<script> +import TableRowExpandMixin, { + expandRowLabel, +} from '@/components/Mixins/TableRowExpandMixin'; +import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; + +import { Processors } from './mock'; +export default { + components: { IconChevron }, + mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin], + data() { + return { + isBusy: true, + isAddersСolon: false, + processors: Processors, + fields: [ + { + key: 'expandRow', + label: '', + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-expand`, + tdClass: 'table-row-expand bootstrap-rounded-table__td', + sortable: false, + }, + { + key: 'status', + label: 'Статус', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-first`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'name', + label: 'Имя', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-second`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'model', + label: 'Модель', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-third`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'serialNumber', + label: 'Серийный номер', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-second`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'version', + label: 'Версия', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-fourth`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'frequency', + label: 'Частота', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-fourth`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'cores', + label: 'Ядра', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-last + fans-table-col-fourth`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + expandRowLabel: expandRowLabel, + }; + }, +}; +</script> +<style lang="scss"> +.fans-table-col-expand { + width: 3%; +} +.fans-table-col-first { + width: 17%; +} + +.fans-table-col-second { + width: 15%; +} + +.fans-table-col-third { + width: 12%; +} + +.fans-table-col-fourth { + width: 10%; +} +</style> + +<style lang="scss" scoped> +.row { + margin: 0px; + flex-wrap: nowrap; +} +.fans-table-col-first__cell { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: flex-start; +} + +.status__img { + margin-right: 7px; +} + +.bold-16px { + margin: 24px 0 0 2rem; +} + +.bold-12px__caps { + color: $text-secondary; +} + +.attrib-names { + border-bottom: 1px solid $faint-secondary-primary-10; + color: $text-secondary !important; + font-weight: 600; +} + +.custom-switch { + margin: 0; +} + +.btn-link { + width: 30px !important; + height: 20px !important; +} +</style> diff --git a/src/views/Processors/Specification/index.js b/src/views/Processors/Specification/index.js new file mode 100644 index 00000000..93bbbf10 --- /dev/null +++ b/src/views/Processors/Specification/index.js @@ -0,0 +1,2 @@ +import ProcessorsSpecificationPage from './ProcessorsSpecificationPage.vue'; +export default ProcessorsSpecificationPage; diff --git a/src/views/Processors/Specification/mock.js b/src/views/Processors/Specification/mock.js new file mode 100644 index 00000000..42ca1c30 --- /dev/null +++ b/src/views/Processors/Specification/mock.js @@ -0,0 +1,254 @@ +export const Processors = [ + { + expandRow: false, + status: true, + name: 'Процессор №1', + model: 'Core i5', + serialNumber: '789578456698', + version: 'v3.1.5', + frequency: '2.4', + cores: '4', + presence_status: { + multithreading: 'Нет', + virtualization: 'Да', + turbo: 'Да', + }, + statuses: { + multithreading: false, + virtualization: true, + turbo: true, + }, + cache_1: { + level: 'L1', + max_value: '1MB', + current_value: '1MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Parity', + }, + cache_2: { + level: 'L2', + max_value: '32MB', + current_value: '32MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Multiple-bit ECC', + }, + cache_3: { + level: 'L3', + max_value: '64MB', + current_value: '64MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Multiple-bit ECC', + }, + description: { + processor: '79', + vendor_id: 'GenuineIntel', + cpu_family: '6', + model: '85', + model_name: 'Intel(R) Xeon(R) Gold 6242R CPU @ 3.10GHz', + stepping: '7', + microcode: '0x5002f00', + cpu_MHz: '2955.939', + cache_size: '36608 KB', + physical_id: '1', + siblings: '40', + core_id: '29', + cpu_cores: '20', + apicid: '123', + initial_apicid: '123', + fpu: 'yes', + fpu_exception: 'yes', + cpuid_level: '22', + wp: 'yes', + flags: 'fpu, vme, de, pse, tsc, pat, pse36....', + bugs: 'spectre_v1 spectre_v2, spec_store_bypass', + }, + }, + { + expandRow: false, + status: true, + name: 'Процессор №2', + model: 'Core i3', + serialNumber: '425546788976', + version: 'v2.1.5', + frequency: '1.4', + cores: '2', + presence_status: { + multithreading: 'Нет', + virtualization: 'Да', + turbo: 'Да', + }, + statuses: { + multithreading: false, + virtualization: true, + turbo: true, + }, + cache_1: { + level: 'L1', + max_value: '1MB', + current_value: '1MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Parity', + }, + cache_2: { + level: 'L2', + max_value: '32MB', + current_value: '32MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Multiple-bit ECC', + }, + cache_3: { + level: 'L3', + max_value: '64MB', + current_value: '64MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Multiple-bit ECC', + }, + description: { + processor: '79', + vendor_id: 'GenuineIntel', + cpu_family: '6', + model: '85', + model_name: 'Intel(R) Xeon(R) Gold 6242R CPU @ 3.10GHz', + stepping: '7', + microcode: '0x5002f00', + cpu_MHz: '2955.939', + cache_size: '36608 KB', + physical_id: '1', + siblings: '40', + core_id: '29', + cpu_cores: '20', + apicid: '123', + initial_apicid: '123', + fpu: 'yes', + fpu_exception: 'yes', + cpuid_level: '22', + wp: 'yes', + flags: 'fpu, vme, de, pse, tsc, pat, pse36....', + bugs: 'spectre_v1 spectre_v2, spec_store_bypass', + }, + }, + { + expandRow: false, + status: false, + name: 'Процессор №3', + model: 'Core i7', + serialNumber: '454555556698', + version: 'v6.1.5', + frequency: '3.4', + cores: '6', + presence_status: { + multithreading: 'Нет', + virtualization: 'Да', + turbo: 'Да', + }, + statuses: { + multithreading: false, + virtualization: true, + turbo: true, + }, + cache_1: { + level: 'L1', + max_value: '1MB', + current_value: '1MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Parity', + }, + cache_2: { + level: 'L2', + max_value: '32MB', + current_value: '32MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Multiple-bit ECC', + }, + cache_3: { + level: 'L3', + max_value: '64MB', + current_value: '64MB', + cache_type: 'Unified', + localization: 'Internal', + politics: 'Write Back', + associativity: '8-Way Set-Associativity', + fix_type: 'Multiple-bit ECC', + }, + description: { + processor: '79', + vendor_id: 'GenuineIntel', + cpu_family: '6', + model: '85', + model_name: 'Intel(R) Xeon(R) Gold 6242R CPU @ 3.10GHz', + stepping: '7', + microcode: '0x5002f00', + cpu_MHz: '2955.939', + cache_size: '36608 KB', + physical_id: '1', + siblings: '40', + core_id: '29', + cpu_cores: '20', + apicid: '123', + initial_apicid: '123', + fpu: 'yes', + fpu_exception: 'yes', + cpuid_level: '22', + wp: 'yes', + flags: 'fpu, vme, de, pse, tsc, pat, pse36....', + bugs: 'spectre_v1 spectre_v2, spec_store_bypass', + }, + }, +]; + +export const Accelerators = [ + { + expandRow: false, + status: true, + name: 'Процессор №1', + slot_number: '789578456698', + board_number: '789578456698', + serial_number: '425546788976', + frequency: '2213', + cores: '4', + }, + { + expandRow: false, + status: true, + name: 'Процессор №2', + slot_number: '425546788976', + board_number: '425546788976', + serial_number: '425546788976', + frequency: '1332', + cores: '2', + }, + { + expandRow: false, + status: false, + name: 'Процессор №3', + slot_number: '454555556698', + board_number: '454555556698', + serial_number: '425546788976', + frequency: '3213', + cores: '6', + }, +]; diff --git a/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue new file mode 100644 index 00000000..b736f026 --- /dev/null +++ b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue @@ -0,0 +1,167 @@ +<template> + <b-container fluid="xxl pt-0 m-0"> + <page-title /> + <div class="main-container"> + <div class="tables-container"> + <div class="server-table"> + <span class="semi-bold-16px">Состояние сервера</span> + <b-table + show-empty + responsive="md" + class="bootstrap-analytical-table" + :items="server_items" + :fields="server_fields" + > + <template #cell(value)="{ value }"> + <b-col v-if="value" col="1"> + <img + src="@/assets/images/icon-ok.svg" + class="system-network-table__icon" + /> + </b-col> + <b-col v-else> + <img + src="@/assets/images/icon-no.svg" + class="system-network-table__icon" + /> + </b-col> + </template> + </b-table> + </div> + <div class="events-table"> + <span class="semi-bold-16px">События</span> + <b-table + show-empty + responsive="md" + class="bootstrap-analytical-table" + :items="events_items" + :fields="events_fields" + > + </b-table> + </div> + </div> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; + +export default { + components: { + PageTitle, + }, + + data() { + return { + server_fields: [ + { + key: 'param', + label: 'Раздел', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + class: 'bootstrap-analytical-table__column-first', + tdClass: 'regular-12px bootstrap-analytical-table__td', + }, + { + key: 'value', + label: 'Статус', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + class: + 'bootstrap-rounded-table__column-last analytical-table__status', + tdClass: 'regular-12px bootstrap-analytical-table__td', + }, + ], + server_items: [ + { param: 'Сервер №1', value: true }, + { param: 'ВМС', value: true }, + { param: 'Аналитическая панель', value: true }, + { param: 'RAID-контроллеры', value: false }, + { param: 'Модули памяти', value: true }, + { param: 'Процессоры', value: true }, + { param: 'Источники питания', value: true }, + { param: 'Вентиляторы', value: true }, + { param: 'Физические накопители', value: true }, + { param: 'Виртуальные накопители', value: true }, + { param: 'Материнская плата', value: true }, + { param: 'Сетевые адаптеры', value: true }, + { param: 'PCI устройства', value: true }, + ], + events_fields: [ + { + key: 'time', + label: 'Время', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + class: 'bootstrap-analytical-table__column-first', + tdClass: 'regular-12px bootstrap-analytical-table__td', + }, + { + key: 'type', + label: 'Тип события', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + tdClass: 'regular-12px bootstrap-analytical-table__td', + }, + { + key: 'info', + label: 'О событии', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: 'regular-12px bootstrap-analytical-table__td', + }, + ], + events_items: [ + { time: 'Сервер №1', type: 'Критические', info: 'true' }, + { time: 'ВМС', type: 'Критические', info: 'true' }, + { + time: 'Аналитическая панель', + type: 'Критические', + info: 'true', + }, + { + time: 'RAID-контроллеры', + type: 'Критические', + info: 'false', + }, + { + time: 'Модули памяти', + type: 'Критические', + info: 'true', + }, + { time: 'Процессоры', type: 'Критические', info: 'true' }, + { + time: 'Источники питания', + type: 'Критические', + info: 'true', + }, + { time: 'Вентиляторы', type: 'Критические', info: 'true' }, + { time: 'Физические накопители', type: 'Критические', info: 'true' }, + ], + }; + }, +}; +</script> +<style lang="scss"> +.analytical-table__status { + width: 10%; +} +</style> +<style lang="scss" scoped> +.tables-container { + display: flex; + flex-flow: row nowrap; + margin: 16px 32px; + gap: 24px; +} + +.server-table { + width: 35%; +} + +.events-table { + width: 65%; +} +</style> diff --git a/src/views/SILA/AnalyticalPanel/index.js b/src/views/SILA/AnalyticalPanel/index.js new file mode 100644 index 00000000..7da2938e --- /dev/null +++ b/src/views/SILA/AnalyticalPanel/index.js @@ -0,0 +1,2 @@ +import AnalyticalPanelPage from './AnalyticalPanelPage.vue'; +export default AnalyticalPanelPage; diff --git a/src/views/SILA/EventLogs/EventLogs.vue b/src/views/SILA/EventLogs/EventLogs.vue new file mode 100644 index 00000000..0d5ce428 --- /dev/null +++ b/src/views/SILA/EventLogs/EventLogs.vue @@ -0,0 +1,1082 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + class="event-logs-section" + > + <page-title /> + <div class="form-control event-log-search"> + <button class="search-button"> + <img + class="event-log-search__icon" + src="@/assets/images/search-icon.svg" + /> + </button> + <b-form-input + v-model="searchInput" + type="text" + class="event-log-search__input" + placeholder="Поиск по журналу" + @input="onChangeSearchInput" + @clear-search="onClearSearchInput" + > + </b-form-input> + </div> + <div class="event-logs__section"> + <div class="event-logs__filter-container"> + <span class="caption-12px">{{ $t('pageEventLogs.eventFilter') }}</span> + <b-form-select + v-model="eventFilter" + :options="eventFilters" + class="event-logs__filter regular-14px" + /> + </div> + <div class="event-logs__filter-container"> + <span class="caption-12px">{{ + $t('pageEventLogs.eventTypeFilter') + }}</span> + <b-form-select + v-model="eventTypeFilter" + :options="eventTypeFilters" + class="event-logs__filter regular-14px" + /> + </div> + <div class="event-logs__filter-container"> + <span class="caption-12px">{{ + $t('pageEventLogs.eventSourseFilter') + }}</span> + <b-form-select + v-model="eventSourseFilter" + :options="eventSourseFilters" + class="event-logs__filter regular-14px" + /> + </div> + <div class="event-logs__filter-container"> + <span class="caption-12px">{{ + $t('pageEventLogs.eventDateFilter') + }}</span> + <b-form-select + v-model="eventDateFilter" + :options="eventDateFilters" + class="event-logs__filter-date regular-14px" + /> + </div> + <popover + id="popover-reactive-1" + description="pageEventLogs.clearLogs" + popup="pageEventLogs.clearLogs_popup" + button="pageEventLogs.clear" + :isclear="true" + class="clear-popover" + /> + </div> + <table-toolbar + ref="toolbar" + :selected-items-count="selectedRows.length" + :actions="batchActions" + @clear-selected="clearSelectedRows($refs.table)" + > + <template #toolbar-buttons> + <b-button + variant="primary" + class="table-toolbar__resolved-button" + @click="resolveLogs" + > + <img + class="sourse__img" + src="@/assets/images/event-logs/resolved-button.svg" + /> + {{ $t('pageEventLogs.event_resolve') }} + </b-button> + <b-button + variant="primary" + class="table-toolbar__unresolved-button" + @click="unresolveLogs" + > + <img + class="sourse__img" + src="@/assets/images/event-logs/archive.svg" + /> + {{ $t('pageEventLogs.archive') }} + </b-button> + </template> + </table-toolbar> + <div id="event-logs-table-wrapper"> + <b-table + id="event-logs-table" + ref="table" + responsive="md" + class="event-logs-table" + selectable + no-select-on-click + sort-icon-left + :sticky-header="stickyHeader" + :no-border-collapse="true" + no-sort-reset + :sort-desc="sortDesc" + sort-by="id" + :fields="fields" + :items="filteredLogs" + :sort-compare="onSortCompare" + :empty-text="$t('global.table.emptyMessage')" + :empty-filtered-text="$t('global.table.emptySearchMessage')" + :filter="searchFilter" + @filtered="onFiltered" + @row-selected="onRowSelected($event, filteredLogs.length)" + > + <!-- Checkbox column --> + <template #head(checkbox)> + <b-form-checkbox + v-model="tableHeaderCheckboxModel" + data-test-id="eventLogs-checkbox-selectAll" + :indeterminate="tableHeaderCheckboxIndeterminate" + @change="onChangeHeaderCheckbox($refs.table)" + > + <span class="sr-only">{{ $t('global.table.selectAll') }}</span> + </b-form-checkbox> + </template> + <template #cell(checkbox)="row"> + <b-form-checkbox + v-model="row.rowSelected" + :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`" + @change="toggleSelectRow($refs.table, row.index)" + > + <span class="sr-only">{{ $t('global.table.selectItem') }}</span> + </b-form-checkbox> + </template> + <template #cell(description)="data"> + <b-row class="semi-bold-16px tretiatry"> + {{ data.item.description.name }} + </b-row> + <b-row + class="regular-12px tretiatry pointer" + @click="toggleRowDetails(data)" + > + {{ data.item.description.description }}</b-row + > + </template> + <template #row-details="{ index }"> + <b-container fluid> + <b-col class="mt-1 mb-2 regular-12px tretiatry"> + <span class="row-details"> + {{ + `Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки. + Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.` + }} + {{ $t(filteredLogs[index].description.description) }} + </span> + </b-col> + </b-container> + </template> + <!-- Severity column --> + <template #cell(severity)="{ value }"> + <span v-if="value === 'Критические'" class="bold-12px__caps errors">{{ + value + }}</span> + <span + v-else-if="value === 'Предупреждения'" + class="bold-12px__caps warning" + > + {{ value }} + </span> + <span v-else class="bold-12px__caps information">{{ value }}</span> + </template> + <!-- Date column --> + <template #cell(source)="{ value }"> + <b-row v-if="value === 'Процессоры'"> + <img + class="sourse__img" + src="@/assets/images/event-logs/processor.svg" + /> + <span>{{ value }}</span> + </b-row> + <b-row v-else-if="value === 'Вентиляторы'"> + <img + class="sourse__img" + src="@/assets/images/event-logs/fans.svg" + /> + <span class="pointer" @click="redirectFans">{{ value }}</span> + </b-row> + <b-row v-else-if="value === 'RAID-контролеры'"> + <img + class="sourse__img" + src="@/assets/images/event-logs/raid-controllers.svg" + /> + <span>{{ value }}</span> + </b-row> + <b-row v-else> + <img + src="@/assets/images/event-logs/memory-module.svg" + class="sourse__img" + /> + <span>{{ value }}</span> + </b-row> + </template> + + <template #cell(date)="{ value }"> + <img src="@/assets/images/event-logs/time.svg" class="sourse__img" /> + <span class="regular-12px quaternary"> {{ value }} </span> + </template> + + <!-- Status column --> + <template #cell(status)="{ value }"> + <b-row v-if="value === true"> + <img + class="sourse__img" + src="@/assets/images/event-logs/resolved.svg" + /> + <span class="semi-bold-12px__caps resolved"> + {{ $t('pageEventLogs.resolved') }} + </span> + </b-row> + <b-row v-else> + <img + class="sourse__img" + src="@/assets/images/event-logs/not-resolved.svg" + /> + <span class="semi-bold-12px__caps not-resolved"> + {{ $t('pageEventLogs.unresolved') }}</span + > + </b-row> + </template> + </b-table> + </div> + <div class="pagination-container"> + <div class="pagination-content"> + <span class="semi-bold-16px"> Страница </span> + <img class="sourse__img" src="@/assets/images/arrow-left.svg" /> + <span class="semi-bold-16px page-input"> 1 </span> + <span class="semi-bold-16px"> из </span> + <span class="semi-bold-16px"> 123 </span> + <img class="sourse__img" src="@/assets/images/arrow-right.svg" /> + </div> + <div class="pagination-items-limit"> + <span class="semi-bold-16px"> Показывать по </span> + <b-form-select + v-model="itemsPerPage" + :options="itemsPerPageOptions" + class="event-logs__filter items-per-page semi-bold-16px" + /> + <span class="semi-bold-16px"> записей на странице </span> + </div> + </div> + </b-container> +</template> + +<script> +import { omit } from 'lodash'; +import PageTitle from '@/components/Global/PageTitle'; +import Popover from '@/components/Global/Popover'; +import TableToolbar from '@/components/Global/TableToolbar'; +import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; +import BVTableSelectableMixin, { + selectedRows, + tableHeaderCheckboxModel, + tableHeaderCheckboxIndeterminate, +} from '@/components/Mixins/BVTableSelectableMixin'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; +import TableSortMixin from '@/components/Mixins/TableSortMixin'; +import TableRowExpandMixin, { + expandRowLabel, +} from '@/components/Mixins/TableRowExpandMixin'; +import SearchFilterMixin, { + searchFilter, +} from '@/components/Mixins/SearchFilterMixin'; + +export default { + components: { + PageTitle, + Popover, + TableToolbar, + }, + mixins: [ + BVTableSelectableMixin, + BVToastMixin, + LoadingBarMixin, + TableFilterMixin, + DataFormatterMixin, + TableSortMixin, + TableRowExpandMixin, + SearchFilterMixin, + ], + beforeRouteLeave(to, from, next) { + // Hide loader if the user navigates to another page + // before request is fulfilled. + this.hideLoader(); + next(); + }, + data() { + return { + sortDesc: true, + stickyHeader: 'calc(100vh - 243px)', + itemsPerPage: 50, + itemsPerPageOptions: [ + { + value: 10, + text: '10', + }, + { + value: 50, + text: '50', + }, + { + value: 100, + text: '100', + }, + ], + fields: [ + { + key: 'checkbox', + sortable: false, + thClass: ' event-logs-table__th', + class: 'event-logs-table__id', + tdClass: 'event-logs-table__td', + }, + { + key: 'id', + label: this.$t('pageEventLogs.table.id'), + sortable: true, + thClass: 'bold-12px__caps event-logs-table__th', + tdClass: 'semi-bold-12px event-logs-table__td', + }, + { + key: 'description', + label: this.$t('pageEventLogs.table.about_event'), + thClass: 'bold-12px__caps event-logs-table__th', + tdClass: 'event-logs-table__td', + }, + { + key: 'severity', + label: this.$t('pageEventLogs.table.severity'), + thClass: 'bold-12px__caps event-logs-table__th', + tdClass: 'event-logs-table__td', + }, + { + key: 'source', + label: this.$t('pageEventLogs.table.source'), + thClass: 'bold-12px__caps event-logs-table__th', + tdClass: 'semi-bold-12px__caps tretiatry event-logs-table__td', + }, + { + key: 'date', + label: this.$t('pageEventLogs.table.date'), + sortable: true, + thClass: `bold-12px__caps event-logs-table__th event-logs-table__th__date`, + tdClass: 'event-logs-table__td', + }, + { + key: 'status', + sortable: true, + label: this.$t('pageEventLogs.table.status'), + thClass: 'bold-12px__caps event-logs-table__th', + tdClass: 'event-logs-table__td', + }, + ], + allLogs: [ + { + checkbox: false, + id: 1, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + full_description: '', + }, + severity: 'Критические', + source: 'Вентиляторы', + date: '23.11.2021 в 13.36', + status: true, + }, + { + checkbox: false, + id: 2, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Информационное', + source: 'Модули памяти', + date: '23.11.2021 в 13.36', + status: false, + }, + { + checkbox: false, + id: 3, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Критические', + source: 'Процессоры', + date: '23.11.2021 в 13.36', + status: true, + }, + { + checkbox: false, + id: 4, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Предупреждения', + source: 'RAID-контролеры', + date: '23.11.2021 в 13.36', + status: 'expandRow', + }, + { + checkbox: false, + id: 5, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Критические', + source: 'Процессоры', + date: '23.11.2021 в 13.36', + status: true, + }, + { + checkbox: false, + id: 6, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Предупреждения', + source: 'RAID-контролеры', + date: '23.11.2021 в 13.36', + status: false, + }, + { + checkbox: false, + id: 7, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Информационное', + source: 'Модули памяти', + date: '23.11.2021 в 13.36', + status: false, + }, + { + checkbox: false, + id: 8, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Критические', + source: 'Вентиляторы', + date: '23.11.2021 в 13.36', + status: true, + }, + { + checkbox: false, + id: 9, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Информационное', + source: 'Модули памяти', + date: '23.11.2021 в 13.36', + status: false, + }, + { + checkbox: false, + id: 10, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Критические', + source: 'Процессоры', + date: '23.11.2021 в 13.36', + status: true, + }, + { + checkbox: false, + id: 11, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Предупреждения', + source: 'RAID-контролеры', + date: '23.11.2021 в 13.36', + status: 'expandRow', + }, + { + checkbox: false, + id: 12, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Критические', + source: 'Процессоры', + date: '23.11.2021 в 13.36', + status: true, + }, + { + checkbox: false, + id: 13, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Предупреждения', + source: 'RAID-контролеры', + date: '23.11.2021 в 13.36', + status: false, + }, + { + checkbox: false, + id: 14, + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + severity: 'Информационное', + source: 'Модули памяти', + date: '23.11.2021 в 13.36', + status: false, + }, + ], + tableFilters: [ + { + key: 'severity', + label: this.$t('pageEventLogs.table.severity'), + values: ['Информационное', 'Предупреждения', 'Критические'], + }, + { + key: 'filterByStatus', + label: this.$t('pageEventLogs.table.status'), + values: ['Resolved', 'Unresolved'], + }, + { + key: 'status', + label: this.$t('pageEventLogs.table.status'), + values: [false, true], + }, + ], + eventFilter: 1, + eventFilters: [ + { + value: 1, + text: 'Все события', + }, + ], + eventTypeFilter: 'all', + eventTypeFilters: [ + { + value: 'all', + text: 'Все события', + }, + { + value: 'info', + text: 'Информационное', + }, + { + value: 'warning', + text: 'Предупреждения', + }, + { + value: 'critical', + text: 'Критические', + }, + ], + eventSourseFilter: 1, + eventSourseFilters: [ + { + value: 1, + text: 'Все события', + }, + ], + eventDateFilter: 1, + eventDateFilters: [ + { + value: 1, + text: 'События за последний час', + }, + ], + expandRowLabel, + activeFilters: [], + batchActions: [ + { + value: 'delete', + label: this.$t('global.action.delete'), + }, + ], + filterStartDate: null, + filterEndDate: null, + searchInput: null, + searchFilter: searchFilter, + searchTotalFilteredRows: 0, + selectedRows: selectedRows, + tableHeaderCheckboxModel: tableHeaderCheckboxModel, + tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate, + }; + }, + computed: { + href() { + return `data:text/json;charset=utf-8,${this.exportAllLogs()}`; + }, + filteredRows() { + return this.searchFilter + ? this.searchTotalFilteredRows + : this.filteredLogs.length; + }, + // allLogs() { + // return this.$store.getters['eventLog/allEvents'].map((event) => { + // return { + // ...event, + // actions: [ + // { + // value: 'export', + // title: this.$t('global.action.export'), + // }, + // { + // value: 'delete', + // title: this.$t('global.action.delete'), + // }, + // ], + // }; + // }); + // }, + batchExportData() { + return this.selectedRows.map((row) => omit(row, 'actions')); + }, + filteredLogsByDate() { + return this.getFilteredTableDataByDate( + this.allLogs, + this.filterStartDate, + this.filterEndDate + ); + }, + filteredLogs() { + return this.getFilteredTableData( + this.filteredLogsByDate, + this.activeFilters + ); + }, + }, + created() { + // this.startLoader(); + // this.$store.dispatch('eventLog/getEventLogData').finally(() => { + // this.endLoader(); + // this.isBusy = false; + // }); + }, + methods: { + redirectFans() { + this.$router.push('/fans'); + }, + changelogStatus(row) { + this.$store + .dispatch('eventLog/updateEventLogStatus', { + uri: row.uri, + status: row.status, + }) + .then((success) => { + this.successToast(success); + }) + .catch(({ message }) => this.errorToast(message)); + }, + deleteAllLogs() { + this.$bvModal + .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), { + title: this.$t('pageEventLogs.modal.deleteAllTitle'), + okTitle: this.$t('global.action.delete'), + okVariant: 'danger', + cancelTitle: this.$t('global.action.cancel'), + }) + .then((deleteConfirmed) => { + if (deleteConfirmed) { + this.$store + .dispatch('eventLog/deleteAllEventLogs', this.allLogs) + .then((message) => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)); + } + }); + }, + deleteLogs(uris) { + this.$store + .dispatch('eventLog/deleteEventLogs', uris) + .then((messages) => { + messages.forEach(({ type, message }) => { + if (type === 'success') { + this.successToast(message); + } else if (type === 'error') { + this.errorToast(message); + } + }); + }); + }, + exportAllLogs() { + { + return this.$store.getters['eventLog/allEvents'].map((eventLogs) => { + const allEventLogsString = JSON.stringify(eventLogs); + return allEventLogsString; + }); + } + }, + onFilterChange({ activeFilters }) { + this.activeFilters = activeFilters; + }, + onSortCompare(a, b, key) { + if (key === 'severity') { + return this.sortStatus(a, b, key); + } + }, + // onTableRowAction(action, { uri }) { + // if (action === 'delete') { + // this.$bvModal + // .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), { + // title: this.$tc('pageEventLogs.modal.deleteTitle'), + // okTitle: this.$t('global.action.delete'), + // cancelTitle: this.$t('global.action.cancel'), + // }) + // .then((deleteConfirmed) => { + // if (deleteConfirmed) this.deleteLogs([uri]); + // }); + // } + // }, + onBatchAction(action) { + if (action === 'delete') { + const uris = this.selectedRows.map((row) => row.uri); + this.$bvModal + .msgBoxConfirm( + this.$tc( + 'pageEventLogs.modal.deleteMessage', + this.selectedRows.length + ), + { + title: this.$tc( + 'pageEventLogs.modal.deleteTitle', + this.selectedRows.length + ), + okTitle: this.$t('global.action.delete'), + cancelTitle: this.$t('global.action.cancel'), + } + ) + .then((deleteConfirmed) => { + if (deleteConfirmed) { + if (this.selectedRows.length === this.allLogs.length) { + this.$store + .dispatch( + 'eventLog/deleteAllEventLogs', + this.selectedRows.length + ) + .then((message) => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)); + } else { + this.deleteLogs(uris); + } + } + }); + } + }, + onChangeDateTimeFilter({ fromDate, toDate }) { + this.filterStartDate = fromDate; + this.filterEndDate = toDate; + }, + onFiltered(filteredItems) { + this.searchTotalFilteredRows = filteredItems.length; + }, + // Create export file name based on date + exportFileNameByDate(value) { + let date = new Date(); + date = + date.toISOString().slice(0, 10) + + '_' + + date.toString().split(':').join('-').split(' ')[4]; + let fileName; + if (value === 'export') { + fileName = 'event_log_'; + } else { + fileName = 'all_event_logs_'; + } + return fileName + date; + }, + resolveLogs() { + this.$store + .dispatch('eventLog/resolveEventLogs', this.selectedRows) + .then((messages) => { + messages.forEach(({ type, message }) => { + if (type === 'success') { + this.successToast(message); + } else if (type === 'error') { + this.errorToast(message); + } + }); + }); + }, + unresolveLogs() { + this.$store + .dispatch('eventLog/unresolveEventLogs', this.selectedRows) + .then((messages) => { + messages.forEach(({ type, message }) => { + if (type === 'success') { + this.successToast(message); + } else if (type === 'error') { + this.errorToast(message); + } + }); + }); + }, + }, +}; +</script> +<style lang="scss"> +#event-logs-table { + margin: 0 !important; +} + +.event-logs-table__th { + background-color: #f8f8f8 !important; + border-bottom: 1px solid $faint-secondary-primary-20 !important; + border-top: 1px solid $faint-secondary-primary-20 !important; + color: $text-primary !important; +} + +.event-logs-section .table.b-table > thead > tr > [aria-sort='ascending'] { + background-image: url('../../../assets/images/event-logs/sort-icon-rotate.svg'); +} + +.event-logs-section .table.b-table > thead > tr > [aria-sort='descending'], +.table.b-table > thead > tr > [aria-sort='none'] { + background-image: url('../../../assets/images/event-logs/sort-icon.svg'); +} + +.event-logs-section .b-table-sort-icon-left { + background-position: left 57% center !important; + background-size: 15px !important; + padding-left: 0.75rem !important; + padding-right: 2rem !important; + &.event-logs-table__th__date { + background-position: left 33% center !important; + } +} + +.event-logs-table__id { + padding-left: 38px !important; +} + +.event-logs-table__td { + border-bottom: 1px solid $faint-secondary-primary-10 !important; + height: 64px; +} +</style> +<style lang="scss" scoped> +$toolbar-height: 64px; +.row { + margin: 0px; +} + +.clear-popover { + margin-left: auto; +} + +.event-logs__section { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + height: 84px; + gap: 16px; + margin: 0 32px; +} + +.event-log-search { + position: absolute; + top: calc(#{$header-height}); + right: 0px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + border: none; + box-shadow: none; + border-radius: 8px; + margin: 12px 32px; + width: 236px; + height: 40px; + z-index: 1001; +} + +.search-button { + border: none; + background: none; +} + +.event-log-search__icon { + width: 20px; + height: 20px; +} + +.event-log-search__input { + border: none; + background: none; + box-shadow: none; +} + +.event-logs__filter-container { + width: 183px; +} + +.event-logs__filter, +.event-logs__filter-date { + height: 40px; + border: none; + border-radius: 8px; + background-image: url('../../../assets/images/icon-chevron.svg'); +} + +.caption-12px { + padding-left: 10px; +} + +.event-logs__filter { + width: 171px; +} + +.event-logs__filter-date { + width: 236px; +} + +.bold-12px__caps { + color: $text-primary !important; +} + +.custom-checkbox { + background-color: none; +} + +#event-logs-table-wrapper div { + overflow-y: overlay; + &::-webkit-scrollbar { + position: absolute; + width: 10px; + } + &::-webkit-scrollbar-thumb { + border: 4px solid transparent; + border-top: 52px solid transparent; + background: $faint-secondary-primary-20; + border-radius: 16px; + background-clip: content-box; + } +} + +.table-toolbar__resolved-button { + width: 226px; + height: 36px; + background-color: $faint-secondary-primary-5; + border-radius: 8px; + color: $red-brand-primary; + margin-right: 1rem; + justify-content: center; +} + +.table-toolbar__unresolved-button { + width: 226px; + height: 36px; + background-color: $red-brand-primary; + border-radius: 8px; + color: $white; + margin-right: 2rem; + justify-content: center; +} + +.sourse__img { + padding-right: 8px; +} + +.errors { + color: $indicators-errors !important; +} + +.warning { + color: $indicators-warning !important; +} + +.information { + color: $indicators-complementary !important; +} + +.resolved { + color: $indicators-succes; +} + +.not-resolved { + color: $text-quaternary; +} + +.pointer { + cursor: pointer; +} + +.pagination-container { + width: calc(100% - #{$navigation-width}); + height: $toolbar-height; + position: fixed; + bottom: 0; + right: 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06); + z-index: $zindex-dropdown; + background-color: $white; +} + +.pagination-content { + width: 300px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; +} + +.page-input { + display: inline-block; + width: 55px; + height: 24px; + border: 1px solid $on-surface-tretiatry; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; +} + +.pagination-items-limit { + margin-left: auto; + width: 400px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; +} + +.items-per-page { + padding: 0 0 0 5px; + width: 55px; + height: 24px; + background-color: transparent; + border: 1px solid $on-surface-tretiatry; + border-radius: 4px; +} + +.row-details { + display: block; + height: auto; + width: 70vw; +} + +.pointer { + cursor: pointer; +} +</style> diff --git a/src/views/SILA/EventLogs/index.js b/src/views/SILA/EventLogs/index.js new file mode 100644 index 00000000..521efde4 --- /dev/null +++ b/src/views/SILA/EventLogs/index.js @@ -0,0 +1,2 @@ +import EventLogs from './EventLogs.vue'; +export default EventLogs; diff --git a/src/views/SystemDescription/Info/InventoryTableSystem.vue b/src/views/SystemDescription/Info/InventoryTableSystem.vue index b022fd6d..f903a46b 100644 --- a/src/views/SystemDescription/Info/InventoryTableSystem.vue +++ b/src/views/SystemDescription/Info/InventoryTableSystem.vue @@ -7,7 +7,6 @@ :items="systems" :fields="fields" :empty-text="$t('global.table.emptyMessage')" - :busy="isBusy" > </b-table> </page-section> @@ -26,7 +25,6 @@ export default { mixins: [BVToastMixin, TableRowExpandMixin], data() { return { - isBusy: true, fields: [ { key: 'param', diff --git a/src/views/SystemDescription/Info/SystemDescription.vue b/src/views/SystemDescription/Info/SystemDescription.vue index 7322d03e..558c70ef 100644 --- a/src/views/SystemDescription/Info/SystemDescription.vue +++ b/src/views/SystemDescription/Info/SystemDescription.vue @@ -10,7 +10,7 @@ <b-button v-b-toggle.toggle-collapse_1 variant="link" - class="server-info-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" > {{ $t('SystemDescription.title.ServerConfig') }} <component :is="iconChevronUp" class="icon-expand" /> @@ -78,7 +78,7 @@ <b-button v-b-toggle.toggle-collapse_2 variant="link" - class="server-info-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" > {{ $t('SystemDescription.title.Control') }} <component :is="iconChevronUp" class="icon-expand" /> @@ -94,8 +94,7 @@ <script> import PageTitle from '@/components/Global/PageTitle'; import TableSystem from './InventoryTableSystem'; -import ControlSystem from './InventoryControlSystem'; -// import PageSection from '@/components/Global/PageSection'; +import ControlSystem from '@/components/Global/SilaComponents/InventoryControlSystem'; import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; export default { @@ -103,7 +102,6 @@ export default { PageTitle, ControlSystem, TableSystem, - // PageSection, }, data() { return { @@ -120,22 +118,6 @@ export default { padding: 0; } -.server-info-collapse__button { - height: 56px; - width: 100%; - padding: 0 0 0 2rem; - margin: 0; - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - &:active, - &:focus { - box-shadow: none; - } - &:hover { - color: $text-primary; - } -} .nav-item { list-style-type: none; } diff --git a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue index 69807762..b96c9251 100644 --- a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue +++ b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue @@ -11,33 +11,34 @@ <template #cell(value)="data"> <b-row v-if="!(typeof data.value === 'boolean')"> <b-form-input - v-if="systems[data.index].isEdit && selectedCell === 'value'" + v-if="systems[data.index].isEdit" ref="input" - v-model="systems[data.index].value" + v-model="selectedCell" class="regular-12px" + :class="{ validateIP: isIpInvalid }" type="text" + @keydown.enter="clickOk(data)" + @keydown.escape="clickCancel(data)" ></b-form-input> <b-col v-else>{{ data.value }}</b-col> <b-col class="system-network-table__icon-col"> - <b-row - v-if="systems[data.index].isEdit && selectedCell === 'value'" - > + <b-row v-if="systems[data.index].isEdit"> <img src="@/assets/images/edit-ok.svg" class="system-network-table__icon pointer" - @click="clickOk" + @click="clickOk(data)" /> <img src="@/assets/images/edit-no.svg" class="system-network-table__icon close_icon pointer" - @click="clickCancel" + @click="clickCancel(data)" /> </b-row> <img v-else src="@/assets/images/icon-edit.svg" class="system-network-table__icon pointer" - @click="editCellHandler(data, 'value')" + @click="editCellHandler(data)" /> </b-col> </b-row> @@ -85,6 +86,7 @@ export default { return { selectedCell: null, isActive: false, + isIpInvalid: false, fields: [ { key: 'param', @@ -144,22 +146,33 @@ export default { ], }; }, - mounted() { - this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); - }, methods: { - editCellHandler(data, value) { + editCellHandler(data) { this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); this.systems[data.index].isEdit = true; - this.selectedCell = value; + this.selectedCell = this.systems[data.index].value; this.$nextTick(() => this.$refs.input.focus()); }, clickOk(data) { - this.selectedCell = null; - this.systems[data.index].value = this.$refs.input.value; + const EDIT_VALUE = this.selectedCell.trim(); + if (this.validateIP(EDIT_VALUE)) { + this.systems[data.index].value = EDIT_VALUE; + this.isIpInvalid = false; + this.selectedCell = null; + this.systems[data.index].isEdit = false; + } else { + this.isIpInvalid = true; + } }, - clickCancel() { + clickCancel(data) { + this.isIpInvalid = false; this.selectedCell = null; + this.systems[data.index].isEdit = false; + }, + validateIP(ipCheck) { + return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test( + ipCheck + ); }, DHCPoff() { this.systems[0].value = false; @@ -205,14 +218,15 @@ export default { } .form-control { - border: none; max-height: 16px; width: 60%; - border: none; background-color: transparent; &:focus { box-shadow: none; } + &.validateIP { + color: $red-brand-primary; + } } .popup-container { position: relative; diff --git a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue index 4ff0897a..3de1c414 100644 --- a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue +++ b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue @@ -11,33 +11,34 @@ <template #cell(value)="data"> <b-row v-if="!(typeof data.value === 'boolean')"> <b-form-input - v-if="systems[data.index].isEdit && selectedCell === 'value'" + v-if="systems[data.index].isEdit" ref="input" - v-model="systems[data.index].value" + v-model="selectedCell" class="regular-12px" + :class="{ validateIP: isIpInvalid }" type="text" + @keydown.enter="clickOk(data)" + @keydown.escape="clickCancel(data)" ></b-form-input> <b-col v-else>{{ data.value }}</b-col> <b-col class="system-network-table__icon-col"> - <b-row - v-if="systems[data.index].isEdit && selectedCell === 'value'" - > + <b-row v-if="systems[data.index].isEdit"> <img src="@/assets/images/edit-ok.svg" class="system-network-table__icon pointer" - @click="clickOk" + @click="clickOk(data)" /> <img src="@/assets/images/edit-no.svg" class="system-network-table__icon close_icon pointer" - @click="clickCancel" + @click="clickCancel(data)" /> </b-row> <img v-else src="@/assets/images/icon-edit.svg" class="system-network-table__icon pointer" - @click="editCellHandler(data, 'value')" + @click="editCellHandler(data)" /> </b-col> </b-row> @@ -85,6 +86,7 @@ export default { return { isBusy: true, selectedCell: null, + isIpInvalid: false, isActive: false, fields: [ { @@ -124,43 +126,54 @@ export default { }, { param: 'IP-адрес', - value: '192.168.1.1', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите IP адрес', }, { param: 'Маска', - value: '192.168.0.1', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите маску сети', }, { param: 'Сетевой шлюз', - value: '192.168.0.1', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите сетевой шлюз', }, { param: 'DNS', - value: '8.8.8.8', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите DNS', }, ], }; }, - mounted() { - this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); - }, methods: { - editCellHandler(data, value) { + editCellHandler(data) { this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); this.systems[data.index].isEdit = true; - this.selectedCell = value; + this.selectedCell = this.systems[data.index].value; this.$nextTick(() => this.$refs.input.focus()); }, clickOk(data) { - this.selectedCell = null; - this.systems[data.index].value = this.$refs.input.value; + const EDIT_VALUE = this.selectedCell.trim(); + if (this.validateIP(EDIT_VALUE)) { + this.systems[data.index].value = EDIT_VALUE; + this.isIpInvalid = false; + this.selectedCell = null; + this.systems[data.index].isEdit = false; + } else { + this.isIpInvalid = true; + } }, - clickCancel() { + clickCancel(data) { + this.isIpInvalid = false; this.selectedCell = null; + this.systems[data.index].isEdit = false; + }, + validateIP(ipCheck) { + return /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/gi.test( + ipCheck + ); }, DHCPoff() { this.systems[0].value = false; @@ -191,14 +204,15 @@ export default { } .form-control { - border: none; max-height: 16px; width: 60%; - border: none; background-color: transparent; &:focus { box-shadow: none; } + &.validateIP { + color: $red-brand-primary; + } } .popup-container { diff --git a/src/views/SystemDescription/Network/SystemNetwork.vue b/src/views/SystemDescription/Network/SystemNetwork.vue index 4cf264cf..17b48794 100644 --- a/src/views/SystemDescription/Network/SystemNetwork.vue +++ b/src/views/SystemDescription/Network/SystemNetwork.vue @@ -10,7 +10,7 @@ <b-button v-b-toggle.toggle-collapse_1 variant="link" - class="server-info-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" @click="ipv4Handler" > {{ $t('SystemDescription.title.Ipv4Settings') }} @@ -29,7 +29,7 @@ <b-button v-b-toggle.toggle-collapse_2 variant="link" - class="server-info-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" @click="ipv6Handler" > {{ $t('SystemDescription.title.Ipv6Settings') }} @@ -43,7 +43,6 @@ <i-pv6-settings ref="system" /> </b-collapse> </div> - <modal-user @hidden="activeUser = null" /> </div> </b-container> </template> @@ -85,23 +84,6 @@ export default { padding: 0; } -.server-info-collapse__button { - height: 56px; - width: 100%; - padding: 0 0 0 2rem; - margin: 0; - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - &:active, - &:focus { - box-shadow: none; - } - &:hover { - color: $text-primary; - } -} - .nav-item { list-style-type: none; } @@ -117,11 +99,4 @@ a { background-color: none; margin: 0 20px 0 auto; } - -.custom-checkbox ::before { - box-shadow: none !important; - border: 2px solid rgba(4, 10, 15, 0.6); - background-color: #fff; - border-radius: 3px; -} </style> diff --git a/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue b/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue index e9868b05..a40edb41 100644 --- a/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue +++ b/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue @@ -22,7 +22,6 @@ <b-col> <b-form-checkbox v-model="queueItems[data.index].active" - class="switch-input" switch @change="toggleLoad" > diff --git a/src/views/SystemDescription/SystemEventLogs/SystemEventLogs.vue b/src/views/SystemDescription/SystemEventLogs/SystemEventLogs.vue deleted file mode 100644 index e84d23db..00000000 --- a/src/views/SystemDescription/SystemEventLogs/SystemEventLogs.vue +++ /dev/null @@ -1,624 +0,0 @@ -<template> - <b-container - :style="{ display: 'flex', 'flex-direction': 'column' }" - fluid="xxl pt-0 m-0" - > - <page-title /> - <b-row class="align-items-start"> - <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4"> - <search - :placeholder="$t('pageEventLogs.table.searchLogs')" - data-test-id="eventLogs-input-searchLogs" - @change-search="onChangeSearchInput" - @clear-search="onClearSearchInput" - /> - <div class="ml-sm-4"> - <table-cell-count - :filtered-items-count="filteredRows" - :total-number-of-cells="allLogs.length" - ></table-cell-count> - </div> - </b-col> - <b-col sm="8" md="7" xl="6"> - <table-date-filter @change="onChangeDateTimeFilter" /> - </b-col> - </b-row> - <b-row> - <b-col class="text-right"> - <table-filter :filters="tableFilters" @filter-change="onFilterChange" /> - <b-button - variant="link" - :disabled="allLogs.length === 0" - @click="deleteAllLogs" - > - <icon-delete /> {{ $t('global.action.deleteAll') }} - </b-button> - <b-button - variant="primary" - :class="{ disabled: allLogs.length === 0 }" - :download="exportFileNameByDate()" - :href="href" - > - <icon-export /> {{ $t('global.action.exportAll') }} - </b-button> - </b-col> - </b-row> - <b-row> - <b-col> - <table-toolbar - ref="toolbar" - :selected-items-count="selectedRows.length" - :actions="batchActions" - @clear-selected="clearSelectedRows($refs.table)" - @batch-action="onBatchAction" - > - <template #toolbar-buttons> - <b-button variant="primary" @click="resolveLogs"> - {{ $t('pageEventLogs.resolve') }} - </b-button> - <b-button variant="primary" @click="unresolveLogs"> - {{ $t('pageEventLogs.unresolve') }} - </b-button> - <table-toolbar-export - :data="batchExportData" - :file-name="exportFileNameByDate()" - /> - </template> - </table-toolbar> - <b-table - id="table-event-logs" - ref="table" - responsive="md" - selectable - no-select-on-click - sort-icon-left - hover - no-sort-reset - sort-desc - show-empty - sort-by="id" - :fields="fields" - :items="filteredLogs" - :sort-compare="onSortCompare" - :empty-text="$t('global.table.emptyMessage')" - :empty-filtered-text="$t('global.table.emptySearchMessage')" - :per-page="perPage" - :current-page="currentPage" - :filter="searchFilter" - :busy="isBusy" - @filtered="onFiltered" - @row-selected="onRowSelected($event, filteredLogs.length)" - > - <!-- Checkbox column --> - <template #head(checkbox)> - <b-form-checkbox - v-model="tableHeaderCheckboxModel" - data-test-id="eventLogs-checkbox-selectAll" - :indeterminate="tableHeaderCheckboxIndeterminate" - @change="onChangeHeaderCheckbox($refs.table)" - > - <span class="sr-only">{{ $t('global.table.selectAll') }}</span> - </b-form-checkbox> - </template> - <template #cell(checkbox)="row"> - <b-form-checkbox - v-model="row.rowSelected" - :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`" - @change="toggleSelectRow($refs.table, row.index)" - > - <span class="sr-only">{{ $t('global.table.selectItem') }}</span> - </b-form-checkbox> - </template> - - <!-- Expand chevron icon --> - <template #cell(expandRow)="row"> - <b-button - variant="link" - :aria-label="expandRowLabel" - :title="expandRowLabel" - class="btn-icon-only" - @click="toggleRowDetails(row)" - > - <icon-chevron /> - </b-button> - </template> - - <template #row-details="{ item }"> - <b-container fluid> - <b-row> - <b-col> - <dl> - <!-- Name --> - <dt>{{ $t('pageEventLogs.table.name') }}:</dt> - <dd>{{ dataFormatter(item.name) }}</dd> - </dl> - <dl> - <!-- Type --> - <dt>{{ $t('pageEventLogs.table.type') }}:</dt> - <dd>{{ dataFormatter(item.type) }}</dd> - </dl> - </b-col> - <b-col> - <dl> - <!-- Modified date --> - <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt> - <dd v-if="item.modifiedDate"> - {{ item.modifiedDate | formatDate }} - {{ item.modifiedDate | formatTime }} - </dd> - <dd v-else>--</dd> - </dl> - </b-col> - <b-col class="text-nowrap"> - <b-button - class="btn btn-secondary float-right" - :href="item.additionalDataUri" - target="_blank" - > - <icon-download />{{ $t('pageEventLogs.additionalDataUri') }} - </b-button> - </b-col> - </b-row> - </b-container> - </template> - - <!-- Severity column --> - <template #cell(severity)="{ value }"> - <status-icon v-if="value" :status="statusIcon(value)" /> - {{ value }} - </template> - <!-- Date column --> - <template #cell(date)="{ value }"> - <p class="mb-0">{{ value | formatDate }}</p> - <p class="mb-0">{{ value | formatTime }}</p> - </template> - - <!-- Status column --> - <template #cell(status)="row"> - <b-form-checkbox - v-model="row.item.status" - name="switch" - switch - @change="changelogStatus(row.item)" - > - <span v-if="row.item.status"> - {{ $t('pageEventLogs.resolved') }} - </span> - <span v-else> {{ $t('pageEventLogs.unresolved') }} </span> - </b-form-checkbox> - </template> - <template #cell(filterByStatus)="{ value }"> - {{ value }} - </template> - - <!-- Actions column --> - <template #cell(actions)="row"> - <table-row-action - v-for="(action, index) in row.item.actions" - :key="index" - :value="action.value" - :title="action.title" - :row-data="row.item" - :export-name="exportFileNameByDate('export')" - :data-test-id="`eventLogs-button-deleteRow-${row.index}`" - @click-table-action="onTableRowAction($event, row.item)" - > - <template #icon> - <icon-export v-if="action.value === 'export'" /> - <icon-trashcan v-if="action.value === 'delete'" /> - </template> - </table-row-action> - </template> - </b-table> - </b-col> - </b-row> - - <!-- Table pagination --> - <b-row> - <b-col sm="6"> - <b-form-group - class="table-pagination-select" - :label="$t('global.table.itemsPerPage')" - label-for="pagination-items-per-page" - > - <b-form-select - id="pagination-items-per-page" - v-model="perPage" - :options="itemsPerPageOptions" - /> - </b-form-group> - </b-col> - <b-col sm="6"> - <b-pagination - v-model="currentPage" - first-number - last-number - :per-page="perPage" - :total-rows="getTotalRowCount(filteredRows)" - aria-controls="table-event-logs" - /> - </b-col> - </b-row> - </b-container> -</template> - -<script> -import IconDelete from '@carbon/icons-vue/es/trash-can/20'; -import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; -import IconExport from '@carbon/icons-vue/es/document--export/20'; -import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; -import IconDownload from '@carbon/icons-vue/es/download/20'; -import { omit } from 'lodash'; - -import PageTitle from '@/components/Global/PageTitle'; -import StatusIcon from '@/components/Global/StatusIcon'; -import Search from '@/components/Global/Search'; -import TableCellCount from '@/components/Global/TableCellCount'; -import TableDateFilter from '@/components/Global/TableDateFilter'; -import TableFilter from '@/components/Global/TableFilter'; -import TableRowAction from '@/components/Global/TableRowAction'; -import TableToolbar from '@/components/Global/TableToolbar'; -import TableToolbarExport from '@/components/Global/TableToolbarExport'; - -import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; -import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; -import BVPaginationMixin, { - currentPage, - perPage, - itemsPerPageOptions, -} from '@/components/Mixins/BVPaginationMixin'; -import BVTableSelectableMixin, { - selectedRows, - tableHeaderCheckboxModel, - tableHeaderCheckboxIndeterminate, -} from '@/components/Mixins/BVTableSelectableMixin'; -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; -import TableSortMixin from '@/components/Mixins/TableSortMixin'; -import TableRowExpandMixin, { - expandRowLabel, -} from '@/components/Mixins/TableRowExpandMixin'; -import SearchFilterMixin, { - searchFilter, -} from '@/components/Mixins/SearchFilterMixin'; - -export default { - components: { - IconDelete, - IconExport, - IconTrashcan, - IconChevron, - IconDownload, - PageTitle, - Search, - StatusIcon, - TableCellCount, - TableFilter, - TableRowAction, - TableToolbar, - TableToolbarExport, - TableDateFilter, - }, - mixins: [ - BVPaginationMixin, - BVTableSelectableMixin, - BVToastMixin, - LoadingBarMixin, - TableFilterMixin, - DataFormatterMixin, - TableSortMixin, - TableRowExpandMixin, - SearchFilterMixin, - ], - beforeRouteLeave(to, from, next) { - // Hide loader if the user navigates to another page - // before request is fulfilled. - this.hideLoader(); - next(); - }, - data() { - return { - isBusy: true, - fields: [ - { - key: 'expandRow', - label: '', - tdClass: 'table-row-expand', - }, - { - key: 'checkbox', - sortable: false, - }, - { - key: 'id', - label: this.$t('pageEventLogs.table.id'), - sortable: true, - }, - { - key: 'severity', - label: this.$t('pageEventLogs.table.severity'), - sortable: true, - tdClass: 'text-nowrap', - }, - { - key: 'date', - label: this.$t('pageEventLogs.table.date'), - sortable: true, - tdClass: 'text-nowrap', - }, - { - key: 'description', - label: this.$t('pageEventLogs.table.description'), - tdClass: 'text-break', - }, - { - key: 'status', - label: this.$t('pageEventLogs.table.status'), - }, - { - key: 'actions', - sortable: false, - label: '', - tdClass: 'text-right text-nowrap', - }, - ], - allLogs: [ - { - expandRow: 'expandRow', - checkbox: false, - id: 1, - severity: 'dfjgsdjlk', - date: '12-23-1220', - status: 'expandRow', - description: 'expandRow', - actions: [ - { - value: 'export', - title: this.$t('global.action.export'), - }, - { - value: 'delete', - title: this.$t('global.action.delete'), - }, - ], - }, - ], - tableFilters: [ - { - key: 'severity', - label: this.$t('pageEventLogs.table.severity'), - values: ['OK', 'Warning', 'Critical'], - }, - { - key: 'filterByStatus', - label: this.$t('pageEventLogs.table.status'), - values: ['Resolved', 'Unresolved'], - }, - ], - expandRowLabel, - activeFilters: [], - batchActions: [ - { - value: 'delete', - label: this.$t('global.action.delete'), - }, - ], - currentPage: currentPage, - filterStartDate: null, - filterEndDate: null, - itemsPerPageOptions: itemsPerPageOptions, - perPage: perPage, - searchFilter: searchFilter, - searchTotalFilteredRows: 0, - selectedRows: selectedRows, - tableHeaderCheckboxModel: tableHeaderCheckboxModel, - tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate, - }; - }, - computed: { - href() { - return `data:text/json;charset=utf-8,${this.exportAllLogs()}`; - }, - filteredRows() { - return this.searchFilter - ? this.searchTotalFilteredRows - : this.filteredLogs.length; - }, - // allLogs() { - // return this.$store.getters['eventLog/allEvents'].map((event) => { - // return { - // ...event, - // actions: [ - // { - // value: 'export', - // title: this.$t('global.action.export'), - // }, - // { - // value: 'delete', - // title: this.$t('global.action.delete'), - // }, - // ], - // }; - // }); - // }, - batchExportData() { - return this.selectedRows.map((row) => omit(row, 'actions')); - }, - filteredLogsByDate() { - return this.getFilteredTableDataByDate( - this.allLogs, - this.filterStartDate, - this.filterEndDate - ); - }, - filteredLogs() { - return this.getFilteredTableData( - this.filteredLogsByDate, - this.activeFilters - ); - }, - }, - created() { - this.startLoader(); - this.$store.dispatch('eventLog/getEventLogData').finally(() => { - this.endLoader(); - this.isBusy = false; - }); - }, - methods: { - changelogStatus(row) { - this.$store - .dispatch('eventLog/updateEventLogStatus', { - uri: row.uri, - status: row.status, - }) - .then((success) => { - this.successToast(success); - }) - .catch(({ message }) => this.errorToast(message)); - }, - deleteAllLogs() { - this.$bvModal - .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), { - title: this.$t('pageEventLogs.modal.deleteAllTitle'), - okTitle: this.$t('global.action.delete'), - okVariant: 'danger', - cancelTitle: this.$t('global.action.cancel'), - }) - .then((deleteConfirmed) => { - if (deleteConfirmed) { - this.$store - .dispatch('eventLog/deleteAllEventLogs', this.allLogs) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)); - } - }); - }, - deleteLogs(uris) { - this.$store - .dispatch('eventLog/deleteEventLogs', uris) - .then((messages) => { - messages.forEach(({ type, message }) => { - if (type === 'success') { - this.successToast(message); - } else if (type === 'error') { - this.errorToast(message); - } - }); - }); - }, - exportAllLogs() { - { - return this.$store.getters['eventLog/allEvents'].map((eventLogs) => { - const allEventLogsString = JSON.stringify(eventLogs); - return allEventLogsString; - }); - } - }, - onFilterChange({ activeFilters }) { - this.activeFilters = activeFilters; - }, - onSortCompare(a, b, key) { - if (key === 'severity') { - return this.sortStatus(a, b, key); - } - }, - onTableRowAction(action, { uri }) { - if (action === 'delete') { - this.$bvModal - .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), { - title: this.$tc('pageEventLogs.modal.deleteTitle'), - okTitle: this.$t('global.action.delete'), - cancelTitle: this.$t('global.action.cancel'), - }) - .then((deleteConfirmed) => { - if (deleteConfirmed) this.deleteLogs([uri]); - }); - } - }, - onBatchAction(action) { - if (action === 'delete') { - const uris = this.selectedRows.map((row) => row.uri); - this.$bvModal - .msgBoxConfirm( - this.$tc( - 'pageEventLogs.modal.deleteMessage', - this.selectedRows.length - ), - { - title: this.$tc( - 'pageEventLogs.modal.deleteTitle', - this.selectedRows.length - ), - okTitle: this.$t('global.action.delete'), - cancelTitle: this.$t('global.action.cancel'), - } - ) - .then((deleteConfirmed) => { - if (deleteConfirmed) { - if (this.selectedRows.length === this.allLogs.length) { - this.$store - .dispatch( - 'eventLog/deleteAllEventLogs', - this.selectedRows.length - ) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)); - } else { - this.deleteLogs(uris); - } - } - }); - } - }, - onChangeDateTimeFilter({ fromDate, toDate }) { - this.filterStartDate = fromDate; - this.filterEndDate = toDate; - }, - onFiltered(filteredItems) { - this.searchTotalFilteredRows = filteredItems.length; - }, - // Create export file name based on date - exportFileNameByDate(value) { - let date = new Date(); - date = - date.toISOString().slice(0, 10) + - '_' + - date.toString().split(':').join('-').split(' ')[4]; - let fileName; - if (value === 'export') { - fileName = 'event_log_'; - } else { - fileName = 'all_event_logs_'; - } - return fileName + date; - }, - resolveLogs() { - this.$store - .dispatch('eventLog/resolveEventLogs', this.selectedRows) - .then((messages) => { - messages.forEach(({ type, message }) => { - if (type === 'success') { - this.successToast(message); - } else if (type === 'error') { - this.errorToast(message); - } - }); - }); - }, - unresolveLogs() { - this.$store - .dispatch('eventLog/unresolveEventLogs', this.selectedRows) - .then((messages) => { - messages.forEach(({ type, message }) => { - if (type === 'success') { - this.successToast(message); - } else if (type === 'error') { - this.errorToast(message); - } - }); - }); - }, - }, -}; -</script> diff --git a/src/views/SystemDescription/SystemEventLogs/index.js b/src/views/SystemDescription/SystemEventLogs/index.js deleted file mode 100644 index abe245ae..00000000 --- a/src/views/SystemDescription/SystemEventLogs/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import SystemEventLogs from './SystemEventLogs.vue'; -export default SystemEventLogs; |
