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 i18n from 'nfvo-utils/i18n/i18n.js';
  18
  19 import Input from 'nfvo-components/input/validation/Input.jsx';
  20 import Form from 'nfvo-components/input/validation/Form.jsx';
  21 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  22 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  23
  24 const GeneralSection = ({
  25     onDataChanged,
  26     displayName,
  27     vfcCode,
  28     nfcFunction,
  29     description,
  30     isReadOnlyMode,
  31     genericFieldInfo,
  32     isManual
  33 }) => (
  34     <GridSection title={i18n('General')}>
  35         {/* disabled until backend will be ready to implement it
  36                         <div className='validation-input-wrapper'>
  37                         <div className='form-group'>
  38                         <label className='control-label'>{i18n('Name')}</label>
  39                         <div>{name}</div>
  40                         </div>
  41                         </div>
  42
  43                 */}
  44         <GridItem>
  45             <Input
  46                 data-test-id="name"
  47                 label={i18n('Name')}
  48                 value={displayName}
  49                 disabled={!isManual || isReadOnlyMode}
  50                 type="text"
  51             />
  52             {!isManual && (
  53                 <Input
  54                     data-test-id="vfcCode"
  55                     label={i18n('Naming Code')}
  56                     value={vfcCode}
  57                     isValid={genericFieldInfo.vfcCode.isValid}
  58                     errorText={genericFieldInfo.vfcCode.errorText}
  59                     onChange={vfcCode => onDataChanged({ vfcCode })}
  60                     disabled={isReadOnlyMode}
  61                     type="text"
  62                 />
  63             )}
  64             <Input
  65                 data-test-id="nfcFunction"
  66                 label={i18n('Function')}
  67                 value={nfcFunction}
  68                 isValid={genericFieldInfo.nfcFunction.isValid}
  69                 errorText={genericFieldInfo.nfcFunction.errorText}
  70                 onChange={nfcFunction => onDataChanged({ nfcFunction })}
  71                 disabled={isReadOnlyMode}
  72                 type="text"
  73             />
  74         </GridItem>
  75         <GridItem colSpan={2}>
  76             <Input
  77                 label={i18n('Description')}
  78                 isValid={genericFieldInfo.description.isValid}
  79                 errorText={genericFieldInfo.description.errorText}
  80                 onChange={description => onDataChanged({ description })}
  81                 disabled={isReadOnlyMode}
  82                 value={description}
  83                 groupClassName="multi-line-textarea"
  84                 data-test-id="description"
  85                 type="textarea"
  86             />
  87         </GridItem>
  88         <GridItem />
  89     </GridSection>
  90 );
  91
  92 const HypervisorSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
  93     <GridSection title={i18n('Hypervisor')}>
  94         <GridItem>
  95             <Input
  96                 data-test-id="hypervisor"
  97                 label={i18n('Supported Hypervisors')}
  98                 type="select"
  99                 className="input-options-select"
 100                 groupClassName="bootstrap-input-options"
 101                 isValid={
 102                     qgenericFieldInfo['general/hypervisor/hypervisor'].isValid
 103                 }
 104                 errorText={
 105                     qgenericFieldInfo['general/hypervisor/hypervisor'].errorText
 106                 }
 107                 value={dataMap['general/hypervisor/hypervisor']}
 108                 onChange={e => {
 109                     const selectedIndex = e.target.selectedIndex;
 110                     const val = e.target.options[selectedIndex].value;
 111                     onQDataChanged({ 'general/hypervisor/hypervisor': val });
 112                 }}>
 113                 <option key="placeholder" value="">
 114                     {i18n('Select...')}
 115                 </option>
 116                 {qgenericFieldInfo['general/hypervisor/hypervisor'].enum.map(
 117                     hv => (
 118                         <option value={hv.enum} key={hv.enum}>
 119                             {hv.title}
 120                         </option>
 121                     )
 122                 )}
 123             </Input>
 124         </GridItem>
 125         <GridItem colSpan={2}>
 126             <Input
 127                 data-test-id="drivers"
 128                 onChange={driver =>
 129                     onQDataChanged({ 'general/hypervisor/drivers': driver })
 130                 }
 131                 label={i18n('Hypervisor Drivers')}
 132                 type="text"
 133                 isValid={
 134                     qgenericFieldInfo['general/hypervisor/drivers'].isValid
 135                 }
 136                 errorText={
 137                     qgenericFieldInfo['general/hypervisor/drivers'].errorText
 138                 }
 139                 value={dataMap['general/hypervisor/drivers']}
 140             />
 141         </GridItem>
 142         <GridItem colSpan={3}>
 143             <Input
 144                 data-test-id="containerFeaturesDescription"
 145                 label={i18n('Describe Container Features')}
 146                 type="textarea"
 147                 onChange={containerFeaturesDescription =>
 148                     onQDataChanged({
 149                         'general/hypervisor/containerFeaturesDescription': containerFeaturesDescription
 150                     })
 151                 }
 152                 isValid={
 153                     qgenericFieldInfo[
 154                         'general/hypervisor/containerFeaturesDescription'
 155                     ].isValid
 156                 }
 157                 errorText={
 158                     qgenericFieldInfo[
 159                         'general/hypervisor/containerFeaturesDescription'
 160                     ].errorText
 161                 }
 162                 value={
 163                     dataMap['general/hypervisor/containerFeaturesDescription']
 164                 }
 165             />
 166         </GridItem>
 167     </GridSection>
 168 );
 169
 170 const ImageSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
 171     <GridSection title={i18n('Disk')}>
 172         <GridItem>
 173             <Input
 174                 data-test-id="bootDiskSizePerVM"
 175                 onChange={bootDiskSizePerVM =>
 176                     onQDataChanged({
 177                         'general/disk/bootDiskSizePerVM': bootDiskSizePerVM
 178                     })
 179                 }
 180                 label={i18n('Size of boot disk per VM (GB)')}
 181                 type="number"
 182                 isValid={
 183                     qgenericFieldInfo['general/disk/bootDiskSizePerVM'].isValid
 184                 }
 185                 errorText={
 186                     qgenericFieldInfo['general/disk/bootDiskSizePerVM']
 187                         .errorText
 188                 }
 189                 value={dataMap['general/disk/bootDiskSizePerVM']}
 190             />
 191         </GridItem>
 192         <GridItem>
 193             <Input
 194                 data-test-id="ephemeralDiskSizePerVM"
 195                 onChange={ephemeralDiskSizePerVM =>
 196                     onQDataChanged({
 197                         'general/disk/ephemeralDiskSizePerVM': ephemeralDiskSizePerVM
 198                     })
 199                 }
 200                 label={i18n('Size of ephemeral disk per VM (GB)')}
 201                 type="number"
 202                 isValid={
 203                     qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM']
 204                         .isValid
 205                 }
 206                 errorText={
 207                     qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM']
 208                         .errorText
 209                 }
 210                 value={dataMap['general/disk/ephemeralDiskSizePerVM']}
 211             />
 212         </GridItem>
 213     </GridSection>
 214 );
 215
 216 const RecoverySection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
 217     <GridSection title={i18n('Recovery')}>
 218         <GridItem>
 219             <Input
 220                 data-test-id="pointObjective"
 221                 label={i18n('VM Recovery Point Objective (Minutes)')}
 222                 type="number"
 223                 onChange={pointObjective =>
 224                     onQDataChanged({
 225                         'general/recovery/pointObjective': pointObjective
 226                     })
 227                 }
 228                 isValid={
 229                     qgenericFieldInfo['general/recovery/pointObjective'].isValid
 230                 }
 231                 errorText={
 232                     qgenericFieldInfo['general/recovery/pointObjective']
 233                         .errorText
 234                 }
 235                 value={dataMap['general/recovery/pointObjective']}
 236             />
 237         </GridItem>
 238         <GridItem>
 239             <Input
 240                 data-test-id="timeObjective"
 241                 label={i18n('VM Recovery Time Objective (Minutes)')}
 242                 type="number"
 243                 onChange={timeObjective =>
 244                     onQDataChanged({
 245                         'general/recovery/timeObjective': timeObjective
 246                     })
 247                 }
 248                 isValid={
 249                     qgenericFieldInfo['general/recovery/timeObjective'].isValid
 250                 }
 251                 errorText={
 252                     qgenericFieldInfo['general/recovery/timeObjective']
 253                         .errorText
 254                 }
 255                 value={dataMap['general/recovery/timeObjective']}
 256             />
 257             <div className="empty-two-col" />
 258         </GridItem>
 259         <GridItem colSpan={2} />
 260         <GridItem colSpan={2}>
 261             <Input
 262                 data-test-id="vmProcessFailuresHandling"
 263                 className="textarea"
 264                 label={i18n('How are in VM process failures handled?')}
 265                 type="textarea"
 266                 onChange={vmProcessFailuresHandling =>
 267                     onQDataChanged({
 268                         'general/recovery/vmProcessFailuresHandling': vmProcessFailuresHandling
 269                     })
 270                 }
 271                 isValid={
 272                     qgenericFieldInfo[
 273                         'general/recovery/vmProcessFailuresHandling'
 274                     ].isValid
 275                 }
 276                 errorText={
 277                     qgenericFieldInfo[
 278                         'general/recovery/vmProcessFailuresHandling'
 279                     ].errorText
 280                 }
 281                 value={dataMap['general/recovery/vmProcessFailuresHandling']}
 282             />
 283             <div className="empty-two-col" />
 284         </GridItem>
 285         {/** disabled until backend will be ready to implement it
 286                         <div className='row'>
 287                         <div className='col-md-3'>
 288                         <Input
 289                         label={i18n('VM Recovery Document')}
 290                         type='text'
 291                         pointer='/general/recovery/VMRecoveryDocument'/>
 292                         </div>
 293                         </div>
 294                         */}
 295     </GridSection>
 296 );
 297
 298 const DNSConfigurationSection = ({
 299     dataMap,
 300     onQDataChanged,
 301     qgenericFieldInfo
 302 }) => (
 303     <GridSection title={i18n('DNS Configuration')}>
 304         <GridItem colSpan={2}>
 305             <Input
 306                 data-test-id="dnsConfiguration"
 307                 label={i18n(
 308                     'Do you have a need for DNS as a Service? Please describe.'
 309                 )}
 310                 type="textarea"
 311                 onChange={dnsConfiguration =>
 312                     onQDataChanged({
 313                         'general/dnsConfiguration': dnsConfiguration
 314                     })
 315                 }
 316                 isValid={qgenericFieldInfo['general/dnsConfiguration'].isValid}
 317                 errorText={
 318                     qgenericFieldInfo['general/dnsConfiguration'].errorText
 319                 }
 320                 value={dataMap['general/dnsConfiguration']}
 321             />
 322         </GridItem>
 323     </GridSection>
 324 );
 325
 326 const CloneSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
 327     <GridSection title={i18n('Clone')}>
 328         <GridItem colSpan={2}>
 329             <Input
 330                 data-test-id="vmCloneUsage"
 331                 label={i18n('Describe VM Clone Use')}
 332                 type="textarea"
 333                 onChange={vmCloneUsage =>
 334                     onQDataChanged({ 'general/vmCloneUsage': vmCloneUsage })
 335                 }
 336                 isValid={qgenericFieldInfo['general/vmCloneUsage'].isValid}
 337                 errorText={qgenericFieldInfo['general/vmCloneUsage'].errorText}
 338                 value={dataMap['general/vmCloneUsage']}
 339             />
 340         </GridItem>
 341     </GridSection>
 342 );
 343
 344 class SoftwareProductComponentsGeneralView extends React.Component {
 345     render() {
 346         let {
 347             isManual,
 348             onQDataChanged,
 349             onDataChanged,
 350             genericFieldInfo,
 351             dataMap,
 352             qGenericFieldInfo,
 353             componentData: { displayName, vfcCode, nfcFunction, description },
 354             isReadOnlyMode
 355         } = this.props;
 356         return (
 357             <div className="vsp-components-general">
 358                 <div className="general-data">
 359                     {genericFieldInfo &&
 360                         qGenericFieldInfo && (
 361                             <Form
 362                                 isValid={this.props.isFormValid}
 363                                 formReady={null}
 364                                 isReadOnlyMode={isReadOnlyMode}
 365                                 onValidityChanged={isValidityData =>
 366                                     this.props.onValidityChanged(isValidityData)
 367                                 }
 368                                 hasButtons={false}>
 369                                 <GeneralSection
 370                                     onDataChanged={onDataChanged}
 371                                     displayName={displayName}
 372                                     vfcCode={vfcCode}
 373                                     nfcFunction={nfcFunction}
 374                                     description={description}
 375                                     isManual={isManual}
 376                                     isReadOnlyMode={isReadOnlyMode}
 377                                     genericFieldInfo={genericFieldInfo}
 378                                 />
 379                                 <HypervisorSection
 380                                     onQDataChanged={onQDataChanged}
 381                                     dataMap={dataMap}
 382                                     qgenericFieldInfo={qGenericFieldInfo}
 383                                 />
 384                                 <ImageSection
 385                                     onQDataChanged={onQDataChanged}
 386                                     dataMap={dataMap}
 387                                     qgenericFieldInfo={qGenericFieldInfo}
 388                                 />
 389                                 <RecoverySection
 390                                     onQDataChanged={onQDataChanged}
 391                                     dataMap={dataMap}
 392                                     qgenericFieldInfo={qGenericFieldInfo}
 393                                 />
 394                                 <DNSConfigurationSection
 395                                     onQDataChanged={onQDataChanged}
 396                                     dataMap={dataMap}
 397                                     qgenericFieldInfo={qGenericFieldInfo}
 398                                 />
 399                                 <CloneSection
 400                                     onQDataChanged={onQDataChanged}
 401                                     dataMap={dataMap}
 402                                     qgenericFieldInfo={qGenericFieldInfo}
 403                                 />
 404                             </Form>
 405                         )}
 406                 </div>
 407             </div>
 408         );
 409     }
 410
 411     save() {
 412         let { onSubmit, componentData, qdata } = this.props;
 413         return onSubmit({ componentData, qdata });
 414     }
 415 }
 416
 417 export default SoftwareProductComponentsGeneralView;