feat: Add blazar reservation changes

Author: reet8598

src/client/blazar/index.js

@@ -0,0 +1,29 @@
+import Base from '../client/base';
+import { blazarBase } from '../client/constants';
+
+export class BlazarClient extends Base {
+  get baseUrl() {
+    return blazarBase();
+  }
+
+  get resources() {
+    return [
+      {
+        key: 'leases',
+        responseKey: 'lease',
+      },
+      {
+        name: 'hosts',
+        key: 'os-hosts',
+        responseKey: 'host',
+      },
+      {
+        key: 'floatingips',
+        responseKey: 'floatingip',
+      },
+    ];
+  }
+}
+
+const blazarClient = new BlazarClient();
+export default blazarClient;

src/client/client/constants.js

@@ -37,6 +37,7 @@ export const endpointVersionMap = {
   magnum: 'v1',
   designate: 'v2',
   masakari: 'v1',
+  blazar: 'v1',
 };
 
 export const endpointsDefault = {
@@ -79,6 +80,7 @@ export const zunBase = () => getOpenstackEndpoint('zun');
 export const magnumBase = () => getOpenstackEndpoint('magnum');
 export const designateBase = () => getOpenstackEndpoint('designate');
 export const masakariBase = () => getOpenstackEndpoint('masakari');
+export const blazarBase = () => getOpenstackEndpoint('blazar');
 
 export const ironicOriginEndpoint = () => getOriginEndpoint('ironic');
 export const vpnEndpoint = () => getOriginEndpoint('neutron_vpn');
@@ -89,6 +91,7 @@ export const cinderEndpoint = () => getOriginEndpoint('cinder');
 export const manilaEndpoint = () => getOriginEndpoint('manilav2');
 export const zunEndpoint = () => getOriginEndpoint('zun');
 export const masakariEndpoint = () => getOriginEndpoint('masakari');
+export const blazarEndpoint = () => getOriginEndpoint('blazar');
 export const firewallEndpoint = () => getOriginEndpoint('neutron_firewall');
 
 export const apiVersionMaps = {

src/client/index.js

@@ -30,6 +30,7 @@ import zun from './zun';
 import magnum from './magnum';
 import masakari from './masakari';
 import designate from './designate';
+import blazar from './blazar';
 
 const client = {
   skyline,
@@ -50,6 +51,7 @@ const client = {
   magnum,
   masakari,
   designate,
+  blazar,
 };
 
 window.client = client;

src/layouts/admin-menu.jsx

@@ -27,6 +27,7 @@ import {
   DeploymentUnitOutlined,
   BookOutlined,
   PlayCircleOutlined,
+  CalendarOutlined,
 } from '@ant-design/icons';
 
 const renderMenu = (t) => {
@@ -1098,6 +1099,36 @@ const renderMenu = (t) => {
         },
       ],
     },
+    {
+      path: '/reservation',
+      name: t('Reservation'),
+      key: 'reservationAdmin',
+      endpoints: 'blazar',
+      icon: <CalendarOutlined />,
+      children: [
+        {
+          path: '/reservation/lease',
+          name: t('Leases'),
+          key: 'leaseAdmin',
+          level: 1,
+          children: [
+            {
+              path: '/reservation/lease/create',
+              name: t('Create Lease'),
+              key: 'leaseCreateAdmin',
+              level: 2,
+            },
+            {
+              path: /^\/reservation\/lease\/detail\/.[^/]+$/,
+              name: t('Lease Detail'),
+              key: 'leaseDetailAdmin',
+              level: 2,
+              routePath: '/reservation/lease/detail/:id',
+            },
+          ],
+        },
+      ],
+    },
     {
       type: 'divider',
       key: 'help-divider-admin',

src/layouts/menu.jsx

@@ -26,6 +26,7 @@ import {
   LockOutlined,
   BookOutlined,
   PlayCircleOutlined,
+  CalendarOutlined,
 } from '@ant-design/icons';
 
 const renderMenu = (t) => {
@@ -714,6 +715,36 @@ const renderMenu = (t) => {
         },
       ],
     },
+    {
+      path: '/reservation',
+      name: t('Reservation'),
+      key: 'reservation',
+      endpoints: 'blazar',
+      icon: <CalendarOutlined />,
+      children: [
+        {
+          path: '/reservation/lease',
+          name: t('Leases'),
+          key: 'lease',
+          level: 1,
+          children: [
+            {
+              path: '/reservation/lease/create',
+              name: t('Create Lease'),
+              key: 'leaseCreate',
+              level: 2,
+            },
+            {
+              path: /^\/reservation\/lease\/detail\/.[^/]+$/,
+              name: t('Lease Detail'),
+              key: 'leaseDetail',
+              level: 2,
+              routePath: '/reservation/lease/detail/:id',
+            },
+          ],
+        },
+      ],
+    },
     {
       path: '/database',
       name: t('Database'),

src/pages/basic/routes/index.js

@@ -65,6 +65,9 @@ const E404 = lazy(() =>
 const InstanceHA = lazy(() =>
   import(/* webpackChunkName: "Inctance-HA" */ 'pages/ha/App')
 );
+const Reservation = lazy(() =>
+  import(/* webpackChunkName: "reservation" */ 'pages/reservation/App')
+);
 const PATH = '/';
 
 export default [
@@ -130,6 +133,10 @@ export default [
         path: `/ha`,
         component: InstanceHA,
       },
+      {
+        path: `/reservation`,
+        component: Reservation,
+      },
       { path: '*', component: E404 },
     ],
   },

src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx

@@ -22,6 +22,7 @@ import globalImageStore from 'stores/glance/image';
 import globalInstanceSnapshotStore from 'stores/glance/instance-snapshot';
 import globalVolumeTypeStore from 'stores/cinder/volume-type';
 import globalAvailabilityZoneStore from 'stores/nova/zone';
+import globalLeaseStore from 'stores/blazar/lease';
 import { VolumeStore } from 'stores/cinder/volume';
 import {
   canImageCreateInstance,
@@ -34,6 +35,11 @@ import {
 import Base from 'components/Form';
 import InstanceVolume from 'components/FormItem/InstanceVolume';
 import { isGpuCategory } from 'resources/nova/flavor';
+import {
+  isBlazarInternalAvailabilityZone,
+  getUsableLeaseReservations,
+  RESERVATION_TYPES,
+} from 'resources/blazar/reservation';
 import {
   volumeTypes,
   getDiskInfo,
@@ -48,12 +54,14 @@ export class BaseStep extends Base {
     this.volumeStore = new VolumeStore();
     this.volumeTypeStore = globalVolumeTypeStore;
     this.instanceSnapshotStore = globalInstanceSnapshotStore;
+    this.leaseStore = globalLeaseStore;
     this.getAvailZones();
     this.getImages();
     this.getVolumeTypes();
     this.getVolumes();
     this.getInstanceSnapshots();
     this.initSourceChange();
+    this.getHostReservations();
   }
 
   get title() {
@@ -69,7 +77,7 @@ export class BaseStep extends Base {
   }
 
   get defaultValue() {
-    const { volume, snapshot } = this.locationParams;
+    const { flavor, volume, snapshot } = this.locationParams;
     let source = this.imageSourceType;
     if (volume) {
       source = this.volumeSourceType;
@@ -85,12 +93,28 @@ export class BaseStep extends Base {
     if (source.value === 'image') {
       values.bootFromVolume = true;
     }
+    if (flavor) {
+      values.flavor = {
+        selectedRowKeys: [flavor],
+        selectedRows: [],
+      };
+    }
+    const { reservation } = this.locationParams;
+    if (reservation) {
+      values.hostReservation = {
+        selectedRowKeys: [reservation],
+        selectedRows: this.hostReservations.filter(
+          (it) => it.id === reservation
+        ),
+      };
+    }
     return values;
   }
 
   get availableZones() {
     return (globalAvailabilityZoneStore.list.data || [])
       .filter((it) => it.zoneState.available)
+      .filter((it) => !isBlazarInternalAvailabilityZone(it.zoneName))
       .map((it) => ({
         value: it.zoneName,
         label: it.zoneName,
@@ -210,6 +234,56 @@ export class BaseStep extends Base {
     }
   }
 
+  get enableBlazar() {
+    return this.props.rootStore.checkEndpoint('blazar');
+  }
+
+  get hostReservations() {
+    if (!this.enableBlazar) {
+      return [];
+    }
+    const leases = this.leaseStore.list.data || [];
+    return leases.reduce((results, lease) => {
+      const reservations = getUsableLeaseReservations(lease)
+        .filter((r) => r.resource_type === RESERVATION_TYPES.HOST)
+        .map((r) => ({ ...r, key: r.id, name: r.id }));
+      return [...results, ...reservations];
+    }, []);
+  }
+
+  get hasHostReservationSelected() {
+    // Only true when arriving from the lease detail page (?reservation=<id>).
+    const { reservation } = this.locationParams;
+    return !!reservation;
+  }
+
+  get hostReservationFormItem() {
+    const { reservation } = this.locationParams;
+
+    // Only show when arriving from the lease detail page (?reservation=<id>).
+    // In the normal create instance flow there is no host reservation input.
+    if (!reservation) {
+      return { name: 'hostReservation', hidden: true };
+    }
+
+    // Show as a read-only label — same pattern as the Project field.
+    const displayText = reservation;
+    return {
+      name: 'hostReservation',
+      label: t('Host Reservation'),
+      type: 'label',
+      content: displayText,
+    };
+  }
+
+  async getHostReservations() {
+    if (!this.enableBlazar) {
+      return;
+    }
+    await this.leaseStore.fetchList();
+    this.updateDefaultValue();
+  }
+
   async getImages() {
     const { volume, image, snapshot } = this.locationParams;
     if (volume || snapshot) {
@@ -791,12 +865,14 @@ export class BaseStep extends Base {
         type: 'select',
         placeholder: t('Please select'),
         isWrappedValue: true,
-        required: true,
+        required: !this.hasHostReservationSelected,
+        hidden: this.hasHostReservationSelected,
         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.'
         ),
       },
+      this.hostReservationFormItem,
       {
         type: 'divider',
       },

src/pages/compute/containers/Instance/actions/StepCreate/ConfirmStep/index.jsx

@@ -195,6 +195,16 @@ export class ConfirmStep extends Base {
     return serverGroup.selectedRows[0].name;
   }
 
+  getHostReservation() {
+    const { context } = this.props;
+    const { hostReservation } = context;
+    const { selectedRowKeys = [] } = hostReservation || {};
+    if (!selectedRowKeys.length) {
+      return null;
+    }
+    return selectedRowKeys[0];
+  }
+
   getIso() {
     const { context } = this.props;
     const { iso } = context;
@@ -214,6 +224,12 @@ export class ConfirmStep extends Base {
     return {};
   }
 
+  getAvailableZone() {
+    const { context } = this.props;
+    const { availableZone } = context;
+    return (availableZone && availableZone.label) || '-';
+  }
+
   get formItems() {
     const { context } = this.props;
     let baseItems = [
@@ -236,7 +252,7 @@ export class ConfirmStep extends Base {
       },
       {
         label: t('Available Zone'),
-        value: context.availableZone.label,
+        value: this.getAvailableZone(),
       },
       {
         label: t('Start Source Name'),
@@ -255,6 +271,14 @@ export class ConfirmStep extends Base {
         label: t('Flavor'),
         value: this.getFlavor(),
       },
+      ...(this.getHostReservation()
+        ? [
+            {
+              label: t('Host Reservation'),
+              value: this.getHostReservation(),
+            },
+          ]
+        : []),
     ];
     if (!this.enableCinder) {
       baseItems = baseItems.filter(