NotificationCard

import { APPEARANCE, NotificationCard } from '@cloud-ru/ds-uikit-product-notification';

export function BasicCard() {
  return (
    <NotificationCard
      id='backup-1729'
      label='Backup'
      appearance={APPEARANCE.Success}
      title='Резервная копия завершена'
      description='Бэкап БД prod-1 (412 ГБ) загружен в холодное хранилище s3://backups-prod/2026-05-27/'
      date='сегодня · 14:32'
    />
  );
}

import { APPEARANCE, NotificationCard } from '@cloud-ru/ds-uikit-product-notification';
import { useState } from 'react';

export function UnreadCard() {
  const [readIds, setReadIds] = useState<Set<string>>(new Set());
  const markRead = (id: string) => setReadIds(prev => (prev.has(id) ? prev : new Set(prev).add(id)));

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <NotificationCard
        id='quota-var-data'
        label='Storage'
        appearance={APPEARANCE.Warning}
        title='Лимит дисковой квоты'
        description='Использовано 92% квоты на /var/data — осталось 38 ГБ из 480 ГБ.'
        date='вчера · 19:04'
        unread={!readIds.has('quota-var-data')}
        onVisible={markRead}
      />
      <NotificationCard
        id='quota-var-log'
        label='Storage'
        appearance={APPEARANCE.Warning}
        title='Лимит дисковой квоты'
        description='Использовано 87% квоты на /var/log — осталось 62 ГБ из 480 ГБ.'
        date='вчера · 17:50'
        unread={!readIds.has('quota-var-log')}
        onVisible={markRead}
      />
    </div>
  );
}

import { APPEARANCE, NotificationCard } from '@cloud-ru/ds-uikit-product-notification';

export function IncidentCard() {
  return (
    <NotificationCard
      id='inc-4821'
      label='INC-4821'
      appearance={APPEARANCE.Error}
      title='Кластер k8s-prod-1 деградирован'
      description='3 из 5 нод недоступны последние 6 минут. Pod scheduling приостановлен.'
      date='сегодня · 03:14'
      link={{ label: 'Открыть инцидент', href: '/incidents/INC-4821' }}
      unread
    />
  );
}

import { APPEARANCE, NotificationCard } from '@cloud-ru/ds-uikit-product-notification';
import { useState } from 'react';

export function DeployFailureCard() {
  const [status, setStatus] = useState<'failed' | 'retrying' | 'dismissed'>('failed');

  if (status === 'dismissed') {
    return null;
  }

  return (
    <NotificationCard
      id='deploy-9217'
      label='api-gateway · v2.18.3'
      appearance={APPEARANCE.Error}
      title='Деплой не прошёл health-check'
      description='Readiness probe вернул 503 на 4 из 6 подов. Traffic не переключён на новую версию.'
      date='5 минут назад'
      primaryButton={{
        label: status === 'retrying' ? 'Запускаю…' : 'Повторить деплой',
        loading: status === 'retrying',
        onClick: () => {
          setStatus('retrying');
          // Если карточку закрыли во время повтора, по таймеру не возвращаем её в `failed`.
          setTimeout(() => setStatus(prev => (prev === 'retrying' ? 'failed' : prev)), 1200);
        },
      }}
      secondaryButton={{
        label: 'Логи пода',
        onClick: () => window.open('/logs/api-gateway/2.18.3', '_blank'),
      }}
      actions={[
        { content: { label: 'Отметить прочитанным' }, onClick: () => setStatus('dismissed') },
        { content: { label: 'Заглушить на 1 час' }, onClick: () => setStatus('dismissed') },
        { content: { label: 'Удалить' }, onClick: () => setStatus('dismissed') },
      ]}
    />
  );
}