Explorar o código

Truncate disk name sub paths in Wizard Storage

If the disk name has more than 3 sub paths (see Azure), show only the
last 3 and truncate the rest.

Applicable to Wizard Storage page.
Sergiu Miclea %!s(int64=6) %!d(string=hai) anos
pai
achega
a7b7df3a7a
Modificáronse 1 ficheiros con 18 adicións e 1 borrados
  1. 18 1
      src/components/organisms/WizardStorage/WizardStorage.jsx

+ 18 - 1
src/components/organisms/WizardStorage/WizardStorage.jsx

@@ -169,6 +169,17 @@ class WizardStorage extends React.Component<Props> {
 
     disks = disks.filter(d => d[diskFieldName])
     disks.sort((d1, d2) => String(d1[diskFieldName]).localeCompare(String(d2[diskFieldName])))
+    let parseDiskName = (name: ?string): [?string, boolean] => {
+      if (!name) {
+        return [null, false]
+      }
+      let paths = name.split('/')
+      if (paths.length < 4) {
+        return [name, false]
+      }
+      return [`.../${paths.filter((_, i) => i > paths.length - 4).join('/')}`, true]
+    }
+
 
     return (
       <StorageWrapper>
@@ -186,11 +197,17 @@ class WizardStorage extends React.Component<Props> {
             }).map(i => i.instance_name || i.name)
             let selectedItem = storageMap && storageMap.find(s => s.type === type && String(s.source[diskFieldName]) === String(disk[diskFieldName]))
             selectedItem = selectedItem ? selectedItem.target : null
+            let diskNameParsed = parseDiskName(disk[diskFieldName])
             return (
               <StorageItem key={disk[diskFieldName]}>
                 <StorageImage backend={type === 'backend'} />
                 <StorageTitle>
-                  <StorageName data-test-id={`${TEST_ID}-${type}-source`}>{disk[diskFieldName]}</StorageName>
+                  <StorageName
+                    data-test-id={`${TEST_ID}-${type}-source`}
+                    title={diskNameParsed[1] ? disk[diskFieldName] : null}
+                  >
+                    {diskNameParsed[0]}
+                  </StorageName>
                   <StorageSubtitle
                     data-test-id={`${TEST_ID}-${type}-connectedTo`}
                   >{`Connected to ${connectedTo.join(', ')}`}</StorageSubtitle>