Compare commits

..

1 Commits

Author SHA1 Message Date
Левченко Людмила Алексеевна 745d14cde5 Описание gold-образа 2026-01-21 16:36:39 +03:00
108 changed files with 2247 additions and 2374 deletions
Submodule beecloud-docs deleted from df88416247
+1145 -1584
View File
File diff suppressed because it is too large Load Diff
+10 -11
View File
@@ -15,17 +15,16 @@
},
"license": "MIT",
"dependencies": {
"@beeline/design-tokens": "^1.31.6",
"vue": "^3.5.0"
"@beeline/design-tokens": "1.31.0",
"vue": "3.4.7"
},
"devDependencies": {
"@docsearch/css": "4.1.0",
"@types/node": "^22.0.0",
"@vitejs/plugin-vue": "^6.0.3",
"sass": "^1.70.0",
"typescript": "^5.9.3",
"vite-plugin-static-copy": "^3.1.4",
"vitepress": "^1.6.4",
"vitepress-plugin-tabs": "^0.7.3"
"@docsearch/css": "3.3.0",
"@types/node": "20.10.7",
"@vitejs/plugin-vue": "4.3.4",
"sass": "1.69.7",
"typescript": "^5.8.3",
"vitepress": "1.0.0-rc.40",
"vitepress-plugin-tabs": "0.5.0"
}
}
}
+2 -29
View File
@@ -1,9 +1,6 @@
import { defineConfig } from 'vitepress'
import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import { overrideComponents } from './override-components'
import { resolve } from 'node:path'
import { fileURLToPath, URL } from 'node:url'
const gitlab = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
@@ -50,7 +47,6 @@ export default defineConfig({
description: "Документация Beeline Cloud",
head: [['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/bee-favicon.png' }]],
base: typeof new_version !== 'undefined' ? '/' : '/docs/',
appearance: false,
markdown: {
config(md) {
md.use(tabsMarkdownPlugin)
@@ -58,31 +54,8 @@ export default defineConfig({
},
vite: {
resolve: {
alias: [
...overrideComponents(),
{
find: '@',
replacement: fileURLToPath(new URL('./theme', import.meta.url))
},
],
},
plugins: [
viteStaticCopy({
targets: [
{
src: resolve(__dirname, '../../node_modules/@beeline/design-tokens/assets/fonts'),
dest: 'assets',
},
],
}),
],
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler',
},
},
},
alias: overrideComponents(),
}
},
locales: {
root: {
@@ -76,7 +76,7 @@ const pageName = computed(() =>
</template>
<style scoped lang="scss">
@use '@/scss/helpers/media';
@use 'src/assets/scss/app/helpers/media';
.VPDoc {
padding: 32px 24px 96px;
@@ -1,6 +1,6 @@
@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as theme;
@use '@/scss/helpers/media';
@use 'src/assets/scss/app/helpers/media';
.VPSidebar {
--vp-sidebar-bg-color: var(--vp-c-bg);
@@ -1,8 +1,3 @@
@use '@beeline/design-tokens/scss/font-face';
@use "@beeline/design-tokens/scss/iconfont/iconfont" with (
$font-path-iconfont: '../assets/fonts/iconfont'
);
@use "@beeline/design-tokens/scss/iconfont/icons";
@use '@beeline/design-tokens/scss/tokens/themes/dark';
@use '@beeline/design-tokens/scss/tokens/themes';
+57
View File
@@ -0,0 +1,57 @@
@use "@beeline/design-tokens/scss/iconfont/iconfont" with (
$font-path-iconfont: '/fonts/iconfont'
);
@use "@beeline/design-tokens/scss/iconfont/icons";
$font-path-beeline-sans: '/fonts/beeline-sans' !default;
@mixin beeline-sans-font($type, $weight, $style: normal) {
@font-face {
font-family: "Beeline Sans";
src:url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.woff2') format('woff2'),
url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.woff') format('woff'),
url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.ttf') format('truetype');
font-weight: $weight;
font-style: $style;
}
}
@mixin beeline-sans-font-pair($type, $weight) {
@include beeline-sans-font($type, $weight);
}
@include beeline-sans-font-pair(Regular, 400);
@include beeline-sans-font-pair(Medium, 500);
@include beeline-sans-font-pair(Bold, 700);
@include beeline-sans-font-pair(Black, 900);
$font-path-roboto-mono: '/fonts/roboto-mono' !default;
@mixin roboto-mono-font($type, $weight, $style: normal) {
@font-face {
font-family: "Roboto Mono";
src:url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.woff2') format('woff2'),
url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.woff') format('woff'),
url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.ttf') format('truetype');
font-weight: $weight;
font-style: $style;
}
}
@mixin roboto-mono-font-pair($type, $weight) {
@include roboto-mono-font($type, $weight);
}
@include roboto-mono-font-pair(Light, 300);
@include roboto-mono-font-pair(Regular, 400);
@include roboto-mono-font-pair(Medium, 500);
@include roboto-mono-font-pair(Bold, 700);
@@ -1 +0,0 @@
@forward "media";
+2 -1
View File
@@ -1,3 +1,4 @@
@use "design-tokens";
@use "fonts";
@use "design-system";
@use "vars";
@use "components";
-87
View File
@@ -1,87 +0,0 @@
# Cloud PostgreSQL
## Назначение сервиса
**Cloud PostgreSQL** - это управляемый облачный сервис реляционной базы данных PostgreSQL. Он позволяет развернуть и использовать отказоустойчивый кластер базы данных без необходимости самостоятельно настраивать серверы, репликацию и механизмы отказоустойчивости.
PostgreSQL - это современная система управления базами данных, которая поддерживает стандарт SQL и используется для хранения и обработки данных приложений.
В **Cloud PostgreSQL** все основные операции по управлению кластером выполняются автоматически.
Сервис самостоятельно:
- управляет ролями серверов базы данных (основной сервер и реплики);
- отслеживает состояние узлов;
- автоматически переключает основной сервер при сбоях.
Для обеспечения стабильной работы сервиса используется несколько инфраструктурных компонентов:
- **Patroni** - управляет кластером PostgreSQL и автоматическим переключением при отказах;
- **etcd** - хранит состояние кластера и обеспечивает согласованность работы узлов;
- **HAProxy** - обеспечивает единую точку подключения и распределяет клиентские подключения между узлами.
Подключение к базе данных выполняется через прокси-узлы сервиса. Пользователю не требуется подключаться к отдельным серверам кластера — все операции производятся через единую точку доступа.
Для управления базами данных и пользователями доступен web-интерфейс **pgAdmin**, позволяющий выполнять администрирование непосредственно через браузер.
## Конфигурации кластера
Сервис Cloud PostgreSQL поддерживает версии СУБД с 13 по 17 включительно.
Кластер предоставляется в архитектуре Primary–Standby, которая обеспечивает:
- синхронную репликацию данных;
- повышенную отказоустойчивость.
В рамках данной конфигурации создаётся кластер из виртуальных серверов, включающий:
- **Primary** (основной сервер) — обязательный узел, на котором выполняются операции записи данных;
- **Replica** (реплики) — дополнительные узлы (от 0 до 4), создаваемые по желанию пользователя.
Реплики являются полноценными участниками кластера PostgreSQL и могут использоваться для выполнения запросов, не изменяющих данные (например, SELECT).
В многоузловой конфигурации серверы кластера размещаются на разных физических хостах гипервизора, что повышает устойчивость сервиса к отказам оборудования.
## Режимы репликации
По умолчанию фиксация изменений выполняется в **синхронном режиме**. Это означает, что операция записи считается завершённой только после того, как данные будут зафиксированы как на основном сервере, так и на одной из реплик.
Если в кластере настроено несколько реплик, синхронный режим применяется только к одной из них. Остальные реплики работают в асинхронном режиме — изменения передаются на них без ожидания подтверждения.
При необходимости режим репликации может быть изменён на полностью **асинхронный**. В этом случае изменения сначала фиксируются на основном сервере, а затем передаются на реплики с задержкой.
## Доступ к серверам и оптимизация соединений
Прямой доступ к серверам кластера (например, по протоколу SSH) не предоставляется. Пользователь взаимодействует с базой данных исключительно через точки подключения, предоставленные сервисом.
На каждом узле кластера установлен пулер соединений **PgBouncer**, который может использоваться для ускорения работы приложений за счёт оптимизации подключений к базе данных.
::: warning Примечание
Использование PgBouncer не является обязательным - подключение возможно как напрямую к PostgreSQL, так и через пулер, а также одновременно обоими способами.
:::
## Возможности сервиса
**Cloud PostgreSQL** предоставляет набор возможностей, позволяющих использовать PostgreSQL в облаке без необходимости самостоятельного администрирования инфраструктуры.
Сервис обеспечивает:
- автоматическое управление кластером PostgreSQL;
- высокую доступность за счёт репликации и автоматического переключения primary-узла;
- единую точку подключения к базе данных через прокси;
- автоматическое переключение при отказе узлов кластера без вмешательства пользователя;
- web-доступ к управлению базами данных и пользователями через pgAdmin;
- совместимость со стандартными клиентскими инструментами PostgreSQL;
- возможность установки расширений PostgreSQL в базу данных.
## Сценарии использования сервиса
**Cloud PostgreSQL** подходит для использования в системах, где требуется надёжное хранение данных и упрощённое управление инфраструктурой базы данных.
Сервис может применяться в следующих сценариях:
- размещение production-баз данных с высокими требованиями к доступности;
- использование PostgreSQL в микросервисной архитектуре с единой точкой подключения к базе данных;
- хранение критичных данных с минимальным временем простоя при отказах инфраструктуры;
- быстрое развёртывание PostgreSQL-кластера без необходимости ручной настройки репликации и failover;
- администрирование баз данных через веб-интерфейс без прямого доступа к серверам кластера.
-205
View File
@@ -1,205 +0,0 @@
# О разделе
Данный раздел содержит описание технических параметров кластера PostgreSQL и порядок их первичной конфигурации.
Настройка указанных параметров выполняется администратором облачного провайдера на этапе развёртывания сервиса. Пользователь не имеет прямого доступа к их самостоятельной установке.
Перед созданием кластера клиент предоставляет перечень требуемых параметров менеджеру. Администратор облачного провайдера выполняет конфигурацию в соответствии с согласованными требованиями.
## Выбор типа и размера дискового хранилища
Производительность базы данных напрямую зависит от скорости, с которой она может читать и записывать данные на диск. При заказе кластера необходимо выбрать тип дискового хранилища, который определит максимальную скорость работы (IOPS) и время отклика.
**IOPS (Input/Output Operations Per Second)** — количество операций чтения или записи, которые диск может выполнить за секунду. Чем выше этот показатель, тем быстрее база данных обрабатывает запросы.
## Доступные типы хранилищ:
| Название | Лимит IOPS | Время отклика |
| ---------------| ------------------ | ------------- |
| **Fast SAS** | до 2 IOPS на 1 ГБ | до 10 мс |
| **SSD** | до 5 IOPS на 1 ГБ | до 7 мс |
| **Fast SSD** | до 10 IOPS на 1 ГБ | до 5 мс |
| **Ultra NVMe** | до 25 IOPS на 1 ГБ | до 3 мс |
::: warning Примечание
После выбора типа диска необходимо указать объем дискового хранилища, который будет выделен под данные кластера PostgreSQL. Минимальный объем - 50 ГБ.
:::
## Конфигурация вычислительных ресурсов
В данном разделе определяются вычислительные мощности кластера: процессорные ресурсы, оперативная память и количество серверов (нод), из которых будет состоять кластер PostgreSQL.
### Количество нод в кластере
Количество нод определяет отказоустойчивость кластера и возможность распределять запросы на чтение между репликами. Чем больше нод, тем выше надёжность и производительность операций чтения.
Количество нод выбирается в диапазоне **от 1 до 5**.
### Процессор (CPU)
Процессор — это вычислительная мощность, выделяемая каждой ноде кластера. Количество vCPU определяет, насколько быстро база данных сможет:
- обрабатывать запросы;
- выполнять сложные операции (сортировки, объединения таблиц);
- обслуживать одновременные подключения.
Доступный диапазон: **от 2 до 24 vCPU** на ноду.
### Оперативная память (RAM)
Оперативная память — один из ключевых ресурсов для производительности базы данных. Данные, помещающиеся в RAM, обрабатываются максимально быстро, без обращения к диску.
Доступный диапазон: **от 4 до 768 ГБ RAM** на ноду.
### Доступ в интернет
При заказе сервиса можно выбрать пропускную способность канала связи, через который будет осуществляться доступ к кластеру PostgreSQL из сети интернет.
**Доступные варианты скорости:**
- 50 Мбит/с;
- 100 Мбит/с;
- 200 Мбит/с;
- 300 Мбит/с;
- 400 Мбит/с;
- 500 Мбит/с;
- 1000 Мбит/с (1 Гбит/с).
::: warning Примечание
Для выбранного канала предоставляется статический белый IP-адрес.
:::
## Параметры конфигурации IPSEC
Ниже приведены основные параметры, задаваемые при развёртывании кластера PostgreSQL. Часть параметров определяется клиентом на этапе заказа услуги, часть — фиксирована и не подлежит изменению.
### Данные о конфигурации IPSEC
Параметры подключения (имя туннеля, устройство, публичный IP-адрес) заполняются вручную на основании информации, предоставленной заказчиком.
### Версия IKE (Internet Key Exchange)
Версия IKE выбирается из выпадающего списка, который содержит два значения:
- **IKE v1** — более ранняя версия протокола;
- **IKE v2** — более современная версия, обеспечивающая лучшую устойчивость соединения и более гибкую обработку ошибок.
Рекомендуется использовать IKE v2, если оборудование заказчика это поддерживает.
### Метод аутентификации
Метод аутентификации выбирается из выпадающего списка, который содержит два варианта:
- **PSK** (Pre-Shared Key) — аутентификация с использованием заранее согласованного общего ключа;
- **Certificate** (сертификат) — аутентификация с использованием цифровых сертификатов.
## Этап 1 - установка защищенного соединения
На данном этапе задаются параметры шифрования и аутентификации для защищённого канала связи. Все параметры выбираются вручную из выпадающих списков.
### Алгоритм хэширования
Определяет алгоритм хэширования для защиты управляющего канала. Параметр заполняется вручную из выпадающего списка:
- **SHA1** — формирует хэш длиной 160 бит, имеет коллизии (уязвимости), в современных системах считается устаревшим, используется только для совместимости со старым оборудованием.
- **SHA2-256** — формирует хэш длиной 256 бит, существенно более устойчив к атакам, оптимальный баланс между безопасностью и производительностью.
- **SHA2-384** — длина хэша составляет 384 бита, имеет повышенную криптостойкость, требует больше вычислительных ресурсов, чем SHA-1 и SHA2-256. Используется в средах с повышенными требованиями к безопасности.
- **SHA2-512** — длина хэша составляет 512 бит, обеспечивает самый высокий уровень стойкости из перечисленных, создает наибольшую нагрузку на процессор. Обычно применяется в системах с повышенными требованиями к криптографии.
### Шифрование (Hash)
Определяет алгоритм симметричного шифрования. Параметр заполняется вручную из выпадающего списка:
AES 128 — использует 128-битный ключ, обеспечивает быстрое шифрование, имеет достаточный уровень безопасности для большинства задач.
AES 256 — использует 256-битный ключ, обеспечивает более высокую криптостойкость, оказывает немного большую нагрузку на CPU.
AES GCM 128 / AES GCM 192 / AES GCM 256 — данные алгоритмы совмещают шифрование и контроль целостности, обладают более современным режимом работы, считаются более эффективными по производительности, рекомендуются в современных конфигурациях. Разница между алгоритмами — в длине ключа.
### DH Group (группа Диффи — Хеллмана)
Механизм Diffie-Hellman используется для безопасной генерации общего секретного ключа между сторонами туннеля без передачи этого ключа по сети. Чем выше номер группы и длина ключа, тем выше криптографическая стойкость соединения.
Параметр заполняется вручную из выпадающего списка:
group 2;
group 5;
group 14;
group 15;
group 16;
group 19;
group 20;
group 21.
### IKE Mode (только для IKEv1)
Параметр **IKE Mode** определяет способ установления соединения на этапе 1 при использовании протокола IKEv1.
Доступны два режима: Main и Aggressive. Они отличаются количеством сообщений при установке соединения и уровнем защиты идентификационных данных.
- **Main Mode** — стандартный и более безопасный режим работы IKEv1;
- **Aggressive Mode** — упрощённый и ускоренный режим установления соединения с более низким уровнем защиты данных.
### Время жизни (Lifetime)
Параметр определяет, как долго действуют согласованные ключи в рамках первой фазы. После истечения времени выполняется повторная генерация ключей.
## Этап 2 - передача данных
Этап 2 IPsec-соединения отвечает за шифрование и защиту пользовательского трафика после того, как защищённый канал был установлен на этапе 1. Этот этап регулирует передачу данных между сторонами через безопасный туннель, который обеспечивает конфиденциальность и целостность данных.
### Алгоритм хэширование (Hash)
Аналогично этапу 1, параметр Hash используется для защиты целостности передаваемых данных. Он обеспечивает проверку того, что данные не были изменены при передаче. Доступны следующие алгоритмы:
- SHA1;
- SHA2-256;
- SHA2-384;
- SHA2-512.
## Шифрование
Этап 2 отвечает за шифрование пользовательского трафика. Это важнейший параметр, который защищает данные при их передаче по сети. Доступны следующие алгоритмы:
- AES 128;
- AES 256;
- AES GCM 128;
- AES GCM 192;
- AES GCM 256.
### PFS
**Enable perfect forward secrecy (PFS)** - параметр, активирующий генерацию нового ключа на этапе 2. При включенном PFS группа Diffie-Hellman (DH) будет такая же как и на 1-й фазе.
Данный параметр представлен в виде чекбокса. При его включении:
- на этапе 2 выполняется дополнительный обмен ключами DH;
- для каждой новой IPsec-сессии формируется новый независимый криптографический секрет;
- ключи шифрования пользовательского трафика не зависят от ключей этапа 1.
### DH Group (группа Диффи — Хеллмана)
Группа DH определяет параметры обмена ключами между сторонами. Чем выше номер группы, тем выше криптографическая стойкость и безопасность обмена.
Данный параметр так же содержит в себе выпадающий список, состоящий из следующих значений:
- group 2;
- group 5;
- group 14;
- group 15;
- group 16;
- group 19;
- group 20;
- group 21.
### Время жизни (Lifetime)
Определяет, как долго действуют согласованные ключи в рамках второй фазы.
- рекомендуемое значение: 3600 секунд (1 час);
- после истечения времени выполняется повторная генерация ключей.
### Префиксы локальной сети заказчика
Этот параметр определяет, какие сети на стороне заказчика будут маршрутизироваться через **IPsec-туннель**. Префиксы задаются в формате `192.168.1.0/24`, который позволяет указать диапазон IP-адресов.
-86
View File
@@ -1,86 +0,0 @@
# Общая схема подключения
Доступ к кластеру PostgreSQL осуществляется через прокси. Клиентские подключения принимаются прокси, который маршрутизирует трафик к соответствующим узлам кластера (master или replica) в зависимости от выбранного порта. Прямое подключение к узлам базы данных не используется.
Подключение к кластеру **Cloud PostgreSQL** осуществляется через прокси-сервер. Прокси является единой точкой входа для всех клиентских подключений и принимает входящие соединения от приложений, административных инструментов и пользователей.
В зависимости от выбранного порта прокси автоматически направляет трафик:
- на активный primary-узел - для операций чтения и записи
- на реплики - для операций только чтения
Прямое подключение к отдельным узлам базы данных не используется и не предоставляется. Взаимодействие с кластером всегда выполняется через прокси-сервер.
## Подключение к базе данных
Для подключения к базе данных необходимо использовать IP-адрес прокси-сервера, который предоставляется после заказа услуги.
Этот IP-адрес является единой точкой входа для работы с кластером PostgreSQL. Все подключения к базе данных - как из приложений, так и из клиентских инструментов - выполняются через него.
Использование других IP-адресов или попытка прямого подключения к отдельным узлам кластера не предусмотрены.
## Доступные порты
Для разных типов нагрузки используются разные порты:
|Порт |Назначение |
|------|-----------------------------------------|
|5432 |Primary (чтение и запись) |
|15432 |Replica (только чтение) |
|6432 |Primary через PgBouncer (чтение и запись)|
|16432 |Replica через PgBouncer (только чтение) |
### Особенности работы портов
- Порты для чтения и записи (5432, 6432) всегда направляют трафик на активный primary-узел. При смене primary переключение происходит автоматически;
- Порты только для чтения (15432, 16432) направляют трафик на активные реплики. Если реплик несколько, нагрузка распределяется между ними по принципу round-robin;
- Если в кластере отсутствуют реплики, порты для чтения не используются - подключение по ним не устанавливается.
### Рекомендации по выбору порта
- Для OLTP-нагрузки и большого количества соединений рекомендуется использовать **порты PgBouncer (6432 или 16432)**;
- Для операций записи используйте **master-порты (5432 или 6432)**;
- Для read-only запросов можно использовать **replica-порты (15432 или 16432)**.
## Доступ к pgAdmin
Для администрирования базы данных используется web-интерфейс pgAdmin.
Доступ осуществляется по DNS-имени, которое нужно прописать локально в инфраструктуре откуда будет происходить доступ к web-интерфейсу сервиса:
`10.X.X.4 <domain>.cloud-pg.dfcloud.ru`
После добавления записи pgAdmin будет доступен по адресу:
`https://<domain>.cloud-pg.dfcloud.ru`
Авторизация выполняется с использованием учётных данных, предоставленных вместе с доступом к сервису.
::: warning Важно
- подключение к базе данных возможно только через указанный прокси-IP;
- в интерфейсе pgAdmin уже добавлен сервер базы данных, созданный для данной инсталляции. Для подключения требуется ввести пароль от учётной записи базы данных;
- pgAdmin предназначен для администрирования и не рекомендуется для выполнения тяжёлых или длительных запросов в production-среде.
:::
## Примеры подключения к PostgreSQL
Подключение к primary:
`psql -h 10.X.X.4 -p 5432 -U <username> -d <database>`
Подключение через PgBouncer:
`psql -h 10.X.X.4 -p 6432 -U <username> -d <database>`
### Подключение через DBeaver / DataGrip
При создании подключения укажите:
- Host: 10.X.X.4;
- Port: 5432 или 6432;
- Database: `<database>`;
- User / Password: согласно выданным доступам;
- Тип подключения: PostgreSQL.
### Пример строки подключения
Primary:
`postgresql://<username>:<password>@10.X.X.4:5432/<database>`
Через PgBouncer:
`postgresql://<username>:<password>@10.X.X.4:6432/<database>`
-98
View File
@@ -1,98 +0,0 @@
# Метрики
## Инструкция по подключению к Grafana.
Для того, чтобы получить доступ к метрикам кластера, предварительно необходимо запросить доступы. Когда доступы будут получены, появится возможность перейти в систему мониторинга.
Ссылка для входа - https://metrics.dfcloud.ru.
При переходе по ссылке откроется главная страница Grafana. Для того чтобы найти нужные метрики, необходимо проделать следующий путь:
1. Нажать на кнопку "Dashboards", которая располагается в левом боковом меню.
2. В открывшемся списке всех имеющихся дашбордов необходимо выбрать папку "Cloud PostgreSQL".
3. Внутри будет элемент **Cloud PostgreSQL** - это именно тот дашборд, который нам нужен.
Перейдя на дашборд Cloud PostgreSQL, открываются все метрики кластера.
В верхней части дашборда расположены все селекторы, с помощью которых можно управлять отображаемыми данными:
- **InstallationID** - выбор одного из кластеров. Если у клиента несколько кластеров PostgreSQL, он может выбирать тот кластер, по которому хочет посмотреть информацию;
- **Cluster node name** - выбор конкретной ноды кластера. Значения графиков меняются в зависимости от того, какой хост выбран. Этот селектор влияет на все графики, кроме блока Patroni;
- **Database** - выбор базы данных, по которой можно смотреть показатели метрик;
- **Lock table** - данный селектор применим не для всех графиков. С его помощью можно выбирать, какой тип блокировки использовать для отображения информации;
## Блок метрик PostgreSQL
Данный блок отображает ключевые параметры конфигурации и текущие показатели работы экземпляра PostgreSQL.
| Наименование метрики | Описание метрики |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Version** | Показывает текущую версию PostgreSQL, установленную на кластере. |
| **Current fetch data** | Объем данных, извлеченных из базы за текущий период (операции чтения). |
| **Current insert data** | Объем данных, вставленных в базу (операции записи новых данных). |
| **Current update data** | Объем данных, обновленных в базе. |
| **Seq Page Cost** | Стоимость последовательного чтения страницы данных. Влияет на выбор плана запроса: чем выше значение, тем реже оптимизатор будет выбирать последовательное сканирование таблиц. |
| **Random Page Cost** | Стоимость чтения случайной страницы данных. Низкое значение говорит о том, что в системе используются быстрые диски, и оптимизатор будет чаще выбирать доступ по индексам. |
| **Max Connections** | Максимальное количество одновременных подключений к базе данных, разрешенное на сервере. |
| **Shared Buffers** | Объем оперативной памяти, выделенный под кэш данных PostgreSQL. Здесь хранятся часто используемые данные для ускорения доступа к ним. |
| **Effective Cache** | Предполагаемый размер системного кэша файлов. Используется оптимизатором для оценки вероятности нахождения данных в кэше операционной системы. |
| **Maintenance Work Mem** | Объем памяти для выполнения операций обслуживания. |
| **Work Mem** | Объем памяти, выделяемый для внутренних сортировок и хеш-таблиц при выполнении запросов (на каждую операцию). |
| **Max WAL Size** | Максимальный размер журнала предзаписи, после достижения которого запускается процесс контрольной точки (checkpoint). |
| **Max Worker Processes** | Максимальное количество фоновых процессов, которые могут быть запущены в системе. |
| **Max Parallel Workers** | Максимальное количество параллельных процессов, которые могут быть задействованы при выполнении одного запроса. |
## Блок метрик Database Stats
Данный блок метрик отражает текущую нагрузку и состояние баз данных в кластере PostgreSQL. Эти метрики позволяют оценить, насколько эффективно работает база данных, отследить скачки нагрузки и своевременно среагировать на потенциальные проблемы до того, как они повлияют на работу приложений.
| Наименование метрики | Описание метрики |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Average CPU Usage** | Показывает время, затраченное на выполнение пользовательских и системных задач, а также, насколько интенсивно используются вычислительные ресурсы сервера базы данных. |
| **Average Memory Usage** | Средний объем оперативной памяти, используемой процессами PostgreSQL за 5-минутные интервалы. Показывает, сколько памяти потребляет база данных в процессе работы. |
| **Open File Descriptors** | Количество открытых файловых дескрипторов процессами PostgreSQL. Метрика показывает среднее (Mean), последнее (Last), максимальное (Max) и минимальное (Min) значение за интервал. |
| **Active sessions** | Показывает, сколько в данный момент выполняется запросов к PostgreSQL. Метрика показывает среднее (Mean), последнее (Last), максимальное (Max) значение. |
| **Transcations** | Количество транзакций в базах данных кластера. Метрика разделена на два типа операций: commits (успешно завершенные транзакции) и rollbacks (откаченные транзакции). |
| **Update data** | Объем данных, обновленных в базах данных кластера. Показывает, сколько данных было изменено в результате выполнения операций UPDATE. |
| **Fetch data (SELECT)** | Объем данных, извлеченных из базы с помощью запросов SELECT. Показывает, сколько данных было считано из базы в результате операций чтения. |
| **Insert data** | Объем данных, вставленных в базы данных кластера. Показывает, сколько данных было добавлено в результате выполнения операций INSERT. |
| **Lock tables** | Количество блокировок таблиц в базах данных кластера. Показывает, сколько раз таблицы были заблокированы для выполнения операций.<br>AccessShareLock - это блокировка, которая возникает, когда кто-то читает данные из таблицы (делает SELECT). Данная блокировка не мешает операциям чтения, но не дает удалить в этот момент таблицу или изменить ее структуру. |
| **Return data** | Объем данных, возвращаемых клиенту в результате выполнения запросов. Показывает, сколько данных было отправлено обратно клиенту после обработки запросов в базе. |
| **Idle sessions** | Количество бездействующих сессий подключения к базе данных. Показывает, сколько открытых подключений в данный момент не выполняют никаких запросов и просто ждут. |
| **Delete data** | Объем данных, удаленных из базы данных в результате выполнения операций DELETE. Показывает, сколько данных было удалено из таблиц. |
| **Cache Hit Rate** | Показывает процент запросов к данным, которые были удовлетворены из кэша (оперативной памяти), без обращения к диску. Показывает, насколько эффективно используется кэш PostgreSQL. |
| **Buffers (bgwriter)** | Метрика, показывающая активность фонового процесса записи, который занимается синхронизацией данных из оперативной памяти на диск. |
| **Conflicts/Deadlocks** | Метрика, отслеживающая две проблемы при работе с базой данных: конфликты восстановления и взаимоблокировки. |
| **Temp File (Bytes)** | Объем данных, записанных во временные файлы при выполнении запросов в базах данных. PostgreSQL создает временные файлы на диске, когда для выполнения запроса не хватает оперативной памяти. |
| **Checkpoint Stats** | Метрика, показывающая время, затрачиваемое на выполнение checkpoints в PostgreSQL, где: <br>- write_time - время, затраченное на запись данных на диск во время checkpoint (сколько миллисекунд ушло на запись файлов).<br>- sync_time - время, затраченное на синхронизацию файлов с диском (чтобы данные гарантированно сохранились). |
## Блок метрик Patroni
Данный блок метрик отображает состояние и конфигурацию кластера PostgreSQL под управлением Patroni. Эти метрики позволяют контролировать отказоустойчивость кластера, отслеживать переключения мастера и убеждаться, что репликация работает штатно.
| Наименование метрики | Описание метрики |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Patroni Leader** | Метрика, которая показывает, какая нода в кластере PostgreSQL в данный момент является master-сервером, принимающим запросы на запись. |
| **Patroni Replica** | Метрика, которая показывает, какие узлы кластера PostgreSQL в данный момент выполняют роль реплики. |
| **Sync Standby** | Метрика, которая показывает, какая из реплик в кластере PostgreSQL назначена синхронной. |
| **PostgreSQL WAL Replay** | Метрика, которая показывает, включена ли на узлах кластера синхронизация данных через WAL. |
| **PostgreSQL Pending Restart** | Метрика, которая показывает, требуется ли перезагрузка PostgreSQL на узлах кластера после изменения конфигурационных параметров. |
| **Patroni Primary Node** | Метрика, которая показывает, какой узел в кластере PostgreSQL в данный момент является основным и принимает запросы на запись. |
| **Patroni Secondary Nodes** | Метрика, которая показывает, какие узлы кластера PostgreSQL в определенные моменты времени выполняли роль реплик. |
| **Replicas Received WAL Location** | Метрика, показывающая объем журналов предзаписи (WAL), полученных каждой репликой кластера. |
| **Primary WAL Location** | Метрика, показывающая объем журналов предзаписи (WAL), на основном сервере кластера PostgreSQL. |
| **Replicas Replayed WAL Location** | Метрика, показывающая объем журналов предзаписи (WAL), которые были не просто получены, а уже применены на репликах кластера. |
| **WAL Replay Paused** | Метрика, которая отслеживает, не приостановлен ли процесс применения WAL-журналов на узлах кластера. Если передача или применение WAL-файлов останавливается, на графике происходит скачок. |
## Блок метрик Hosts
Блок Hosts управляется селектором **Cluster node name**. Данный блок метрик отображает состояние и ресурсы серверов, на которых развернут кластер PostgreSQL. Эти метрики позволяют оценить, хватает ли серверу ресурсов для текущей нагрузки, и своевременно обнаружить проблемы с производительностью или нехваткой места на дисках.
| Наименование метрики | Описание метрики |
| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **CPU Busy** | Метрика, показывающая общую загруженность всех процессорных ядер на сервере, где работает PostgreSQL. |
| **RAM Used** | Метрика, показывающая процент оперативной памяти, который занят на сервере всеми процессами. |
| **CPU Cores** | Метрика, показывающая общее количество процессорных ядер, доступных на сервере, где работает PostgreSQL. |
| **RAM Total** | Метрика, показывающая общий объем оперативной памяти, установленный на сервере. |
| **DB Disk Total** | Метрика, показывающая общий объем дискового пространства, выделенного для хранения данных базы данных PostgreSQL на сервере. |
| **CPU Basic** | Метрика, которая показывает детальную разбивку загрузки процессора по типам выполняемых задач. Она позволяет увидеть, на что именно тратится процессорное время на сервере. |
| **Memory Basic** | Метрика, которая показывает детальную разбивку использования оперативной памяти на сервере, а также информацию о SWAP. |
| **Disk IOps** | Метрика, показывающая количество операций чтения и записи, выполняемых на диске сервера в секунду. |
| **Disk Space Used Basic** | Метрика, показывающая процент занятого дискового пространства на всех подключенных файловых системах сервера. |
| **Disk R/W Data** | Показывает объем данных в байтах, читаемых с диска и записываемых на диск в секунду. |
| **Filesystem space available** | Метрика, показывающая объем свободного дискового пространства на файловой системе сервера. |
-58
View File
@@ -1,58 +0,0 @@
# PgAdmin
После предоставления доступа к сервису Cloud PostgreSQL пользователь получает возможность управлять базами данных через веб-интерфейс pgAdmin. Ниже приведена инструкция по входу в систему и выполнению основных операций.
## Вход в pgAdmin
1. Откройте веб-браузер и перейдите по адресу, предоставленному для доступа к pgAdmin;
2. На странице авторизации введите **логин и пароль от pgAdmin**;
> Учетные данные направляются пользователю на электронную почту при предоставлении доступа.
3. После входа в систему в левой панели навигации откройте раздел **Servers**;
4. Выберите предварительно настроенный сервер с названием **PostgreSQL**;
5. В открывшемся окне введите пароль;
> Важно: на данном этапе необходимо указать **пароль учетной записи базы данных**, а не пароль от pgAdmin.
6. Нажмите **ОК**;
7. После успешной аутентификации станет доступен веб-интерфейс СУБД PostgreSQL.
## Просмотр реплик и параметров конфигурации
pgAdmin позволяет осуществлять мониторинг реплик, входящих в состав кластера.
Чтобы просмотреть список реплик:
- Откройте раздел **Replica nodes** в панели навигации.
Чтобы проверить состояние репликации:
1. Выберите нужную реплику в разделе **Replica nodes**;
2. Перейдите в подраздел **Replication**;
3. Откройте пункт **Replication stats**;
4. Разверните раздел **Подробности** - в нем отображаются все параметры и текущее состояние репликации;
> Вкладка **Replication** позволяет определить, выполняется ли передача данных на дополнительные узлы кластера.
Так же, есть возможность посмотреть **параметры конфигурации PostgreSQL**, применённых к конкретной реплике. Для этого необходимо перейти в раздел **Конфигурация**, который расположен в блоке **Replica nodes**.
Во вкладке отображается таблица со следующими колонками:
- **Имя** - наименование конфигурационного параметра;
- **Категория** - логическая группа параметра;
- **Значение** - текущее установленное значение;
- **Единицы** - единицы измерения (если применимо);
- **Описание** - краткое пояснение назначения параметра.
> Вкладка **Конфигурация** предназначена для просмотра текущих настроек реплики.
## Просмотр и управление базами данных
Для просмотра существующих баз данных:
- Откройте раздел **Базы данных** в панели навигации. В этом разделе отображается перечень всех созданных баз.
Для создания новой базы данных:
1. Щелкните правой кнопкой мыши по разделу **Базы данных**;
2. В контекстном меню выберите **Создать**, затем - **База данных**;
3. Заполните обязательные поля в открывшейся форме;
4. Нажмите **Сохранить**.
## Роли входа / группы
В разделе **Роли входа/группы** отображается список пользователей (ролей), имеющих доступ к базам данных кластера.
Для создания новой роли:
1. Щелкните правой кнопкой мыши по разделу **Роли входа/группы**;
2. Выберите **Создать**, затем - **Роль входа/группы**;
3. Заполните необходимые параметры в форме создания роли;
4. Нажмите **Сохранить**.
-203
View File
@@ -1,203 +0,0 @@
# Создание сервиса Cloud PostgreSQL
Данный раздел описывает права, которые предоставляются пользователю PostgreSQL при создании сервиса **Cloud PostgreSQ**L**, а также перечень административных операций, доступных ему для самостоятельного выполнения.
При развертывании сервиса автоматически создаётся пользователь базы данных с преднастроенными атрибутами и привилегиями. Эти права позволяют заказчику самостоятельно управлять своими базами данных, ролями и пользователями в рамках созданного экземпляра PostgreSQL.
## Общая информация о пользователе
При инициализации сервиса автоматически создаётся пользователь:
```nginx
client
```
Данный пользователь является основной учётной записью для административной работы в рамках предоставленного экземпляра PostgreSQL. Он предназначен для самостоятельного управления базами данных, ролями и правами доступа в пределах выданных привилегий.
## Выданные права и ограничения
Пользователю `client` назначается набор атрибутов и привилегий, позволяющих выполнять административные операции в рамках своего экземпляра базы данных.
### Атрибуты роли
Пользователь создаётся со следующими атрибутами:
- `CREATEDB` — разрешено создание и удаление баз данных;
- `CREATEROLE` — разрешено создание ролей и пользователей, а также управление их.
Атрибут `SUPERUSER` пользователю не предоставляется. Соответственно, доступ к системным операциям уровня кластера и настройкам сервера отсутствует.
### Права на системную базу postgres:
К стандартной базе данных `postgres` пользователю предоставлено только право подключения:
- `CONNECT`
Иные привилегии (создание объектов, изменение схем и т.д.) на данную базу не выдаются.
### Мониторинг и системные представления:
Для выполнения базовых задач мониторинга пользователю дополнительно предоставлены:
- членство в роли `pg_monitor`;
- право `SELECT` на системное представление:
```sql
pg_catalog.pg_stat_replication
```
Доступ к системной информации предоставляется исключительно в режиме чтения. Изменение системных представлений и параметров сервера недоступно.
## Обязательная смена пароля
После первого подключения к базе данных пользователь `client` обязан выполнить смену пароля.
Смена пароля может быть выполнена:
- в открытом виде (с передачей нового значения пароля);
- с указанием заранее сгенерированного хэша.
На сервере используется алгоритм шифрования паролей:
```
scram-sha-256
```
При использовании SCRAM применяется следующий формат хэша:
```
$<iterations>:<salt>$<storedkey>:<serverkey>
```
### Пример смены пароля в открытом виде
```sql
ALTER USER client WITH PASSWORD 'new_strong_password';
```
### Пример смены пароля с указанием хэша
```sql
ALTER USER client WITH ENCRYPTED PASSWORD '$4096:...';
```
Рекомендуется использовать сложный уникальный пароль, соответствующий требованиям информационной безопасности, и хранить его в защищённом хранилище.
## Создание новой базы данных
Пользователь `client` имеет право создавать новые базы данных в рамках своего экземпляра PostgreSQL.
### Пример создания базы данных
Для создания базы данных используется стандартная команда:
```sql
CREATE DATABASE app_db;
```
Если необходимо назначить владельца базы данных, можно указать соответствующего пользователя. По умолчанию владельцем создаваемой базы данных является пользователь, который её создает.
### Пример создания базы данных с указанием владельца
```sql
CREATE DATABASE app_db OWNER client;
```
В этом примере база данных `app_db` будет принадлежать пользователю `client`. Пользователь, указанный как владелец, будет иметь полный контроль над базой данных, включая права на её удаление и изменение.
## Создание пользователей и ролей
Пользователь `client` имеет право создавать новые роли и пользователей для приложений, а также управлять их правами доступа.
### Создание роли без логина
Если требуется создать роль, которая не будет иметь возможности входа в базу данных (например, для организации прав доступа), можно использовать команду:
```sql
CREATE ROLE app_role;
```
### Создание пользователя с паролем
Для создания пользователя с паролем используется команда:
```sql
CREATE USER app_user WITH PASSWORD 'app_password';
```
После этого новый пользователь `app_user` будет иметь возможность входа в базу данных, используя указанный пароль.
### Назначение роли пользователю
Для назначения роли пользователю используется команда `GRANT`. Это позволяет управлять правами пользователя в рамках определённой роли:
```sql
GRANT app_role TO app_user;
```
После выполнения этой команды пользователь `app_user` станет членом роли `app_role`, и будет наследовать все права, связанные с этой ролью.
### Передача владельца базы данных
Если необходимо передать право владения базой данных другому пользователю, это можно сделать с помощью следующей команды:
```sql
ALTER DATABASE app_db OWNER TO app_user;
```
Теперь база данных `app_db` будет принадлежать пользователю `app_user`, и он будет иметь полный контроль над ней.
### Управление правами доступа
После создания пользователей и ролей необходимо назначить им соответствующие права доступа.
### Выдача прав на подключение к базе данных
Для того чтобы пользователь мог подключаться к базе данных, нужно предоставить ему соответствующие права:
```sql
GRANT CONNECT ON DATABASE app_db TO app_user;
```
Эта команда разрешает пользователю `app_user` подключаться к базе данных `app_db`.
### Права на схему public
Для предоставления пользователю прав на использование схемы `public` можно выполнить следующую команду:
```sql
GRANT USAGE, CREATE ON SCHEMA public TO app_user;
```
Эти права позволяют пользователю `app_user` использовать объекты в схеме `public`, а также создавать новые объекты внутри неё.
### Права на существующие таблицы
Чтобы предоставить пользователю доступ к существующим таблицам в схеме `public`, можно использовать команду:
```sql
GRANT SELECT, INSERT, UPDATE, DELETE ON ALL TABLES IN SCHEMA public TO app_user;
```
Эта команда позволяет пользователю `app_user` выполнять операции чтения, вставки, обновления и удаления данных в существующих таблицах схемы `public`.
### Права на будущие таблицы
Если необходимо автоматически предоставить пользователю права на новые таблицы, создаваемые в схеме `public`, используйте команду:
```sql
ALTER DEFAULT PRIVILEGES IN SCHEMA public
GRANT SELECT, INSERT, UPDATE, DELETE ON TABLES TO app_user;
```
Эта команда обеспечит, что все будущие таблицы, создаваемые в схеме `public`, будут автоматически иметь права для пользователя `app_user` на чтение, вставку, обновление и удаление данных.
## Мониторинг репликации
Пользователь `client` имеет доступ к системным представлениям для мониторинга состояния репликации в кластере PostgreSQL.
### Просмотр состояния репликации
Для того чтобы просмотреть текущий статус репликации, пользователь может выполнить запрос к системному представлению:
``` SQL
SELECT * FROM pg_stat_replication;
```
Этот запрос возвращает информацию о всех репликах, подключённых к основному (primary) серверу.
### Ограничения доступа
Пользователь `client` имеет доступ к данным в представлении `pg_stat_replication` только в режиме **read-only**. Это означает, что он может просматривать состояние репликации, но не может изменять или вмешиваться в процесс репликации.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+38
View File
@@ -0,0 +1,38 @@
@use '@beeline/design-tokens/scss/tokens/themes' as *;
:root {
--app-navbar-height: #{$app-navbar-height};
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
html {
overflow-y: auto;
}
#app {
height: 100vh;
}
html.dark-theme {
background-color: $color-background-base;
color: $color-text-active;
}
a:visited {
color: $color-text-active !important;
}
a:hover {
text-decoration: none !important;
}
+5
View File
@@ -0,0 +1,5 @@
@import 'variables';
@import 'base';
@import 'form';
@import 'helpers';
@import 'components';
+3
View File
@@ -0,0 +1,3 @@
// Navbar
$app-navbar-height: 3.5rem;
$app-header-height: 64px;
+122
View File
@@ -0,0 +1,122 @@
@use '@beeline/design-tokens/scss/tokens/themes' as *;
@use '@beeline/design-tokens/scss/tokens/components/fab' as *;
@use '@beeline/design-tokens/scss/tokens/components/button' as *;
@use '@beeline/design-tokens/scss/tokens/globals' as *;
@use '@beeline/design-tokens/scss/mixin';
@mixin fab_button {
background-color: $button-overlay-background-color;
padding-left: $button-only-text-small-padding-horizontal;
padding-right: $button-only-text-small-padding-horizontal;
letter-spacing: $button-small-text-font-letter-spacing;
line-height: $button-small-text-font-line-height;
font-size: $button-small-text-font-size;
height: $button-small-height;
color: $button-overlay-text-color;
box-shadow: none;
border: 1px solid $button-outline-border-color;
border-radius: $button-border-radius;
&:hover {
cursor: pointer;
background-color: $button-overlay-background-color-hover;
}
}
.app-fab {
height: $fab-standard-height;
width: $fab-standard-width;
position: fixed;
z-index: 50;
display: inline-flex;
align-items: center;
border: 0;
padding: $fab-standard-padding;
letter-spacing: $fab-text-font-letter-spacing;
line-height: $fab-text-font-line-height;
font-size: $fab-text-font-size;
font-weight: $fab-text-font-weight;
box-shadow: $fab-shadow;
background-color: $color-background-inverse;
color: $color-text-active-inverse;
cursor: pointer;
&__icon {
width: 24px;
height: 24px;
}
&:hover {
// background-color: $fab-hover-background-color;
}
&--focused {
border-color: $fab-focused-border-color;
border-width: $fab-focused-border-width;
}
&--mini {
height: $fab-mini-height;
width: $fab-mini-width;
border-radius: $fab-mini-border-radius;
padding: $fab-mini-padding;
}
&--extended {
height: $fab-extended-height;
border-radius: $fab-extended-border-radius;
padding-right: $fab-extended-padding-right;
padding-left: $fab-extended-padding-left;
& &__icon {
margin-right: $fab-extended-icon-spacing;
}
}
.app-fab--extended.app-fab--mini {
height: $fab-mini-height;
}
&--disabled {
opacity: $fab-disabled-opacity;
}
}
.app-fab-dialog {
position: fixed;
bottom: 44px;
right: 0;
// background-color: $color-background-medium;
background-color: transparent;
// border-radius: 12px;
padding: 1rem;
// border: 1px solid $color-border;
// min-width: 300px;
// box-shadow: $elevation-medium;
.icon-contained {
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: $color-status-neutral-background;
color: $color-status-neutral;
border-radius: 12px;
}
#feedback_button {
@include fab_button();
}
#bug_button {
@include fab_button();
line-height: 38px;
}
a#bug_button,
a#bug_button:visited,
a#bug_button:active {
color: $button-overlay-text-color !important;
}
}
@@ -0,0 +1 @@
@import 'fab';
+1
View File
@@ -0,0 +1 @@
@use '@beeline/design-tokens/scss/tokens/components/formfield' as formfield;
+104
View File
@@ -0,0 +1,104 @@
@use '@beeline/design-tokens/scss/tokens/components/textarea' as *;
@use '@beeline/design-tokens/scss/tokens/components/formfield';
@use '@beeline/design-tokens/scss/tokens/themes';
.textarea-field {
$px: 16px;
display: block;
width: 100%;
position: relative;
padding: $textarea-without-label-medium-text-margin-top $px $textarea-text-margin-bottom;
height: $textarea-without-label-medium-height;
background: formfield.$formfield-background-color;
border: formfield.$formfield-border-width formfield.$formfield-border-style formfield.$formfield-border-color;
border-radius: formfield.$formfield-border-radius;
& &__label {
position: absolute;
top: $textarea-with-label-text-margin-top;
left: $px;
transition: font-size 300ms ease-out;
color: formfield.$formfield-label-color;
}
& textarea {
height: $textarea-medium-text-height;
width: 100%;
outline: none;
border: none;
box-shadow: none;
resize: none;
background-color: transparent;
color: themes.$color-text-active;
}
& &__resizer {
position: absolute;
bottom: $textarea-resizer-margin-bottom;
right: $textarea-resizer-margin-right;
rotate: -45deg;
width: 1em;
height: 1em;
&:hover {
cursor: nwse-resize;
}
&::before {
content: '';
display: flex;
background-color: darkslategrey;
width: 10px;
height: 1px;
}
&::after {
content: '';
display: flex;
position: relative;
right: -3px;
bottom: -2px;
background-color: darkslategrey;
width: 4px;
height: 1px;
}
}
&.textarea-field--with-label {
height: $textarea-with-label-medium-height;
padding-top: $textarea-with-label-text-margin-top;
&.textarea-field--floated .textarea-field__label {
top: $textarea-medium-label-floated-margin-top;
line-height: $textarea-small-label-floated-font-line-height;
font-size: $textarea-small-label-floated-font-size;
}
&.textarea-field--small {
height: $textarea-with-label-small-height;
padding-top: $textarea-small-label-margin-top;
top: $textarea-small-label-floated-margin-top;
& .textarea-field__label {
font-size: $textarea-small-label-font-size;
font-weight: $textarea-small-label-font-weight;
letter-spacing: $textarea-small-label-font-letter-spacing;
}
}
}
&.textarea-field--focused {
border-color: formfield.$formfield-border-color-focus;
background-color: transparent;
}
&.textarea-field--small {
padding-top: $textarea-without-label-small-text-margin-top;
height: $textarea-without-label-small-height;
& textarea {
height: $textarea-small-text-height;
}
}
}
+70
View File
@@ -0,0 +1,70 @@
@use '@beeline/design-tokens/scss/tokens/components/textfield' as *;
@use '@beeline/design-tokens/scss/tokens/globals';
@use '@beeline/design-tokens/scss/tokens/themes' as theme;
.textfield {
display: block;
position: relative;
width: 100%;
height: globals.$size-control-height-medium;
border: globals.$size-border-width-regular solid transparent;
padding-top: $textfield-without-label-medium-text-margin-vertical;
padding-bottom: $textfield-without-label-medium-text-margin-vertical;
background-color: theme.$color-control-background;
border-radius: 12px; // globals.$size-border-radius-x6;
&:hover {
background-color: theme.$color-control-background-hover;
}
// input
input {
outline: none;
box-shadow: none;
}
// label
&--with-label {
// padding-top: $textfield-with-label-medium-text-margin-top;
// padding-bottom: $textfield-with-label-medium-text-margin-bottom;
}
&__label {
// padding-top: $textfield-medium-label-margin-top;
&.textfield__label--floated {
// padding-top: $textfield-medium-label-margin-top-floated;
}
}
// small
&--small {
height: globals.$size-control-height-small;
}
// large
&--large {
height: globals.$size-control-height-large;
padding-top: $textfield-without-label-large-text-margin-vertical;
padding-bottom: $textfield-without-label-large-text-margin-vertical;
&.textfield--with-label {
padding-top: $textfield-with-label-large-text-margin-top;
padding-bottom: $textfield-with-label-large-text-margin-bottom;
}
.textfield__label {
padding-top: $textfield-large-label-margin-top;
&.textfield__label--floated {
padding-top: $textfield-large-label-margin-top-floated;
}
}
}
// states
&--focused {
border-color: theme.$color-border-focus;
background-color: theme.$color-background-base;
}
}
+5
View File
@@ -0,0 +1,5 @@
@use '@beeline/design-tokens/scss/tokens/themes' as *;
.app-bg-status-error {
background-color: $color-status-error-background;
}
+3
View File
@@ -0,0 +1,3 @@
.app-cursor-pointer {
cursor: pointer;
}
+4
View File
@@ -0,0 +1,4 @@
@import 'text';
@import 'color';
@import 'media';
@import 'common';
@@ -1,5 +1,3 @@
@use "sass:map";
// @deprecated
@mixin media($minWidth, $maxWidth) {
@media (min-width: $minWidth) and (max-width: $maxWidth) {
@@ -29,7 +27,7 @@ $breakpoints: (
);
@mixin max($breakpoint) {
$value: map.get($breakpoints, $breakpoint);
$value: map-get($breakpoints, $breakpoint);
@if $value {
@media (max-width: $value) {
+80
View File
@@ -0,0 +1,80 @@
@use '@beeline/design-tokens/scss/tokens/themes' as theme;
@use 'src/assets/scss/app/mixins' as mixins;
@mixin truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@mixin truncate-lines($lines: 2) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
overflow: hidden;
text-overflow: ellipsis;
}
.app-text-active {
color: theme.$color-text-active;
}
.app-text-inactive {
color: theme.$color-text-inactive;
}
// styles for hyperlinks
.app-link {
color: theme.$color-text-active;
&:hover {
color: theme.$color-text-active;
}
}
.app-text-caption {
@include mixins.text-caption;
}
.app-text-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// Sizes
.app-text-size-subtitle-3 {
font-size: 15px;
line-height: 20px;
font-weight: 500;
letter-spacing: 0.2px;
}
.app-text-size-body-3 {
font-size: 15px;
line-height: 18px;
letter-spacing: 0.2px;
font-weight: 400;
}
// Colors
.app-text-color-caption {
color: theme.$color-text-inactive;
}
.app-text-warning {
color: theme.$color-status-warning;
}
.app-text-info {
color: theme.$color-status-info;
}
.app-text-error {
color: theme.$color-status-error;
}
.app-text-success {
color: theme.$color-status-success;
}
// Breaks
.app-break-keep-all {
word-break: keep-all;
}
+1
View File
@@ -0,0 +1 @@
@import 'spinner';
@@ -0,0 +1,6 @@
@use 'src/assets/scss/app/variables' as v;
.app-loading-screen {
display: block;
height: calc(100vh - v.$app-header-height);
}
+1
View File
@@ -0,0 +1 @@
@forward 'text';
+29
View File
@@ -0,0 +1,29 @@
@use '@beeline/design-tokens/scss/tokens/themes' as theme;
%text_caption {
font-size: 13px;
line-height: 16px;
}
@mixin text_caption {
@extend %text_caption;
color: theme.$color-text-inactive;
}
@mixin text_caption_error {
@extend %text_caption;
color: theme.$color-status-error;
}
@mixin text_body_2 {
font-style: normal;
font-weight: 400;
font-size: 17px;
line-height: 22px;
}
@mixin truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
+10
View File
@@ -0,0 +1,10 @@
@use '@beeline/design-tokens/scss/tokens/themes';
@use '@beeline/design-tokens/scss/tokens/themes/dark';
:root {
@include themes.theme();
}
.dark-theme {
@include themes.theme(dark.$theme);
}
+3
View File
@@ -0,0 +1,3 @@
@use '@beeline/design-tokens/scss/font-face' with (
$font-path-beeline-sans: '../fonts/beeline-sans'
);
+40
View File
@@ -0,0 +1,40 @@
// @use "@beeline/design-tokens/scss/iconfont/iconfont" with (
// $font-path-iconfont: '../fonts/iconfont'
// );
@use '@beeline/design-tokens/scss/iconfont/icons';
@font-face {
font-display: block;
font-family: 'BeelineIcons';
font-style: normal;
font-weight: 400;
src:
url('../fonts/iconfont/BeelineIcons.woff2') format('woff2'),
url('../fonts/iconfont/BeelineIcons.woff') format('woff'),
url('../fonts/iconfont/BeelineIcons.ttf') format('ttf');
}
.beeline-icons {
font-family: 'BeelineIcons', sans-serif;
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
+4
View File
@@ -0,0 +1,4 @@
@import 'fonts';
@import 'icons';
@import 'base';
@import 'scrollbar';
+29
View File
@@ -0,0 +1,29 @@
@use '@beeline/design-tokens/scss/tokens/themes';
html {
scrollbar-color: themes.$color-text-inactive transparent;
}
* {
scrollbar-width: thin;
}
body::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: themes.$color-text-inactive;
border: 4px solid transparent;
background-clip: content-box;
border-radius: 100px;
min-height: 28px;
}
+51
View File
@@ -0,0 +1,51 @@
@use 'sass:map';
@use '@beeline/design-tokens/scss/tokens/globals';
@use '@beeline/design-tokens/scss/tokens/themes/light';
@use '@beeline/design-tokens/scss/tokens/components/button';
// Colors
$primary: globals.$color-background-brand;
$background: map.get(light.$theme, 'color-background-base');
$info: map.get(light.$theme, 'color-status-info');
$success: map.get(light.$theme, 'color-status-success');
$warning: map.get(light.$theme, 'color-status-warning');
$danger: map.get(light.$theme, 'color-status-error');
// Typography
$family-primary: globals.$font-family-text;
$title-color: map.get(light.$theme, 'color-text-active');
$subtitle-color: map.get(light.$theme, 'color-text-inactive');
// Radius
$radius: globals.$size-border-radius-x6;
// Buttons
$button-padding-vertical: globals.$size-spacing-x4;
$button-padding-horizontal: globals.$size-spacing-x5;
$button-background-color: button.$button-plain-background-color;
$button-focus-border-color: map.get(light.$theme, 'color-background-base-focused');
$button-disabled-opacity: button.$button-opacity-disabled;
// Box
$box-radius: $radius;
$box-shadow: globals.$elevation-low;
$box-padding: globals.$size-spacing-x6;
$box-link-hover-shadow: globals.$elevation-medium;
$box-link-active-shadow: globals.$elevation-medium;
// Form
$input-color: map.get(light.$theme, 'color-text-active');
$input-background-color: map.get(light.$theme, 'color-control-background');
$label-color: map.get(light.$theme, 'color-text-inactive');
$label-weight: globals.$font-weight-caption;
// Table
$table-color: map.get(light.$theme, 'color-text-active');
$table-background-color: map.get(light.$theme, 'color-background-base');
$table-cell-border: 1px solid map.get(light.$theme, 'color-control-background');
$table-cell-padding: 16px 16px;
$table-cell-heading-color: map.get(light.$theme, 'color-text-active');
$table-head-cell-border-width: 1px;
@import 'bulma/bulma';
@import 'overrides';
+12
View File
@@ -0,0 +1,12 @@
@use 'sass:map';
@use '@beeline/design-tokens/scss/tokens/themes/dark';
.box {
.dark-theme & {
background-color: map.get(dark.$theme, 'color-background-low');
&:hover {
background-color: map.get(dark.$theme, 'color-background-medium');
}
}
}
@@ -0,0 +1,11 @@
@use '@beeline/design-tokens/scss/tokens/components/button' as button;
@use '@beeline/design-tokens/scss/tokens/themes';
.button {
font-weight: button.$button-medium-text-font-weight;
color: themes.$color-text-active;
&:hover {
color: themes.$color-text-active;
}
}
@@ -0,0 +1,16 @@
@use '@beeline/design-tokens/scss/tokens/themes';
.dropdown {
&-content {
background-color: themes.$color-background-medium;
}
.dropdown-item {
color: themes.$color-text-active;
&:hover {
background-color: themes.$color-background-base-hover;
color: themes.$color-text-active;
}
}
}
@@ -0,0 +1,7 @@
@import 'button';
@import 'title';
@import 'box';
@import 'form';
@import 'table';
@import 'dropdown';
@import 'text';
@@ -0,0 +1,42 @@
@use 'sass:map';
@use '@beeline/design-tokens/scss/tokens/globals';
@use '@beeline/design-tokens/scss/tokens/themes/light';
@use '@beeline/design-tokens/scss/tokens/themes/dark';
@use '@beeline/design-tokens/scss/tokens/components/button';
.table {
.dark-theme & {
color: map.get(dark.$theme, 'color-text-active');
background-color: map.get(dark.$theme, 'color-background-base');
td,
th {
border: 1px solid map.get(dark.$theme, 'color-control-background');
}
th {
color: map.get(dark.$theme, 'color-text-active');
}
}
td,
th {
border-width: 1px;
border-style: solid;
}
th {
font-weight: globals.$font-weight-medium;
}
tbody {
tr {
&:last-child {
td,
th {
border-bottom-width: 1px;
}
}
}
}
}
@@ -0,0 +1,15 @@
@use '@beeline/design-tokens/scss/tokens/themes' as *;
code {
background-color: $color-background-base;
}
pre {
color: $color-text-active;
background-color: $color-background-base;
}
.help {
font-size: 13px;
line-height: 16px;
}
@@ -0,0 +1,38 @@
@use '@beeline/design-tokens/scss/mixin' as bee;
.title {
@include bee.h3();
&.is-1 {
@include bee.h1();
}
&.is-2 {
@include bee.h2();
}
&.is-3 {
@include bee.h3();
}
&.is-4 {
@include bee.h4();
}
&.is-5 {
@include bee.h5();
}
&.is-6 {
@include bee.h6();
}
}
.subtitle {
@include bee.subtitle2();
&.is-1 {
@include bee.subtitle1();
}
&.is-2 {
@include bee.subtitle2();
}
&.is-3 {
@include bee.subtitle3();
}
}
@@ -0,0 +1,4 @@
@import 'shared';
@import 'select';
@import 'input-textarea';
@import 'title';
@@ -0,0 +1,46 @@
@use 'sass:map';
// @use "@beeline/design-tokens/scss/tokens/globals";
@use '@beeline/design-tokens/scss/tokens/themes/light';
@use '@beeline/design-tokens/scss/tokens/themes/dark';
%input-textarea {
box-shadow: none;
border: 1px solid transparent;
color: map.get(light.$theme, 'color-text-active');
background: map.get(light.$theme, 'color-control-background');
&:hover {
border-color: map.get(light.$theme, 'color-border-focus');
}
.dark-theme & {
color: map.get(dark.$theme, 'color-text-active');
background: map.get(dark.$theme, 'color-control-background');
&:hover {
border-color: map.get(dark.$theme, 'color-border-focus');
}
}
&:focus,
&.is-focused,
&:active,
&.is-active {
box-shadow: none !important;
border-color: map.get(light.$theme, 'color-border-focus');
background: map.get(light.$theme, 'color-background-base');
.dark-theme & {
background: map.get(dark.$theme, 'color-background-base');
border-color: map.get(dark.$theme, 'color-border-focus');
}
}
}
.input {
@extend %input-textarea;
}
.textarea {
@extend %input-textarea;
}
@@ -0,0 +1,48 @@
@use 'sass:map';
@use '@beeline/design-tokens/scss/tokens/themes/dark';
@use '@beeline/design-tokens/scss/tokens/themes/light';
.select {
select {
border: 1px solid transparent;
&:focus,
&:active {
border: 1px solid map.get(light.$theme, 'color-border-focus');
background-color: map.get(light.$theme, 'color-background-base');
box-shadow: none;
}
}
&:not(.is-multiple):not(.is-loading)::after {
content: none;
}
&:focus,
&.is-focused,
&:active,
&.is-active {
select {
border: 1px solid map.get(light.$theme, 'color-border-focus');
background-color: map.get(light.$theme, 'color-background-base');
box-shadow: none;
}
.dark-theme & {
select {
border: 1px solid map.get(dark.$theme, 'color-border-focus');
background-color: map.get(dark.$theme, 'color-background-base');
box-shadow: none;
}
}
}
.dark-theme & {
color: map.get(dark.$theme, 'color-text-active');
& select {
color: map.get(dark.$theme, 'color-text-active');
background-color: map.get(dark.$theme, 'color-control-background');
}
}
}
@@ -0,0 +1,11 @@
@use 'sass:map';
@use '@beeline/design-tokens/scss/tokens/globals';
@use '@beeline/design-tokens/scss/tokens/themes/dark';
.label {
line-height: globals.$font-line-height-caption;
.dark-theme & {
color: map.get(dark.$theme, 'color-text-inactive');
}
}
@@ -0,0 +1,14 @@
@use 'sass:map';
@use '@beeline/design-tokens/scss/tokens/themes/dark';
.title {
.dark-theme & {
color: map.get(dark.$theme, 'color-text-active');
}
}
.subtitle {
.dark-theme & {
color: map.get(dark.$theme, 'color-text-inactive');
}
}
+8
View File
@@ -0,0 +1,8 @@
@use 'beeline';
@use 'bulma';
@use 'app';
.proto {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: #f55;
}
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

Some files were not shown because too many files have changed in this diff Show More