gerrit.onap Code Review - sdc.git/blob

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   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         } = entitlementPool;
 127         let {
 128             onEditEntitlementPoolClick,
 129             onDeleteEntitlementPool
 130         } = this.props;
 131         return (
 132             <ListEditorItemView
 133                 key={id}
 134                 onSelect={() => onEditEntitlementPoolClick(entitlementPool)}
 135                 onDelete={() => onDeleteEntitlementPool(entitlementPool)}
 136                 className="list-editor-item-view"
 137                 isReadOnlyMode={isReadOnlyMode}>
 138                 <div className="list-editor-item-view-field">
 139                     <div className="title">{i18n('Name')}</div>
 140                     <div>
 141                         <div className="textEllipses text name">{name}</div>
 142                     </div>
 143                 </div>
 144
 145                 <div className="list-editor-item-view-field">
 146                     <div className="title">{i18n('Entitlement')}</div>
 147                     <div className="entitlement-pools-count">
 148                         {thresholdValue &&
 149                             `${thresholdValue} ${extractUnits(thresholdUnits)}`}
 150                     </div>
 151                 </div>
 152
 153                 <div className="list-editor-item-view-field">
 154                     <div className="title">{i18n('Description')}</div>
 155                     <div className="text description">{description}</div>
 156                 </div>
 157             </ListEditorItemView>
 158         );
 159     }
 160 }
 161
 162 export default EntitlementPoolsListEditorView;
 163
 164 export function generateConfirmationMsg(entitlementPoolToDelete) {
 165     let poolName = entitlementPoolToDelete ? entitlementPoolToDelete.name : '';
 166     let msg = i18n('Are you sure you want to delete "{poolName}"?', {
 167         poolName: poolName
 168     });
 169     let subMsg =
 170         entitlementPoolToDelete &&
 171         entitlementPoolToDelete.referencingFeatureGroups &&
 172         entitlementPoolToDelete.referencingFeatureGroups.length > 0
 173             ? i18n(
 174                   'This entitlement pool is associated with one or more feature groups'
 175               )
 176             : '';
 177     return (
 178         <div>
 179             <p>{msg}</p>
 180             <p>{subMsg}</p>
 181         </div>
 182     );
 183 }