web/satellite: new dashboard limit visual component added

also added vue filter to transform number of bytes into readable label

Change-Id: I416cf477fb94059c0f2ceffef755aa7fceacc352

web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue

@@ -16,6 +16,14 @@
             <p class="project-dashboard__subtitle" aria-roledescription="empty-title">
                 Welcome to Storj :) <br> You’re ready to experience the future of cloud storage
             </p>
+        </template>
+        <p class="project-dashboard__limits">
+            <span class="project-dashboard__limits--bold">Storage Limit</span>
+            per month: {{ limits.storageLimit | bytesToBase10String }} |
+            <span class="project-dashboard__limits--bold">Bandwidth Limit</span>
+            per month: {{ limits.bandwidthLimit | bytesToBase10String }}
+        </p>
+        <template v-if="!isDataFetching && !limits.objectCount">
             <VButton
                 class="project-dashboard__upload-button"
                 label="Upload"
@@ -431,6 +439,15 @@ export default class NewProjectDashboard extends Vue {
         background-repeat: no-repeat;
         font-family: 'font_regular', sans-serif;
 
+        &__limits {
+            font-size: 14px;
+            margin-top: 11px;
+
+            &--bold {
+                font-family: 'font_bold', sans-serif;
+            }
+        }
+
         &__loader {
             display: inline-block;
         }
@@ -459,7 +476,7 @@ export default class NewProjectDashboard extends Vue {
         }
 
         &__upload-button {
-            margin-top: 24px;
+            margin-top: 16px;
         }
 
         &__stats-header {

web/satellite/src/main.ts

@@ -5,6 +5,7 @@ import Vue from 'vue';
 import VueClipboard from 'vue-clipboard2';
 
 import { NotificatorPlugin } from '@/utils/plugins/notificator';
+import { Size } from "@/utils/bytesSize";
 
 import App from './App.vue';
 import { router } from './router';
@@ -74,6 +75,13 @@ Vue.filter('centsToDollars', (cents: number): string => {
     return `$${(cents / 100).toFixed(2)}`;
 });
 
+/**
+ * Converts bytes to base-10 types.
+ */
+Vue.filter('bytesToBase10String', (amountInBytes: number): string => {
+    return `${Size.toBase10String(amountInBytes)}`;
+});
+
 new Vue({
     router,
     store,

web/satellite/src/utils/bytesSize.ts

@@ -8,6 +8,7 @@ export enum Memory {
     GB = 1e9,
     TB = 1e12,
     PB = 1e15,
+    EB = 1e18,
 }
 
 export enum Dimensions {
@@ -56,4 +57,31 @@ export class Size {
             this.label = Dimensions.PB;
         }
     }
+
+    /**
+     * Base10String converts size to a string using base-10 prefixes.
+     * @param size in bytes
+     */
+    public static toBase10String(size: number): string {
+        const decimals = 2;
+
+        const _size = Math.abs(size);
+
+        switch (true) {
+        case _size >= Memory.EB * 2 / 3:
+            return `${parseFloat((size / Memory.EB).toFixed(decimals))}EB`;
+        case _size >= Memory.PB * 2 / 3:
+            return `${parseFloat((size / Memory.PB).toFixed(decimals))}PB`;
+        case _size >= Memory.TB * 2 / 3:
+            return `${parseFloat((size / Memory.TB).toFixed(decimals))}TB`;
+        case _size >= Memory.GB * 2 / 3:
+            return `${parseFloat((size / Memory.GB).toFixed(decimals))}GB`;
+        case _size >= Memory.MB * 2 / 3:
+            return `${parseFloat((size / Memory.MB).toFixed(decimals))}MB`;
+        case _size >= Memory.KB * 2 / 3:
+            return `${parseFloat((size / Memory.KB).toFixed(decimals))}KB`;
+        default:
+            return `${size}B`;
+        }
+    }
 }