Add custom provider names using the config file

Previously, the provider names were hardcoded (they are visible in the
filter menu of the Endpoints List page, Endpoint Details page and Wizard
Summary page).

Now, they can be changed through the config file and by extension
through the modding system.

.githooks/pre-commit

@@ -5,6 +5,8 @@
 
 printf "\nRunning TSC:\n"
 
+PATH=$PATH:/usr/local/bin:/usr/local/sbin
+
 yarn tsc
 
 if [[ "$?" == 0 ]]; then

config.ts

@@ -105,6 +105,19 @@ const conf: Config = {
     oracle_vm: 3,
   },
 
+  providerNames: {
+    aws: 'AWS',
+    openstack: 'OpenStack',
+    vmware_vsphere: 'VMware',
+    azure: 'Azure',
+    'hyper-v': 'Hyper-V',
+    kubevirt: 'KubeVirt',
+    scvmm: 'SCVMM',
+    oci: 'OCI',
+    opc: 'Oracle Cloud',
+    oracle_vm: 'Oracle VM',
+  },
+
   // The list of the users to hide in the UI
   hiddenUsers: ['barbican', 'coriolis'],
 

src/@types/Config.ts

@@ -1,3 +1,5 @@
+import { ProviderTypes } from './Providers'
+
 type Type = 'source' | 'destination'
 
 type ExtraOption = {
@@ -30,7 +32,8 @@ export type Config = {
   requestPollTimeout: number,
   instancesListBackgroundLoading: { default: number, [prop: string]: number },
   extraOptionsApiCalls: ExtraOption[],
-  providerSortPriority: { [providerName: string]: number },
+  providerSortPriority: { [providerName in ProviderTypes]: number },
+  providerNames: {[providerName in ProviderTypes]: string}
   hiddenUsers: string[],
   passwordFields: string[],
   mainListItemsPerPage: number,

src/@types/Providers.ts

@@ -12,7 +12,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-export type ProviderTypes = 'azure' | 'openstack' | 'opc' | 'oracle_vm' | 'vmware_vsphere' | 'aws' | 'oci' | 'hyper-v' | 'scvmm'
+export type ProviderTypes = 'azure' | 'openstack' | 'opc' | 'oracle_vm' | 'vmware_vsphere' | 'aws' | 'oci' | 'hyper-v' | 'scvmm' | 'kubevirt'
 
 export type Providers = {
   [provider in ProviderTypes]: {

src/components/atoms/EndpointLogos/EndpointLogos.tsx

@@ -17,6 +17,7 @@ import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
 import Generic from './resources/Generic'
+import configLoader from '../../../utils/Config'
 
 const Wrapper = styled.div<any>``
 const Logo = styled.div<any>`
@@ -34,9 +35,6 @@ const widthHeights = [
   { w: 185, h: 128 },
   { w: 185, h: 64 },
 ]
-const PROVIDER_LOGOS = [
-  'azure', 'openstack', 'opc', 'oracle_vm', 'vmware_vsphere', 'aws', 'oci', 'hyper-v', 'scvmm', 'kubevirt',
-]
 type Props = {
   endpoint?: string | null,
   height: number,
@@ -74,7 +72,7 @@ class EndpointLogos extends React.Component<Props> {
 
     let imageUrl: string | null = null
     const provider = this.props.endpoint
-    if (provider && PROVIDER_LOGOS.indexOf(provider) > -1) {
+    if (provider && Object.keys(configLoader.config.providerNames).indexOf(provider) > -1) {
       imageUrl = `${this.props.baseUrl || ''}/api/logos/${provider}/${size.h}`
       const style = this.props.white ? 'white' : this.props.disabled ? 'disabled' : null
       imageUrl = style ? `${imageUrl}/${style}` : imageUrl

src/components/organisms/EndpointDetailsContent/EndpointDetailsContent.tsx

@@ -250,7 +250,7 @@ class EndpointDetailsContent extends React.Component<Props> {
           </Field>
           <Field>
             <Label>Type</Label>
-            {this.renderValue(type || '', 'type')}
+            {this.renderValue(this.props.item ? configLoader.config.providerNames[this.props.item.type] : '', 'type')}
           </Field>
           <Field>
             <Label>Coriolis Regions</Label>

src/components/organisms/WizardSummary/WizardSummary.tsx

@@ -37,6 +37,7 @@ import networkArrowImage from './images/network-arrow.svg'
 import { INSTANCE_OSMORPHING_MINION_POOL_MAPPINGS } from '../WizardOptions/WizardOptions'
 import { MinionPool } from '../../../@types/MinionPool'
 import { ProviderTypes } from '../../../@types/Providers'
+import configLoader from '../../../utils/Config'
 
 const Wrapper = styled.div<any>`
   width: 100%;
@@ -392,7 +393,7 @@ class WizardSummary extends React.Component<Props> {
 
   renderTargetOptionsSection() {
     const data = this.props.data
-    const provider = this.props.data && this.props.data.target && this.props.data.target.type
+    const provider = data?.target?.type
     const type = this.props.wizardType.charAt(0).toUpperCase() + this.props.wizardType.substr(1)
 
     const executeNowOption = (
@@ -632,7 +633,7 @@ class WizardSummary extends React.Component<Props> {
               <StatusPill
                 secondary
                 small
-                label={LabelDictionary.get(data.source && data.source.type).toUpperCase()}
+                label={configLoader.config.providerNames[data.source!.type]}
                 data-test-id="wSummary-sourcePill"
               />
               <OverviewRowLabel data-test-id="wSummary-source">{data.source ? data.source.name : ''}</OverviewRowLabel>
@@ -644,7 +645,7 @@ class WizardSummary extends React.Component<Props> {
               <StatusPill
                 secondary
                 small
-                label={LabelDictionary.get(data.target && data.target.type).toUpperCase()}
+                label={configLoader.config.providerNames[data.target!.type]}
                 data-test-id="wSummary-targetPill"
               />
               <OverviewRowLabel data-test-id="wSummary-target">{data.target && data.target.name}</OverviewRowLabel>

src/components/pages/EndpointsPage/EndpointsPage.tsx

@@ -37,7 +37,6 @@ import replicaStore from '../../../stores/ReplicaStore'
 import providerStore from '../../../stores/ProviderStore'
 import EndpointDuplicateOptions from '../../organisms/EndpointDuplicateOptions'
 
-import LabelDictionary from '../../../utils/LabelDictionary'
 import configLoader from '../../../utils/Config'
 import Palette from '../../styleUtils/Palette'
 import { ProviderTypes } from '../../../@types/Providers'
@@ -96,7 +95,7 @@ class EndpointsPage extends React.Component<{ history: any }, State> {
     const types = [{ label: 'All', value: 'all' }]
     endpointStore.endpoints.forEach(endpoint => {
       if (!types.find(t => t.value === endpoint.type)) {
-        types.push({ label: LabelDictionary.get(endpoint.type), value: endpoint.type })
+        types.push({ label: configLoader.config.providerNames[endpoint.type], value: endpoint.type })
       }
     })
 

src/sources/ProviderSource.ts

@@ -43,8 +43,7 @@ class ProviderSource {
         cache: useCache,
         quietError,
       })
-      const schemas = (response && response.data && response.data.schemas) || {}
-      const schema = optionsType === 'source' ? schemas.source_environment_schema : schemas.destination_environment_schema
+      const schema = optionsType === 'source' ? response?.data?.schemas?.source_environment_schema : response?.data?.schemas?.destination_environment_schema
       let fields = []
       if (schema) {
         fields = SchemaParser.optionsSchemaToFields(providerName, schema, `${providerName}-${optionsType}`)

src/stores/ProviderStore.ts

@@ -145,20 +145,26 @@ class ProviderStore {
 
   @computed
   get providerNames(): ProviderTypes[] {
+    if (!this.providers) {
+      return []
+    }
+
     const sortPriority = configLoader.config.providerSortPriority
 
-    const array: any[] = Object.keys(this.providers || {}).sort((a, b) => {
-      if (sortPriority[a] && sortPriority[b]) {
-        return (sortPriority[a] - sortPriority[b]) || a.localeCompare(b)
+    const array = Object.keys(this.providers).sort((a, b) => {
+      const aTyped = a as ProviderTypes
+      const bTyped = b as ProviderTypes
+      if (sortPriority[aTyped] && sortPriority[bTyped]) {
+        return (sortPriority[aTyped] - sortPriority[bTyped]) || a.localeCompare(b)
       }
-      if (sortPriority[a]) {
+      if (sortPriority[aTyped]) {
         return -1
       }
-      if (sortPriority[b]) {
+      if (sortPriority[bTyped]) {
         return 1
       }
       return a.localeCompare(b)
-    })
+    }) as ProviderTypes[]
     return array
   }
 

src/utils/LabelDictionary.ts

@@ -34,9 +34,6 @@ const dictionary = {
   replace_mac: 'Replace MAC Address',
   migr_worker_use_config_drive: 'Migration Worker use ConfigDrive',
   migr_worker_use_fip: 'Migration Worker use FIP',
-  openstack: 'OpenStack',
-  opc: 'Oracle Cloud',
-  vmware_vsphere: 'VMware',
   separate_vm: 'Separate Migration/VM?',
   windows_migr_image: { description: 'The Windows Migration Image information found on the Azure page' },
   linux_migr_image: { description: 'The Linux Migration Image information found on the Azure page' },