spirzen/it-knowledge-base: Огромная энциклопедия по информационным технологиям. Компьютерная, цифровая, сетевая грамотность, языки, данные, структуры, интеграции, архитектура, микросервисы, контейнеризация, оркестрация и всё такое.

src/components/CloudServiceStackPlay.jsx

119 строк4 KB

Spirzen

Components pack 2

23 май 2026, 03:42

23 май 2026, 03:42b7f65e4

import React, {useState} from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';
import clsx from 'clsx';
import DemoShell, {DemoCard} from './shared/DemoShell';
import {demoLoadingFallback} from './shared/demoFallback';
import styles from './CloudServiceStackPlay.module.css';

const MODELS = [
  {
    id: 'onprem',
    label: 'On-Premises',
    tag: 'Коробка',
    you: ['Приложение', 'Данные', 'ОС', 'Серверы', 'Сеть', 'ЦОД'],
    vendor: [],
  },
  {
    id: 'iaas',
    label: 'IaaS',
    tag: 'EC2, Azure VM',
    you: ['Приложение', 'Данные', 'ОС', 'Сред выполнения'],
    vendor: ['Серверы', 'Сеть', 'Хранилище', 'Виртуализация'],
  },
  {
    id: 'paas',
    label: 'PaaS',
    tag: 'Heroku, App Engine',
    you: ['Приложение', 'Данные'],
    vendor: ['ОС', 'Серверы', 'Сеть', 'Runtime', 'Масштабирование'],
  },
  {
    id: 'saas',
    label: 'SaaS',
    tag: 'M365, Google Workspace',
    you: ['Настройки', 'Контент пользователя'],
    vendor: ['Приложение', 'Данные (у вендора)', 'Инфраструктура', 'Обновления'],
  },
];

function CloudServiceStackPlayInner() {
  const [model, setModel] = useState('saas');

  const m = MODELS.find((x) => x.id === model) ?? MODELS[3];

  return (
    <DemoShell className={styles.root}>
      <DemoCard
        title="Модели поставки ПО"
        subtitle="Кто управляет приложением, платформой и инфраструктурой"
      >
        <div className={styles.chips}>
          {MODELS.map((item) => (
            <button
              key={item.id}
              type="button"
              className={clsx(styles.chip, model === item.id && styles.chipActive)}
              onClick={() => setModel(item.id)}
            >
              {item.label}
            </button>
          ))}
        </div>
        <p className={styles.tag}>
          Примеры: <strong>{m.tag}</strong>
        </p>

        <div className={styles.matrix}>
          <div className={styles.col}>
            <h4>Вы управляете</h4>
            <ul>
              {m.you.map((row) => (
                <li key={row} className={styles.you}>
                  {row}
                </li>
              ))}
            </ul>
          </div>
          <div className={styles.col}>
            <h4>Провайдер / вендор</h4>
            <ul>
              {m.vendor.length === 0 ? (
                <li className={styles.none}>— всё на вашей стороне</li>
              ) : (
                m.vendor.map((row) => (
                  <li key={row} className={styles.vendor}>
                    {row}
                  </li>
                ))
              )}
            </ul>
          </div>
        </div>

        <div className={styles.stackViz}>
          {['Приложение', 'Данные', 'Runtime', 'ОС', 'Инфраструктура'].map((layer) => {
            const yours = m.you.some((x) => x.toLowerCase().includes(layer.toLowerCase().slice(0, 4)));
            const theirs = m.vendor.some((x) =>
              x.toLowerCase().includes(layer.toLowerCase().slice(0, 4)),
            );
            const owner = theirs && !yours ? 'vendor' : 'you';
            return (
              <div key={layer} className={clsx(styles.stackRow, styles[`owner_${owner}`])}>
                <span>{layer}</span>
                <span>{owner === 'you' ? 'ваша зона' : 'облако / вендор'}</span>
              </div>
            );
          })}
        </div>
      </DemoCard>
    </DemoShell>
  );
}

export default function CloudServiceStackPlay() {
  return (
    <BrowserOnly fallback={demoLoadingFallback('Загрузка моделей облака…')}>
      {() => <CloudServiceStackPlayInner />}
    </BrowserOnly>
  );
}