feat(pci): add components for instance creation

Author: marie-j

packages/manager/modules/pci/src/components/project/flavor-billing/flavor-billing.component.js

@@ -0,0 +1,12 @@
+import controller from './flavor-billing.controller';
+import template from './flavor-billing.html';
+
+export default {
+  controller,
+  template,
+  bindings: {
+    flavor: '<',
+    number: '<?',
+    monthlyBilling: '=?',
+  },
+};

packages/manager/modules/pci/src/components/project/flavor-billing/flavor-billing.controller.js

@@ -0,0 +1,14 @@
+export default class FlavorBillingController {
+  $onInit() {
+    this.monthly = true;
+    this.number = this.number || 1;
+  }
+
+  selectBilling(monthlyBilling) {
+    this.monthlyBilling = monthlyBilling;
+  }
+
+  getPrice(price) {
+    return this.number * price.value;
+  }
+}

packages/manager/modules/pci/src/components/project/flavor-billing/flavor-billing.html

@@ -0,0 +1,32 @@
+<div class="row">
+    <oui-select-picker
+        class="d-inline-block col-md-6 col-lg-4 my-3"
+        data-name="flavor-billing"
+        data-label="{{:: 'pci_project_flavors_billing_monthly' | translate }}"
+        data-model="$ctrl.monthly"
+        data-values="[true]"
+        data-variant="light"
+        data-on-change="$ctrl.selectBilling(modelValue)">
+        <oui-select-picker-section data-ng-if="$ctrl.flavor">
+            <span
+                data-translate="pci_project_flavors_billing_price_monthly"
+                data-translate-values="{ price: ($ctrl.getPrice($ctrl.flavor.prices.monthly) | currency: $ctrl.flavor.prices.currencyCode) }">
+            </span>
+        </oui-select-picker-section>
+    </oui-select-picker>
+    <oui-select-picker
+        class="d-inline-block col-md-6 col-lg-4 my-3"
+        data-name="flavor-billing"
+        data-label="{{:: 'pci_project_flavors_billing_hourly' | translate }}"
+        data-model="$ctrl.monthly"
+        data-values="[false]"
+        data-variant="light"
+        data-on-change="$ctrl.selectBilling(modelValue)">
+        <oui-select-picker-section data-ng-if="$ctrl.flavor">
+            <span
+                data-translate="pci_project_flavors_billing_price_hourly"
+                data-translate-values="{ price: ($ctrl.getPrice($ctrl.flavor.prices.hourly) | currency: $ctrl.flavor.prices.currencyCode) }">
+            </span>
+        </oui-select-picker-section>
+    </oui-select-picker>
+</div>

packages/manager/modules/pci/src/components/project/flavor-billing/flavors-list.constants.js

@@ -0,0 +1,37 @@
+export const DEFAULT_OS = 'linux';
+
+export const CATEGORIES = [
+  {
+    category: 'balanced',
+    pattern: /eg/,
+  },
+  {
+    category: 'cpu',
+    pattern: /cpu|hg/,
+  },
+  {
+    category: 'ram',
+    pattern: /ram/,
+  },
+  {
+    category: 'accelerated',
+    pattern: /gpu|nvme/,
+  },
+  {
+    category: 'vps',
+    pattern: /vps/,
+  },
+];
+
+export const FLEX_TYPE = /flex$/;
+
+export const LEGACY_FLAVORS = /eg|sp|hg|vps-ssd/;
+
+export const SSD_DISK_TYPES = [/ssd/, /nvme/];
+
+export default {
+  DEFAULT_OS,
+  FLEX_TYPE,
+  LEGACY_FLAVORS,
+  SSD_DISK_TYPES,
+};

packages/manager/modules/pci/src/components/project/flavor-billing/index.js

@@ -0,0 +1,21 @@
+import angular from 'angular';
+import '@ovh-ux/ng-translate-async-loader';
+import '@ovh-ux/ng-ovh-cloud-universe-components';
+import 'angular-translate';
+import 'ovh-ui-angular';
+
+import component from './flavor-billing.component';
+
+const moduleName = 'ovhManagerPciFlavorBilling';
+
+angular
+  .module(moduleName, [
+    'oui',
+    'ngOvhCloudUniverseComponents',
+    'ngTranslateAsyncLoader',
+    'pascalprecht.translate',
+  ])
+  .component('pciProjectFlavorBilling', component)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

packages/manager/modules/pci/src/components/project/flavor-billing/translations/Messages_fr_FR.json

@@ -0,0 +1,6 @@
+{
+  "pci_project_flavors_billing_hourly": "Horaire",
+  "pci_project_flavors_billing_monthly": "Mensuel",
+  "pci_project_flavors_billing_price_hourly": "{{price}} HT/h",
+  "pci_project_flavors_billing_price_monthly": "{{price}} HT/mois"
+}

packages/manager/modules/pci/src/components/project/flavors-list/flavor-group.class.js

@@ -0,0 +1,20 @@
+import find from 'lodash/find';
+import map from 'lodash/map';
+import omit from 'lodash/omit';
+import union from 'lodash/union';
+
+import { DEFAULT_OS } from './flavors-list.constants';
+
+export default class FlavorGroup {
+  constructor(flavors) {
+    Object.assign(this, omit(find(flavors, { osType: DEFAULT_OS }), [
+      'region', 'id', 'osType', 'planCodes',
+    ]));
+    this.availableRegions = union(...map(flavors, 'regions'));
+    this.flavors = flavors;
+  }
+
+  isAvailableInRegion(region) {
+    return this.availableRegions.includes(region);
+  }
+}

packages/manager/modules/pci/src/components/project/flavors-list/flavor.class.js

@@ -0,0 +1,29 @@
+import { FLEX_TYPE, LEGACY_FLAVORS, SSD_DISK_TYPES } from './flavors-list.constants';
+
+export default class Flavors {
+  constructor(flavor) {
+    Object.assign(this, flavor);
+
+    this.setDiskType();
+  }
+
+  setDiskType() {
+    this.diskType = SSD_DISK_TYPES.some(diskType => diskType.test(this.type)) ? 'ssd' : 'ceph';
+  }
+
+  isLegacy() {
+    return LEGACY_FLAVORS.test(this.name);
+  }
+
+  isAvailable() {
+    return this.available;
+  }
+
+  isFlex() {
+    return FLEX_TYPE.test(this.name);
+  }
+
+  hasSsdDisk() {
+    return this.diskType === 'ssd';
+  }
+}

packages/manager/modules/pci/src/components/project/flavors-list/flavors-list.component.js

@@ -0,0 +1,12 @@
+import controller from './flavors-list.controller';
+import template from './flavors-list.html';
+
+export default {
+  controller,
+  template,
+  bindings: {
+    selectedFlavor: '=?',
+    displaySelectedFlavor: '<',
+    serviceName: '@',
+  },
+};

packages/manager/modules/pci/src/components/project/flavors-list/flavors-list.constants.js

@@ -0,0 +1,37 @@
+export const DEFAULT_OS = 'linux';
+
+export const CATEGORIES = [
+  {
+    category: 'balanced',
+    pattern: /eg/,
+  },
+  {
+    category: 'cpu',
+    pattern: /cpu|hg/,
+  },
+  {
+    category: 'ram',
+    pattern: /ram/,
+  },
+  {
+    category: 'accelerated',
+    pattern: /gpu|nvme/,
+  },
+  {
+    category: 'vps',
+    pattern: /vps/,
+  },
+];
+
+export const FLEX_TYPE = /flex$/;
+
+export const LEGACY_FLAVORS = /eg|sp|hg|vps-ssd/;
+
+export const SSD_DISK_TYPES = [/ssd/, /nvme/];
+
+export default {
+  DEFAULT_OS,
+  FLEX_TYPE,
+  LEGACY_FLAVORS,
+  SSD_DISK_TYPES,
+};