UI: VolumeInformation - Display labels list

- Display labels list - Imrpove Breadcrumb by adding Volume label Ref: #1891
scality · Nov 4, 2019 · c0a9e7c · c0a9e7c
1 parent 6d2fdcc
commit c0a9e7c
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 17 deletions.
diff --git a/ui/src/containers/VolumeInformation.js b/ui/src/containers/VolumeInformation.js
@@ -3,8 +3,8 @@ import { useSelector, useDispatch } from 'react-redux';
 import { useRouteMatch } from 'react-router';
 import { injectIntl, FormattedDate, FormattedTime } from 'react-intl';
 import styled from 'styled-components';
-import { padding, fontSize } from '@scality/core-ui/dist/style/theme';
-import { Breadcrumb } from '@scality/core-ui';
+import { padding } from '@scality/core-ui/dist/style/theme';
+import { Breadcrumb, Table } from '@scality/core-ui';
 import { makeGetNodeFromUrl, makeGetVolumesFromUrl } from '../services/utils';
 import {
   SPARSE_LOOP_DEVICE,
@@ -30,27 +30,34 @@ import {
   InformationSpan,
   InformationLabel,
   InformationValue,
+  InformationMainValue,
 } from '../components/InformationList';
 import {
   computeVolumeGlobalStatus,
   volumeGetError,
 } from '../services/NodeVolumesUtils';
 
 const VolumeInformationListContainer = styled(InformationListContainer)`
-  margin-left: ${padding.larger};
+  margin: ${padding.larger};
 `;
 
 const VolumeInformationContainer = styled.div`
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   padding: ${padding.base};
-  width: 750px;
+  .sc-banner {
+    margin: ${padding.base} ${padding.larger} 0 ${padding.larger};
+  }
+`;
+const InformationContainer = styled.div`
+  display: flex;
+  padding: ${padding.small} 0;
 `;
 
-const VolumeInformationTitle = styled.div`
-  font-size: ${fontSize.larger};
-  margin-left: ${padding.larger};
+const InformationValueSection = styled.div`
+  height: 200px;
+  min-width: 500px;
 `;
 
 const VolumeInformation = props => {
@@ -82,26 +89,46 @@ const VolumeInformation = props => {
     volume?.status,
   );
   const [errorCode, errorMessage] = volumeGetError(volume?.status);
-
+  const columns = [
+    {
+      label: intl.messages.name,
+      dataKey: 'name',
+    },
+    {
+      label: intl.messages.value,
+      dataKey: 'value',
+    },
+  ];
+  const labels = volume?.metadata?.labels
+    ? Object.keys(volume.metadata.labels).map(key => {
+        return {
+          name: key,
+          value: volume.metadata.labels[key],
+        };
+      })
+    : [];
   return (
     <VolumeInformationContainer>
       <BreadcrumbContainer>
         <Breadcrumb
           activeColor={theme.brand.secondary}
           paths={[
             <StyledLink to="/nodes">{intl.messages.nodes}</StyledLink>,
-            <StyledLink to={`/nodes/${node.name}/volumes`} title={node.name}>
+            <StyledLink to={`/nodes/${node.name}`} title={node.name}>
               {node.name}
             </StyledLink>,
+            <StyledLink
+              to={`/nodes/${node.name}/volumes`}
+              title={intl.messages.volumes}
+            >
+              {intl.messages.volumes}
+            </StyledLink>,
             <BreadcrumbLabel title={match.params.volumeName}>
               {match.params.volumeName}
             </BreadcrumbLabel>,
           ]}
         />
       </BreadcrumbContainer>
-      <VolumeInformationTitle>
-        {intl.messages.detailed_information}
-      </VolumeInformationTitle>
 
       {volumeStatus === STATUS_FAILED ? (
         <Banner
@@ -119,7 +146,7 @@ const VolumeInformation = props => {
       <VolumeInformationListContainer>
         <InformationSpan>
           <InformationLabel>{intl.messages.name}</InformationLabel>
-          <InformationValue>{volume?.metadata?.name}</InformationValue>
+          <InformationMainValue>{volume?.metadata?.name}</InformationMainValue>
         </InformationSpan>
         <InformationSpan>
           <InformationLabel>{intl.messages.status}</InformationLabel>
@@ -188,6 +215,20 @@ const VolumeInformation = props => {
             ''
           )}
         </InformationSpan>
+        {!!labels?.length && (
+          <InformationContainer>
+            <InformationLabel>{intl.messages.labels}</InformationLabel>
+            <InformationValueSection>
+              <Table
+                list={labels}
+                columns={columns}
+                disableHeader={false}
+                headerHeight={40}
+                rowHeight={40}
+              />
+            </InformationValueSection>
+          </InformationContainer>
+        )}
       </VolumeInformationListContainer>
     </VolumeInformationContainer>
   );

diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
@@ -115,7 +115,6 @@
   "select_a_type": "Select a type of volume…",
   "no_results": "No results",
   "search": "Search…",
-  "detailed_information": "Detailed Information",
   "failed_to_create_volume":"Failed to create volume.",
   "not_applicable": "Not applicable",
   "environments": "Environments",
@@ -128,5 +127,6 @@
   "add": "Add",
   "labels": "Labels",
   "enter_label_name": "Enter label name…",
-  "enter_label_value": "Enter label value…"
+  "enter_label_value": "Enter label value…",
+  "value": "Value"
 }
diff --git a/ui/src/translations/fr.json b/ui/src/translations/fr.json
@@ -115,7 +115,6 @@
   "select_a_type": "Sélectionner un type de volume…",
   "no_results": "Aucun résultat",
   "search": "Rechercher…",
-  "detailed_information": "Informations détaillées",
   "failed_to_create_volume":"Échec de la création du volume.",
   "not_applicable": "Non applicable",
   "environments": "Environnements",
@@ -128,5 +127,6 @@
   "add": "Ajouter",
   "labels": "Labels",
   "enter_label_name": "Saisir le nom du label…",
-  "enter_label_value": "Saisir la valeur du label…"
+  "enter_label_value": "Saisir la valeur du label…",
+  "value": "Valeur"
 }