### Start and Enable Nginx Service

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/install/source-install-rhel.md

Starts the Nginx service and configures it to start automatically on system boot.

```shell
sudo systemctl start nginx.service
sudo systemctl enable nginx.service
```

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

### Start and Enable Docker Service

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/install/docker-install-rhel.md

Starts the Docker service and configures it to launch automatically at system boot.

```bash
$ sudo systemctl start docker
$ sudo systemctl enable docker
```

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

### Update System and Install Dependencies

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/install/source-install-rhel.md

Updates the system and installs essential packages like git, python3-pip, wheel, nginx, make, tar, and wget. Also installs Xvfb and related libraries for GUI testing.

```shell
sudo dnf update
sudo dnf install git python3-pip python3-wheel nginx make tar wget
sudo dnf install xorg-x11-server-Xvfb gtk2-devel gtk3-devel libnotify-devel nss
```

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

### Skyline Configuration Example

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

Example configuration for the /etc/skyline/skyline.yaml file. Ensure to replace placeholders like SKYLINE_DBPASS, DB_SERVER, KEYSTONE_SERVER, and SKYLINE_SERVICE_PASSWORD with actual values.

```yaml
default:
  database_url: mysql+pymysql://skyline:SKYLINE_DBPASS@DB_SERVER:3306/skyline
  debug: true
  log_dir: /var/log
openstack:
  keystone_url: http://KEYSTONE_SERVER:5000/v3/
  system_user_password: SKYLINE_SERVICE_PASSWORD
```

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

### Connect to MySQL

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

Connect to the database server as the root user to perform database setup.

```bash
# mysql
```

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

### Install NVM and Node.js LTS

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/contributor/development.environment.md

Installs Node Version Manager (nvm) and then installs and aliases the latest LTS (Erbium) version of Node.js.

```shell
wget -P /root/ --tries=10 --retry-connrefused --waitretry=60 --no-dns-cache --no-cache  https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh
bash /root/install.sh
. /root/.nvm/nvm.sh
nvm install --lts=Erbium
nvm alias default lts/erbium
nvm use default
```

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

### Install nvm and Node.js

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

Installs Node Version Manager (nvm) and the latest LTS version of Node.js, setting it as the default.

```shell
wget -P /root/ --tries=10 --retry-connrefused --waitretry=60 --no-dns-cache --no-cache  https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh
bash /root/install.sh
. /root/.nvm/nvm.sh
nvm install --lts=gallium
nvm alias default lts/gallium
nvm use default
```

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

### Build Documentation with Tox

Source: https://github.com/openstack/skyline-console/blob/master/README.rst

Use the tox command with the 'docs' environment to build the project documentation. Ensure you have tox installed and configured.

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

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

### Install Docker Engine

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/install/docker-install-rhel.md

Installs Docker Engine, CLI, and containerd.io using the DNF package manager after adding the Docker repository.

```bash
$ sudo dnf install docker-ce docker-ce-cli containerd.io
```

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

### Install System Dependencies for Ubuntu 20.04/22.04

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

Installs necessary system packages for Skyline Console on Ubuntu 20.04 or 22.04.

```shell
sudo apt update
sudo apt install git python3-pip nginx make ssl-cert
sudo apt install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
```

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

### Install Skyline Console from Source

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/install/source-install-rhel.md

Builds the Skyline Console package and installs it using pip. This command assumes you are in the cloned repository directory.

```shell
cd /root/skyline-console
make package
sudo python3 -m pip install --force-reinstall dist/skyline_console-*.whl
```

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

### FormItem Configuration: Availability Zone Example

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-10-FormItem-introduction.md

Example of configuring a select form item for Availability Zone, including placeholder, required status, options, and a detailed tip. This is used in instance creation.

```javascript
{
  name: 'availableZone',
  label: t('Availability Zone'),
  type: 'select',
  placeholder: t('Please select'),
  isWrappedValue: true,
  required: true,
  options: this.availableZones,
  tip: t(
    'Availability zone refers to a physical area where power and network are independent of each other in the same area. In the same region, the availability zone and the availability zone can communicate with each other in the intranet, and the available zones can achieve fault isolation.'
  ),
}
```

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

### Install Project Dependencies with Yarn

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/contributor/development.environment.md

Installs all project dependencies defined in the package.json file using Yarn.

```shell
yarn install
```

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

### Install System Dependencies for Ubuntu 24.04

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

Installs necessary system packages for Skyline Console on Ubuntu 24.04.

```shell
sudo apt update
sudo apt install git python3-pip nginx make ssl-cert
sudo apt install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb
```

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

### Install Yarn Package Manager

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/contributor/development.environment.md

Installs the Yarn package manager globally using npm.

```shell
npm install -g yarn
```

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

### Install Node.js LTS (Gallium)

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/install/source-install-rhel.md

Installs the Long Term Support (LTS) version of Node.js codenamed 'Gallium' and sets it as the default.

```shell
nvm install --lts=gallium
nvm alias default lts/gallium
nvm use default
```

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

### labelCol Configuration Example

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-7-ModalAction-introduction.md

Configures the layout for labels in a modal form. This example shows a conditional configuration based on modal size.

```javascript
get labelCol() {
  const size = this.getModalSize();
  if (size === 'large') {
    return {
      xs: { span: 6 },
      sm: { span: 4 },
    };
  }
  return {
    xs: { span: 8 },
    sm: { span: 6 },
  };
}
```

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

### Install nvm (Node Version Manager)

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/install/source-install-rhel.md

Downloads and installs nvm, a version manager for Node.js, to manage different Node.js versions.

```shell
wget -P /root/ --tries=10 --retry-connrefused --waitretry=60 --no-dns-cache --no-cache  https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh
sh /root/install.sh
. /root/.nvm/nvm.sh
```

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

### FormItem Configuration: MTU Example

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-10-FormItem-introduction.md

Example of configuring an input-number form item for MTU, including min, max, and extra information. This is used in network creation.

```javascript
{
  name: 'mtu',
  label: t('MTU'),
  type: 'input-number',
  min: 68,
  max: 9000,
  extra: t('Minimum value is 68 for IPv4, and 1280 for IPv6.'),
}
```

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

### Install System Dependencies on Ubuntu/Debian

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/contributor/development.environment.md

Installs necessary system packages for development on Ubuntu or Debian-based Linux distributions.

```shell
sudo apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
```

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

### Install System Dependencies on CentOS

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/contributor/development.environment.md

Installs necessary system packages for development on CentOS or RHEL-based Linux distributions.

```shell
yum install -y xorg-x11-server-Xvfb gtk2-devel gtk3-devel libnotify-devel GConf2 nss libXScrnSaver alsa-lib
```

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

### Compute Instance Route Configuration

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-13-Route-introduction.md

Example of configuring routes for instance-related pages, including list, admin list, detail, and create pages. Uses 'path', 'component', and 'exact' properties.

```javascript
{
  path: `${PATH}/instance`,
  component: Instance,
  exact: true
}
```

```javascript
{
  path: `${PATH}/instance-admin`,
  component: Instance,
  exact: true
}
```

```javascript
{
  path: `${PATH}/instance/detail/:id`,
  component: InstanceDetail,
  exact: true
}
```

```javascript
{
  path: `${PATH}/instance-admin/detail/:id`,
  component: InstanceDetail,
  exact: true
}
```

```javascript
{
  path: `${PATH}/instance/create`,
  component: StepCreate,
  exact: true
}
```

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

### Initialize Store for Frontend Pagination

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-1-BaseList-introduction.md

Override the init method to configure the data store for frontend pagination. In this scenario, the download store is the same as the data store because all data is fetched at once. This example shows initialization for the Project page.

```javascript
init() {
  this.store = globalProjectStore;
}
```

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

### Upload FormItem Example

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-10-FormItem-introduction.md

The 'upload' type is used for file uploads. This example demonstrates its use for uploading an image.

```javascript
{
  name: 'file',
  label: t('File'),
  type: 'upload',
  required: true,
}
```

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

### FormItem Configuration: Custom Component Example

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-10-FormItem-introduction.md

Example of using a custom component directly for a form item, bypassing the 'type' configuration. This is used for resizing instances.

```javascript
{
  name: 'newFlavor',
  label: t('Flavor'),
  component: (
    <FlavorSelectTable flavor={flavor} onChange={this.onFlavorChange} />
  ),
  required: true,
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 18,
    },
  },
}
```

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

### Keypair Info Card Configuration

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-4-BaseDetailInfo-introduction.md

Example of configuring a card to display keypair information. It defines labels, data indices, and copyable properties for each row.

```javascript
get keypairInfoCard() {
  const options = [
  {
    label: t('Fingerprint'),
    dataIndex: 'fingerprint',
  },
  {
    label: t('Public Key'),
    dataIndex: 'public_key',
    copyable: true,
  },
  {
    label: t('User ID'),
    dataIndex: 'user_id',
  },
  ];
  return {
    title: t('Keypair Info'),
    options,
  };
}
```

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

### Initialize Store in init Function

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-4-BaseDetailInfo-introduction.md

Override the `init` function to configure the Store and initiate data requests when the page is displayed. This example shows initializing an `ImageStore`.

```javascript
init() {
  this.store = new ImageStore();
}
```

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

### Integrating encrypted information with 'listDidFetch'

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-5-BaseStore-introduction.md

This 'listDidFetch' example demonstrates how to integrate encrypted information by initiating an additional request to fetch encryption details for each item in the list.

```javascript
async listDidFetch(items, allProjects, filters) {
  const { showEncryption } = filters;
  if (items.length === 0) {
    return items;
  }
  if (!showEncryption) {
    return items;
  }
  const promiseList = items.map((i) =>
    request.get(`${this.getDetailUrl({ id: i.id })}/encryption`)
  );
  const encryptionList = await Promise.all(promiseList);
  const result = items.map((i) => {
    const { id } = i;
    const encryption = encryptionList.find((e) => e.volume_type_id === id);
    return {
      ...i,
      encryption,
    };
  });
  return result;
}
```

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

### FormItem Configuration: Label Column Example

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-10-FormItem-introduction.md

Example of adjusting the layout of the form item's label using 'labelCol'. This is used in managing quotas.

```javascript
{
  name: 'instances',
  label: t('Instance'),
  type: 'input-number',
  labelCol: { span: 12 },
  colNum: 2,
  validator: this.checkMin,
}
```

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

### Verify Node.js and npm Versions

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/contributor/development.environment.md

Checks the installed versions of Node.js and npm to ensure they meet the project's requirements.

```shell
node -v
# v12.*.*
npm -v
# 6.*.*
```

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

### Initialize Separate Stores for Backend Pagination

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-1-BaseList-introduction.md

Override the init method to configure distinct data and download stores when using backend pagination. This ensures efficient data handling for both list display and data downloads. This example is for the Router page.

```javascript
init() {
  this.store = new RouterStore();
  this.downloadStore = new RouterStore();
}
```

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

### First-Level Menu Configuration (With Submenu)

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-12-Menu-introduction.md

Example of a first-level menu item that contains submenus. This is the default configuration for most top-level navigation items, such as the 'Compute' page.

```javascript
{
    path: '/compute',
    name: t('Compute'),
    key: '/compute',
    icon: <DesktopOutlined />,
    children: [...] 
  }
```

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

### Nginx Configuration for Code Coverage

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/test/ready-to-work.md

Example Nginx configuration to serve the front-end package with code coverage enabled. Ensure the root path and backend address are correctly set.

```nginx
server {
  listen 0.0.0.0:8088 default_server;

  root /path/to/skyline-console/dist;
  index index.html;
  server_name _;
  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api {
    proxy_pass http://<backend_address>;
  }
}
```

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

### Manage Project Users with Transfer List

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/test/3-1-E2E-form-operation.md

This example shows how to manage users within a project using a transfer list component. It searches for the project, initiates user management, and then uses formTransfer and formTransferRight to select and assign users.

```javascript
it('successfully manage user', () => {
  cy.tableSearchText(name)
    .clickActionInMore('Manage User')
    .formTransfer('select_user', username)
    .formTransferRight('select_user', username)
    .formSelect('select_user', 'admin')
    .clickModalActionSubmitButton();
});
```

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

### Resource Page Action Config Integration

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-11-Action-introduction.md

Example of how to retrieve and use the action configurations within a resource list page component.

```javascript
import actionConfigs from './actions';
get actionConfigs() {
  return actionConfigs;
}
```

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

### First-Level Menu Route Configuration

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-13-Route-introduction.md

Example of configuring a route for a first-level menu item, specifying its path and associated component. This is typically added to the core routes configuration.

```javascript
{
  path: '/compute',
  component: Compute
}
```

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

### Form Items Configuration

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-7-ModalAction-introduction.md

Defines the list of form items for the action's modal. This example includes an instance label and a volume selector, with specific configurations for the volume selection.

```javascript
get formItems() {
  return [
    {
      name: 'instance',
      label: t('Instance'),
      type: 'label',
      iconType: 'instance',
    },
    {
      name: 'volume',
      label: t('Volume'),
      type: 'volume-select-table',
      tip: multiTip,
      isMulti: false,
      required: true,
      serverId: this.item.id,
      disabledFunc: (record) => {
        const diskFormat = _get(
          record,
          'origin_data.volume_image_metadata.disk_format'
        );
        return diskFormat === 'iso';
      },
    },
  ];
}
```

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

### Create Instance with Step-by-Step Form

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/test/3-1-E2E-form-operation.md

Handles the multi-step form process for creating an instance, including navigating through steps and waiting for server requests. This function is essential for testing complex resource creation workflows.

```javascript
it('successfully create', () => {
  cy.clickHeaderActionButton(0)
    .url()
    .should('include', `${listUrl}/create`)
    .wait(5000)
    .formTableSelect('flavor')
    .formTableSelect('image')
    .formSelect('systemDisk')
    .formAddSelectAdd('dataDisk')
    .formSelect('dataDisk')
    .wait(2000)
    .clickStepActionNextButton()
    .wait(5000)
    .formTableSelectBySearch('networkSelect', networkName, 5000)
    .formTableSelectBySearch('securityGroup', 'default', 5000)
    .wait(2000)
    .clickStepActionNextButton()
    .formInput('name', name)
    .formRadioChoose('loginType', 1)
    .formInput('password', password)
    .formInput('confirmPassword', password)
    .wait(2000)
    .clickStepActionNextButton()
    .wait(2000)
    .clickStepActionNextButton()
    .waitFormLoading()
    .url()
    .should('include', listUrl)
    .closeNotice()
    .waitStatusActiveByRefresh();
});
```

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

### Create Image with File Upload and Details

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/test/3-1-E2E-form-operation.md

This snippet demonstrates creating an image by uploading a file and specifying various image details. It includes steps for navigating to the create form, uploading the image file, selecting disk format, OS distribution and version, and user, then submitting and verifying the creation.

```javascript
it('successfully create', () => {
  cy.clickHeaderActionButton(0)
    .url()
    .should('include', `${listUrl}/create`)
    .formInput('name', name)
    .formAttachFile('file', filename)
    .formSelect('disk_format', 'QCOW2 - QEMU Emulator')
    .formSelect('os_distro', 'Others')
    .formInput('os_version', 'cirros-0.4.0-x86_64')
    .formInput('os_admin_user', 'root')
    .formSelect('usage_type', 'Common Server')
    .formText('description', name)
    .clickFormActionSubmitButton()
    .wait(2000)
    .url()
    .should('include', listUrl)
    .tableSearchText(name)
    .waitStatusActiveByRefresh();
});
```

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

### Run Development Server

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/configuration/skyline-console-settings.md

Execute the development server command from the project root directory.

```shell
yarn run dev
```

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

### Create Network for Instance

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/test/how-to-edit-e2e-case.md

Create a network using `cy.createNetwork` to be used for testing instance creation and interface attachment.

```javascript
cy.createNetwork({ name: networkName });
```

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

### Create Skyline Directories

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

Ensure necessary directories for Skyline configuration, logs, and data are created.

```bash
sudo mkdir -p /etc/skyline /var/log/skyline /var/lib/skyline /var/log/nginx
```

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

### Textarea FormItem Example

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-10-FormItem-introduction.md

Use the 'textarea' type for multi-line text input fields. Shown in the example for editing volume descriptions.

```javascript
{
  name: 'description',
  label: t('Description'),
  type: 'textarea',
}
```

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

### Create Projects for User and Project Management Tests

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/test/3-4-E2E-resource-operation.md

Prepares projects for testing user and project management functionalities. Ensure project names are defined.

```javascript
it('successfully prepare resource', () => {
  cy.createProject({ name: projectName });
  cy.createProject({ name: projectName2 });
  cy.createUserGroup({ name: userGroupName });
});
```

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

### Create Network, Router, and Instance

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/test/3-4-E2E-resource-operation.md

Creates a network, a router connected to the network with a public gateway, and an instance on that network. This is a prerequisite for associating floating IPs.

```javascript
it('successfully prepare resource', () => {
  cy.createNetwork({ name: networkName });
  cy.createRouter({ name: routerName, network: networkName });
  cy.createInstance({ name: instanceName, networkName });
});
```

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

### FormItem Validator: MAC Address Example

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-10-FormItem-introduction.md

Example of a custom validator function for MAC address format, returning a Promise. This is used in port creation.

```javascript
export const macAddressValidate = (rule, value) => {
  if (isMacAddress(value.toUpperCase())) {
    return Promise.resolve(true);
  }
  return Promise.reject(new Error(`${t('Invalid: ')}${macAddressMessage}`));
};
{
  name: 'address',
  label: t('MAC Address'),
  required: true,
  type: 'input',
  validator: macAddressValidate,
}
```

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

### Run Skyline Bootstrap Server

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

Run the bootstrap server using a Docker container to initialize the Skyline service. This mounts the configuration and log directories and uses host networking.

```bash
sudo docker run -d --name skyline_bootstrap \
  -e KOLLA_BOOTSTRAP="" \
  -v /etc/skyline/skyline.yaml:/etc/skyline/skyline.yaml \
  -v /var/log:/var/log \
  --net=host 99cloud/skyline:latest
```

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

### Create Skyline Directories

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/install/source-install-rhel.md

Ensures that the necessary directories for Skyline configuration and logs are created.

```shell
sudo mkdir -p /etc/skyline /var/log/skyline
```

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

### Verify Node.js Version

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/development/ready-to-work.md

Check if the installed Node.js version meets the project requirements (>=10.22.0).

```console
node -v
```

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

### Remove Bootstrap Server

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/install/docker-install-rhel.md

Stops and removes the temporary bootstrap container after the initial setup is complete.

```console
$ sudo docker rm -f skyline_bootstrap
```

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

### Add Docker Repository

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/install/docker-install-rhel.md

Adds the Docker CE repository to RHEL and CentOS systems to enable Docker installation.

```bash
$ sudo dnf config-manager --add-repo=https://download.docker.com/linux/centos/docker-ce.repo
```

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

### Default Sort Key

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-1-BaseList-introduction.md

Specifies the default key for sorting when backend sorting is enabled. Example shown for router data.

```javascript
get defaultSortKey() {
  return 'status';
}
```

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

### Get Parameters for Update Details Request

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-5-BaseStore-introduction.md

Defines the parameters used when requesting update details. The default value is undefined.

```javascript
getDetailParams = () => undefined;
```

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

### Build Project for Production

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/contributor/development.environment.md

Builds the project's packages, generating the contents of the 'dist' directory for deployment.

```shell
yarn run build
```

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

### Create a New Release Note

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/contributor/releasenotes.md

Use this command to create a new release note file. The filename should reflect the type of change (e.g., bug, blueprint).

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

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

### Override 'listResponseKey' property

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-5-BaseStore-introduction.md

The 'listResponseKey' property defines the key for list data. The default value is `${this.responseKey}s`. This example overrides it to 'volume_snapshots'.

```javascript
get responseKey() {
  return 'snapshot';
}

get listResponseKey() {
  return 'volume_snapshots';
}
```

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

### Project Filter Key

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-1-BaseList-introduction.md

Defines the key used for filtering by project when making requests. Defaults to 'project_id'. Example shown for image data.

```javascript
get projectFilterKey() {
  return 'owner';
}
```

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

### Get Checkbox Properties

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-1-BaseList-introduction.md

Configures properties for checkboxes in a list, allowing selection for batch operations. Bare metal instances are disabled by default.

```javascript
getCheckboxProps(record) {
  return {
    disabled: isIronicInstance(record),
    name: record.name,
  };
}
```

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

### Create Floating IP for Instance Test

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/test/3-4-E2E-resource-operation.md

Prepares a floating IP address for testing instance functionality. Ensure network and router are set up.

```javascript
it('successfully prepare resource', () => {
  cy.createNetwork({ name: networkName });
  cy.createRouter({ name: routerName, network: networkName });
  cy.createFip();
  cy.createVolume(volumeName);
});
```

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

### Instance Volume FormItem for System Disk

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-10-FormItem-introduction.md

Component for configuring instance system disk size, including volume type options and minimum size. Requires volume type data and flavor/image constraints.

```javascript
{
  name: 'systemDisk',
  label: t('System Disk'),
  type: 'instance-volume',
  options: this.volumeTypes,
  required: !this.sourceTypeIsVolume,
  hidden: this.sourceTypeIsVolume,
  validator: this.checkSystemDisk,
  minSize: this.getSystemDiskMinSize(),
  extra: t('Disk size is limited by the min disk of flavor, image, etc.'),
  onChange: this.onSystemDiskChange,
}
```

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

### Metadata Transfer FormItem

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-10-FormItem-introduction.md

Use the 'metadata-transfer' type for transferring metadata. It includes a validator to ensure values are provided. This example shows editing image metadata.

```jsx
{
  name: 'systems',
  label: t('Metadata'),
  type: 'metadata-transfer',
  metadata: this.metadata,
  validator: (rule, value) => {
    if (this.hasNoValue(value)) {
      return Promise.reject(t('Please input value'));
    }
    return Promise.resolve();
  },
}
```

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

### Build Skyline Console Documentation

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/contributor/documentation.md

Use this command to build the documentation for the Skyline Console project. Ensure you are running the docs job as part of the build.

```console
tox -e docs
```

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

### Member Allocator FormItem Example

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-10-FormItem-introduction.md

The 'member-allocator' type is used for managing members, particularly in load balancer configurations. It displays loading states and available ports.

```javascript
{
  name: 'extMembers',
  type: 'member-allocator',
  isLoading: this.store.list.isLoading,
  ports: this.state.ports,
}
```

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

### IP Input FormItem Example

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-10-FormItem-introduction.md

The 'ip-input' type provides IP address input with validation. It supports both IPv4 and IPv6 and can be configured with version and custom validators.

```javascript
{
  name: 'ip',
  label: t('IP'),
  type: 'ip-input',
  required: ipType === 1,
  hidden: ipType !== 1,
  version,
  // defaultIp,
  validator: this.checkIP,
  extra: t('Please make sure this IP address be available.'),
}
```

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

### Navigate to Detail Page and Verify

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/test/3-2-E2E-table-operation.md

Demonstrates navigating to the detail page of a resource from the table, verifying its name, and returning to the list page. Use this to test resource detail view functionality.

```javascript
it('successfully detail', () => {
  cy.tableSearchText(name).goToDetail();
  cy.checkDetailName(name);
  cy.goBackToList(listUrl);
});
```

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

### Custom Row Key for List Data

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-1-BaseList-introduction.md

Defines the key for unique identification of list data. Defaults to 'id'. This example uses 'name' as the row key.

```javascript
get rowKey() {
  return 'name';
}
```

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

### Create Volume for Attachment

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/test/how-to-edit-e2e-case.md

Create a volume using `cy.createVolume` to be used for testing volume attachment to an instance.

```javascript
cy.createVolume(volumeName);
```

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

### Create Instance with Cancel in Step-by-Step Form

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/test/3-1-E2E-form-operation.md

Tests the cancellation flow within a step-by-step form, specifically for creating an instance. This snippet verifies that the form can be exited cleanly by clicking the cancel button.

```javascript
it('successfully create instance with cancel', () => {
  cy.tableSearchText(name)
    .clickActionInMore('Create Instance')
    .wait(2000)
    .clickStepActionCancelButton();
});
```

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

### First-Level Menu Configuration (No Submenu)

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-12-Menu-introduction.md

Example of a first-level menu item that does not have a submenu and has breadcrumbs disabled. Use this for top-level navigation items like a home page.

```javascript
{
    path: '/base/overview',
    name: t('Home'),
    key: '/home',
    icon: <HomeOutlined />,
    hasBreadcrumb: false,
    hasChildren: false,
  }
```

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

### Create Volume for Storage Backup Test

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/test/3-4-E2E-resource-operation.md

Prepares a volume for testing volume backup functionality. Ensure a volume name is defined.

```javascript
it('successfully prepare resource', () => {
  cy.createVolume(volumeName);
  cy.createNetwork({ name: networkName });
  cy.createInstance({ name: instanceName, networkName });
});
```

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

### Descriptions FormItem Example

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-10-FormItem-introduction.md

The 'descriptions' type displays structured information, often used in confirmation steps. It includes titles, clickable actions, and a list of label-value items.

```javascript
{
  name: 'confirm-config',
  label: t('Config Overview'),
  type: 'descriptions',
  title: t('Base Config'),
  onClick: () => {
    this.goStep(0);
  },
  items: [
    {
      label: t('Start Source'),
      value: context.source.label,
    },
    {
      label: t('System Disk'),
      value: this.getSystemDisk(),
    },
    {
      label: t('Availability Zone'),
      value: context.availableZone.label,
    },
    {
      label: t('Start Source Name'),
      value: this.getSourceValue(),
    },
    {
      label: t('Data Disk'),
      value: this.getDataDisk(),
    },
    {
      label: t('Project'),
      value: context.project,
    },
    {
      label: t('Flavor'),
      value: this.getFlavor(),
    },
  ],
}
```

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

### System Info Action Configuration with Null First Action

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-11-Action-introduction.md

Configures row actions for System Info, setting the first action to null and providing enable/disable actions in the moreActions dropdown.

```javascript
import Enable from './Enable';
import Disable from './Disable';

const actionConfigs = {
  rowActions: {
    firstAction: null,
    moreActions: [
      {
        action: Enable,
      },
      {
        action: Disable,
      },
    ],
  },
  batchActions: [],
  primaryActions: [],
};

export default actionConfigs;
```

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

### Hide Custom Header Configuration

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-1-BaseList-introduction.md

Controls the visibility of the header configuration icon. Defaults to true (hidden). This example shows 'name' which might be a typo and should likely be a boolean.

```javascript
get hideCustom() {
  return 'name';
}
```

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

### Override isDanger for Stop Instance

Source: https://github.com/openstack/skyline-console/blob/master/docs/en/develop/3-8-ConfirmAction-introduction.md

Override the isDanger attribute to emphasize the risk of an action, typically by using a 'danger' button type. This example is for the 'stop instance' action.

```javascript
get isDanger() {
  return 'danger';
}
```

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

### Create Skyline User

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

Create a 'skyline' user with a password prompt. The output shows the user details after creation.

```bash
$ openstack user create --domain default --password-prompt skyline
```

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

### Create Skyline Directories

Source: https://github.com/openstack/skyline-console/blob/master/doc/source/install/docker-install-rhel.md

Ensures that the required directories for Skyline configuration, logs, and data are created on the host system. These directories are mounted into the Docker container.

```console
$ sudo mkdir -p /etc/skyline /var/log/skyline /var/lib/skyline /var/log/nginx
```