Merge pull request #648 from smiclea/provider-names

Add custom provider names using the config file

.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' },