llms.txt

QuotaWidgetCard

Карточка одной квоты QuotaItem: название, остаток в единицах измерения, ProgressBar потребления и Tooltip с расшифровкой «лимит / потреблено / остаток». Используется внутри QuotaWidget и QuotaWidgetMini, но доступна и отдельно.

Когда использовать

  • Страница ресурса или дашборд, где нужно показать одну конкретную квоту.

  • Собственная раскладка квот, не покрываемая QuotaWidget / QuotaWidgetMini.

  • Список квот проекта целиком:

  • ✅ Оборачивайте карточку в PortalContextProvider — tooltip рендерится в портал.

  • ❌ Передавать noData без onRefresh — состояние ошибки останется без кнопки восстановления.

Анатомия

Прогресс потребления

Цвет ProgressBar зависит от процента потребления (usage / limit):

  • < 70% — зелёный.
  • 70–90% — жёлтый.
  • >= 90% — красный; при remains <= 0 квота считается исчерпанной.

Состояния

  • loading — skeleton вместо значений.
  • noData — InfoBlock с текстом ошибки и кнопкой «Обновить» (onRefresh).

Установка

pnpm add @cloud-ru/ds-uikit-product-quota
import { QuotaWidgetCard } from '@cloud-ru/ds-uikit-product-quota'

Примеры использования

Уровни потребления

Уровни потребленияЗелёный, жёлтый, красный пороги и исчерпанная квота

Network

30%
Available100 GB
Remaining70 GB

RAM

75%
Available100 GB
Remaining25 GB

vCPU

95%
Available100 cores
Remaining5 cores

SSD

100%
Available100 GB
Remaining0 GB
tsx
import { QuotaWidgetCard } from '@cloud-ru/ds-uikit-product-quota';

export function QuotaCardLevels() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <QuotaWidgetCard quota={{ name: 'Network', limit: 100, usage: 30, remains: 70, unitDisplayName: 'GB' }} />
      <QuotaWidgetCard quota={{ name: 'RAM', limit: 100, usage: 75, remains: 25, unitDisplayName: 'GB' }} />
      <QuotaWidgetCard quota={{ name: 'vCPU', limit: 100, usage: 95, remains: 5, unitDisplayName: 'cores' }} />
      <QuotaWidgetCard quota={{ name: 'SSD', limit: 100, usage: 100, remains: 0, unitDisplayName: 'GB' }} />
    </div>
  );
}

Loading

Loading
tsx
import { QuotaWidgetCard } from '@cloud-ru/ds-uikit-product-quota';

export function QuotaCardLoading() {
  return (
    <QuotaWidgetCard loading quota={{ name: 'Network', limit: 100, usage: 30, remains: 70, unitDisplayName: 'GB' }} />
  );
}

Нет данных и повтор

Нет данных и повторnoData показывает InfoBlock; onRefresh возвращает карточку к данным
Network
Failed to load data
tsx
import { QuotaWidgetCard } from '@cloud-ru/ds-uikit-product-quota';
import { useState } from 'react';

const QUOTA = { name: 'Network', limit: 100, usage: 30, remains: 70, unitDisplayName: 'GB' };

export function QuotaCardNoData() {
  const [noData, setNoData] = useState(true);
  const [loading, setLoading] = useState(false);

  const handleRefresh = () => {
    setLoading(true);
    setNoData(false);
    setTimeout(() => setLoading(false), 800);
  };

  return <QuotaWidgetCard quota={QUOTA} noData={noData} loading={loading} onRefresh={handleRefresh} />;
}

Props

Types

PropsQuotaWidgetCardProps
PropTypeDefaultRequiredDescription
data-test-idstring—no
loadingbooleanfalsenoСостояние загрузки (Figma: loading=true)
noDatabooleanfalsenoСостояние «не удалось загрузить данные» (Figma: noData=true)
onRefresh(() => void)—noКолбек кнопки «Обновить» в состоянии noData
quotaQuotaItem—yesОтображаемая квота

QuotaIteminterface

PropTypeDefaultRequiredDescription
limitnumber—yesЛимит квоты
namestring—yesНазвание квоты
remainsnumber—yesОстаток квоты
unitDisplayNamestring—yesЕдиница измерения квоты
usagenumber—yesПотребление квоты

Types

QuotaWidgetCardProps

Storybook

Открыть в Storybook →

Figma

Открыть в Figma →

Смотри также

  • QuotaWidget — выпадающий список карточек.
  • QuotaWidgetMini — аккордеон с карточками.
  • ProgressBar — нижележащий индикатор потребления.