Extensions

Pengenalan

Extensions adalah mekanisme untuk menambahkan modul UI kustom ke dalam Lenz Dashboard secara dinamis menggunakan teknologi Module Federation. Setiap extension merupakan aplikasi React yang di-deploy secara terpisah dan dimuat oleh Lenz saat dibutuhkan — tanpa perlu mengubah atau membangun ulang kode dashboard utama.

Dengan sistem ini, tim Anda dapat mengembangkan dan merilis fitur baru secara mandiri sebagai extension, lalu mendaftarkannya ke Lenz melalui halaman Extension Settings.

Cara Kerja

Extension Server (Remote)
        │
        │  expose React component via Module Federation
        ▼
Lenz Dashboard (Host)
        │
        │  load remoteEntry.js saat extension diakses
        │  mount komponen ke dalam layout Lenz
        ▼
Pengguna melihat UI extension di sidebar

Lenz bertindak sebagai host yang menginisialisasi Module Federation runtime. Setiap extension menyediakan sebuah remoteEntry.js yang mengekspos komponen React. Lenz memuat komponen ini secara lazy hanya ketika extension tersebut diakses oleh pengguna.

Extension mendapatkan konteks dari host berupa:

Cara Menggunakan

Mendaftarkan Extension Server dan Menginstall Extension

https://extensions.perusahaan.com

Konfigurasi Extension

Setiap extension yang terinstall dapat dikonfigurasi lebih lanjut melalui halaman Extension Settings.

Opsi Konfigurasi per Extension

Pengaturan Sidebar

Mengedit Extension

Klik ikon edit pada extension yang terinstall untuk membuka dialog Edit Extension. Dari sini Anda dapat mengubah:

• Nama — label yang ditampilkan di sidebar dan halaman extension
• Ikon — pilih dari daftar ikon yang tersedia melalui icon picker

Perubahan disimpan secara langsung ke server dan tercermin di sidebar tanpa perlu memuat ulang halaman.

Uninstall Extension

• Uninstall satu extension: Klik tombol Uninstall pada extension yang bersangkutan, lalu konfirmasi pada dialog yang muncul.
• Uninstall semua: Klik Uninstall Semua, lalu konfirmasi tindakan pada dialog. Semua extension akan dihapus dari sidebar.

Fitur Utama

API Reference

Dokumentasi lengkap seluruh endpoint Extensions tersedia di halaman terpisah, mencakup skema request/response, parameter, dan contoh penggunaan.

Tips & Troubleshooting

Untuk Developer Extension

Bagian ini ditujukan bagi developer yang ingin membuat extension untuk Lenz Dashboard.

Prinsip Dasar

Extension adalah aplikasi React yang dikonfigurasi sebagai Module Federation Remote. Extension harus mengekspos minimal satu komponen React melalui konfigurasi Module Federation, dengan antarmuka yang kompatibel dengan HostContext yang disediakan Lenz.

Kontrak Komponen

Komponen utama extension akan menerima props berikut dari Lenz:

interface HostContext {
  authToken: string | null;       // Token JWT pengguna aktif
  apiBaseUrl: string;             // Base URL API Lenz
  onNavigate?: (path: string) => void;             // Navigasi ke route Lenz
  navigateToStream?: (streamId: string) => void;   // Buka detail stream
  openEventDetail?: (pipelineEventId: string) => void; // Buka detail event
}

Konfigurasi Module Federation

Extension harus dikonfigurasi dengan:

• name: Nama unik remote (sesuai dengan slug yang didaftarkan di server katalog)
• exposes: Objek yang mengekspos komponen utama — key-nya adalah moduleName yang terdaftar di katalog
• shared: Pastikan react dan react-dom dikonfigurasi sebagai singleton: true agar berbagi instance yang sama dengan Lenz host

Panduan Lengkap

Untuk panduan step-by-step membuat extension dari awal — termasuk setup proyek, konfigurasi bundler, deployment, dan registrasi ke server katalog — lihat dokumentasi developer extension:

Selanjutnya