From a3651b63ebc95ba09d76939d40800edc80bbbc20 Mon Sep 17 00:00:00 2001 From: WillianLomeu Date: Wed, 29 May 2024 10:34:41 -0300 Subject: [PATCH] fat(status): comments --- src/components/status/index.tsx | 289 +++++++++++++++++++------------- 1 file changed, 168 insertions(+), 121 deletions(-) diff --git a/src/components/status/index.tsx b/src/components/status/index.tsx index b95e188..84e354c 100644 --- a/src/components/status/index.tsx +++ b/src/components/status/index.tsx @@ -1,5 +1,5 @@ import { BdsButtonIcon } from 'blip-ds/dist/blip-ds-react/components'; -import React, { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react'; import './styles.scss'; const Status = () => { @@ -12,40 +12,64 @@ const Status = () => { const [lastUpdateTime, setLastUpdateTime] = useState(0); const [detailUrl, setDetailUrl] = useState(''); + // FUNÇÃO PARA VERIFICAR O PING const fetchStatus = async () => { try { + // Armazena o tempo atual em milissegundos (início do processo de medição do tempo de resposta) const startTime = Date.now(); + + // Faz uma requisição HTTP GET para o endpoint especificado const response = await fetch('https://status.blip.ai/api/v2/summary.json'); + + // Armazena o tempo atual em milissegundos (fim do processo de medição do tempo de resposta) const endTime = Date.now(); + + // Calcula o tempo de resposta subtraindo startTime de endTime setResponseTime(endTime - startTime); + + // Verifica se a resposta não é OK (status HTTP não está na faixa de 200-299) if (!response.ok) { throw new Error('Failed to fetch status'); } } catch (error) { + // setStatus é uma função que lida com o estado do servidor, definindo-o como 'server-off' setStatus('server-off'); } }; + + // FUNÇÃO PARA OBTER OS DADOS DA API + const checkMaintenance = async () => { try { - const startTime = Date.now(); + // Faz uma requisição HTTP GET para o endpoint especificado const response = await fetch('https://status.blip.ai/api/v2/summary.json'); - const endTime = Date.now(); - setResponseTime(endTime - startTime); - if (!response.ok) { - throw new Error('Failed to fetch status'); - } + + // Converte a resposta em JSON const data = await response.json(); + + // Filtra os componentes da resposta que estão em manutenção const maintenanceComponents = data.components.filter( (component: { status: string }) => component.status === 'under_maintenance' ); - console.log(data); + + // Define a URL da página de detalhes do status, extraída da resposta da API setDetailUrl(data.page.url); + + // Verifica se há componentes em manutenção const isUnderMaintenance = maintenanceComponents.length > 0; + + // Define o status como 'maintenance' se houver componentes em manutenção, ou 'operational' caso contrário setStatus(isUnderMaintenance ? 'maintenance' : 'operational'); + + // Armazena os componentes em manutenção setComponents(maintenanceComponents); + + // Armazena os incidentes atuais extraídos da resposta da API setProblem(data.incidents); } catch (error) { + // Se ocorrer qualquer erro durante a execução do bloco try, o código no bloco catch será executado + // Define o status do servidor como 'server-off' em caso de erro setStatus('server-off'); } }; @@ -55,12 +79,19 @@ const Status = () => { setTimeout(checkMaintenance, time_update); }, []); + // Função para lidar com a atualização manual const handleUpdate = () => { + // Reseta o tempo de resposta para 0 setResponseTime(0); + // Limpa a lista de componentes setComponents([]); + // Reseta o status setStatus(''); + // Define o tempo da última atualização para o tempo atual setLastUpdateTime(Date.now()); + // Configura um temporizador para chamar fetchStatus após um tempo definido (time_update) setTimeout(fetchStatus, time_update); + // Configura um temporizador para chamar checkMaintenance após um tempo definido (time_update) setTimeout(checkMaintenance, time_update); }; @@ -69,11 +100,21 @@ const Status = () => { return () => clearInterval(interval); }, []); + // Função para lidar com a atualização do tempo const handleUpdateTime = () => { + // Obtém o tempo atual em milissegundos const now = Date.now(); + + // Calcula a diferença em segundos entre o tempo atual e o tempo da última atualização const differenceInSeconds = Math.floor((now - lastUpdateTime) / 1000); + + // Converte a diferença de segundos para minutos const differenceInMinutes = Math.floor(differenceInSeconds / 60); + + // Define o tempo de atualização (em minutos) setUpdateTime(differenceInMinutes); + + // Se a diferença em minutos for maior ou igual a 60, chama a função handleUpdate if (differenceInMinutes >= 60) { handleUpdate(); } @@ -87,6 +128,7 @@ const Status = () => { return () => clearInterval(interval); }, [lastUpdateTime]); + // Função para abrir o status card const handleCard = () => { const card = document.querySelector('.status_card'); card?.classList.toggle('active'); @@ -94,6 +136,9 @@ const Status = () => { return ( + + + {/* Barra de status minificado */} { + {/* Fim da Barra de status minificado */} + {/* Card de status */} - - - - Status dos serviços - - - Atualizado há {updateTime} minutos - handleUpdate()} - variant="tertiary" - size="short" - icon="refresh" - > - handleCard()} - variant="tertiary" - size="short" - icon="less" - > - - + + + + Status dos serviços + + + Atualizado há {updateTime} minutos + handleUpdate()} + variant="tertiary" + size="short" + icon="refresh" + > + handleCard()} + variant="tertiary" + size="short" + icon="less" + > + - - - {/* Card de conexão do usuário */} - - - - - - - Conexão - - - - {responseTime === 0 - ? 'Verificando conexão' - : status === 'server-off' - ? 'Sem conexão' - : 'Sua conexão está funcionando corretamente.'} - - {responseTime} ms - - - - - {responseTime !== 0 ? ( - - ) : ( - - )} - - - - {/* --------------------------- */} + + - {/* Card de serviços Blip */} - - - + {/* Bloco de conexão do usuário */} + + - + - Serviços Blip + Conexão {responseTime === 0 - ? 'Verificando os serviços Blip' - : status === 'operational' - ? 'Os serviços Blip estão funcionando normalmente.' - : 'Serviços Blip instáveis'} + ? 'Verificando conexão' + : status === 'server-off' + ? 'Sem conexão' + : 'Sua conexão está funcionando corretamente.'} + {responseTime} ms - {status === 'operational' ? ( - - ) : status !== '' && status !== 'operational' ? ( - '' + {responseTime !== 0 ? ( + ) : ( )} + + {/* --------------------------- */} - {status === 'maintenance' && components - ? components.map((obj: { name: string }) => ( - - - - {obj.name} - - - Estamos atuando na manutenção desse serviço. Você pode encontrar algumas interrupções no - funcionamento. + {/* Card de serviços Blip */} + + + + + + + + Serviços Blip + + + + {responseTime === 0 + ? 'Verificando os serviços Blip' + : status === 'operational' + ? 'Os serviços Blip estão funcionando normalmente.' + : 'Serviços Blip instáveis'} - - )) - : null} - {status === 'maintenance' && problem - ? problem.map((obj: any) => ( - - - - {obj.name} - - {obj.incident_updates[0].body} + + + {status === 'operational' ? ( + + ) : status !== '' && status !== 'operational' ? ( + '' + ) : ( + + )} + + + + {status === 'maintenance' && components + ? components.map((obj: { name: string }) => ( + + + + {obj.name} + + + Estamos atuando na manutenção desse serviço. Você pode encontrar algumas interrupções no + funcionamento. + + + - - - )) - : null} + )) + : null} + {status === 'maintenance' && problem + ? problem.map((obj: any) => ( + + + + {obj.name} + + {obj.incident_updates[0].body} + + + + )) + : null} + + + {/* -------------------------------- */} + + {/* Botão de mais detalhes */} + + { + window.open(detailUrl); + }} + > + Mais detalhes + - - {/* -------------------------------- */} - - { - window.open(detailUrl); - }} - > - Mais detalhes - + {/* ----------------------------------------- */} + - - - - -