Membangun dasbor dalam tab dengan komponen Looker

Salah satu contoh sederhana tentang cara komponen UI dapat meningkatkan kualitas aplikasi sematan adalah dengan menggunakannya untuk membuat navigasi bertab untuk dasbor:

Contoh berikut menambahkan dasbor bertab ke ekstensi TypeScript dasar yang dibuat menggunakan framework ekstensi Looker.

Untuk mempelajari contoh ini, pastikan penyiapan Anda memenuhi persyaratan, lalu gunakan langkah-langkah berikut:

1. Buat ekstensi TypeScript dasar.
2. Buat file src/Dashboards.tsx untuk menghubungkan dan menyimpan dasbor.
3. Buat file src/Tabs.tsx untuk menyimpan komponen Tabs.
4. Ganti referensi HelloWorld di src/App.tsx.
5. Perbarui file manifest.lkml dengan hak penyematan.
6. Publikasikan ekstensi ke instance Looker Anda.

Persyaratan

Anda akan memerlukan beberapa elemen sebelum memulai:

• Anda harus memiliki akses ke instance Looker dengan Extension Framework yang diaktifkan.
• Anda harus memiliki izin develop.
• Anda harus memiliki beberapa dasbor yang ditentukan pengguna dalam Looker untuk ditempatkan dalam tab UI.
• Baik Anda membangun di framework ekstensi maupun di aplikasi React mandiri Anda sendiri, penting untuk melakukan autentikasi dengan Looker API dan memiliki akses ke objek Looker SDK. Baca autentikasi Looker API atau framework ekstensi kami untuk mengetahui informasi selengkapnya.
• Contoh ini menggunakan Looker Embed SDK. Agar Embed SDK dapat berjalan di instance Anda, http://localhost:8080 harus disertakan dalam Daftar yang Diizinkan untuk Domain yang Disematkan di dalam halaman Sematkan pada panel Admin.

• Pastikan Anda telah menginstal paket NPM Komponen Looker. Informasi tentang cara menginstal dan menggunakan paket komponen dapat ditemukan dalam dokumen README, yang tersedia di GitHub dan NPM:

  • Menginstal dan menggunakan paket komponen (GitHub)
  • Menginstal dan menggunakan paket komponen (NPM)

Langkah 1: Buat ekstensi TypeScript dasar

Untuk membuat ekstensi, ikuti petunjuk di halaman dokumentasi Pengantar pembuatan ekstensi Looker. Untuk menjadikan ekstensi sebagai ekstensi TypeScript, gunakan modifikasi berikut:

• Jika Anda menggunakan alat create-looker-extension untuk membuat template ekstensi, pilih React untuk framework dan TypeScript untuk bahasa.
• Jika Anda meng-clone repositori Git untuk membuat template ekstensi, buka direktori extension-examples/react/TypeScript/helloworld-ts pada langkah kedua.

Langkah 2: Buat file src/Dashboards.tsx untuk menghubungkan dan menyimpan dasbor

Di dalam direktori src ekstensi baru Anda, buat file Dashboards.tsx. File ini akan menghubungkan dan menyimpan dasbor yang telah Anda buat di Looker.

Di dalam file, tempelkan kode berikut. Kode ini membuat komponen dasbor yang dapat digunakan kembali.

Ada satu lokasi dalam kode URL instance, https://mycompany.looker.com. Ubah ini menjadi URL instance Looker Anda.

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

export const EmbeddedDashboard = (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 EmbedContainer = styled.div`
 width: 100%;
 height: 95vh;
 & > iframe {
   width: 100%;
   height: 100%;
 }
`;

Dalam contoh kode sebelumnya, hal-hal berikut terjadi:

• Pernyataan impor membawa dependensi yang diperlukan.

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

• Blok kode berikutnya membuat objek EmbeddedDashboard, yang merupakan objek EmbedContainer yang berisi iframe dasbor. Komponen ini dapat digunakan kembali; Anda dapat menggunakannya untuk dasbor apa pun dengan meneruskan properti id yang berbeda. Iframe dibuat dari Looker Embed SDK menggunakan ID dasbor yang diteruskan ke iframe. Pastikan untuk memperbarui https://mycompany.looker.com/ ke URL instance Looker Anda.

  export const EmbeddedDashboard = (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>;
  };
  

• Blok terakhir menata gaya EmbedContainer.

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

Langkah 3: Buat file src/Tabs.tsx untuk menyimpan komponen Tabs

Di dalam direktori src ekstensi baru Anda, buat file Tabs.tsx. File ini menyimpan komponen Tabs dan mereferensikan ID dasbor Looker untuk setiap dasbor.

Di dalam file tersebut, tempelkan kode berikut (bagian setelah ini menjelaskan fungsi kode tersebut):

import React from "react";
import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
import { EmbeddedDashboard } from "./Dashboards";

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>
)

Dalam contoh kode sebelumnya, hal-hal berikut terjadi:

• Pernyataan impor membawa dependensi dan komponen yang diperlukan, serta objek EmbeddedDashboard yang dibuat dalam file Dashboards.tsx.

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

• Pernyataan ekspor membuat objek Tabs tersedia untuk diimpor ke komponen lain.

  export const Tabs = () => (
  

• ComponentsProvider membungkus setiap komponen untuk membantu penerapan tema.

  <ComponentsProvider>
  </ComponentsProvider>
  

• Komponen Tabs2 dan komponen turunannya, Tab2, membuat tiga tab dan menautkannya ke dasbor Looker.

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

  • Properti id dari Tab2 menerima ID tab unik. Perbarui ID sesuai kebutuhan untuk lingkungan Anda.
  • Properti label menerima label yang akan muncul di setiap tab. Perbarui ID sesuai dasbor yang Anda gunakan.
  • String yang ditempatkan di dalam tag Tab2 akan muncul di bagian atas area konten untuk tab tersebut. Perbarui atau hapus string sesuai kebutuhan.
  • Objek EmbeddedDashboard ditempatkan di dalam tab. Properti id-nya menerima ID dasbor yang akan disematkan di dalam tab tersebut. Saat membuat dasbor bertab Anda sendiri, ganti nilai ini dengan ID dasbor yang ingin Anda gunakan. Anda dapat menemukan ID dasbor numerik di URL setelah dashboards/. Misalnya, jika URL-nya adalah https://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US, ID dasbornya adalah 61.

Langkah 4: Ganti referensi HelloWorld di src/App.tsx

Buka file App.tsx Anda di direktori src. Hapus pernyataan impor HelloWorld:

import { HelloWorld } from './HelloWorld'

dan menggantinya dengan:

import { Tabs } from './Tabs'

Selain itu, di file src/App.tsx, ganti <HelloWorld/> dengan <Tabs/>.

Secara opsional, Anda juga dapat menghapus file HelloWorld.tsx dari direktori ini karena Anda tidak akan menggunakannya lagi.

Langkah 5: Perbarui file manifest.lkml dengan hak penyematan

Tambahkan hak berikut ke bagian hak file manifest.lkml di project LookML Anda:

use_embeds: yes

File manifest.lkml akan terlihat seperti ini:

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
  }
}

Sekarang Anda dapat membuka ekstensi, yang muncul di folder Applications di panel navigasi kiri. Jika telah memulai server pengembangan lokal dengan yarn develop, Anda dapat melihat dasbor bertab yang disematkan.

Langkah 6: Publikasikan ekstensi ke instance Looker Anda

Untuk menampilkan ekstensi kepada pengguna Looker lain, publikasikan ekstensi ke instance Looker Anda dengan mengikuti langkah-langkah berikut:

1. Dengan server pengembangan yang berjalan, buka localhost:8080/bundle.js.
2. Simpan konten jendela browser secara lokal di komputer Anda sebagai file .js.
3. Pastikan Anda berada dalam mode pengembangan, lalu tarik lalu lepas file .js ke project ekstensi Anda. Simpan perubahan Anda.
4. Dalam file manifest.lkml, jadikan baris url: "http://localhost:8080/bundle.js" sebagai komentar.
5. Dalam file manifest.lkml, hapus komentar pada baris # file: "bundle.js" dan pastikan nama file cocok dengan nama file .js yang Anda upload ke project. Simpan perubahan Anda.
6. Commit dan deploy perubahan Anda.

Setelah perubahan Anda di-deploy, Anda tidak perlu lagi memulai server pengembangan lokal untuk melihat ekstensi, dan pengguna di instance Looker Anda akan dapat melihat ekstensi jika mereka membukanya di dalam folder Aplikasi di panel navigasi utama.