Как установить Grafana для визуализации метрик
2 года назад·2 мин. на чтение
Мониторинг сервера очень важен. Мониторинг позволяет узнать, когда заканчивается место на диске, узнать пиковые нагрузки, потребляемые ресурсы и т.д.
В этой статье установим Grafana. Это третий шаг настройки сбора и отображения метрик. Метрики будем собирать на сервере Ubuntu, а Grafana, для экономии ресурсов на сервере, установим на локальном компьютере.
Весь процесс можно разделить на три части:
Во вкладке Управление, в пункте "DNS-серверы и управление зоной" нажать кнопку "Изменить".
Далее, нажать "+ Добавить запись", выбрать запись типа А. В поле Subdomain пишем prometheus, в поле IP Address - ip адрес нашего сервера или VPS. Таким образом интерфейс Prometheus будет доступен через поддомен нашего сервера, например,
Устанавливаем Grafana, скачав установочный файл на официальном сайте grafana. Grafana будет установлена как служба и располагаться по адресу
Далее, вводим адрес ![Дашборд Grafana](https://it-dev-journal.ru/api/proxy/uploads/monitoring_9_5e9265fe76.jpg)
- Установка Prometheus
- Установка Node exporter
- Установка Grafana (рассмотрим в этой статье)
Настройка Grafana
Так как мы хотим отображать метрики в Grafana в Windows, необходимо сделать данные из Prometheus доступными. Для этого можно создать поддомен, напримерprometheus
, и включить его в конфигурацию nginx.
Этот домен нужно добавить в настройках VPS провайдера. Например, в reg.ru, нужно зайти в Домены, перейти в домен.server { server_name prometheus.example.com; location / { proxy_pass http://localhost:9090; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } listen 80; }
![Домены reg ru](https://it-dev-journal.ru/api/proxy/uploads/monitoring_4_b44db7edce.jpg)
![DNS-серверы и управление зоной](https://it-dev-journal.ru/api/proxy/uploads/monitoring_5_9ed2b0eba8.jpg)
prometheus.example.com
.
![Создание A-записи reg ru](https://it-dev-journal.ru/api/proxy/uploads/monitoring_6_5860c43b10.jpg)
localhost:3000
.
После регистрации нового пользователя, переходим в настройки и нажимаем "Add data source".
![Добавление data source в Grafana](https://it-dev-journal.ru/api/proxy/uploads/monitoring_7_6de63da726.jpg)
prometheus.example.com
в поле URL и нажимаем кнопку "Save & test". После успешного добавления создаем новый дашборд и наполняем его графиками.
![Дашборд Grafana](https://it-dev-journal.ru/api/proxy/uploads/monitoring_9_5e9265fe76.jpg)
Хуки useTransition и useDeferredValue в ReactJS 18
2 года назад·3 мин. на чтение
В React 18, релиз которого произошел в марте 2022, появилось много новых инструментов для написания производительных и отзывчивых приложений. Одним из заметных изменений является механизм рендеринга с новой ключевой концепцией: конкурентный рендеринг (concurrent rendering).
В этой статье повнимательнее рассмотрим два новых хука:
Какое обновление можно считать срочным, а какое обычным?
Хук
До React 18 все обновления состояния помечались как "срочные". Это означает, что все обновления состояния обрабатывались одинаково с одинаковым приоритетом.
С помощью
Когда использовать
Одним из примеров может быть список товаров с параметрами фильтрации.
Когда вы переключаете чекбоксы, чтобы выбрать размер или цвет одежды, вы ожидаете, что чекбоксы сразу же отобразят отмеченное или снятое состояние.
А сам список товаров, которые необходимо обновить согласно фильтрам, может быть отдельным и менее срочным обновлением.
Как использовать
Хук
Когда использовать
С помощью
Как использовать
useTransition()
и useDeferredValue()
.
Эти два хука дают возможность определять приоритет обновления состояния, или, скорее, указывать, является ли обновление менее важным, чем другие, и откладывать его в пользу более срочных.
- Срочные обновления: отражают прямое взаимодействие, такое как набор текста, клики, нажатия и т. д., т.е. то с чем взаимодействует пользователь. Когда вы вводите текст в поле ввода, вы хотите сразу увидеть введенный вами текст. В противном случае UI будет казаться медленным и подлагивать. Поэтому мы хотим сделать такие обновления приоритетным.
- Обычные обновления: переход пользовательского интерфейса из одного вида в другой. Пользователи знают, что представление должно измениться или обновиться (например, когда ожидается ответ на запрос данных). Даже если есть небольшая задержка, это можно рассматривать как ожидаемое поведение, и это не будет восприниматься как медлительность приложения.
Хук useTransition()
и функция startTransition()
До React 18 все обновления состояния помечались как "срочные". Это означает, что все обновления состояния обрабатывались одинаково с одинаковым приоритетом.
С помощью useTransition()
теперь можно пометить некоторые обновления состояния как несрочные.
Когда использовать useTransition()
?
Одним из примеров может быть список товаров с параметрами фильтрации.
Когда вы переключаете чекбоксы, чтобы выбрать размер или цвет одежды, вы ожидаете, что чекбоксы сразу же отобразят отмеченное или снятое состояние.
А сам список товаров, которые необходимо обновить согласно фильтрам, может быть отдельным и менее срочным обновлением.
Как использовать useTransition()
?
function App() { const [isPending, startTransition] = useTransition(); const [searchQuery, setSearchQuery] = useState(''); // запрос данных, который занимает некоторое время const filteredResults = getProducts(searchQuery); function handleQueryChange(event) { startTransition(() => { // оборачивая setSearchQuery() в startTransition(), // мы помечаем эти обновления как менее важные setSearchQuery(event.target.value); }); } return ( <div> <input type="text" onChange={handleQueryChange} /> {isPending && <span>Loading...</span>} <ProductsList results={filteredResults} /> </div> ); }
Хук useDeferredValue()
useDeferredValue()
очень похож на useTransition()
в том, что он позволяет отложить несрочное обновление состояния, но применяется его к части дерева.
Это похоже методы debounce и throttle, которые мы часто используем для отложенных обновлений. React будет работать с такими обновлениями, как только завершатся срочные обновления.
Когда использовать useDeferredValue()
?
С помощью useTransition()
вы сами решаете, когда конкретное обновление состояния может быть помечено как менее срочное. Но иногда такой возможности может и не быть, например, если фрагмент кода находится в сторонней библиотеке.
В таких случаях можно воспользоваться хуком useDeferredValue()
. С помощью useDeferredValue()
вы можете обернуть значение и пометить его изменения как менее важные и, следовательно, отложить повторный рендеринг.
useDeferredValue()
будет возвращать предыдущее значение до тех пор, пока есть более срочные обновления для завершения и отображения дерева с обновленным значением.
Как использовать useDeferredValue()
?
function ProductsList({ results }) { // deferredResults получат обновленные данные // когда завершатся срочные обновления const deferredResults = useDeferredValue(results); return ( <ul> {deferredResults.map((product) => ( <li key={product.id}>{product.title}</li> ))} </ul> ); }