web/storagenode: logic removed from template (#3138)

web/storagenode/src/app/components/BandwidthChart.vue

@@ -8,7 +8,8 @@
             :chart-data="chartData"
             :width="400"
             :height="200"
-            :tooltip-constructor="bandwidthTooltip" />
+            :tooltip-constructor="bandwidthTooltip"
+        />
     </div>
 </template>
 

web/storagenode/src/app/components/DiskSpaceChart.vue

@@ -8,7 +8,8 @@
             :chart-data="chartData"
             :width="400"
             :height="200"
-            :tooltip-constructor="diskSpaceTooltip" />
+            :tooltip-constructor="diskSpaceTooltip"
+        />
     </div>
 </template>
 

web/storagenode/src/app/components/SNOContentFilling.vue

@@ -3,14 +3,14 @@
 
 <template>
     <div class="info-area">
-        <SatelliteSelection />
+        <SatelliteSelection/>
-        <div v-if="selectedSatellite.id && selectedSatellite.disqualified" class="info-area__disqualified-info">
+        <div v-if="isDisqualifiedInfoShown" class="info-area__disqualified-info">
             <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" alt="disqualified image">
                 <path d="M37.0279 30.9608C36.5357 30.0515 36.0404 29.1405 35.5467 28.2265C34.6279 26.5312 33.7108 24.8358 32.7936 23.1405C31.692 21.1092 30.5936 19.0749 29.4936 17.0437C28.4311 15.0828 27.3717 13.1249 26.3092 11.1657C25.528 9.72504 24.7498 8.28289 23.9686 6.84088C23.7576 6.45026 23.5467 6.05964 23.3358 5.67212C23.117 5.26588 22.8858 4.87525 22.5545 4.54401C21.3983 3.37993 19.4795 3.15648 18.0889 4.0362C17.492 4.41433 17.0608 4.95028 16.7296 5.56432C16.2218 6.50184 15.7139 7.43933 15.2061 8.37996C14.2811 10.0909 13.3546 11.8018 12.4296 13.5128C11.3155 15.555 10.2108 17.602 9.10144 19.6488C8.05144 21.5894 6.99988 23.5269 5.94832 25.4692C5.17956 26.891 4.40924 28.3098 3.63896 29.7316C3.43584 30.1066 3.23272 30.4816 3.0296 30.8566C2.74523 31.3847 2.5218 31.919 2.45148 32.5284C2.25305 34.2503 3.45928 35.9472 5.12648 36.3691C5.56712 36.4816 6.00148 36.4863 6.44681 36.4863H33.9468H33.9906C34.8968 36.4675 35.7562 36.1269 36.4202 35.5097C37.0609 34.916 37.4359 34.1035 37.5421 33.2441C37.6437 32.4347 37.4093 31.6691 37.028 30.9613L37.0279 30.9608ZM18.4371 13.9528C18.4371 13.0778 19.1528 12.4294 19.9996 12.3904C20.8434 12.3513 21.5621 13.1372 21.5621 13.9528V24.956C21.5621 25.831 20.8464 26.4795 19.9996 26.5185C19.1558 26.5576 18.4371 25.7716 18.4371 24.956V13.9528ZM19.9996 31.8404C19.1215 31.8404 18.409 31.1295 18.409 30.2498C18.409 29.3717 19.1199 28.6592 19.9996 28.6592C20.8777 28.6592 21.5902 29.3701 21.5902 30.2498C21.5902 31.1279 20.8778 31.8404 19.9996 31.8404Z" fill="#F4D638"/>
             </svg>
-            <p>Your node has been paused on <b>{{selectedSatellite.disqualified.toUTCString()}}</b>. If you have any questions regarding this please contact our <a href="https://support.storj.io/hc/en-us/requests/new">support</a>.</p>
+            <p>Your node has been paused on <b>{{getDisqualificationDate}}</b>. If you have any questions regarding this please contact our <a href="https://support.storj.io/hc/en-us/requests/new">support</a>.</p>
         </div>
-        <div v-else-if="disqualifiedSatellites.length > 0" class="info-area__disqualified-info">
+        <div v-else-if="doDisqualifiedSatellitesExist" class="info-area__disqualified-info">
             <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" alt="disqualified image">
                 <path d="M37.0279 30.9608C36.5357 30.0515 36.0404 29.1405 35.5467 28.2265C34.6279 26.5312 33.7108 24.8358 32.7936 23.1405C31.692 21.1092 30.5936 19.0749 29.4936 17.0437C28.4311 15.0828 27.3717 13.1249 26.3092 11.1657C25.528 9.72504 24.7498 8.28289 23.9686 6.84088C23.7576 6.45026 23.5467 6.05964 23.3358 5.67212C23.117 5.26588 22.8858 4.87525 22.5545 4.54401C21.3983 3.37993 19.4795 3.15648 18.0889 4.0362C17.492 4.41433 17.0608 4.95028 16.7296 5.56432C16.2218 6.50184 15.7139 7.43933 15.2061 8.37996C14.2811 10.0909 13.3546 11.8018 12.4296 13.5128C11.3155 15.555 10.2108 17.602 9.10144 19.6488C8.05144 21.5894 6.99988 23.5269 5.94832 25.4692C5.17956 26.891 4.40924 28.3098 3.63896 29.7316C3.43584 30.1066 3.23272 30.4816 3.0296 30.8566C2.74523 31.3847 2.5218 31.919 2.45148 32.5284C2.25305 34.2503 3.45928 35.9472 5.12648 36.3691C5.56712 36.4816 6.00148 36.4863 6.44681 36.4863H33.9468H33.9906C34.8968 36.4675 35.7562 36.1269 36.4202 35.5097C37.0609 34.916 37.4359 34.1035 37.5421 33.2441C37.6437 32.4347 37.4093 31.6691 37.028 30.9613L37.0279 30.9608ZM18.4371 13.9528C18.4371 13.0778 19.1528 12.4294 19.9996 12.3904C20.8434 12.3513 21.5621 13.1372 21.5621 13.9528V24.956C21.5621 25.831 20.8464 26.4795 19.9996 26.5185C19.1558 26.5576 18.4371 25.7716 18.4371 24.956V13.9528ZM19.9996 31.8404C19.1215 31.8404 18.409 31.1295 18.409 30.2498C18.409 29.3717 19.1199 28.6592 19.9996 28.6592C20.8777 28.6592 21.5902 29.3701 21.5902 30.2498C21.5902 31.1279 20.8778 31.8404 19.9996 31.8404Z" fill="#F4D638"/>
             </svg>
@@ -22,35 +22,56 @@
                 <p class="chart-container__title">Bandwidth Used This Month</p>
                 <p class="chart-container__amount"><b>{{bandwidthSummary}}</b></p>
                 <div class="chart-container__chart">
-                    <BandwidthChart />
+                    <BandwidthChart/>
                 </div>
             </div>
             <div class="chart-container">
                 <p class="chart-container__title">Disk Space Used This Month</p>
                 <p class="chart-container__amount"><b>{{storageSummary}}*h</b></p>
                 <div class="chart-container__chart">
-                    <DiskSpaceChart />
+                    <DiskSpaceChart/>
                 </div>
             </div>
         </div>
         <div v-if="selectedSatellite.id">
             <p class="info-area__title">Uptime & Audit Checks by Satellite</p>
             <div class="info-area__checks-area">
-                <ChecksArea label="Uptime Checks" :amount="checks.uptime" info-text="Uptime checks occur to make sure  your node is still online. This is the percentage of uptime checks you’ve passed."/>
+                <ChecksArea
-                <ChecksArea label="Audit Checks" :amount="checks.audit" info-text="Percentage of successful pings/communication between the node & satellite."/>
+                    label="Uptime Checks"
+                    :amount="checks.uptime"
+                    info-text="Uptime checks occur to make sure  your node is still online. This is the percentage of uptime checks you’ve passed."
+                />
+                <ChecksArea
+                    label="Audit Checks"
+                    :amount="checks.audit"
+                    info-text="Percentage of successful pings/communication between the node & satellite."
+                />
             </div>
         </div>
         <div>
             <p class="info-area__title">Remaining on the Node</p>
             <div class="info-area__remaining-space-area">
-                <BarInfo label="Bandwidth Remaining" :amount="bandwidth.remaining"
+                <BarInfo
-                    info-text="of bandwidth left" :current-bar-amount="bandwidth.used" :max-bar-amount="bandwidth.available" />
+                    label="Bandwidth Remaining"
-                <BarInfo label="Disk Space Remaining" :amount="diskSpace.remaining"
+                    :amount="bandwidth.remaining"
-                    info-text="of disk space left" :current-bar-amount="diskSpace.used" :max-bar-amount="diskSpace.available" />
+                    info-text="of bandwidth left"
+                    :current-bar-amount="bandwidth.used"
+                    :max-bar-amount="bandwidth.available"
+                />
+                <BarInfo
+                    label="Disk Space Remaining"
+                    :amount="diskSpace.remaining"
+                    info-text="of disk space left"
+                    :current-bar-amount="diskSpace.used"
+                    :max-bar-amount="diskSpace.available"
+                />
             </div>
         </div>
         <p class="info-area__title">Payout</p>
-        <PayoutArea label="STORJ Wallet Address" :wallet-address="wallet" />
+        <PayoutArea
+            label="STORJ Wallet Address"
+            :wallet-address="wallet"
+        />
     </div>
 </template>
 
@@ -122,6 +143,21 @@ export default class SNOContentFilling extends Vue {
         return this.$store.state.node.disqualifiedSatellites;
     }
 
+    public get isDisqualifiedInfoShown(): boolean {
+        return !!(this.selectedSatellite.id && this.selectedSatellite.disqualified);
+    }
+
+    public get getDisqualificationDate(): string {
+        if (this.selectedSatellite.disqualified) {
+            return this.selectedSatellite.disqualified.toUTCString();
+        }
+
+        return '';
+    }
+
+    public get doDisqualifiedSatellitesExist(): boolean {
+        return this.disqualifiedSatellites.length > 0;
+    }
 }
 </script>
 

web/storagenode/src/app/components/SatelliteSelectionDropdown.vue

@@ -7,7 +7,7 @@
             <!-- loop for rendering satellites -->
             <div class="satellite-selection-overflow-container__satellite-choice"
                 v-for="satellite in satellites" :key="satellite.id"
-                @click.stop="onSatelliteClick(satellite.id)" >
+                @click.stop="onSatelliteClick(satellite.id)">
                 <svg v-if="satellite.disqualified" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="disqualified image">
                     <path d="M16.6625 13.9324C16.441 13.5232 16.2181 13.1133 15.996 12.702C15.5825 11.9391 15.1698 11.1762 14.7571 10.4133C14.2614 9.4992 13.7671 8.58373 13.2721 7.66969C12.7939 6.78728 12.3172 5.90625 11.8391 5.02459C11.4875 4.37631 11.1374 3.72733 10.7858 3.07843C10.6909 2.90265 10.596 2.72688 10.501 2.55249C10.4026 2.36968 10.2985 2.1939 10.1495 2.04484C9.62918 1.521 8.76574 1.42045 8.13997 1.81633C7.87137 1.98648 7.67732 2.22766 7.52826 2.50398C7.29975 2.92587 7.07122 3.34773 6.84271 3.77102C6.42646 4.54093 6.00951 5.31087 5.59326 6.08078C5.09192 6.99977 4.59482 7.92092 4.0956 8.84198C3.6231 9.71527 3.1499 10.5871 2.6767 11.4612C2.33076 12.101 1.98411 12.7394 1.63749 13.3792C1.54608 13.548 1.45468 13.7167 1.36328 13.8855C1.23531 14.1231 1.13477 14.3636 1.10312 14.6378C1.01383 15.4127 1.55663 16.1763 2.30687 16.3661C2.50516 16.4167 2.70062 16.4189 2.90102 16.4189H15.276H15.2957C15.7035 16.4104 16.0902 16.2571 16.3891 15.9794C16.6773 15.7122 16.8461 15.3466 16.8939 14.9599C16.9396 14.5957 16.8341 14.2511 16.6626 13.9326L16.6625 13.9324ZM8.29666 6.27882C8.29666 5.88507 8.6187 5.59327 8.99978 5.5757C9.37947 5.55812 9.70289 5.9118 9.70289 6.27882V11.2303C9.70289 11.624 9.38085 11.9158 8.99978 11.9334C8.62008 11.951 8.29666 11.5973 8.29666 11.2303V6.27882ZM8.99978 14.3282C8.60462 14.3282 8.28399 14.0083 8.28399 13.6124C8.28399 13.2173 8.6039 12.8967 8.99978 12.8967C9.39493 12.8967 9.71556 13.2166 9.71556 13.6124C9.71556 14.0076 9.39495 14.3282 8.99978 14.3282Z" fill="#F4D638"/>
                 </svg>

web/storagenode/src/app/views/DashboardArea.vue

@@ -3,12 +3,12 @@
 
 <template>
     <div class="page">
-        <SNOHeader />
+        <SNOHeader/>
         <div class="content">
-            <SNOContentTitle />
+            <SNOContentTitle/>
-            <SNOContentFilling />
+            <SNOContentFilling/>
         </div>
-        <SNOFooter />
+        <SNOFooter/>
     </div>
 </template>