Open in app

Sign in

Write

Sign in

Containerize Horizon and Yuyu Dashboard

Btech Engineering
btech-engineering
Published in
6 min readApr 11, 2023

How to containerize Openstack Dashboard and Yuyu Dashboard to one image container

Intro

OpenStack Dashboard, also known as Horizon, is a web-based graphical user interface (GUI) that allows users and administrators to manage and monitor OpenStack cloud environments. It provides a centralized dashboard for managing compute, storage, and networking resources, as well as other OpenStack services like Keystone (identity management), Neutron (networking), and Glance (image management).

Horizon provides a user-friendly interface for common OpenStack operations, such as launching instances, creating volumes, configuring networks, and managing security groups. It also allows users to create custom dashboards and widgets for their specific needs.

Horizon is extensible and customizable, and provides APIs for integrating with other tools and services. It supports multiple authentication backends, including OpenStack’s own identity service (Keystone), LDAP, and external identity providers like Google and GitHub.

Overall, Horizon is a powerful tool for managing OpenStack environments, especially for users who prefer a GUI over command-line tools.

yuyu architecture

Yuyu is a plugin in openstack that makes it easy for you to manage your openstack bills.

Yuyu have two components for running bellow :

1. Yuyu Server

Yuyu server provide ability to manage openstack billing by listening to every openstack event. Yuyu server is a required component to use Yuyu Dashboard. There are 3 main component in Yuyu server: API, Cron, Event Monitor. More detail about Yuyu server at https://github.com/btechpt/yuyu

  • Yuyu API : Main component to communicate with Yuyu Dashboard.
  • Yuyu Cron : Provide invoice calculation and rolling capabilities that needed to run every month.
  • Yuyu Event Monitor : Monitor event from openstack to calculate billing spent.

2. Yuyu Dashboard

Yuyu dashboard is a panel at openstack dashboard that is used to manage your openstack bills. More detail about Yuyu server at https://github.com/btechpt/yuyu_dashboard

Containerize refers to the process of creating a container image that includes an application and its dependencies, which can be run in a containerized environment.

Containers are a lightweight, standalone executable package that includes everything needed to run an application, including code, runtime, system tools, libraries, and settings. By containerizing an application, it can be easily moved between different environments without worrying about compatibility issues, and it can be run consistently across different infrastructure, from development to production.

Containerization is often used in DevOps and cloud computing to improve deployment speed, scalability, and portability. By containerizing applications, organizations can quickly build, deploy, and manage applications at scale, and they can more easily adopt new technologies and infrastructure changes. Popular containerization tools include Docker, Kubernetes, and container orchestration platforms like Amazon ECS and Google Kubernetes Engine (GKE).

Practical

1. Containerize an Horizon

The following are the steps to containerize an horizon service or Openstack Dashboard:

  • Install docker on machine or server, for this section we will use docker as tool to containerize an app
sudo apt update
sudo apt install docker.io
  • Clone horizon file to machine, we will use zed version of horizon openstack
git clone https://opendev.org/openstack/horizon -b stable/zed --depth=1
ls
  • Modified local_settings.py on horizon directory to new configuration of horizon. The os.environ.get will read value from docker-compose.yml later
cp horizon/openstack_dashboard/local/local_settings.py.example horizon/openstack_dashboard/local/local_settings.py
vi horizon/openstack_dashboard/local/local_settings.py
...
DEBUG = False

ALLOWED_HOSTS = ['*']

CACHES = {
    'default': {
        'BACKEND': 'django.core.cache.backends.memcached.MemcachedCache',
        'LOCATION': '127.0.0.1:11211',
    },
}

OPENSTACK_HOST = os.environ.get('OPENSTACK_HOST')
OPENSTACK_KEYSTONE_URL = "http://%s/v3" % OPENSTACK_HOST

AVAILABLE_THEMES = [
    ('default', 'Default', 'themes/default'),
    ('material', 'Material', 'themes/material'),
    ('example', 'Example', 'themes/example'),
]
...
  • Edit requirements file, add horizon and memcached version
vi horizon/requirements.txt
...
horizon===23.0.0
python-memcached===1.59
...
  • Create Dockerfile, to create an container image of app, with base ubuntu image and apache2 app to run an horizon
vi Dockerfile
...
FROM ubuntu:jammy

COPY horizon/ /var/www/html/horizon/

WORKDIR /var/www/html/horizon/

RUN apt-get update && apt install python3-pip -y \
    && pip3 install -r requirements.txt \
    && apt install apache2 libapache2-mod-wsgi-py3 -y

RUN python3 ./manage.py collectstatic --no-input \
    && python3 ./manage.py make_web_conf --wsgi --force \
    && python3 ./manage.py make_web_conf --apache > /etc/apache2/sites-available/horizon.conf \
    && rm /etc/apache2/sites-enabled/000-default.conf

RUN a2ensite horizon

RUN chown -R www-data:www-data openstack_dashboard/local/.secret_key_store \
    && chown -R www-data:www-data static/ \
    && chmod a+x openstack_dashboard/horizon_wsgi.py

EXPOSE 80

CMD service memcached start && apachectl -D FOREGROUND
...
  • Create an image from Dockerfile
docker build -t horizon:zed .
  • Verify an new image on machines
docker image ls
  • Test running horizon image with docker-compose.yml file
vi docker-compose.yml
...
version: "3.9"

services:
  horizon:
    image: horizon:zed
    ports:
      - "80:80"
    volumes:
      - /var/log/horizon/:/var/log/apache2:rw
    environment:
      OPENSTACK_HOST: 172.168.22.100:5000 ##Edit with your openstack keystone API
...

docker-compose up -d
docker ps
  • Verifiy horizon / openstack dashboard, access with machine IP Address
openstack dashboard

2. Add yuyu-dashboard on horizon image container

The following are the steps to add yuyu-dashboard on horizon image container:

  • Clone yuyu-dashboard file
git clone https://github.com/Yuyu-billing/yuyu_dashboard.git
  • Edit local_settings.py to add yuyu api configuration, YUYU_URL is filled by IP and port of YUYU_API
vi horizon/openstack_dashboard/local/local_settings.py
...
#add this line
YUYU_URL= os.environ.get('YUYU_SERVER')
CURRENCIES = ('IDR',)
DEFAULT_CURRENCY = "IDR"
...
  • Create an Dockerfile to creating horizon yuyu dashboard image with base image horizon:zed we are creating before.
vi Dockerfile
...
FROM horizon:zed

RUN pip3 install django-money==2.0.1 && pip3 install python-dateutil==2.8.2 && pip3 install Pillow>=6.2.0

COPY horizon/openstack_dashboard/local/local_settings.py /var/www/html/horizon/openstack_dashboard/local/local_settings.py

RUN mkdir /var/www/html/horizon/openstack_dashboard/dashboards/yuyu/
COPY yuyu_dashboard/yuyu/ /var/www/html/horizon/openstack_dashboard/dashboards/yuyu/
COPY yuyu_dashboard/yuyu/local/enabled/_6100_yuyu.py /var/www/html/horizon/openstack_dashboard/local/enabled/_6100_yuyu.py
COPY yuyu_dashboard/yuyu/local/enabled/_6101_admin_billing_panel_group.py /var/www/html/horizon/openstack_dashboard/local/enabled/_6101_admin_billing_panel_group.py
COPY yuyu_dashboard/yuyu/local/enabled/_6102_admin_billing_overview.py /var/www/html/horizon/openstack_dashboard/local/enabled/_6102_admin_billing_overview.py
COPY yuyu_dashboard/yuyu/local/enabled/_6103_admin_billing_price_configuration.py /var/www/html/horizon/openstack_dashboard/local/enabled/_6103_admin_billing_price_configuration.py
COPY yuyu_dashboard/yuyu/local/enabled/_6104_admin_billing_setting.py /var/www/html/horizon/openstack_dashboard/local/enabled/_6104_admin_billing_setting.py
COPY yuyu_dashboard/yuyu/local/enabled/_6104_admin_billing_setting.py /var/www/html/horizon/openstack_dashboard/local/enabled/_6104_admin_billing_setting.py
COPY yuyu_dashboard/yuyu/local/enabled/_6105_admin_billing_projects_invoice.py /var/www/html/horizon/openstack_dashboard/local/enabled/_6105_admin_billing_projects_invoice.py
COPY yuyu_dashboard/yuyu/local/enabled/_6106_admin_notification_center.py /var/www/html/horizon/openstack_dashboard/local/enabled/_6105_admin_notification_center.py
COPY yuyu_dashboard/yuyu/local/enabled/_6107_admin_billing_projects_balance.py /var/www/html/horizon/openstack_dashboard/local/enabled/_6107_admin_billing_projects_balance.py

COPY yuyu_dashboard/yuyu/local/enabled/_6111_project_billing_panel_group.py /var/www/html/horizon/openstack_dashboard/local/enabled/_6111_project_billing_panel_group.py
COPY yuyu_dashboard/yuyu/local/enabled/_6112_project_billing_overview.py /var/www/html/horizon/openstack_dashboard/local/enabled/_6112_project_billing_overview.py
COPY yuyu_dashboard/yuyu/local/enabled/_6113_project_billing_usage_cost.py /var/www/html/horizon/openstack_dashboard/local/enabled/_6113_project_billing_usage_cost.py
COPY yuyu_dashboard/yuyu/local/enabled/_6114_project_billing_invoice.py /var/www/html/horizon/openstack_dashboard/local/enabled/_6114_project_billing_invoice.py
COPY yuyu_dashboard/yuyu/local/enabled/_6115_project_billing_setting.py /var/www/html/horizon/openstack_dashboard/local/enabled/_6115_project_billing_setting.py
COPY yuyu_dashboard/yuyu/local/enabled/_6116_project_balance.py /var/www/html/horizon/openstack_dashboard/local/enabled/_6116_project_balance.py

CMD service memcached start && apachectl -D FOREGROUND
...
  • Build image with this Dockerfile, and list image on machine
docker build -t yuyu-horizon:v1 .
  • Verify an new image on machines
docker image ls
  • Test running horizon image with docker-compose.yml file
vi docker-compose.yml
...
version: "3.9"
services:
  yuyu_dashboard:
    image: yuyu-horizon:v1
    ports:
      - "80:80"
    volumes:
      - /var/log/horizon/:/var/log/apache2:rw
    environment:
      OPENSTACK_HOST: 172.168.22.100:5000  ##Edit with your openstack keystone API
      YUYU_SERVER: http://172.168.22.10:8182 ##Edit with your YUYU Server API
...

docker-compose up -d
docker ps
  • Verify horizon and yuyu dashboard, open with browser and access with machine IP Address
billing overview of yuyu-dashboard
price configuration
invoice
project balance

By Razzaaq Arditian, Research Team Btech

Our Tagline

# Together is Better & Continuous Learning

Reference:

Manual installation

This page covers the basic installation of horizon in a production environment. If you are looking for a developer…

docs.openstack.org

Yuyu - Yuyu.io

Edit description

yuyu-billing.dev

Openstack
Billing
Dashboard
Containerized
Engineering

--

--

Btech Engineering
btech-engineering

Written by Btech Engineering

175 Followers
Editor for

Our mission is continuous learning and remember together is better.

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams