Membangun dasbor dalam tab dengan komponen Looker

Salah satu contoh sederhana tentang cara komponen UI dapat meningkatkan aplikasi tersemat adalah dengan menggunakannya untuk membuat navigasi tab untuk dasbor:

Contoh dasbor dengan antarmuka tab.

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

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

  1. Mem-build 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 penyertaan.
  6. Publikasikan ekstensi ke instance Looker Anda.

Persyaratan

Anda memerlukan beberapa elemen sebelum memulai:

  • Anda harus memiliki akses ke instance Looker dengan Extension Framework diaktifkan.
  • Anda harus memiliki izin develop.
  • Anda harus memiliki beberapa dasbor yang ditentukan pengguna dalam Looker untuk ditempatkan dalam tab UI.
  • Baik Anda mem-build di framework ekstensi atau di aplikasi React mandiri Anda sendiri, Anda harus mengautentikasi dengan API Looker dan memiliki akses ke objek Looker SDK. Baca tentang 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 Sisipkan 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.

Langkah 1: Mem-build ekstensi TypeScript dasar

Ikuti petunjuk di halaman dokumentasi Pengantar pembuatan ekstensi Looker untuk mem-build ekstensi. Untuk menjadikan ekstensi sebagai ekstensi TypeScript, gunakan modifikasi berikut:

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 dalam Looker.

Di dalam file, tempel kode berikut. Kode ini membuat tiga objek dasbor dan menentukannya berdasarkan ID. Anda dapat membuat lebih banyak atau lebih sedikit objek dasbor, bergantung pada kebutuhan Anda.

Ada tiga 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 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%;
 }
`;

Dalam contoh kode sebelumnya, hal-hal berikut terjadi:

  • Pernyataan impor memasukkan dependensi yang diperlukan.

    import React, { useCallback } from "react";
    import { LookerEmbedSDK } from "@looker/embed-sdk";
    import styled from "styled-components";
    
  • Blok kode berikutnya membuat objek EmbeddedDashboard1, yang merupakan objek EmbedContainer yang berisi iframe dasbor. Iframe dibuat dari Looker Embed SDK menggunakan ID dasbor yang diteruskan ke SDK tersebut. Pastikan untuk memperbarui https://mycompany.looker.com/ ke URL instance Looker Anda.

    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>;
    };
    
  • Dua blok kode berikutnya mengulangi proses ini untuk EmbeddedDashboard2 dan EmbeddedDashboard3. Sekali lagi, pastikan untuk memperbarui https://mycompany.looker.com/ ke URL instance Looker Anda.

  • 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 apa yang dilakukan kode tersebut):

import React from "react";
import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3,
} 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 memasukkan 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 { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3,
    } from "./Dashboard";
    
  • Pernyataan ekspor membuat objek Tabs tersedia untuk diimpor ke komponen lain.

    export const Tabs = () => (
    
  • ComponentsProvider menggabungkan setiap komponen untuk membantu 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
       <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>
    
    • Properti id dari Tab2 menerima ID tab yang unik. Perbarui ID sesuai kebutuhan untuk lingkungan Anda.
    • Properti label menerima label yang akan muncul di setiap tab. Perbarui ID sesuai dengan 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 EmbeddedDashboard1, EmbeddedDashboard1, dan EmbeddedDashboard1 ditempatkan dalam tab. Properti id-nya menerima ID dasbor yang akan disematkan di dalam tab tersebut. Saat membuat dasbor dengan tab sendiri, ganti nilai ini dengan ID dasbor untuk 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 dasbor-nya adalah 61.

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

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

import { HelloWorld } from './HelloWorld'

dan ganti 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 penyertaan

Tambahkan hak berikut ke bagian hak di file manifest.lkml dalam 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 sebelah kiri. Jika telah memulai server pengembangan lokal dengan yarn develop, Anda dapat melihat dasbor tab yang disematkan.

Langkah 6: Publikasikan ekstensi ke instance Looker Anda

Untuk menampilkan ekstensi kepada pengguna Looker lainnya, publikasikan ekstensi ke instance Looker Anda menggunakan 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 dalam project ekstensi. Simpan perubahan Anda.
  4. Dalam file manifest.lkml, komentari baris url: "http://localhost:8080/bundle.js".
  5. Dalam file manifest.lkml, hapus tanda 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 di-deploy, Anda tidak perlu lagi memulai server pengembangan lokal untuk melihat ekstensi, dan pengguna di instance Looker akan dapat melihat ekstensi jika mereka membukanya di dalam folder Applications di panel navigasi sebelah kiri.