skyquake/tests/stories/catalogCard.js

   1 import React from 'react';
   2 import { storiesOf, action } from '@kadira/storybook';
   3 import CatalogCard from '../../plugins/launchpad/src/instantiate/catalogCard.jsx'
   4 import CatalogDescriptorRaw from '../../plugins/launchpad/src/instantiate/catalogDescriptorRaw.jsx'
   5 import InstantiateDescriptorPanel from '../../plugins/launchpad/src/instantiate/instantiateDescriptorPanel.jsx'
   6 import InstantiateSelectDescriptorPanel from '../../plugins/launchpad/src/instantiate/InstantiateSelectDescriptorPanel.jsx'
   7 import InstantiateInputParams from '../../plugins/launchpad/src/instantiate/instantiateInputParams.jsx'
   8 import reactToJsx from 'react-to-jsx';
   9 import InstantiateStore from '../../plugins/launchpad/src/instantiate/instantiateStore.js';
  10 import Alt from '../../framework/widgets/skyquake_container/skyquakeAltInstance.js'
  11 import {Panel, PanelWrapper} from '../../framework/widgets/panel/panel.jsx'
  12 import '../../node_modules/open-iconic/font/css/open-iconic.css';
  13 import 'style/base.scss';
  14 const Store = Alt.createStore(InstantiateStore)
  15 // import StyleGuideItem from 'react-style-guide';
  16 // import '../../node_modules/react-style-guide/node_modules/highlight.js/styles/github.css';
  17 let SampleNSD = {
  18   'name': 'A Sample NSD for Corp A',
  19   'short-name': 'A Sample NSD',
  20   description: 'A description of the sample NSD',
  21   vendor: 'RIFT.io',
  22   version: '1.0',
  23   "constituent-vnfd": [
  24       {
  25           "start-by-default": "true",
  26           "member-vnf-index": 1,
  27           "vnfd-id-ref": "358fe806-57f8-11e6-b7de-6cb3113b406f",
  28           "name": "trafgen",
  29           "vnf-name": "trafgen"
  30       },
  31       {
  32           "start-by-default": "true",
  33           "member-vnf-index": 2,
  34           "vnfd-id-ref": "3bd17356-57f8-11e6-88db-6cb3113b406f",
  35           "name": "trafsink",
  36           "vnf-name": "trafsink"
  37       }
  38   ],
  39   "vld": [
  40       {
  41           "provider-network": {
  42               "physical-network": "physnet1",
  43               "overlay-type": "VLAN"
  44           },
  45           "version": "1.0",
  46           "vendor": "RIFT.io",
  47           "name": "Link1",
  48           "short-name": "Link1",
  49           "vnfd-connection-point-ref": [
  50               {
  51                   "vnfd-connection-point-ref": "trafgen/cp0",
  52                   "vnfd-id-ref": "358fe806-57f8-11e6-b7de-6cb3113b406f",
  53                   "member-vnf-index-ref": 1
  54               },
  55               {
  56                   "vnfd-connection-point-ref": "trafsink/cp0",
  57                   "vnfd-id-ref": "3bd17356-57f8-11e6-88db-6cb3113b406f",
  58                   "member-vnf-index-ref": 2
  59               }
  60           ],
  61           "description": "Link",
  62           "id": "4ef5eebc-57f8-11e6-87d1-6cb3113b406f",
  63           "type": "ELAN"
  64       }
  65   ],
  66   "logo": "riftio.png",
  67   "vnffgd": [
  68         {
  69             "name": "vnffgd-1",
  70             "id": "23ee7",
  71             "short-name": "FG-1"
  72         }
  73     ]
  74 }
  75
  76 storiesOf('Instantiate Components', module)
  77 .add('CatalogCard', () => {
  78   let cards = [];
  79   for(let i = 0; i < 10; i++) {
  80     cards.push(<CatalogCard key={i} clickid={i} descriptor={SampleNSD} />)
  81   }
  82   return (
  83 <PanelWrapper>
  84 <Panel>
  85   <div style={{display:'flex', flexWrap:'wrap'}}>
  86
  87
  88   <CatalogCard descriptor={SampleNSD} isSelected={true} isActive={true} />
  89   {
  90     cards
  91   }
  92   </div>
  93 </Panel>
  94 </PanelWrapper>
  95 )}
  96 )
  97
  98 .add('InstantiateDescriptorPanel', () => (
  99   <PanelWrapper>
 100     <InstantiateDescriptorPanel
 101       descriptor={returnNSD()[0]}
 102     />
 103     <Panel title="Input Parameters">
 104     </Panel>
 105   </PanelWrapper>
 106 ))
 107 .add('InstantiateSelectDescriptor', () => (
 108   <PanelWrapper>
 109     <InstantiateSelectDescriptorPanel
 110       descriptors={returnNSD()}
 111     />
 112   </PanelWrapper>
 113 ))
 114 .add('Descriptor Review', () => (
 115  <PanelWrapper>
 116   <Panel title="Select Descriptor">
 117     <CatalogCard descriptor={SampleNSD} isSelected={true} isActive={true} />
 118   </Panel>
 119   <Panel title="Descriptor Preview">
 120     <CatalogDescriptorRaw descriptor={SampleNSD} />
 121   </Panel>
 122 </PanelWrapper>))
 123
 124 function returnNSD() {
 125   return [
 126             {
 127                 "input-parameter-xpath": [
 128                     {
 129                         "xpath": "/nsd:nsd-catalog/nsd:nsd/nsd:vendor"
 130                     }
 131                 ],
 132                 "ip-profiles": [
 133                     {
 134                         "name": "InterVNFLink",
 135                         "description": "Inter VNF Link",
 136                         "ip-profile-params": {
 137                             "ip-version": "ipv4",
 138                             "gateway-address": "31.31.31.210",
 139                             "subnet-address": "31.31.31.0/24",
 140                             "dhcp-params": {
 141                                 "enabled": "true"
 142                             }
 143                         }
 144                     }
 145                 ],
 146                 "version": "1.0",
 147                 "initial-config-primitive": [
 148                     {
 149                         "seq": 1,
 150                         "name": "start traffic",
 151                         "parameter": [
 152                             {
 153                                 "name": "userid"
 154                             }
 155                         ],
 156                         "user-defined-script": "start_traffic.py"
 157                     }
 158                 ],
 159                 "name": "ping_pong_nsd",
 160                 "short-name": "ping_pong_nsd",
 161                 "id": "1b85e414-630c-11e6-9050-3eca272c7412",
 162                 "logo": "rift_logo.png",
 163                 "description": "Toy NS",
 164                 "constituent-vnfd": [
 165                     {
 166                         "member-vnf-index": 1,
 167                         "vnfd-id-ref": "1b84ecbc-630c-11e6-9050-3eca272c7412",
 168                         "start-by-default": "true",
 169                         "name": "ping_vnfd",
 170                         "vnf-name": "ping_vnfd"
 171                     },
 172                     {
 173                         "member-vnf-index": 2,
 174                         "vnfd-id-ref": "1b859c48-630c-11e6-9050-3eca272c7412",
 175                         "start-by-default": "true",
 176                         "name": "pong_vnfd",
 177                         "vnf-name": "pong_vnfd"
 178                     }
 179                 ],
 180                 "vendor": "RIFT.io",
 181                 "placement-groups": [
 182                     {
 183                         "member-vnfd": [
 184                             {
 185                                 "member-vnf-index-ref": 1,
 186                                 "vnfd-id-ref": "1b84ecbc-630c-11e6-9050-3eca272c7412",
 187                                 "name": "ping_vnfd"
 188                             },
 189                             {
 190                                 "member-vnf-index-ref": 2,
 191                                 "vnfd-id-ref": "1b859c48-630c-11e6-9050-3eca272c7412",
 192                                 "name": "pong_vnfd"
 193                             }
 194                         ],
 195                         "name": "Orcus",
 196                         "requirement": "Place this VM on the Kuiper belt object Orcus",
 197                         "strategy": "COLOCATION",
 198                         "host-aggregate": []
 199                     },
 200                     {
 201                         "member-vnfd": [
 202                             {
 203                                 "member-vnf-index-ref": 1,
 204                                 "vnfd-id-ref": "1b84ecbc-630c-11e6-9050-3eca272c7412",
 205                                 "name": "ping_vnfd"
 206                             },
 207                             {
 208                                 "member-vnf-index-ref": 2,
 209                                 "vnfd-id-ref": "1b859c48-630c-11e6-9050-3eca272c7412",
 210                                 "name": "pong_vnfd"
 211                             }
 212                         ],
 213                         "name": "Quaoar",
 214                         "requirement": "Place this VM on the Kuiper belt object Quaoar",
 215                         "strategy": "COLOCATION",
 216                         "host-aggregate": []
 217                     }
 218                 ],
 219                 "vld": [
 220                     {
 221                         "type": "ELAN",
 222                         "description": "Toy VL",
 223                         "version": "1.0",
 224                         "ip-profile-ref": "InterVNFLink",
 225                         "vendor": "RIFT.io",
 226                         "name": "ping_pong_vld",
 227                         "short-name": "ping_pong_vld",
 228                         "id": "ping_pong_vld1",
 229                         "vnfd-connection-point-ref": [
 230                             {
 231                                 "member-vnf-index-ref": 1,
 232                                 "vnfd-id-ref": "1b84ecbc-630c-11e6-9050-3eca272c7412",
 233                                 "vnfd-connection-point-ref": "ping_vnfd/cp0"
 234                             },
 235                             {
 236                                 "member-vnf-index-ref": 2,
 237                                 "vnfd-id-ref": "1b859c48-630c-11e6-9050-3eca272c7412",
 238                                 "vnfd-connection-point-ref": "pong_vnfd/cp0"
 239                             }
 240                         ]
 241                     }
 242                 ],
 243                 "meta": {
 244                     "instance-ref-count": 1
 245                 },
 246                 "ns-placement-groups": [
 247                     {
 248                         "member-vnfd": [
 249                             {
 250                                 "member-vnf-index-ref": 1,
 251                                 "vnfd-id-ref": "1b84ecbc-630c-11e6-9050-3eca272c7412",
 252                                 "name": "ping_vnfd"
 253                             },
 254                             {
 255                                 "member-vnf-index-ref": 2,
 256                                 "vnfd-id-ref": "1b859c48-630c-11e6-9050-3eca272c7412",
 257                                 "name": "pong_vnfd"
 258                             }
 259                         ],
 260                         "name": "Orcus",
 261                         "requirement": "Place this VM on the Kuiper belt object Orcus",
 262                         "strategy": "COLOCATION",
 263                         "host-aggregate": []
 264                     },
 265                     {
 266                         "member-vnfd": [
 267                             {
 268                                 "member-vnf-index-ref": 1,
 269                                 "vnfd-id-ref": "1b84ecbc-630c-11e6-9050-3eca272c7412",
 270                                 "name": "ping_vnfd"
 271                             },
 272                             {
 273                                 "member-vnf-index-ref": 2,
 274                                 "vnfd-id-ref": "1b859c48-630c-11e6-9050-3eca272c7412",
 275                                 "name": "pong_vnfd"
 276                             }
 277                         ],
 278                         "name": "Quaoar",
 279                         "requirement": "Place this VM on the Kuiper belt object Quaoar",
 280                         "strategy": "COLOCATION",
 281                         "host-aggregate": []
 282                     }
 283                 ],
 284                 "vnf-placement-groups": [
 285                     {
 286                         "name": "Eris",
 287                         "member-vdus": [
 288                             {
 289                                 "member-vdu-ref": "iovdu_0"
 290                             }
 291                         ],
 292                         "requirement": "Place this VM on the Kuiper belt object Eris",
 293                         "strategy": "COLOCATION",
 294                         "host-aggregate": [],
 295                         "vnf-name": "ping_vnfd",
 296                         "vnfd-id-ref": "1b84ecbc-630c-11e6-9050-3eca272c7412",
 297                         "member-vnf-index": 1
 298                     },
 299                     {
 300                         "name": "Weywot",
 301                         "member-vdus": [
 302                             {
 303                                 "member-vdu-ref": "iovdu_0"
 304                             }
 305                         ],
 306                         "requirement": "Place this VM on the Kuiper belt object Weywot",
 307                         "strategy": "COLOCATION",
 308                         "host-aggregate": [],
 309                         "vnf-name": "pong_vnfd",
 310                         "vnfd-id-ref": "1b859c48-630c-11e6-9050-3eca272c7412",
 311                         "member-vnf-index": 2
 312                     }
 313                 ]
 314             },
 315             {
 316                 "input-parameter-xpath": [
 317                     {
 318                         "xpath": "/nsd:nsd-catalog/nsd:nsd/nsd:vendor"
 319                     }
 320                 ],
 321                 "ip-profiles": [
 322                     {
 323                         "name": "InterVNFLink",
 324                         "description": "Inter VNF Link",
 325                         "ip-profile-params": {
 326                             "ip-version": "ipv4",
 327                             "gateway-address": "31.31.31.210",
 328                             "subnet-address": "31.31.31.0/24",
 329                             "dhcp-params": {
 330                                 "enabled": "true"
 331                             }
 332                         }
 333                     }
 334                 ],
 335                 "version": "1.0",
 336                 "initial-config-primitive": [
 337                     {
 338                         "seq": 1,
 339                         "name": "start traffic",
 340                         "parameter": [
 341                             {
 342                                 "name": "userid"
 343                             }
 344                         ],
 345                         "user-defined-script": "start_traffic.py"
 346                     }
 347                 ],
 348                 "name": "a copy of pingpong",
 349                 "meta": {
 350                     "containerPositionMap": {
 351                         "1": {
 352                             "top": 130,
 353                             "left": 260,
 354                             "right": 510,
 355                             "bottom": 185,
 356                             "width": 250,
 357                             "height": 55
 358                         },
 359                         "2": {
 360                             "top": 130,
 361                             "left": 635,
 362                             "right": 885,
 363                             "bottom": 185,
 364                             "width": 250,
 365                             "height": 55
 366                         },
 367                         "e0d7f471-ade0-49d3-9f47-225aa724ae08": {
 368                             "top": 30,
 369                             "left": 135,
 370                             "right": 385,
 371                             "bottom": 85,
 372                             "width": 250,
 373                             "height": 55
 374                         },
 375                         "ping_pong_vld1": {
 376                             "top": 300,
 377                             "left": 447.5,
 378                             "right": 697.5,
 379                             "bottom": 338,
 380                             "width": 250,
 381                             "height": 38
 382                         }
 383                     },
 384                     "instance-ref-count": 0
 385                 },
 386                 "short-name": "ping_pong_nsd",
 387                 "id": "e0d7f471-ade0-49d3-9f47-225aa724ae08",
 388                 "logo": "rift_logo.png",
 389                 "description": "Toy NS",
 390                 "constituent-vnfd": [
 391                     {
 392                         "member-vnf-index": 1,
 393                         "vnfd-id-ref": "1b84ecbc-630c-11e6-9050-3eca272c7412",
 394                         "start-by-default": "true",
 395                         "name": "ping_vnfd",
 396                         "vnf-name": "ping_vnfd"
 397                     },
 398                     {
 399                         "member-vnf-index": 2,
 400                         "vnfd-id-ref": "1b859c48-630c-11e6-9050-3eca272c7412",
 401                         "start-by-default": "true",
 402                         "name": "pong_vnfd",
 403                         "vnf-name": "pong_vnfd"
 404                     }
 405                 ],
 406                 "vendor": "RIFT.io",
 407                 "placement-groups": [
 408                     {
 409                         "member-vnfd": [
 410                             {
 411                                 "member-vnf-index-ref": 1,
 412                                 "vnfd-id-ref": "1b84ecbc-630c-11e6-9050-3eca272c7412",
 413                                 "name": "ping_vnfd"
 414                             },
 415                             {
 416                                 "member-vnf-index-ref": 2,
 417                                 "vnfd-id-ref": "1b859c48-630c-11e6-9050-3eca272c7412",
 418                                 "name": "pong_vnfd"
 419                             }
 420                         ],
 421                         "name": "Orcus",
 422                         "requirement": "Place this VM on the Kuiper belt object Orcus",
 423                         "strategy": "COLOCATION",
 424                         "host-aggregate": []
 425                     },
 426                     {
 427                         "member-vnfd": [
 428                             {
 429                                 "member-vnf-index-ref": 1,
 430                                 "vnfd-id-ref": "1b84ecbc-630c-11e6-9050-3eca272c7412",
 431                                 "name": "ping_vnfd"
 432                             },
 433                             {
 434                                 "member-vnf-index-ref": 2,
 435                                 "vnfd-id-ref": "1b859c48-630c-11e6-9050-3eca272c7412",
 436                                 "name": "pong_vnfd"
 437                             }
 438                         ],
 439                         "name": "Quaoar",
 440                         "requirement": "Place this VM on the Kuiper belt object Quaoar",
 441                         "strategy": "COLOCATION",
 442                         "host-aggregate": []
 443                     }
 444                 ],
 445                 "vld": [
 446                     {
 447                         "type": "ELAN",
 448                         "description": "Toy VL",
 449                         "version": "1.0",
 450                         "vendor": "RIFT.io",
 451                         "name": "ping_pong_vld",
 452                         "short-name": "ping_pong_vld",
 453                         "id": "ping_pong_vld1",
 454                         "vnfd-connection-point-ref": [
 455                             {
 456                                 "member-vnf-index-ref": 1,
 457                                 "vnfd-id-ref": "1b84ecbc-630c-11e6-9050-3eca272c7412",
 458                                 "vnfd-connection-point-ref": "ping_vnfd/cp0"
 459                             },
 460                             {
 461                                 "member-vnf-index-ref": 2,
 462                                 "vnfd-id-ref": "1b859c48-630c-11e6-9050-3eca272c7412",
 463                                 "vnfd-connection-point-ref": "pong_vnfd/cp0"
 464                             }
 465                         ]
 466                     }
 467                 ],
 468                 "ns-placement-groups": [
 469                     {
 470                         "member-vnfd": [
 471                             {
 472                                 "member-vnf-index-ref": 1,
 473                                 "vnfd-id-ref": "1b84ecbc-630c-11e6-9050-3eca272c7412",
 474                                 "name": "ping_vnfd"
 475                             },
 476                             {
 477                                 "member-vnf-index-ref": 2,
 478                                 "vnfd-id-ref": "1b859c48-630c-11e6-9050-3eca272c7412",
 479                                 "name": "pong_vnfd"
 480                             }
 481                         ],
 482                         "name": "Orcus",
 483                         "requirement": "Place this VM on the Kuiper belt object Orcus",
 484                         "strategy": "COLOCATION",
 485                         "host-aggregate": []
 486                     },
 487                     {
 488                         "member-vnfd": [
 489                             {
 490                                 "member-vnf-index-ref": 1,
 491                                 "vnfd-id-ref": "1b84ecbc-630c-11e6-9050-3eca272c7412",
 492                                 "name": "ping_vnfd"
 493                             },
 494                             {
 495                                 "member-vnf-index-ref": 2,
 496                                 "vnfd-id-ref": "1b859c48-630c-11e6-9050-3eca272c7412",
 497                                 "name": "pong_vnfd"
 498                             }
 499                         ],
 500                         "name": "Quaoar",
 501                         "requirement": "Place this VM on the Kuiper belt object Quaoar",
 502                         "strategy": "COLOCATION",
 503                         "host-aggregate": []
 504                     }
 505                 ],
 506                 "vnf-placement-groups": [
 507                     {
 508                         "name": "Eris",
 509                         "member-vdus": [
 510                             {
 511                                 "member-vdu-ref": "iovdu_0"
 512                             }
 513                         ],
 514                         "requirement": "Place this VM on the Kuiper belt object Eris",
 515                         "strategy": "COLOCATION",
 516                         "host-aggregate": [],
 517                         "vnf-name": "ping_vnfd",
 518                         "vnfd-id-ref": "1b84ecbc-630c-11e6-9050-3eca272c7412",
 519                         "member-vnf-index": 1
 520                     },
 521                     {
 522                         "name": "Weywot",
 523                         "member-vdus": [
 524                             {
 525                                 "member-vdu-ref": "iovdu_0"
 526                             }
 527                         ],
 528                         "requirement": "Place this VM on the Kuiper belt object Weywot",
 529                         "strategy": "COLOCATION",
 530                         "host-aggregate": [],
 531                         "vnf-name": "pong_vnfd",
 532                         "vnfd-id-ref": "1b859c48-630c-11e6-9050-3eca272c7412",
 533                         "member-vnf-index": 2
 534                     }
 535                 ]
 536             }
 537         ];
 538 }