gerrit.onap Code Review - sdc.git/blob

   1 /*!
   2  * Copyright © 2016-2018 European Support Limited
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import PropTypes from 'prop-types';
  18
  19 import i18n from 'nfvo-utils/i18n/i18n.js';
  20 import Modal from 'nfvo-components/modal/Modal.jsx';
  21 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
  22 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
  23
  24 import EntitlementPoolsEditor from './EntitlementPoolsEditor.js';
  25 import { extractUnits } from './EntitlementPoolsConstants';
  26
  27 class EntitlementPoolsListEditorView extends React.Component {
  28     static propTypes = {
  29         vendorName: PropTypes.string,
  30         licenseModelId: PropTypes.string.isRequired,
  31         entitlementPoolsList: PropTypes.array,
  32         isReadOnlyMode: PropTypes.bool.isRequired,
  33         isDisplayModal: PropTypes.bool,
  34         isModalInEditMode: PropTypes.bool,
  35         onAddEntitlementPoolClick: PropTypes.func,
  36         onEditEntitlementPoolClick: PropTypes.func,
  37         onDeleteEntitlementPool: PropTypes.func
  38     };
  39
  40     static defaultProps = {
  41         entitlementPoolsList: []
  42     };
  43
  44     state = {
  45         localFilter: ''
  46     };
  47
  48     render() {
  49         let {
  50             licenseModelId,
  51             isReadOnlyMode,
  52             isDisplayModal,
  53             isModalInEditMode,
  54             version
  55         } = this.props;
  56         let { onAddEntitlementPoolClick } = this.props;
  57         const { localFilter } = this.state;
  58
  59         return (
  60             <div className="license-model-list-editor entitlement-pools-list-editor">
  61                 <ListEditorView
  62                     title={i18n('Entitlement Pools')}
  63                     plusButtonTitle={i18n('Add Entitlement Pool')}
  64                     onAdd={onAddEntitlementPoolClick}
  65                     filterValue={localFilter}
  66                     onFilter={value => this.setState({ localFilter: value })}
  67                     isReadOnlyMode={isReadOnlyMode}>
  68                     {this.filterList().map(entitlementPool =>
  69                         this.renderEntitlementPoolListItem(
  70                             entitlementPool,
  71                             isReadOnlyMode
  72                         )
  73                     )}
  74                 </ListEditorView>
  75                 <Modal
  76                     show={isDisplayModal}
  77                     bsSize="large"
  78                     animation={true}
  79                     className="onborading-modal license-model-modal entitlement-pools-modal">
  80                     <Modal.Header>
  81                         <Modal.Title>{`${
  82                             isModalInEditMode
  83                                 ? i18n('Edit Entitlement Pool')
  84                                 : i18n('Create New Entitlement Pool')
  85                         }`}</Modal.Title>
  86                     </Modal.Header>
  87                     <Modal.Body>
  88                         {isDisplayModal && (
  89                             <EntitlementPoolsEditor
  90                                 version={version}
  91                                 licenseModelId={licenseModelId}
  92                                 isReadOnlyMode={isReadOnlyMode}
  93                             />
  94                         )}
  95                     </Modal.Body>
  96                 </Modal>
  97             </div>
  98         );
  99     }
 100
 101     filterList() {
 102         let { entitlementPoolsList } = this.props;
 103         let { localFilter } = this.state;
 104         if (localFilter.trim()) {
 105             const filter = new RegExp(escape(localFilter), 'i');
 106             return entitlementPoolsList.filter(
 107                 ({ name = '', description = '' }) => {
 108                     return (
 109                         escape(name).match(filter) ||
 110                         escape(description).match(filter)
 111                     );
 112                 }
 113             );
 114         } else {
 115             return entitlementPoolsList;
 116         }
 117     }
 118
 119     renderEntitlementPoolListItem(entitlementPool, isReadOnlyMode) {
 120         let {
 121             id,
 122             name,
 123             description,
 124             thresholdValue,
 125             thresholdUnits,
 126             manufacturerReferenceNumber
 127         } = entitlementPool;
 128         let {
 129             onEditEntitlementPoolClick,
 130             onDeleteEntitlementPool
 131         } = this.props;
 132         return (
 133             <ListEditorItemView
 134                 key={id}
 135                 onSelect={() => onEditEntitlementPoolClick(entitlementPool)}
 136                 onDelete={() => onDeleteEntitlementPool(entitlementPool)}
 137                 className="list-editor-item-view"
 138                 isReadOnlyMode={isReadOnlyMode}>
 139                 <div className="list-editor-item-view-field">
 140                     <div className="title">{i18n('Name')}</div>
 141                     <div>
 142                         <div className="textEllipses text name">{name}</div>
 143                     </div>
 144                 </div>
 145
 146                 <div className="list-editor-item-view-field">
 147                     <div className="title">{i18n('Entitlement')}</div>
 148                     <div className="entitlement-pools-count">
 149                         {thresholdValue &&
 150                             `${thresholdValue} ${extractUnits(thresholdUnits)}`}
 151                     </div>
 152                 </div>
 153                 <div className="list-editor-item-view-field">
 154                     <div className="title">
 155                         {i18n('Manufacturer Reference Number')}
 156                     </div>
 157                     <div className="text description">
 158                         {manufacturerReferenceNumber}
 159                     </div>
 160                 </div>
 161                 <div className="list-editor-item-view-field">
 162                     <div className="title">{i18n('Description')}</div>
 163                     <div className="text description">{description}</div>
 164                 </div>
 165             </ListEditorItemView>
 166         );
 167     }
 168 }
 169
 170 export default EntitlementPoolsListEditorView;
 171
 172 export function generateConfirmationMsg(entitlementPoolToDelete) {
 173     let poolName = entitlementPoolToDelete ? entitlementPoolToDelete.name : '';
 174     let msg = i18n('Are you sure you want to delete "{poolName}"?', {
 175         poolName: poolName
 176     });
 177     let subMsg =
 178         entitlementPoolToDelete &&
 179         entitlementPoolToDelete.referencingFeatureGroups &&
 180         entitlementPoolToDelete.referencingFeatureGroups.length > 0
 181             ? i18n(
 182                   'This entitlement pool is associated with one or more feature groups'
 183               )
 184             : '';
 185     return (
 186         <div>
 187             <p>{msg}</p>
 188             <p>{subMsg}</p>
 189         </div>
 190     );
 191 }