Kustomisasi Horizon¶

Lihat juga

Anda mungkin juga tertarik Themes (tema) dan Branding Horizon.

Changing the Site Title (mengubah judul situs)¶

OpenStack Dashboard Site Title branding (yaitu "OpenStack Dashboard") dapat ditimpa dengan menambahkan atribut SITE_BRANDING ke local_settings.py dengan nilai sebagai nama yang diinginkan.

File local_settings.py dapat ditemukan di path direktori Horizon openstack_dashboard/local/local_settings.py.

Mengubah Brand Link¶

Logo juga bertindak sebagai hyperlink. Perilaku default adalah mengalihkan ke horizon:user_home. Dengan menambahkan atribut SITE_BRANDING_LINK dengan target url yang diinginkan misalnya, http://sample-company.com di local_settings.py, target hyperlink dapat diubah.

Menyesuaikan Footer¶

Dimungkinkan untuk menyesuaikan footer global dan login dengan menggunakan warisan rekursif Django (Django's recursive inheritance) untuk memperluas template base.html, auth/login.html, and auth/_login_form.html. Anda melakukan ini dengan memberi nama template Anda nama yang sama dengan template yang ingin Anda perpanjang dan hanya mengganti blok yang ingin Anda ubah.

Tema Anda base.html:

{% extends "base.html" %}

{% block footer %}
  <p>My custom footer</p>
{% endblock %}

Tema Anda auth/login.html:

{% extends "auth/login.html" %}

{% block footer %}
  <p>My custom login footer</p>
{% endblock %}

Tema Anda auth/_login_form.html:

{% extends "auth/_login_form.html" %}

{% block login_footer %}
  {% comment %}
    You MUST have block.super because that includes the login button.
  {% endcomment %}
 {{ block.super }}
  <p>My custom login form footer</p>
{% endblock %}

Lihat tema `` example`` untuk tema kerja yang menggunakan blok ini.

Memodifikasi Dasbor dan Panel yang ada¶

Jika Anda ingin mengubah dashboard atau panel yang bukan bagian dari basis kode Anda, Anda dapat menentukan modul python kustom yang akan dimuat setelah seluruh Horizon situs telah diinisialisasi, tetapi sebelum konstruksi URLconf. Ini memungkinkan untuk persyaratan kustomisasi situs seperti:

Mendaftarkan atau membatalkan registrasi panel dari dasbor yang ada.
Mengubah nama dasbor dan panel.
Meminta kembali panel dalam panel dashboard atau panel.

Panel Horizon default dimuat berdasarkan file dalam folder openstack_dashboard/enabled/. File-file ini dimuat berdasarkan pesanan filename, dengan ruang tersisa untuk lebih banyak file yang akan ditambahkan. Ada beberapa contoh file yang tersedia di dalam folder ini, dengan akhiran . example ditambahkan. Pengembang dan penyusun harus berusaha untuk menggunakan metode penyesuaian ini sebanyak mungkin, dan dukungan untuk ini diberikan preferensi atas metode yang lebih eksotis seperti monkey patching dan menimpa file.

Modul penyesuaian Horizon (menimpa)¶

Horizon memiliki mekanisme menimpa global yang tersedia untuk melakukan kustomisasi yang belum dapat dikustomisasi melalui pengaturan konfigurasi. File ini dapat melakukan monkey patching dan bentuk penyesuaian lainnya yang tidak mungkin dilakukan melalui metode penyesuaian folder yang diaktifkan.

Metode penyesuaian ini dimaksudkan untuk tersedia bagi para pengguna Horizon, dan penggunaan ini harus dihindari oleh plugin Horizon dengan segala cara. Plugin yang membutuhkan level monkey patching dan fleksibilitas ini seharusnya mencari perubahan file __init__.py dan melakukan penyesuaian melalui cara lain.

Untuk menentukan modul python yang berisi modifikasi Anda, tambahkan kunci customization_module ke kamus HORIZON_CONFIG` Anda di local_settings.py. Nilai harus berupa string yang berisi jalur ke modul Anda dalam notasi jalur python putus-putus. Contoh:

HORIZON_CONFIG["customization_module"] = "my_project.overrides"

Anda dapat melakukan apa saja yang Anda suka dalam modul kustomisasi. Misalnya, Anda dapat mengubah nama panel

from django.utils.translation import gettext_lazy as _

import horizon

# Rename "User Settings" to "User Options"
settings = horizon.get_dashboard("settings")
user_panel = settings.get_panel("user")
user_panel.name = _("User Options")

Atau dapatkan instances panel

projects_dashboard = horizon.get_dashboard("project")
instances_panel = projects_dashboard.get_panel("instances")

Atau hapus saja seluruhnya

projects_dashboard.unregister(instances_panel.__class__)

Anda tidak dapat membatalkan pendaftaran default_panel. Jika Anda ingin menghapus default_panel, Anda perlu membuat panel yang berbeda di dashboard sebagai default_panel dan kemudian membatalkan registrasi yang sebelumnya. Misalnya, jika Anda ingin menghapus overview_panel dari dasbor Project, Anda dapat melakukan hal berikut:

project = horizon.get_dashboard('project')
project.default_panel = "instances"
overview = project.get_panel('overview')
project.unregister(overview.__class__)

Anda juga dapat mengganti metode yang ada dengan versi Anda sendiri

from openstack_dashboard.dashboards.admin.info import tabs
from openstack_dashboard.dashboards.project.instances import tables

NO = lambda *x: False

tables.AssociateIP.allowed = NO
tables.SimpleAssociateIP.allowed = NO
tables.SimpleDisassociateIP.allowed = NO

Anda juga dapat menyesuaikan kolom apa yang ditampilkan di tabel yang ada, dengan mendefinisikan ulang atribut columns dari kelas Meta -nya. Ini dapat dicapai dalam 3 langkah:

Perluas tabel yang ingin Anda modifikasi
Definisikan kembali atribut columns di bawah kelas Meta untuk tabel baru ini
Ubah atribut table_class untuk tampilan terkait sehingga mengarah ke tabel baru

Misalnya, jika Anda ingin menghapus kolom Admin State dari NetworksTable, Anda dapat melakukan hal berikut

from openstack_dashboard.dashboards.project.networks import tables
from openstack_dashboard.dashboards.project.networks import views

class MyNetworksTable(tables.NetworksTable):

    class Meta(tables.NetworksTable.Meta):
        columns = ('name', 'subnets', 'shared', 'status')

views.IndexView.table_class = MyNetworksTable

Jika Anda ingin menambahkan kolom Anda dapat mengganti tabel induk dengan cara yang sama, tambahkan definisi kolom baru dan kemudian gunakan atribut Meta columns untuk mengontrol urutan kolom sesuai kebutuhan.

Catatan

my_project.overrides perlu diimpor oleh proses python yang menjalankan Horizon. Jika modul Anda tidak diinstal sebagai paket python system-wide, Anda dapat membuatnya dapat diinstal (misalnya, dengan setup.py) atau Anda dapat menyesuaikan jalur python yang digunakan oleh server WSGI Anda untuk memasukkan lokasinya.

Mungkin cara termudah adalah dengan menambahkan argumen python-path ke baris WSGIDaemonProcess dalam konfigurasi Horizon Apache.

Dengan asumsi modul my_project` Anda berada di ``/opt/python/my_project, Anda akan membuatnya terlihat seperti berikut

WSGIDaemonProcess [... existing options ...] python-path=/opt/python

Sesuaikan kolom proyek dan tabel pengguna¶

Keystone V3 memiliki tempat untuk menyimpan informasi tambahan mengenai proyek dan pengguna. Dengan menggunakan mekanisme penggantian yang dijelaskan dalam Modul penyesuaian Horizon (menimpa), Horizon dapat menunjukkan informasi tambahan ini sebagai kolom khusus. Misalnya, jika pengguna di Keystone memiliki atribut phone_num, Anda dapat menentukan kolom baru

from django.utils.translation import gettext_lazy as _

from horizon import forms
from horizon import tables

from openstack_dashboard.dashboards.identity.users import tables as user_tables
from openstack_dashboard.dashboards.identity.users import views

class MyUsersTable(user_tables.UsersTable):
    phone_num = tables.Column('phone_num',
                              verbose_name=_('Phone Number'),
                              form_field=forms.CharField(),)

    class Meta(user_tables.UsersTable.Meta):
        columns = ('name', 'description', 'phone_num')

views.IndexView.table_class = MyUsersTable

Sesuaikan Angular dashboard¶

Dalam Angular, Anda dapat menulis sebuah plugin untuk memperluas fitur-fitur tertentu. Dua komponen dalam kerangka Horizon yang memungkinkan hal ini adalah layanan ekstensibilitas dan layanan registri tipe sumber daya. The extensibleService memungkinkan elemen Horizon tertentu untuk diperpanjang secara dinamis, termasuk menambah, menghapus, dan mengganti. Layanan `` esourceTypeRegistry` menyediakan metode untuk mengatur dan mendapatkan informasi yang berkaitan dengan objek jenis sumber daya. Kami menggunakan nama tipe Heat seperti OS::Glance::Image sebagai nama referensi kami.

Beberapa informasi yang mungkin Anda tempatkan di registri meliputi:

API untuk mengambil data dari
Nama properti
Aksi (e.g. "Create Volume")
Jalur URL ke tampilan detail atau drawer detail
Informasi properti seperti label atau pemformatan untuk nilai properti

Properti ini di registri menggunakan layanan diperpanjang (seperti rilis Newton):

globalActions
batchActions
itemActions
detailViews
tableColumns
filterFacets

Menggunakan informasi dari registri, kita dapat membangun panel dashboard kami. Panel menggunakan arahan tingkat tinggi (high-level directive) hzResourceTable yang mengganti template umum sehingga kita tidak perlu menulis kode HTML dan pengontrol boilerplate. Ini memberi pengembang cara cepat untuk membangun tabel baru atau mengubah tabel yang ada.

Catatan

Anda masih dapat memilih untuk menggunakan template HTML untuk kontrol penuh terhadap bentuk dan fungsionalitas. Misalnya, Anda mungkin ingin membuat footer khusus. Anda juga dapat menggunakan secara langsung direktif hzDynamicTable directive (what hzResourceTable uses under the hood). Namun, keduanya tidak dapat diperluas. Anda perlu menimpa panel sepenuhnya.

Ini adalah file contoh modul untuk mendemonstrasikan bagaimana membuat beberapa penyesuaian pada Images Panel.:

(function() {
  'use strict';

  angular
    .module('horizon.app.core.images')
    .run(customizeImagePanel);

  customizeImagePanel.$inject = [
    'horizon.framework.conf.resource-type-registry.service',
    'horizon.app.core.images.basePath',
    'horizon.app.core.images.resourceType',
    'horizon.app.core.images.actions.surprise.service'
  ];

  function customizeImagePanel(registry, basePath, imageResourceType, surpriseService) {
    // get registry for ``OS::Glance::Image``
    registry = registry.getResourceType(imageResourceType);

    // replace existing Size column to make the font color red
    var column = {
      id: 'size',
      priority: 2,
      template: '<a style="color:red;">{$ item.size | bytes $}</a>'
    };
    registry.tableColumns.replace('size', column);

    // add a new detail view
    registry.detailsViews
      .append({
        id: 'anotherDetailView',
        name: gettext('Another Detail View'),
        template: basePath + 'demo/detail.html'
    });

    // set a different summary drawer template
    registry.setSummaryTemplateUrl(basePath + 'demo/drawer.html');

    // add a new global action
    registry.globalActions
      .append({
        id: 'surpriseAction',
        service: surpriseService,
        template: {
          text: gettext('Surprise')
        }
    });
  }
})();

Selain itu, Anda harus memiliki konten yang didefinisikan dalam detail.html dan drawer.html, serta menentukan surpriseService yang didasarkan pada perintah (directive) actions dan perlu diizinkan dan melakukan metode yang ditentukan.

Icons¶

Horizon menggunakan ikon font dari Font Awesome. Silakan lihat Font Awesome untuk instruksi tentang cara menggunakan ikon dalam kode.

Untuk menambahkan ikon ke Table Action, gunakan properti ikon. Contoh:

class CreateSnapshot(tables.LinkAction):
    name = "snapshot"
    verbose_name = _("Create Snapshot")
    icon = "camera"

Selain itu, kelas tombol default di seluruh situs dapat dikonfigurasi dengan menyetel ACTION_CSS_CLASSES ke tuple dari kelas yang ingin Anda tampilkan pada semua tombol aksi di file local_settings.py Anda.

Custom Stylesheets¶

Anda dapat menentukan custom stylesheet untuk dasbor Anda. Template dasar Horizon``openstack_dashboard/templates/base.html`` mendefinisikan beberapa blok yang dapat di-override.

Untuk menentukan file css khusus yang hanya berlaku untuk dasbor tertentu, buat template dasar di folder template dasbor Anda, yang memperluas template dasar Horizon misal openstack_dashboard/dashboards/my_custom_dashboard/ templates/my_custom_dashboard/base.html.

Dalam template ini, definisikan ulang block css. (Jangan lupa untuk menyertakan _stylesheets.html yang mencakup semua stylesheet default Horizon.)

{% extends 'base.html' %}

{% block css %}
  {% include "_stylesheets.html" %}

  {% load compress %}
  {% compress css %}
  <link href='{{ STATIC_URL }}my_custom_dashboard/scss/my_custom_dashboard.scss' type='text/scss' media='screen' rel='stylesheet' />
  {% endcompress %}
{% endblock %}

Lembar gaya kustom kemudian berada di folder `` static`` dasbor sendiri openstack_dashboard/dashboards/my_custom_dashboard/static/my_custom_dashboard/scss/my_custom_dashboard.scss.

Semua template dasbor harus diwarisi dari base.html:: dasbor

{% extends 'my_custom_dashboard/base.html' %}
...

Custom Javascript¶

Demikian pula untuk menambahkan styling kustom (lihat di atas), adalah mungkin untuk menyertakan file javascript kustom.

Semua file javascript Horizon terdaftar di template parsial openstack_dashboard/templates/horizon/_scripts.html , yang termasuk dalam templat dasar Horizon di blok js.

Untuk menambahkan file javascript khusus, buat _scripts.html templat parsial di dasbor Anda openstack_dashboard/dashboards/my_custom_dashboard/templates/my_custom_dashboard/_scripts.html which extends horizon/_scripts.html. Dalam template ini timpa block custom_js_files termasuk file javascript khusus Anda

{% extends 'horizon/_scripts.html' %}

{% block custom_js_files %}
    <script src='{{ STATIC_URL }}my_custom_dashboard/js/my_custom_js.js' type='text/javascript' charset='utf-8'></script>
{% endblock %}

Di dasbor template dasbor Anda sendiri openstack_dashboard/dashboards/ my_custom_dashboard/templates/my_custom_dashboard/base.html override block js dengan masuknya dashboard sendiri _scripts.html:

{% block js %}
    {% include "my_custom_dashboard/_scripts.html" %}
{% endblock %}

Hasilnya adalah file js terkompresi tunggal yang terdiri dari skrip kustom Horizon dan dasbor.

Custom Head js¶

Selain itu, beberapa skrip mengharuskan Anda untuk menempatkannya di dalam tag <head> halaman. Untuk melakukan ini, rentangkan templat base.html dalam tema Anda secara rekursif untuk mengganti blok custom_head_js.

Tema Anda base.html:

{% extends "base.html" %}

{% block custom_head_js %}
  <script src='{{ STATIC_URL }}/my_custom_dashboard/js/my_custom_js.js' type='text/javascript' charset='utf-8'></script>
{% endblock %}

Lihat tema `` example`` untuk tema kerja yang menggunakan blok ini.

Peringatan

Jangan gunakan blok custom_head_js untuk pelacakan analitik. Lihat di bawah.

Custom Analytics¶

Untuk analitik atau skrip pelacakan, Anda harus menghindari blok custom_head_js. Kami memiliki blok khusus yang disebut custom_analytics. Sama seperti blok custom_head_js ini menyisipkan konten tambahan ke dalam kepala templat base.html dan itu akan ada di semua halaman.

Alasan untuk blok khusus analitik adalah bahwa untuk tujuan keamanan kami ingin dapat menonaktifkan pelacakan pada halaman tertentu yang kami anggap sensitif. Ini dilakukan untuk keselamatan pengguna dan admin cloud. Dengan menggunakan blok ini sebagai gantinya, halaman menggunakan base.html dapat menimpanya sendiri ketika mereka ingin menghindari pelacakan. Mereka tidak bisa begitu saja mengesampingkan js kustom karena mungkin kode non-tracking.

Tema Anda base.html:

{% extends "base.html" %}

{% block custom_analytics %}
  <script src='{{ STATIC_URL }}/my_custom_dashboard/js/my_tracking_js.js' type='text/javascript' charset='utf-8'></script>
{% endblock %}

Lihat tema `` example`` untuk tema kerja yang menggunakan blok ini.

Menyesuaikan Atribut Meta¶

Untuk menambahkan atribut metadata khusus ke templat dasar proyek Anda, gunakan blok custom_metadata. Untuk melakukan ini, rentangkan templat base.html dalam tema Anda secara rekursif untuk mengganti blok custom_metadata. Isi blok ini akan dimasukkan ke dalam <head> halaman tepat setelah tag meta Horizon default.

Tema Anda base.html:

{% extends "base.html" %}

{% block custom_metadata %}
  <meta name="description" content="My custom metadata.">
{% endblock %}

Lihat tema `` example`` untuk tema kerja yang menggunakan blok ini.

Kustomisasi Horizon

Kustomisasi Horizon¶

Changing the Site Title (mengubah judul situs)¶

Mengubah Brand Link¶

Menyesuaikan Footer¶

Memodifikasi Dasbor dan Panel yang ada¶

Modul penyesuaian Horizon (menimpa)¶

Sesuaikan kolom proyek dan tabel pengguna¶

Sesuaikan Angular dashboard¶

Icons¶

Custom Stylesheets¶

Custom Javascript¶

Custom Head js¶

Custom Analytics¶

Menyesuaikan Atribut Meta¶

horizon 25.4.0.dev33

Page Contents