Dados Kanban são usados muitas vezes, como monitoramento visual de operação e manutenção, exibição em tempo real de dados de transações, exibição de fluxo humano, etc., todos requerem dados Kanban.
Aqui, ensinamos como usar Grafana + simpod-json-datasource para construir rapidamente uma placa de dados.
Grafana é uma ferramenta de visualização e análise de medição de código aberto e multiplataforma que pode consultar e visualizar os dados coletados e notificá-los a tempo. Tem principalmente as seguintes seis características:
1. Modo de exibição: gráficos do lado do cliente rápidos e flexíveis, os plug-ins do painel têm muitas maneiras diferentes de indicadores visuais e registros, e a biblioteca oficial tem uma grande variedade de plug-ins do painel, como mapas de calor, gráficos de linha, gráficos e outros métodos de exibição;
2. Fonte de dados: Graphite, InfluxDB, OpenTSDB, Prometheus, Elasticsearch, CloudWatch e KairosDB, etc .;
3. Lembrete de notificação: Defina as regras de alarme dos indicadores mais importantes de forma visual.O Grafana irá calcular e enviar notificações continuamente, e obter notificações através do Slack, PagerDuty, etc. quando os dados atingirem o limite;
4. Display misto: Misture diferentes fontes de dados no mesmo gráfico, você pode especificar a fonte de dados com base em cada consulta, ou até mesmo personalizar a fonte de dados;
5. Anotação: Use gráficos de anotação de evento ricos de diferentes fontes de dados.Passando o mouse sobre o evento irá exibir os metadados completos do evento e marcação;
6. Filtros: os filtros ad-hoc permitem que novos filtros de chave / valor sejam criados dinamicamente, e esses filtros são aplicados automaticamente a todas as consultas que usam a fonte de dados.
Um, instale grafana
Endereço oficial para download do site: https://grafana.com/grafana/download
instalar mac
wuxiaolong:~ macuser$ /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" #使用brew
wuxiaolong:~ macuser$ brew update
wuxiaolong:~ macuser$ brew install grafana # 安装grafana
wuxiaolong:~ macuser$ brew services start grafana # 启动grafana
wuxiaolong:~ macuser$ brew services restart grafana # 重启grafana
# grafana的配置文件所在位置：/usr/local/etc/grafana/grafana.ini
centos, instalação redhat
[root@iZuf61pdvb2o7cf4mu9ccyZ ~] wget https://dl.grafana.com/oss/release/grafana-7.2.0.linux-amd64.tar.gz
[root@iZuf61pdvb2o7cf4mu9ccyZ ~] tar -zxvf grafana-7.2.0.linux-amd64.tar.gz
[root@iZuf61pdvb2o7cf4mu9ccyZ ~] ./grafana-7.2.0/bin/grafana-server # 前台启动
[root@iZuf61pdvb2o7cf4mu9ccyZ ~] nohup ./grafana-7.2.0/bin/grafana-server & # 后台启动
# grafana的配置文件所在位置：./grafana-7.1.5/conf/defaults.ini
A porta padrão após a inicialização: 3000, o nome de usuário e senha padrão: admin / admin
Dois, instale o plug-in simpod-json-datasource
instalação
[root@iZuf61pdvb2o7cf4mu9ccyZ ~] grafana-cli plugins install simpod-json-datasource #安装这个simpod-json-datasource数据源
Reinicie o grafana para ver o novo plug-in de origem de dados.
O que você precisa prestar atenção ao instalar o plug-in:
Após a instalação do mac executar diretamente o comando acima, reinicie-o.
Depois de instalar o centos e o redhat, depois de executar o comando de instalação do plug-in acima e reiniciar, a nova fonte de dados não pode ser vista. Como o local padrão do plug-in após a instalação é / var / lib / grafana / plugins, você precisa copiar manualmente este plug-in para o diretório ./grafana-7.2.0/data/plugins, porque o plug-in read é especificado no arquivo de configuração defaults.ini Obtenha a localização. Ou modifique a localização no arquivo de configuração para / var / lib / grafana / plugins.
# Directory where grafana will automatically scan and look for plugins
plugins = data/plugins
Requisitos de projeto de back-end
Documento oficial: https://grafana.com/grafana/plugins/simpod-json-datasource
O projeto de fonte de dados de serviço http padrão fornecido pelo método (node.js): https://github.com/bergquist/fake-simple-json-datasource
Este é um projeto de fonte de dados implementado usando java durante meu teste: https://gitee.com/wuxiaolongah/grafana-backend
Ao implementar a fonte de dados exigida pelo plug-in simpod-json-datasource, há vários problemas que precisam ser considerados:
1. Quatro interfaces precisam ser implementadas: // annotations / search / query
2. O formato dos dados retornados pela interface é fixo
Por exemplo, o formato de dados exigido pela interface / query:
Configurar fonte de dados
Escreva a interface de back-end, após a conclusão da implantação, preencha o endereço do projeto na url, clique em teste e o teste será aprovado.
Três, crie um novo painel de controle
Crie um novo painel e, em seguida, você pode construir vários painéis de painel. Por exemplo, os dados da transação são um painel.
Acesse este painel, selecione o método de exibição de estatísticas e use a fonte de dados padrão (ou seja, os dados são obtidos da interface de chamada do projeto configurada acima).
O inspetor de consulta pode visualizar a mensagem de solicitação e o resultado da resposta da solicitação http para obter dados.
Metric é uma métrica.Você pode ver meu projeto chamando os dados obtidos na interface http post / search da fonte de dados.
Dados JSON adicionais podem adicionar parâmetros dinamicamente às solicitações de postagem / consulta http, e o back-end responde dinamicamente. orgnizationcode and orgnization_code eo r g n i z a t i o nco d e e pt_date são duas variáveis, e os parâmetros são preenchidos dinamicamente em cada consulta.
Os valores desses dois parâmetros podem ser obtidos de vários lugares, como as variáveis definidas no painel antecipadamente, ou a url. Eu falarei sobre isso mais tarde.
O back-end pode obter os valores dessas duas variáveis e retornar os dados correspondentes. O back-end pode obter os valores das variáveis do objeto de destino:
Quatro, transferência de parâmetro dinâmico
As variáveis mencionadas acima são o resultado da transferência de parâmetros dinâmicos. É preciso prestar atenção aos seguintes pontos ao usar a transferência dinâmica de parâmetros.
Definir variáveis
Clique em Configurações no canto superior direito do painel:
Nova variável:
O nome da variável definido aqui é orgnization_code, e $ orgnization_code é usado ao fazer referência. Existem muitos tipos. A personalização é usada aqui e vários valores padrão podem ser fornecidos, separados por vírgulas. Finalmente, devemos prestar atenção ao painel de salvamento.
Depois de concluída a definição, ela pode ser usada. Quando o painel for carregado, a variável obterá automaticamente o valor correspondente do valor padrão aqui e o passará para a interface de back-end / consulta.
Use url para passar parâmetros
Depois que a definição acima for concluída, se houver essa variável na url, o valor dessa variável na url será usado para obter os dados de back-end dinamicamente.
https://XXXXXXXX.com/d/EybWfmKGz/ri-jiao-yi-bao-biao?orgId=1&kiosk&var-organization_code=00304&var-p_date=20200917
O formato da passagem de parâmetro variável em url évar-{变量名}={变量值}
Cinco, mude a forma de exibição
Use grafana para exibir dados em uma tela grande. No canto superior direito do painel, você pode alterar o modo de exibição e escolher o modo de tela inteira ou tv.
Depois de clicar, você verá que há um quiosque de parâmetro adicional na url do navegador, que é o controle de exibição.
Seis, URL mais caminho público
Normalmente https://XXXXXXXX.com/d/EybWfmKGz/ri-jiao-yi-bao-biao?orgId=1&kiosk&var-organization_code=00304&var-p_date=20200917, você pode usar grafana diretamente . Se precisar https://XXXXXXXX.com/adicionar um caminho público para encaminhamento, você pode modificar o arquivo de configuração:
Modifique root_url e serve_from_sub_path
Então você pode usar o https://XXXXXXXX.com/mdashboard/d/EybWfmKGz/ri-jiao-yi-bao-biao?orgId=1&kiosk&var-organization_code=00304&var-p_date=20200917acesso.
Útil ao usar o nginx para fazer encaminhamento de proxy.
Siga a conta oficial e digite " java-summary " para obter o código-fonte.
Terminado, chame um dia!
[ Disseminação de conhecimento, compartilhamento de valor ], obrigado amigos por sua atenção e apoio, eu sou [ Zhuge Xiaoyuan ], um trabalhador migrante da Internet lutando pela hesitação.
