Embutindo painéis Pentaho com RequireJS

Há não muito tempo, a gente fez uma série de webinar sobre CTools, disponível AQUI. Um dos temas foi sobre como embutir Dashboards feitos com CTools/CDE dentro de aplicações Javascript. Eu vou escrever aqui sobre o exemplo que foi dado lá no Webinar.

A gente construiu um plugin pro Pentaho que continha um portal – construído com Angular 1.x e funcionando no mesmo web container do Pentaho em http://localhost:8080/pentaho/content/portalboilerplate/app/index.html.

Então queria passar esse conteúdo aqui no blog da seguinte maneira:

  • Como instalar a demonstração
  • Organização dos arquivos
  • Como acontece a chamada do dashboard pra dentro da aplicação

Então bora lá.

Como instalar a demonstração

Nota: O plugin foi desenvolvido para o Pentaho 8.x mas não deve ser problema instalar numa versão 7.x do Pentaho Server para fins de demonstração.

É interessante que você tenha o git, pois é a maneira mais simples de instalar.

Entre no seu terminal e vá até a pasta system do seu Pentaho.

cd /opt/pentaho/server/pentaho-server/pentaho-solutions/system
git clone https://github.com/oncase/portalboilerplate.git

Esse comando vai criar a pasta system/portalboilerplate. IMPORTANTE: você pode baixar os arquivos de qualquer maneira, mas certifique-se de que o nome da pasta abaixo de system seja exatamente portalboilerplate.

Você agora deve instalar as dependências da aplicação angular. Para isso basta executar:

# Você precisa ter o nodejs instalado no seu ambiente
cd /opt/pentaho/server/pentaho-server/pentaho-solutions/system/portalboilerplate/app/
npm install

Pronto, reinicie seu Pentaho Server e acesse http://localhost:8080/pentaho/content/portalboilerplate/app/index.html.

Organização dos arquivos

Da estrutura que você verifica no plugin, alguns arquivos são importantes agora:

  • plugin.xml – lá você vai ver uma série de tags do tipo “ – a gente tá mapeando a pasta app/ do nosso plugin para estar acessível via http://localhost:8080/pentaho/content/portalboilerplate/app/...;
  • app/ – aqui estão os arquivos da nossa aplicação angular, que funciona 100% standalone sendo somente servida pelo Pentaho e estando também por trás da segurança do Pentaho – só usuários autenticados acessam;
  • app/index.html – É onde nasce a aplicação. Esse é o arquivo HTML onde a app mora e que será onde o dashboard será embutido – para embutir dashboards RequireJS é importante notar a importação do arquivo plugin/pentaho-cdf/api/cdf-embed.js;
  • app/portal/portal.js – Procure a variavel _menuItems. Ali tem alguns itens de menu, que podem ser do tipo
  • Dashboard RequireJS do CDE – que exista dentro do plugin – possui somente o atributo dashName: 'nomeDoDash';
  • Solução do Pentaho que esteja no repositório – possui dashName: 'iframe' e extraParams: { type:pentaho, url: ':public:Steel Wheels:Widget Library:Analysis Views:Geomap.xanalyzer/viewer' } onde a url é o argumento passado para a API pentaho/api/repos/ quando queremos acessar um artefato dentro do User Console.

Funcionamento

A aplicação está construída de uma maneira simplória apenas para viabilizar a demonstração, mas o que acontece quando ela abre, a gente consegue explicar de maneira simples.

Quando você abre o index.html através da URL, a aplicação AngularJS é carregada e no menu à esquerda abrem algumas opções, que são um link para a Home (arquivos em app/home/) e também uma relação de links contidos no _menuItems que vimos acima – se você incluir itens nesse objeto, vai vê-los no menu também.

Quando você clica num desses itens do menu, que são dashboards, em dado momento da pilha, haverá um chamado para a função dash/dash.js/dashService.loadDash(). Note que no controller DashCtrl nós fazemos a chamada para o endpoint do CDE especializado em pegar as definições no formato RequireJS plugin/pentaho-cdf-dd/api/renderer/getDashboard?path=/system/portalboilerplate/dashboards/'+ _item.dashName +'.wcdf. O argumento ?path= diz ao CDE onde está o dashboard que queremos embutir.

Então daquele item de menu que configuramos antes, o dashName é na verdade um nome de arquivo. Então você pode ter N outros dashboards mais o dashboard chamado iframe.

Esse dashboard iframe, contém um iframe dentro de si e chama a url do repositório que passamos como parâmetro para abrir o conteúdo no seu corpo. É uma forma generalista de abrir qualquer coisa que esteja no User Console e dar um visual no entorno antes de exibir ao usuário.

Depois que o botão é clicado, note um ponto importante do código:

require([url],
function (Dashboard) {

var dashContentID = "dashPlaceHolder";
var sampleDash = new Dashboard(dashContentID);

sampleDash.setupDOM();

_currCDE = sampleDash;

//Applies parameters previously saved
_applyParams();
var elm = angular.element(document.getElementById(dashContentID));
var x = $compile(elm)(scope);
_currCDE.renderDashboard();

}
);
  • A variável dashContentID guarda o ID do elemento HTML onde o painel será renderizado;
  • sampleDash e _currCDE são objetos dashboard que controlam todo o painel (assim como fazemos dentro do CDE);
  • Quando fazemos o setupDOM() os componentes do dashboard ainda não foram renderizados – apenas o layout;
  • Antes de fazer o renderDashboard() podemos ainda alterar características do painel, como parâmetros, compilar diretivas Angular, etc;
  • Quando chamamos o renderDashboard() o CDE inicia os componentes e, consequentemente data-sources;

Conclusão

Você pode desenvolver aplicativos Javascript ou em qualquer outra tecnologia WEB e ter seus painéis Pentahos embutidos. O que demonstramos foi o mero funcionamento de uma das milhares de abordagens.

O passo-a-passo simplificado para embutir dashboards CTools com RequireJS é:

  • Construir a aplicação;
  • Embutir plugin/pentaho-cdf/api/cdf-embed.js;
  • fazer as chamadas require() sempre que necessário.

É importante lembrar que todo o escôpo de execução do dashboard é local e nenhuma variável javascript vaza para o global. Isso permite que você possa inclusive ter várias instâncias do mesmo dashboard renderizados na mesma aplicação na mesma página ao mesmo tempo.

Para ver uma documentação mais extensa disso, pode entrar em http://pedroalves-bi.blogspot.si/2015/08/pentaho-ctools-and-support-for-requirejs.html?view=classic.

Veja também nossa série de webinars sobre CTools.

Marcello Pontes
Analytics Architect & Front-ender at Oncase |