web/satellite: fixes for limit cards on project dashboard

Show 0 available instead of negative number on dashboard when user exceeds storage/bandwidth limits.
Change link label based on threshold.
Add info icon + tooltip to "download" card indicating that the usage is only for the current billing period.

Issue:
#6828

Change-Id: Ibc89f855a318f8420ee035f8243115a107b0d171

web/satellite/src/components/UsageProgressComponent.vue

@@ -7,6 +7,14 @@
             <v-card-title class="d-flex align-center">
                 <component :is="iconComponents[icon]" v-if="icon" class="mr-2" width="16" height="16" bold />
                 {{ title }}
+                <v-tooltip v-if="extraInfo" width="250" location="bottom">
+                    <template #activator="activator">
+                        <v-icon v-bind="activator.props" size="16" :icon="mdiInformationOutline" class="ml-2 text-medium-emphasis" />
+                    </template>
+                    <template #default>
+                        <p>{{ extraInfo }}</p>
+                    </template>
+                </v-tooltip>
             </v-card-title>
         </template>
         <v-card-item>
@@ -28,8 +36,9 @@
 </template>
 
 <script setup lang="ts">
-import { VCard, VCardItem, VProgressLinear, VRow, VCol, VCardTitle } from 'vuetify/components';
+import { VCard, VCardItem, VProgressLinear, VRow, VCol, VCardTitle, VTooltip, VIcon } from 'vuetify/components';
 import { computed } from 'vue';
+import { mdiInformationOutline } from '@mdi/js';
 
 import IconCloud from '@/components/icons/IconCloud.vue';
 import IconArrowDown from '@/components/icons/IconArrowDown.vue';
@@ -45,6 +54,7 @@ const props = defineProps<{
     available: string;
     cta: string;
     icon?: keyof typeof iconComponents;
+    extraInfo?: string;
 }>();
 
 const emit = defineEmits<{

web/satellite/src/views/Dashboard.vue

@@ -92,7 +92,7 @@
                     :used="`${usedLimitFormatted(limits.storageUsed)} Used`"
                     :limit="`Limit: ${usedLimitFormatted(limits.storageLimit)}`"
                     :available="`${usedLimitFormatted(availableStorage)} Available`"
-                    :cta="!isPaidTier && billingEnabled ? 'Need more?' : 'Edit Limit'"
+                    :cta="getCTALabel(storageUsedPercent)"
                     @cta-click="onNeedMoreClicked(LimitToChange.Storage)"
                 />
             </v-col>
@@ -104,7 +104,8 @@
                     :used="`${usedLimitFormatted(limits.bandwidthUsed)} Used`"
                     :limit="`Limit: ${usedLimitFormatted(limits.bandwidthLimit)} per month`"
                     :available="`${usedLimitFormatted(availableEgress)} Available`"
-                    :cta="!isPaidTier && billingEnabled ? 'Need more?' : 'Edit Limit'"
+                    :cta="getCTALabel(egressUsedPercent)"
+                    extra-info="Your download usage limit is applied only for the current billing period."
                     @cta-click="onNeedMoreClicked(LimitToChange.Bandwidth)"
                 />
             </v-col>
@@ -116,7 +117,7 @@
                     :used="`${limits.segmentUsed.toLocaleString()} Used`"
                     :limit="`Limit: ${limits.segmentLimit.toLocaleString()}`"
                     :available="`${availableSegment.toLocaleString()} Available`"
-                    :cta="!isPaidTier && billingEnabled ? 'Need more?' : 'Learn more'"
+                    :cta="getCTALabel(segmentUsedPercent, true)"
                     @cta-click="onSegmentsCTAClicked"
                 />
             </v-col>
@@ -469,7 +470,8 @@ const limits = computed((): ProjectLimits => {
  * Returns remaining segments available.
  */
 const availableSegment = computed((): number => {
-    return limits.value.segmentLimit - limits.value.segmentUsed;
+    const diff = limits.value.segmentLimit - limits.value.segmentUsed;
+    return diff < 0 ? 0 : diff;
 });
 
 /**
@@ -483,7 +485,8 @@ const segmentUsedPercent = computed((): number => {
  * Returns remaining egress available.
  */
 const availableEgress = computed((): number => {
-    return limits.value.bandwidthLimit - limits.value.bandwidthUsed;
+    const diff = limits.value.bandwidthLimit - limits.value.bandwidthUsed;
+    return diff < 0 ? 0 : diff;
 });
 
 /**
@@ -497,7 +500,8 @@ const egressUsedPercent = computed((): number => {
  * Returns remaining storage available.
  */
 const availableStorage = computed((): number => {
-    return limits.value.storageLimit - limits.value.storageUsed;
+    const diff = limits.value.storageLimit - limits.value.storageUsed;
+    return diff < 0 ? 0 : diff;
 });
 
 /**
@@ -518,7 +522,8 @@ const bucketsUsedPercent = computed((): number => {
  * Returns remaining buckets available.
  */
 const availableBuckets = computed((): number => {
-    return limits.value.bucketsLimit - limits.value.bucketsUsed;
+    const diff = limits.value.bucketsLimit - limits.value.bucketsUsed;
+    return diff < 0 ? 0 : diff;
 });
 
 /**
@@ -663,6 +668,28 @@ function onNeedMoreClicked(source: LimitToChange): void {
     isEditLimitDialogShown.value = true;
 }
 
+/**
+ * Returns CTA label based on paid tier status and current usage.
+ */
+function getCTALabel(usage: number, isSegment = false): string {
+    if (!isPaidTier.value && billingEnabled.value) {
+        if (usage >= 100) {
+            return 'Upgrade now';
+        }
+        if (usage >= 80) {
+            return 'Upgrade';
+        }
+        return 'Need more?';
+    }
+
+    if (isSegment) return 'Learn more';
+
+    if (usage >= 80) {
+        return 'Increase limits';
+    }
+    return 'Edit Limit';
+}
+
 /**
  * Conditionally opens the upgrade dialog or docs link.
  */