### Install Prerequisite Packages on Ubuntu

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/quickstart.md

Installs necessary packages for Horizon development on Ubuntu systems.

```bash
$ sudo apt install git python3-dev python3-pip gettext
```

--------------------------------

### Clone Horizon Repository

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/quickstart.md

Clones the Horizon git repository to start the setup process.

```bash
$ git clone https://opendev.org/openstack/horizon
```

--------------------------------

### Install Plugin using setup.py and pip

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/tutorials/plugin.md

Steps to build, copy, and install your plugin into the Horizon environment. This process ensures the plugin is recognized and can be tested.

```bash
cd `plugin` && python setup.py sdist
cp -rv enabled `horizon`/openstack_dashboard/local/
`horizon`/tools/with_venv.sh pip install dist/`package`.tar.gz

```

--------------------------------

### Install Apache and WSGI Module on Ubuntu

Source: https://github.com/openstack/horizon/blob/master/doc/source/install/from-source.md

Installs the Apache web server and the WSGI module required for hosting Horizon.

```bash
$ sudo apt install apache2 libapache2-mod-wsgi-py3
```

--------------------------------

### Create local_settings.py

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/quickstart.md

Copies the example configuration file to create the local settings file for Horizon.

```bash
$ cp openstack_dashboard/local/local_settings.py.example openstack_dashboard/local/local_settings.py
```

--------------------------------

### Install OpenStack Dashboard Package

Source: https://github.com/openstack/horizon/blob/master/doc/source/install/install-rdo.md

Installs the openstack-dashboard package using dnf.

```console
# dnf install openstack-dashboard
```

--------------------------------

### Install Prerequisite Packages on RPM-based Distributions

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/quickstart.md

Installs necessary packages for Horizon development on RPM-based distributions like Fedora or RHEL.

```bash
$ sudo dnf install gcc git-core python3-devel python3-virtualenv gettext
```

--------------------------------

### Install tox

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/quickstart.md

Installs tox, a tool for managing virtual environments for testing and development tasks in Horizon.

```bash
$ pip3 install tox
```

--------------------------------

### Install OpenStack Dashboard Package

Source: https://github.com/openstack/horizon/blob/master/doc/source/install/install-ubuntu.md

Installs the necessary openstack-dashboard package on Ubuntu systems using apt.

```bash
# apt install openstack-dashboard
```

--------------------------------

### Example Plugin File Structure

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/tutorials/plugin.md

This is a skeleton of a typical Horizon plugin, showing the organization of Python modules, static files, and configuration.

```text
myplugin
│
├── myplugin
│   ├── __init__.py
│   │
│   ├── enabled
│   │   <_31000_myplugin.py
│   │
│   ├── api
│   │   ├──__init__.py
│   │   ├── my_rest_api.py
│   │   └── myservice.py
│   │
│   ├── content
│   │   ├──__init__.py
│   │   └── mypanel
│   │       ├── __init__.py
│   │       ├── panel.py
│   │       ├── tests.py
│   │       ├── urls.py
│   │       ├── views.py
│   │       └── templates
│   │           └── mypanel
│   │               └── index.html
│   │
│   └── static
│   |   └── dashboard
│   |       └── identity
│   |           └── myplugin
│   |               └── mypanel
│   |                   ├── mypanel.html
│   |                   ├── mypanel.js
│   |                   └── mypanel.scss
│   │
│   └── locale
│       └── <lang>
│            └── LC_MESSAGES
│                ├── django.po
│                └── djangojs.po
│
├── pyproject.toml
├── setup.py
├── setup.cfg
├── LICENSE
├── MANIFEST.in
├── README.rst
├── babel-django.cfg
└── babel-djangojs.cfg

```

--------------------------------

### Run Horizon Development Server

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/quickstart.md

Starts the Horizon development server using tox. The default port is 8000.

```bash
$ tox -e runserver
```

--------------------------------

### Example Default DNS Nameservers Configuration

Source: https://github.com/openstack/horizon/blob/master/doc/source/configuration/settings.md

An example of how to configure default DNS nameservers for subnets created via Neutron. Users can still choose a different list of DNS servers.

```python
["8.8.8.8", "8.8.4.4", "208.67.222.222"]
```

--------------------------------

### AVAILABLE_THEMES Configuration Example

Source: https://github.com/openstack/horizon/blob/master/doc/source/configuration/settings.md

Specifies the themes available in Horizon. Each theme is defined by a tuple containing its name, user-facing label, and path.

```python
AVAILABLE_THEMES = [
     ('default', 'Default', 'themes/default'),
     ('material', 'Material', 'themes/material'),
]
```

--------------------------------

### Install xorg-x11-server-Xvfb on Fedora/Red Hat

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/testing.md

Install the Xvfb package on Fedora/Red Hat-based systems, which is required for running Selenium tests in headless mode.

```bash
$ sudo dnf install xorg-x11-server-Xvfb
```

--------------------------------

### Identity Dashboard File Structure Example

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/topics/angularjs.md

Illustrates the directory structure for code specific to a single dashboard, such as the identity dashboard.

```default
openstack_dashboard/dashboards/identity/static/dashboard/identity/
├── identity.module.js
├── identity.module.spec.js
└── identity.scss
```

--------------------------------

### Configurable Web SSO Choices

Source: https://github.com/openstack/horizon/blob/master/doc/source/configuration/settings.md

Provides an example of a configurable list of authentication mechanisms for web single-sign-on, including Keystone credentials, OpenID Connect, and SAML2.

```python
WEBSSO_CHOICES = (
    ("credentials", _("Keystone Credentials")),
    ("oidc", _("OpenID Connect")),
    ("saml2", _("Security Assertion Markup Language")),
    ("acme_oidc", "ACME - OpenID Connect"),
    ("acme_saml2", "ACME - SAML2")
)
```

--------------------------------

### SCSS File Inclusion Example

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/topics/angularjs.md

Demonstrates how to include SCSS files for a specific dashboard panel by adding their paths to the ADD_SCSS_FILES list in an enabled file.

```python
ADD_SCSS_FILES = [
    'dashboard/project/containers/_containers.scss',
]
```

--------------------------------

### Run Horizon Development Server

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/tutorials/table_actions.md

This command starts the Horizon development server using tox. It's used to test the dashboard changes locally.

```bash
$ tox -e runserver -- 0:9000
```

--------------------------------

### Add a Custom Dashboard

Source: https://github.com/openstack/horizon/blob/master/doc/source/configuration/pluggable_panels.md

Example of adding a custom dashboard, including its slug, associated applications, and exception mappings.

```python
from tuskar_ui import exceptions

DASHBOARD = 'infrastructure'
ADD_INSTALLED_APPS = [
    'tuskar_ui.infrastructure',
]
ADD_EXCEPTIONS = {
    'recoverable': exceptions.RECOVERABLE,
    'not_found': exceptions.NOT_FOUND,
    'unauthorized': exceptions.UNAUTHORIZED,
}
```

--------------------------------

### Example Access Rule (YAML)

Source: https://github.com/openstack/horizon/blob/master/openstack_dashboard/dashboards/identity/application_credentials/templates/application_credentials/_create.html

Illustrates the YAML format for defining access rules for an application credential. This is used for fine-grained access control delegation.

```yaml
- service: compute
  method: POST
  path: /v2.1/servers
```

--------------------------------

### Example Access Rule (JSON)

Source: https://github.com/openstack/horizon/blob/master/openstack_dashboard/dashboards/identity/application_credentials/templates/application_credentials/_create.html

Illustrates the JSON format for defining access rules for an application credential. This is used for fine-grained access control delegation.

```json
[{"service": "compute", "method": "POST", "path": "/v2.1/servers"}]
```

--------------------------------

### Configure VLAN Subinterface

Source: https://github.com/openstack/horizon/blob/master/openstack_dashboard/static/app/core/trunks/steps/trunk-subports.help.html

Example of manually configuring a VLAN subinterface for a subport within a guest operating system. This is often required as guest OSs do not automatically configure these.

```bash
sudo ip link add link eth0 \
     name eth0.101 \
     address "$subport_mac" \
     type vlan id 101
sudo dhclient eth0.101
```

--------------------------------

### Basic setup.py for Plugin

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/tutorials/plugin.md

A minimal setup.py file for a Horizon plugin using PBR for packaging.

```python
import setuptools

setuptools.setup(
    setup_requires=['pbr>=2.0.0'],
    pbr=True)

```

--------------------------------

### AngularJS Style Guide Issue Comment Example

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/topics/code-style.md

When noting an issue, provide a comment with a link to the specific section of the style guide.

```text
https://github.com/johnpapa/angular-styleguide#style-y024
```

--------------------------------

### Basic setup.cfg for Plugin

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/tutorials/plugin.md

A minimal setup.cfg file to define the plugin's metadata, including its name.

```ini
[metadata]
name = myplugin

```

--------------------------------

### AngularJS Style Guide Reference

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/topics/code-style.md

Refer to the John Papa AngularJS Style Guide for Angular code style. Use comments to note issues with links back to specific style guide sections.

```text
"The most current and detailed Angular Style Guide is the
community-driven effort led by John Papa and Todd Motto."

- http://angularjs.blogspot.com/2014/02/an-angularjs-style-guide-and-best.html
```

--------------------------------

### Set Default Instance Boot Source

Source: https://github.com/openstack/horizon/blob/master/doc/source/configuration/settings.md

Define the default source for booting instances. Allowed values are 'image', 'snapshot', 'volume', and 'volume_snapshot'.

```string
image
```

--------------------------------

### Login to Instance with Private Key

Source: https://github.com/openstack/horizon/blob/master/openstack_dashboard/dashboards/project/key_pairs/templates/key_pairs/_import.html

After launching an instance, use the generated private key to log in. The username may vary based on the instance image.

```bash
ssh -i cloud.key <username>@<instance_ip>
```

--------------------------------

### Install OpenStack Dashboard Package

Source: https://github.com/openstack/horizon/blob/master/doc/source/install/install-debian.md

Installs the necessary packages for the OpenStack Dashboard with Apache integration on Debian systems.

```bash
# apt install openstack-dashboard-apache
```

--------------------------------

### Build Documentation with Tox

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/testing.md

Builds Horizon's documentation as HTML using Tox. Specify an alternative builder to change the output directory.

```bash
$ tox -e docs -- latexpdf

```

--------------------------------

### Install xvfb on Debian

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/testing.md

Install the xvfb package on Debian-based systems, which is required for running Selenium tests in headless mode.

```bash
$ sudo apt install xvfb
```

--------------------------------

### Enable New Launch Instance Wizard

Source: https://github.com/openstack/horizon/blob/master/doc/source/kilo.md

To enable the beta version of the new launch instance workflow, modify local_settings.py. This setting is not enabled by default.

```python
LAUNCH_INSTANCE_NG_ENABLED = True
```

--------------------------------

### Example Allowed Private Subnet CIDR Configuration

Source: https://github.com/openstack/horizon/blob/master/doc/source/configuration/settings.md

An example configuration for ALLOWED_PRIVATE_SUBNET_CIDR, specifying allowed CIDR ranges for both IPv4 and IPv6.

```python
{
    'ipv4': [
        '192.168.0.0/16',
        '10.0.0.0/8'
    ],
    'ipv6': [
        'fc00::/7',
    ]
}
```

--------------------------------

### Message File Format Example

Source: https://github.com/openstack/horizon/blob/master/doc/source/configuration/settings.md

Example JSON structure for message files used by Horizon. Specifies the level and the message content.

```json
{
    "level": "info",
    "message": "message of the day here"
}
```

--------------------------------

### Install Horizon Python Module

Source: https://github.com/openstack/horizon/blob/master/doc/source/install/from-source.md

Install the Horizon Python module using pip, ensuring to use the upper-constraints file for dependency management.

```console
$ sudo pip install -c https://opendev.org/openstack/requirements/raw/branch/stable/<release>/upper-constraints.txt .
```

--------------------------------

### Initialize and Configure Database Session Storage

Source: https://github.com/openstack/horizon/blob/master/doc/source/admin/sessions.md

Sets up database-backed sessions for scalability and persistence. This method incurs higher overhead under heavy usage and requires database configuration.

```python
SESSION_ENGINE = 'django.contrib.sessions.backends.db'
DATABASES = {
    'default': {
        # Database configuration here
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'dash',
        'USER': 'dash',
        'PASSWORD': 'DASH_DBPASS',
        'HOST': 'localhost',
        'default-character-set': 'utf8'
    }
}
```

--------------------------------

### Configure Default Launch Instance Settings

Source: https://github.com/openstack/horizon/blob/master/doc/source/configuration/settings.md

Set default values for properties in the Launch Instance modal, such as configuration drive, volume creation, and availability zone.

```python
{
    "config_drive": False,
    "create_volume": True,
    "hide_create_volume": False,
    "disable_image": False,
    "disable_instance_snapshot": False,
    "disable_volume": False,
    "disable_volume_snapshot": False,
    "enable_scheduler_hints": True,
    "enable_metadata": True,
    "enable_net_ports": True,
    "default_availability_zone": "Any",
    "vol_delete_on_instance_delete": False
}
```

--------------------------------

### Basic AngularJS Schema Form Example

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/topics/angularjs.md

This example demonstrates how to define a JSON schema and model, then use ModalFormService to open a modal with a form generated from the schema. The submit function is called upon successful form submission.

```javascript
var schema = {
  type: "object",
  properties: {
    name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
    title: {
      type: "string",
      enum: ['dr','jr','sir','mrs','mr','NaN','dj']
    }
  }
};
var model = {name: '', title: ''};
var config = {
  title: gettext('Create Container'),
  schema: schema,
  form: ['*'],
  model: model
};
ModalFormService.open(config).then(submit);   // returns a promise

function submit() {
  // do something with model.name and model.title
}
```

--------------------------------

### Generate Sample Policy Files

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/topics/policy.md

Generates sample policy files for a project and comments out specific rules using sed. This is useful for creating policy files for Horizon usage, as some generated rules are unnecessary or trigger deprecation warnings.

```console
oslopolicy-sample-generator --namespace $PROJECT \
  --output-file openstack_dashboard/conf/${PROJECT}_policy.yaml
sed -i 's/^"/#"/' openstack_dashboard/conf/${PROJECT}_policy.yaml
```

--------------------------------

### Generate Sample Configuration File

Source: https://github.com/openstack/horizon/blob/master/openstack_dashboard/test/integration_tests/README.rst

Generates a sample configuration file for integration tests using oslo-config-generator. Ensure the namespace matches the project's configuration namespace.

```bash
$ oslo-config-generator \
      --namespace openstack_dashboard_integration_tests \
      --output-file openstack_dashboard/test/integration_tests/horizon.conf.sample
```

--------------------------------

### Switchable Form Fields Example

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/ref/forms.md

This example demonstrates how to create dynamic form fields that show or hide based on the selection of a trigger field. The 'switchable' class marks the trigger, and 'switched' marks the dependent fields, using data attributes to define the relationship and labels.

```python
source = forms.ChoiceField(
    label=_('Source'),
    choices=[
        ('cidr', _('CIDR')),
        ('sg', _('Security Group'))
    ],
    widget=forms.ThemableSelectWidget(attrs={
        'class': 'switchable',
        'data-slug': 'source'
    })
)

cidr = fields.IPField(
    label=_("CIDR"),
    required=False,
    widget=forms.TextInput(attrs={
        'class': 'switched',
        'data-switch-on': 'source',
        'data-source-cidr': _('CIDR')
    })
)

security_group = forms.ChoiceField(
    label=_('Security Group'),
    required=False,
    widget=forms.ThemableSelectWidget(attrs={
        'class': 'switched',
        'data-switch-on': 'source',
        'data-source-sg': _('Security Group')
    })
)
```

--------------------------------

### Get a Dashboard Panel

Source: https://github.com/openstack/horizon/blob/master/doc/source/configuration/customizing.md

Retrieve a specific panel from a dashboard by its identifier.

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

--------------------------------

### Key Pairs Table Column Widths

Source: https://github.com/openstack/horizon/blob/master/openstack_dashboard/dashboards/project/templates/key_pairs/_keypairs_table.html

Sets specific widths for table columns to control layout. Columns 1 and 2 (Chevron, Name) shrink to content, column 3 (Type) gets 15%, column 4 (Fingerprint) gets 40%, and column 5 (Actions) takes remaining space.

```css
table#keypairs th:nth-child(1), table#keypairs td:nth-child(1), table#keypairs th:nth-child(2), table#keypairs td:nth-child(2) {
    width: 1%;
    white-space: nowrap;
}

/* Type column - moderate space */
table#keypairs th:nth-child(3), table#keypairs td:nth-child(3) {
    width: 15%;
}

/* Fingerprint column - flexible space */
table#keypairs th:nth-child(4), table#keypairs td:nth-child(4) {
    width: 40%;
}

/* Actions column - remaining space */
table#keypairs th:nth-child(5), table#keypairs td:nth-child(5) {
    width: auto;
}
```

--------------------------------

### Create a New Release Note

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/topics/release-notes.md

Use this command to create a new release note file. Replace '<bug-,bp-,whatever>' with the relevant identifier.

```bash
$ tox -e venv-docs -- reno new <bug-,bp-,whatever>
```

--------------------------------

### Disable a Dashboard

Source: https://github.com/openstack/horizon/blob/master/doc/source/configuration/pluggable_panels.md

Example of how to disable a dashboard by setting a DASHBOARD variable and a DISABLED flag.

```python
DASHBOARD = '<dashboard-name>'
DISABLED = True
```

--------------------------------

### Build Contributor Documentation

Source: https://github.com/openstack/horizon/blob/master/README.rst

Build the documentation for Horizon using tox. Results are placed in the doc/build/html directory.

```bash
$ tox -e docs
```

--------------------------------

### Node Modules Directory

Source: https://github.com/openstack/horizon/blob/master/tools/executable_files.txt

This directory contains all the installed Node.js dependencies for the project. It is typically managed by npm or yarn.

```shell
./node_modules
```

--------------------------------

### Generate Release Notes

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/topics/release-notes.md

After committing your changes, run this command to generate the release notes. The output will be in the releasenotes/build/html directory.

```bash
$ git commit  # Commit the change because reno scans git log.

$ tox -e releasenotes
```

--------------------------------

### Define URL Parameter

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/topics/workflows.md

Example of defining a named URL parameter in `urls.py` to capture resource class IDs.

```python
RESOURCE_CLASS = r'^(?P<resource_class_id>[^/]+)/%s$'

urlpatterns = [
    url(RESOURCE_CLASS % 'update', UpdateView.as_view(), name='update')
]
```

--------------------------------

### Generate Settings Diff

Source: https://github.com/openstack/horizon/blob/master/doc/source/contributor/quickstart.md

Generates a diff file comparing local_settings.py with the example configuration, useful for tracking changes.

```bash
$ python manage.py migrate_settings --gendiff
```

--------------------------------

### Configure QEMU for Hardware Virtualization

Source: https://github.com/openstack/horizon/blob/master/doc/source/user/launch-instances.md

If running QEMU without hardware virtualization support, configure 'cpu_mode="none"' in '/etc/nova/nova-compute.conf' to resolve 'libvirtError: unsupported configuration' errors.

```ini
cpu_mode="none"
virt_type=qemu
```