Como criar um painel com guias com os componentes do Looker

Um exemplo simples de como os componentes da UI podem aprimorar um aplicativo incorporado é usá-los para criar uma navegação com guias para painéis:

O exemplo a seguir adiciona painéis com guias a uma extensão básica do TypeScript que foi criada usando o framework de extensão do Looker.

Para trabalhar neste exemplo, verifique se sua configuração atende aos requisitos e siga estas etapas:

1. Crie uma extensão básica do TypeScript.
2. Crie o arquivo src/Dashboards.tsx para conectar e armazenar painéis.
3. Crie o arquivo src/Tabs.tsx para armazenar o componente Tabs.
4. Substitua a referência HelloWorld em src/App.tsx.
5. Atualize o arquivo manifest.lkml com o direito de incorporação.
6. Publique a extensão na sua instância do Looker.

Requisitos

Você precisará de alguns elementos antes de começar:

• Você precisa ter acesso a uma instância do Looker com o framework de extensão ativado.
• Você precisa ter a permissão develop.
• É preciso ter vários painéis definidos pelo usuário no Looker para serem colocados nas guias da UI.
• Se você estiver criando na biblioteca de extensões ou no seu próprio aplicativo independente do React, é importante fazer a autenticação com a API Looker e ter acesso ao objeto do SDK do Looker. Leia sobre a autenticação da API Looker ou nosso framework de extensão para mais informações.
• Este exemplo usa o SDK incorporado do Looker. Para permitir que o SDK incorporado seja executado na sua instância, http://localhost:8080 precisa ser incluído na lista de permissões de domínios incorporados na página Incorporar do painel Administrador.
• Verifique se você instalou o pacote NPM dos componentes do Looker. Informações sobre a instalação e o uso do pacote de componentes podem ser encontradas no documento README, disponível no GitHub e no NPM.

Etapa 1: criar uma extensão básica do TypeScript

Siga as instruções na página de documentação Introdução à criação de uma extensão do Looker (em inglês). Para transformar a extensão em TypeScript, use as seguintes modificações:

• Se você usar a ferramenta create-looker-extension para criar o modelo de extensão, escolha "TypeScript" como a linguagem que você quer usar na segunda etapa.
• Se você clonar o repositório Git para criar o modelo de extensão, vá até o diretório extension-examples/react/TypeScript/helloworld-ts na segunda etapa.

Etapa 2: criar o arquivo src/Dashboards.tsx para conectar e armazenar painéis

No diretório src da nova extensão, crie um arquivo Dashboards.tsx. Esse arquivo conectará e armazenará os painéis que você criou no Looker.

Dentro do arquivo, cole o código a seguir. Esse código cria três objetos do painel e os especifica por ID. É possível criar mais ou menos objetos no painel, dependendo das suas necessidades.

Existem três locais no código de um URL de instância, https://mycompany.looker.com. Altere para o URL da instância do Looker.

import React, { useCallback } from "react";
import { LookerEmbedSDK } from "@looker/embed-sdk";
import styled from "styled-components";

export const EmbeddedDashboard1 = (props: { id: number | string }) => {
 const [dashboard, setDashboard] = React.useState();
 const setupDashboard = (dashboard: any) => {
   setDashboard(dashboard);
 };
 const embedCtrRef = useCallback((el) => {
   const hostUrl = "https://mycompany.looker.com/";
   if (el && hostUrl) {
     el.innerHTML = "";
     LookerEmbedSDK.init(hostUrl);
     LookerEmbedSDK.createDashboardWithId(props.id)
       .withNext()
       .appendTo(el)
       .build()
       .connect()
       .then(setupDashboard)
       .catch((error) => {
         console.error("Connection error", error);
       });
   }
 }, []);
 return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
};

export const EmbeddedDashboard2 = (props: { id: number }) => {
 const [dashboard, setDashboard] = React.useState();
 const setupDashboard = (dashboard: any) => {
   setDashboard(dashboard);
 };
 const embedCtrRef = useCallback((el) => {
   const hostUrl = "https://mycompany.looker.com/";
   if (el && hostUrl) {
     el.innerHTML = "";
     LookerEmbedSDK.init(hostUrl);
     LookerEmbedSDK.createDashboardWithId(props.id)
       .withNext()
       .appendTo(el)
       .build()
       .connect()
       .then(setupDashboard)
       .catch((error) => {
         console.error("Connection error", error);
       });
   }
 }, []);
 return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
};

export const EmbeddedDashboard3 = (props: { id: number }) => {
 const [dashboard, setDashboard] = React.useState();
 const setupDashboard = (dashboard: any) => {
   setDashboard(dashboard);
 };
 const embedCtrRef = useCallback((el) => {
   const hostUrl = "https://mycompany.looker.com/";
   if (el && hostUrl) {
     el.innerHTML = "";
     LookerEmbedSDK.init(hostUrl);
     LookerEmbedSDK.createDashboardWithId(props.id)
       .withNext()
       .appendTo(el)
       .build()
       .connect()
       .then(setupDashboard)
       .catch((error) => {
         console.error("Connection error", error);
       });
   }
 }, []);

 return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
};

export const EmbedContainer = styled.div`
 width: 100%;
 height: 95vh;
 & > iframe {
   width: 100%;
   height: 100%;
 }
`;

No exemplo de código anterior, acontece o seguinte:

• As instruções de importação trazem as dependências necessárias.

  import React, { useCallback } from "react";
  import { LookerEmbedSDK } from "@looker/embed-sdk";
  import styled from "styled-components";
  

• O próximo bloco de código cria um objeto EmbeddedDashboard1, que é um objeto EmbedContainer que contém um iframe do painel. O iframe é gerado a partir do SDK incorporado do Looker usando o ID do painel transmitido a ele. Atualize https://mycompany.looker.com/ para o URL da instância do Looker.

  export const EmbeddedDashboard1 = (props: { id: number | string }) => {
  const [dashboard, setDashboard] = React.useState();
  const setupDashboard = (dashboard: any) => {
    setDashboard(dashboard);
  };
  const embedCtrRef = useCallback((el) => {
    const hostUrl = "https://mycompany.looker.com/";
    if (el && hostUrl) {
      el.innerHTML = "";
      LookerEmbedSDK.init(hostUrl);
      LookerEmbedSDK.createDashboardWithId(props.id)
        .withNext()
        .appendTo(el)
        .build()
        .connect()
        .then(setupDashboard)
        .catch((error) => {
          console.error("Connection error", error);
        });
    }
  }, []);
  return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
  };
  

• Os dois blocos de código a seguir repetem esse processo para EmbeddedDashboard2 e EmbeddedDashboard3. Mais uma vez, atualize https://mycompany.looker.com/ para o URL da sua instância do Looker.

• O bloco final define o estilo de EmbedContainer.

    export const EmbedContainer = styled.div`
      width: 100%;
      height: 95vh;
      & > iframe {
        width: 100%;
        height: 100%;
      }
  `;
  

Etapa 3: crie o arquivo src/Tabs.tsx para armazenar o componente Tabs

No diretório src da nova extensão, crie um arquivo Tabs.tsx. Esse arquivo armazena o componente Tabs e referencia o ID do painel do Looker para cada painel.

Dentro desse arquivo, cole o código a seguir (a seção a seguir explica o que o código está fazendo):

import React from "react";
import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3,
} from "./Dashboard";

export const Tabs = () => (
 <ComponentsProvider>
   <Tabs2>
     <Tab2 id="5" label="Order Analysis Dashboard">
      Order data from the last 12 months
       <EmbeddedDashboard1 id={5} />
     </Tab2>
     <Tab2 id="2" label="Inventory Dashboard">
       Current global inventory
       <EmbeddedDashboard2 id={2} />
     </Tab2>
     <Tab2 id="7" label="Customer Dashboard">
       Anonymized customer data
       <EmbeddedDashboard3 id={7} />
     </Tab2>
   </Tabs2>
 </ComponentsProvider>
)

No exemplo de código anterior, acontece o seguinte:

• As instruções de importação trazem as dependências e os componentes necessários, bem como os objetos EmbeddedDashboard que foram criados no arquivo Dashboards.tsx.

  import React from "react";
  import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
  import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3,
  } from "./Dashboard";
  

• A instrução de exportação disponibiliza o objeto Tabs para ser importado em outros componentes.

  export const Tabs = () => (
  

• O ComponentsProvider envolve componentes individuais para ajudar nos temas.

  <ComponentsProvider>
  </ComponentsProvider>
  

• O componente Tabs2 e o componente filho, Tab2, criam três guias e as vinculam aos painéis do Looker.

   <Tabs2>
   <Tab2 id="5" label="Order Analysis Dashboard">
    Order data from the last 12 months
     <EmbeddedDashboard1 id={5} />
   </Tab2>
   <Tab2 id="2" label="Inventory Dashboard">
     Current global inventory
     <EmbeddedDashboard2 id={2} />
   </Tab2>
   <Tab2 id="7" label="Customer Dashboard">
     Anonymized customer data
     <EmbeddedDashboard3 id={7} />
   </Tab2>
  </Tabs2>
  

  • A propriedade id de Tab2 aceita um ID de guia exclusivo. Atualize o ID conforme necessário para seu ambiente.
  • A propriedade label aceita o rótulo que será exibido em cada guia. Atualize o ID conforme apropriado para o painel que você está usando.
  • Uma string colocada dentro das tags Tab2 aparecerá na parte superior da área de conteúdo dessa guia. Atualize ou remova a string conforme necessário.
  • Os objetos EmbeddedDashboard1, EmbeddedDashboard1 e EmbeddedDashboard1 são colocados na guia. As propriedades do id aceitam o ID do painel que será incorporado a essa guia. Ao criar seu próprio painel com guias, substitua esse valor pelo ID do painel que você quer usar. Você pode encontrar o ID numérico do painel no URL depois de dashboards/. Por exemplo, se o URL for https://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US, o ID do painel será 61.

Etapa 4: substitua a referência HelloWorld em src/App.tsx

Navegue até o arquivo App.tsx no diretório src. Remova a instrução de importação do HelloWorld:

import { HelloWorld } from './HelloWorld'

e substitua por:

import { Tabs } from './Tabs'

Como opção, você também pode excluir o arquivo HelloWorld.tsx desse diretório porque ele não será mais usado.

Etapa 5: atualizar o arquivo manifest.lkml com direito de incorporação

Adicione o seguinte direito à seção de direitos do arquivo manifest.lkml no seu projeto do LookML:

use_embeds: yes

O arquivo manifest.lkml ficará assim:

application: name {
  label: "label"
  url: "http://localhost:8080/bundle.js"
  # file: "bundle.js
  entitlements: {
    core_api_methods: ["me"] #Add more entitlements here as you develop new functionality
    use_embeds: yes
  }
}

Agora você pode navegar até a extensão, que aparece na pasta Aplicativos no painel de navegação à esquerda. Se você iniciou seu servidor de desenvolvimento local com yarn develop, poderá ver os painéis incorporados com guias.

Etapa 6: publicar a extensão na sua instância do Looker

Para exibir a extensão para outros usuários do Looker, publique-a na sua instância do Looker seguindo estas etapas:

1. Com o servidor de desenvolvimento em execução, navegue até localhost:8080/bundle.js.
2. Salve o conteúdo da janela do navegador localmente no seu computador como um arquivo .js.
3. Verifique se você está no modo de desenvolvimento. Em seguida, arraste e solte o arquivo .js no seu projeto de extensão. Salve as alterações.
4. No arquivo manifest.lkml, comente a linha url: "http://localhost:8080/bundle.js".
5. No arquivo manifest.lkml, remova a marca de comentário da linha # file: "bundle.js" e verifique se o nome do arquivo corresponde ao do arquivo .js enviado ao projeto. Salve as alterações.
6. Confirme e implante as alterações.

Depois de implantada, não será mais necessário iniciar o servidor de desenvolvimento local para ver a extensão, e os usuários da sua instância do Looker poderão ver a extensão se navegarem até ela dentro da pasta Aplicativos no painel de navegação à esquerda.