From 72d62fb1aaaaeaed462083e232f3571b3bde6b08 Mon Sep 17 00:00:00 2001
From: Murali-P <murali.p@huawei.com>
Date: Thu, 29 Mar 2018 17:46:39 +0530
Subject: Integrate VNF Repository in Beijing release

Migrate the code

Change-Id: Ifccacf83634af32b034fd9c413e68f894f06d2f7
Issue-ID: VNFSDK-155
Signed-off-by: Murali-P <murali.p@huawei.com>
---
 .../vnfMarketPlace/VNFImportView.jsx               | 309 +++++++++++++++++++++
 1 file changed, 309 insertions(+)
 create mode 100644 openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx

(limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx')

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx
new file mode 100644
index 0000000000..3a90c8042f
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx
@@ -0,0 +1,309 @@
+/*
+ * Copyright 2017 Huawei Technologies Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import GridSection from 'nfvo-components/grid/GridSection.jsx';
+import GridItem from 'nfvo-components/grid/GridItem.jsx';
+import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
+import Button from 'sdc-ui/lib/react/Button.js';
+import VNFImportActionHelper from '../vnfMarketPlace/VNFImportActionHelper.js';
+
+function VNFAction({
+    action,
+    isHeader,
+    downloadCSAR,
+    id,
+    currSoftwareProduct
+}) {
+    if (isHeader) {
+        return <span>{action}</span>;
+    }
+    return (
+        <span>
+            <SVGIcon
+                name="download"
+                color="positive"
+                onClick={() => {
+                    downloadCSAR(id, currSoftwareProduct);
+                }}
+            />
+        </span>
+    );
+}
+
+function VNFSortableCellHeader({
+    isHeader,
+    data,
+    isDes,
+    onSort,
+    activeSortColumn
+}) {
+    //TODO check icon sdc-ui
+    if (isHeader) {
+        if (activeSortColumn === data) {
+            return (
+                <span
+                    className="vnf-table-header"
+                    onClick={() => {
+                        onSort(activeSortColumn);
+                    }}>
+                    <span>{data}</span>
+                    <span
+                        className={`header-sort-arrow ${isDes ? 'up' : 'down'}`}
+                    />
+                </span>
+            );
+        } else {
+            return (
+                <span
+                    className="vnf-table-header"
+                    onClick={() => {
+                        activeSortColumn = data;
+                        onSort(activeSortColumn);
+                    }}>
+                    <span>{data}</span>
+                </span>
+            );
+        }
+    }
+    return (
+        <span className="vnf-table-cell">
+            <span>{data}</span>
+        </span>
+    );
+}
+
+export function VNFItemList({
+    vnf,
+    isHeader,
+    isDes,
+    onSort,
+    activeSortColumn,
+    downloadCSAR,
+    selectTableRow,
+    selectedRow,
+    currentSoftwareProduct
+}) {
+    let { csarId, name, version, provider, shortDesc, action } = vnf;
+    return (
+        <li
+            className={`vnfBrowse-list-item ${isHeader ? 'header' : ''} ${
+                csarId === selectedRow ? 'selectedRow' : ''
+            }`}
+            data-test-id="vnfBrowse-list-item"
+            onClick={() => {
+                selectTableRow(csarId);
+            }}>
+            <div
+                className="table-cell vnftable-name"
+                data-test-id="vnftable-name">
+                <VNFSortableCellHeader
+                    isHeader={isHeader}
+                    data={name}
+                    isDes={isDes}
+                    onSort={activeSort => {
+                        onSort('name', activeSort);
+                    }}
+                    activeSortColumn={activeSortColumn}
+                />
+            </div>
+            <div
+                className="table-cell vnftable-version"
+                data-test-id="vnftable-version">
+                <VNFSortableCellHeader
+                    isHeader={isHeader}
+                    data={version}
+                    isDes={isDes}
+                    onSort={activeSort => {
+                        onSort('version', activeSort);
+                    }}
+                    activeSortColumn={activeSortColumn}
+                />
+            </div>
+            <div
+                className="table-cell vnftable-provider"
+                data-test-id="vnftable-provider">
+                <VNFSortableCellHeader
+                    isHeader={isHeader}
+                    data={provider}
+                    isDes={isDes}
+                    onSort={activeSort => {
+                        onSort('provider', activeSort);
+                    }}
+                    activeSortColumn={activeSortColumn}
+                />
+            </div>
+            <div
+                className="table-cell vnftable-shortDesc"
+                data-test-id="vnftable-shortDesc">
+                <VNFSortableCellHeader
+                    isHeader={isHeader}
+                    data={shortDesc}
+                    isDes={isDes}
+                    onSort={activeSort => {
+                        onSort('shortDesc', activeSort);
+                    }}
+                    activeSortColumn={activeSortColumn}
+                />
+            </div>
+            <div
+                className="table-cell vnftable-action"
+                data-test-id="vnftable-action">
+                <VNFAction
+                    isHeader={isHeader}
+                    action={action}
+                    downloadCSAR={downloadCSAR}
+                    id={csarId}
+                    currSoftwareProduct={currentSoftwareProduct}
+                />
+            </div>
+        </li>
+    );
+}
+
+class VNFImportView extends React.Component {
+    state = {
+        localFilter: '',
+        sortDescending: true,
+        sortCrit: 'name',
+        activeSortColumn: 'Name',
+        selectedRow: ''
+    };
+
+    render() {
+        let { onCancel, onSubmit, currentSoftwareProduct } = this.props;
+
+        return (
+            <div className="vnf-creation-page">
+                <GridSection className="vnf-grid-section">
+                    <GridItem colSpan="4">
+                        <ListEditorView
+                            title={i18n('VNF List Title')}
+                            filterValue={this.state.localFilter}
+                            onFilter={filter =>
+                                this.setState({ localFilter: filter })
+                            }>
+                            <VNFItemList
+                                isHeader={true}
+                                vnf={{
+                                    csarId: 0,
+                                    name: i18n('VNF Header Name'),
+                                    version: i18n('VNF Header Version'),
+                                    provider: i18n('VNF Header Vendor'),
+                                    shortDesc: i18n('VNF Header Desc'),
+                                    action: i18n('VNF Header Action')
+                                }}
+                                isDes={this.state.sortDescending}
+                                onSort={(sortCriteria, activeSortCol) =>
+                                    this.setState({
+                                        sortDescending: !this.state
+                                            .sortDescending,
+                                        sortCrit: sortCriteria,
+                                        activeSortColumn: activeSortCol
+                                    })
+                                }
+                                activeSortColumn={this.state.activeSortColumn}
+                            />
+                            {this.sortVNFItems(
+                                this.filterVNFItems(),
+                                this.state.sortDescending,
+                                this.state.sortCrit
+                            ).map(vnf => (
+                                <VNFItemList
+                                    key={vnf.id}
+                                    vnf={vnf}
+                                    downloadCSAR={this.downloadCSAR}
+                                    selectTableRow={selID => {
+                                        this.setState({ selectedRow: selID });
+                                        this.selectTableRow(selID);
+                                    }}
+                                    selectedRow={this.state.selectedRow}
+                                    currentSoftwareProduct={
+                                        currentSoftwareProduct
+                                    }
+                                />
+                            ))}
+                        </ListEditorView>
+                    </GridItem>
+                    <GridItem colSpan="4">
+                        <div className="vnf-modal">
+                            <Button
+                                className="vnf-submit"
+                                type="button"
+                                btnType="default"
+                                onClick={() =>
+                                    onSubmit(
+                                        this.state.selectedRow,
+                                        currentSoftwareProduct
+                                    )
+                                }>
+                                {i18n('OK')}
+                            </Button>
+                            <Button
+                                className="Cancel"
+                                type="button"
+                                btnType="outline"
+                                onClick={onCancel}>
+                                {i18n('Cancel')}
+                            </Button>
+                        </div>
+                    </GridItem>
+                </GridSection>
+            </div>
+        );
+    }
+
+    filterVNFItems() {
+        let { vnfItems } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return vnfItems.filter(
+                ({ name = '', provider = '', version = '', shortDesc = '' }) =>
+                    escape(name).match(filter) ||
+                    escape(provider).match(filter) ||
+                    escape(version).match(filter) ||
+                    escape(shortDesc).match(filter)
+            );
+        } else {
+            return vnfItems;
+        }
+    }
+
+    sortVNFItems(vnfItems, sortDesc, sortCrit) {
+        if (sortDesc) {
+            return vnfItems.sort((a, b) => {
+                if (a[sortCrit] < b[sortCrit]) {
+                    return -1;
+                } else if (a[sortCrit] > b[sortCrit]) {
+                    return 1;
+                } else {
+                    return 0;
+                }
+            });
+        } else {
+            return vnfItems.reverse();
+        }
+    }
+
+    downloadCSAR(id, currSoftwareProduct) {
+        VNFImportActionHelper.download(id, currSoftwareProduct);
+    }
+}
+
+export default VNFImportView;
-- 
cgit 1.2.3-korg