Support new package file management scheme 51/1751/1
authorBob Gallagher <bob.gallagher@riftio.com>
Fri, 28 Apr 2017 21:46:38 +0000 (17:46 -0400)
committerBob Gallagher <bob.gallagher@riftio.com>
Wed, 3 May 2017 22:00:42 +0000 (18:00 -0400)
- lots of changes

Change-Id: Ic4862accccb8b80516eb42a010a3f128d5928215
Signed-off-by: Bob Gallagher <bob.gallagher@riftio.com>
skyquake/plugins/composer/api/composer.js
skyquake/plugins/composer/src/src/components/filemanager/FileManager.jsx
skyquake/plugins/composer/src/src/components/filemanager/FileManagerActions.js
skyquake/plugins/composer/src/src/components/filemanager/FileManagerSource.js
skyquake/plugins/composer/src/src/libraries/FileManagerUploadDropZone.js
skyquake/plugins/composer/src/src/stores/ComposerAppStore.js

index 5ff92c8..e9e4be1 100644 (file)
@@ -523,6 +523,9 @@ PackageManager.getJobStatus = function(req) {
     })
 }
 
+function makeAssetTypeParamName (type) {
+    return type.toLowerCase() + '-file-type';
+}
 FileManager.addFile = function(req) {
     console.log(' Uploading file', req.file.originalname, 'as', req.file.filename);
     var api_server = req.query['api_server'];
@@ -530,15 +533,17 @@ FileManager.addFile = function(req) {
     var package_id = req.query['package_id'];
     var package_type = req.query['package_type'].toUpperCase();
     var package_path = req.query['package_path'];
-    if (!download_host) {
+     if (!download_host) {
         download_host = req.protocol + '://' + req.get('host');//api_server + ':' + utils.getPortForProtocol(req.protocol);
     }
     var input = {
         'external-url': download_host + '/composer/upload/' + req.query['package_id'] + '/' + req.file.filename,
         'package-type': package_type,
         'package-id': package_id,
-        'package-path': package_path + '/' + req.file.filename
+        'package-path': package_path ? package_path + '/' + req.file.filename : req.file.filename
     }
+    var assetType = req.query['asset_type'].toUpperCase();
+    input[makeAssetTypeParamName(package_type)] = assetType;
     return new Promise(function(resolve, reject) {
         Promise.all([
             rp({
@@ -580,16 +585,17 @@ FileManager.get = function(req) {
     var id = req.query['package_id'];
     var downloadUrl = req.query['url'];
     var path = req.query['package_path'];
-    var payload = {
-        "input": {
-            "package-type": type,
-            "package-id": id
-        }
+    var assetType = req.query['asset_type'];
+    var input = {
+        "package-type": type,
+        "package-id": id
     }
+    var payload = {input: input};
     if(req.method == 'GET') {
         if(downloadUrl && path) {
             payload.input['external-url'] = downloadUrl;
             payload.input['package-path'] = path;
+            payload.input[makeAssetTypeParamName(type)] = assetType;
             return download(payload);
         } else {
             return list(payload);
@@ -597,6 +603,7 @@ FileManager.get = function(req) {
     }
     if(req.method == 'DELETE') {
         payload.input['package-path'] = path;
+        payload.input[makeAssetTypeParamName(type)] = assetType;
         return deleteFile(payload)
     }
 
index ed9ea93..8702957 100644 (file)
@@ -20,6 +20,7 @@
 //https://raw.githubusercontent.com/RIFTIO/RIFT.ware/master/rift-shell
 import _cloneDeep from 'lodash/cloneDeep'
 import _findIndex from 'lodash/findIndex'
+import _uniqueId from 'lodash/uniqueId'
 import React from 'react';
 import ReactDOM from 'react-dom';
 import TreeView from 'react-treeview';
@@ -28,7 +29,7 @@ import Button from '../Button';
 import './FileMananger.scss';
 import FileManagerActions from './FileManagerActions.js';
 import imgSave from '../../../../node_modules/open-iconic/svg/data-transfer-upload.svg'
-import {Panel, PanelWrapper} from 'widgets/panel/panel';
+import { Panel, PanelWrapper } from 'widgets/panel/panel';
 import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
 import LoadingIndicator from 'widgets/loading-indicator/loadingIndicator.jsx';
 
@@ -37,17 +38,61 @@ import Utils from '../../libraries/utils'
 import FileManagerUploadDropZone from '../../libraries/FileManagerUploadDropZone';
 let API_SERVER = require('utils/rw.js').getSearchParams(window.location).api_server;
 
-const createDropZone = function (action, clickable, type, id, path, dropTarget) {
-    const dropZone = new FileManagerUploadDropZone(ReactDOM.findDOMNode(dropTarget), [clickable], action, type, id, path);
+const ASSET_TYPE = {
+    'nsd': [
+        { id: 'ICONS', folder: 'icons', title: "Icons", allowFolders: false },
+        { id: 'SCRIPTS', folder: 'scripts', title: "scripts", allowFolders: true },
+        { id: 'NS_CONFIG', folder: 'ns_config', title: "NS Config", allowFolders: false },
+        { id: 'VNF_CONFIG', folder: 'vnf_config', title: "VNF Config", allowFolders: false }
+    ],
+    'vnfd': [
+        { id: 'ICONS', folder: 'icons', title: "Icons", allowFolders: false },
+        { id: 'CHARMS', folder: 'charms', title: "charms", allowFolders: true },
+        { id: 'SCRIPTS', folder: 'scripts', title: "scripts", allowFolders: true },
+        { id: 'IMAGES', folder: 'images', title: "images", allowFolders: false },
+        { id: 'CLOUD_INIT', folder: 'cloud_init', title: "cloud_init", allowFolders: false },
+        { id: 'README', folder: '.', title: ".", allowFolders: false }
+    ]
+}
+
+const createDropZone = function (action, clickable, getUploadPropsCallback, dropTarget) {
+    const dropZone = new FileManagerUploadDropZone(ReactDOM.findDOMNode(dropTarget), [clickable], action, getUploadPropsCallback);
     // dropZone.on('dragover', this.onDragOver);
     // dropZone.on('dragend', this.onDragEnd);
     // dropZone.on('addedfile', this.onFileAdded);
     return dropZone;
 };
-//updateFileLocationInput
+
+function normalizeAssets(packageType, assetInfo, filesStatus) {
+    let assets = {};
+    let assetTypes = ASSET_TYPE[packageType];
+    assetTypes.forEach(assetGroup => {
+        const typeFolder = assetGroup.folder;
+        let folders = assetInfo.id.filter(name => name.startsWith(typeFolder));
+        if (folders.length) {
+            folders.reverse();
+            assets[assetGroup.id] = folders.map(fullName => {
+                let path = fullName.slice(typeFolder.length + 1);
+                let files = assetInfo.data[fullName].map(info => ({
+                    name: info.name.startsWith(fullName) ? info.name.slice(fullName.length + 1) : info.name,
+                    status: filesStatus[info.name]
+                }));
+                return { path, files };
+            });
+        }
+    });
+    return assets;
+}
+
+function sendDeleteFileRequest(assetType, path, name) {
+    path = path ? path + '/' + name : name;
+    FileManagerActions.deletePackageFile({ assetType, path });
+}
+
 class FileManager extends React.Component {
     constructor(props) {
         super(props)
+        let assests = props.files;
     }
     componentWillMount() {
         // FileManagerActions.openFileManagerSockets()
@@ -57,153 +102,202 @@ class FileManager extends React.Component {
     }
     generateFolder(data, nesting) {
         let nestingLevel = nesting || 1;
+    }
+    render() {
+        let { files, filesState, type, item, actions } = this.props;
+        let assets = normalizeAssets(type, files, filesState);
+        let children = [];
+        let assetTypes = ASSET_TYPE[type];
+        assetTypes.forEach(assetGroup => {
+            const typeFolder = assetGroup.folder;
+            let folders = assets[assetGroup.id];
+            let rootAssets = { path: '', files: [] };
+            let subFolders = null;
+            if (folders && folders.length) {
+                rootAssets = folders[0];
+                subFolders = folders.slice(1);
+            }
+            children.push(
+                <AssetGroup
+                    key={typeFolder}
+                    packageId={item.id}
+                    packageType={type}
+                    title={assetGroup.title}
+                    assetGroup={assetGroup}
+                    path={rootAssets.path}
+                    files={rootAssets.files}
+                    allowsFolders={assetGroup.allowFolders}
+                    folders={subFolders}
+                    showNotification={actions.showNotification}
+                />
+            )
+        }, this);
 
+        let html = (
+            <div className="FileManager">
+                <PanelWrapper style={{ flexDirection: 'column' }}>
+                    {children}
+                </PanelWrapper>
+            </div>
+        )
+        return html;
     }
-    deleteFile(name) {
-        return function(e) {
-            FileManagerActions.deletePackageFile(name);
-        }
 
+}
+
+function NewHierachy(props) {
+    return (
+        <Panel className="addFileSection" style={{ backgroundColor: 'transparent' }} no-corners>
+            <div className="inputSection">
+                <TextInput placeholder="some/path" label="create a folder hierarchy" onChange={FileManagerActions.newPathNameUpdated} />
+                <Button label="Create" onClick={e => FileManagerActions.createDirectory(props.assetGroup.id)} />
+            </div>
+        </Panel>
+    );
+}
+
+class AssetGroup extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { downloadPath: "" };
     }
-    updateFileLocationInput(name) {
-        return function(e) {
-            FileManagerActions.updateFileLocationInput({
-                name: name,
-                value: e.target.value
+
+    render() {
+        let { title, packageType, packageId, assetGroup, files, allowsFolders, folders, path, inputState, showNotification } = this.props;
+        let children = [];
+        if (folders && folders.length) {
+            folders.map(function (folder, i) {
+                children.push(
+                    <AssetGroup
+                        key={folder.path}
+                        packageId={packageId}
+                        title={folder.path}
+                        packageType={packageType}
+                        files={folder.files}
+                        assetGroup={assetGroup}
+                        path={folder.path}
+                        showNotification={showNotification}
+                    />
+                )
             });
         }
-    }
-    sendDownloadFileRequst = (url, path) => {
-        let self = this;
-        return function(e) {
-            if(!url || url == "") {
-                return self.props.actions.showNotification.defer({type: 'error', msg: 'Value missing in download request'});;
+        let folderCreateComponent = allowsFolders ? <NewHierachy assetGroup={assetGroup} /> : null;
+        let entries = null
+
+        function uploadFileFromUrl(url) {
+            if (!url || url == "") {
+                return;
             }
-            let files = self.props.files.data;
-            let folder = path.split('/');
             let splitUrl = url.split('/');
             let fileName = splitUrl[splitUrl.length - 1];
-            folder.pop;
-            let fullPath = _cloneDeep(folder);
-            fullPath.push(fileName);
-            fullPath = fullPath.join('/');
-            folder = folder.join('/');
-            let fileIndex = _findIndex(files[folder], function(f) {
-                return f.name == fullPath;
-            })
-            if (fileIndex == -1) {
-                FileManagerActions.sendDownloadFileRequst({
-                    url: url,
-                    path: path
-                });
+            if (files.findIndex(f => f.name === fileName) > -1) {
+                showNotification('It seems you\'re attempting to upload a file with a duplicate file name');
             } else {
-                self.props.actions.showNotification('It seems you\'re attempting to upload a file with a duplicate file name');
+                FileManagerActions.sendDownloadFileRequest({ url, assetType: assetGroup.id, path: path });
             }
         }
-    }
-    render() {
-        let self = this;
-        let html = (
-            <div className="FileManager">
-                <PanelWrapper style={{flexDirection: 'column'}}>
-                <Panel className="addFileSection" style={{backgroundColor: 'transparent'}} no-corners>
-                    <div className="inputSection">
-                        <TextInput placeholder="some/path" value={this.props.newPathName} label="create a new directory" onChange={FileManagerActions.newPathNameUpdated} />
-                        <Button label="Create" onClick={FileManagerActions.createDirectory} />
+
+        return (
+            <Panel title={title} itemClassName="nested" no-corners>
+                {folderCreateComponent}
+                <div className="folder">
+                    <FileAssetList files={files} path={path} packageId={packageId} packageType={packageType} assetGroup={assetGroup} />
+                    <Panel className="addFileSection" no-corners>
+                        <ItemUpload packageType={packageType} packageId={packageId} path={path} assetGroup={assetGroup} />
+                        <div style={{ marginLeft: '0.5rem' }}>
+                            OR
                     </div>
-                </Panel>
-                {self.props.files && self.props.files.id && buildList(self, self.props.files) }
-                </PanelWrapper>
-            </div>
-        )
-        return html;
+                        <div className="inputSection">
+                            <TextInput placeholder="URL" className="" label="External URL" value={this.state.downloadPath} onChange={e => this.setState({ downloadPath: e.target.value })} />
+                            <Button className='ComposerAppSave' label="DOWNLOAD" onClick={e => uploadFileFromUrl(this.state.downloadPath)} />
+                        </div>
+                    </Panel>
+                    <div>
+                        {children}
+                    </div>
+                </div>
+            </Panel>
+        );
     }
-
 }
 
-function buildList(self, data) {
-    let toReturn = [];
-    data.id.map(function(k,i) {
-        toReturn.push (contentFolder(self, data.data[k], k, k+i, self.props.filesState, self.updateFileLocationInput, self.sendDownloadFileRequst, self.deleteFile));
-    });
-    return toReturn.reverse();
+function FileAssetList(props) {
+    let { packageType, packageId, assetGroup, files, path } = props;
+    let children = null;
+    if (files) {
+        children = files.map(function (file, i) {
+            if (!file.hasOwnProperty('contents')) {
+                return <FileAsset key={file.name} file={file} path={path} id={packageId} type={packageType} assetGroup={assetGroup} />
+            }
+        })
+    }
+    return (
+        <div className='file-list'>
+            {children}
+        </div>
+    );
+
 }
 
-function contentFolder(context, folder, path, key, inputState, updateFn, sendDownloadFileRequst, deleteFn) {
-    let type = context.props.type;
-    let id = context.props.item.id;
-    let classId = `DZ-${path.replace(/\/|\s+/g, '-')}`;
-    const onboardDropZone = createDropZone.bind(this, FileManagerUploadDropZone.ACTIONS.onboard, '.ComposerAppAddFile.' + classId, type, id, path);
+function FileAsset(props) {
+    let { file, path, type, assetGroup, id } = props;
+    const name = file.name;
+    const downloadHost = API_SERVER.match('localhost') || API_SERVER.match('127.0.0.1') ? `${window.location.protocol}//${window.location.hostname}` : API_SERVER;
+    //{`${window.location.protocol}//${API_SERVER}:4567/api/package${type}/${id}/${path}/${name}`}
     return (
-        <Panel title={path} key={key} itemClassName="nested" no-corners>
-        <div className="folder">
-            {
-                folder.map(function(f, i) {
-                    if( !f.hasOwnProperty('contents') ){
-                        return contentFile(context, f, path, i, deleteFn);
-                    }
-                })
-            }
-            <Panel className="addFileSection" no-corners>
-                <ItemUpload type={type} id={id} path={path} key={key} dropZone={onboardDropZone} />
-                <div style={{marginLeft: '0.5rem'}}>
-                    OR
+        <div className="file">
+            <div className="file-section">
+                <div className="file-info">
+                    <div className="file-status"
+                        style={{ display: (file.status && file.status.toLowerCase() != 'completed') ? 'inherit' : 'none', color: (file.status == 'FAILED' ? 'red' : 'inherit') }}>
+                        {file.status && (file.status == 'IN_PROGRESS' || file.status == 'DOWNLOADING') ? <LoadingIndicator size={2} /> : file.status}
+                    </div>
+                    <div className="file-name">
+                        <a target="_blank" href={`${downloadHost}:4567/api/package/${type}/${id}/${assetGroup.folder}${path}/${name}`}>{name}</a>
+                    </div>
                 </div>
-                <div className="inputSection">
-                    <TextInput placeholder="URL" className="" label="External URL" value={inputState[path]} onChange={updateFn(path)} />
-                    <Button className='ComposerAppSave' label="DOWNLOAD" onClick={sendDownloadFileRequst(inputState[path], path)}/>
+                <div className="file-action"
+                    style={{ display: (!file.status || (file && file.status.toLowerCase() != 'loading...')) ? 'inherit' : 'none', cursor: 'pointer' }}
+                    onClick={e => sendDeleteFileRequest(assetGroup.id, path, name)}>
+                    X
                 </div>
-            </Panel>
-
             </div>
-        </Panel>
-    );
+        </div>
+    )
 }
+
 class ItemUpload extends React.Component {
     constructor(props) {
         super(props);
+        this.state = { dropzoneIdClass: 'DZ-' + _uniqueId() };
     }
     componentDidMount() {
-        if (this.props.dropZone) {
-            const dropTarget = this;
-            const dropZone = this.props.dropZone(dropTarget);
-        }
+        createDropZone(
+            FileManagerUploadDropZone.ACTIONS.onboard,
+            '.ComposerAppAddFile.' + this.state.dropzoneIdClass,
+            () => {
+            let theCode = 'crap';
+            return ({
+                packageType: this.props.packageType,
+                packageId: this.props.packageId,
+                assetGroup: this.props.assetGroup,
+                path: this.props.path
+            })},
+            this);
     }
+
     render() {
-        let {type, id, path, key, ...props} = this.props;
-        let classId = `DZ-${path.replace(/\/|\s+/g, '-')}`;
+        let { dropzoneIdClass } = this.props;
         return (
             <div className="inputSection">
-                <label className="sqTextInput" style={{flexDirection: 'row', alignItems:'center'}}>
+                <label className="sqTextInput" style={{ flexDirection: 'row', alignItems: 'center' }}>
                     <span>Upload File</span>
-                    <Button className={'ComposerAppAddFile ' + classId} label="BROWSE"/>
+                    <Button className={'ComposerAppAddFile ' + this.state.dropzoneIdClass} label="BROWSE" />
                 </label>
             </div>
         )
     }
 }
-function contentFile(context, file, path, key, deleteFn) {
-    const name = stripPath(file.name, path);
-    const id = context.props.item.id;
-    const type = context.props.type;
-    const downloadHost = API_SERVER.match('localhost') || API_SERVER.match('127.0.0.1') ? `${window.location.protocol}//${window.location.hostname}` : API_SERVER;
-    //{`${window.location.protocol}//${API_SERVER}:4567/api/package${type}/${id}/${path}/${name}`}
-    return (
-        <div className="file" key={key}>
-            <div className="file-section">
-                <div className="file-info">
-                    <div className="file-status" style={{display: (file.status && file.status.toLowerCase() != 'completed') ? 'inherit' : 'none', color: (file.status == 'FAILED' ? 'red' : 'inherit')}}>
-                        {file.status && (file.status == 'IN_PROGRESS' || file.status == 'DOWNLOADING'  )  ? <LoadingIndicator size={2} /> : file.status }
-                    </div>
-                    <div className="file-name">
-                        <a target="_blank" href={`${downloadHost}:4567/api/package/${type}/${id}/${path}/${name}`}>{name}</a>
-                    </div>
-                </div>
-                <div className="file-action" style={{display: (!file.status || (file && file.status.toLowerCase() != 'loading...')) ? 'inherit' : 'none', cursor: 'pointer'}} onClick={deleteFn(file.name)}>X</div>
-            </div>
-        </div>
-    )
-}
 
 function stripPath(name, path, returnPath) {
     let stripSlash = (name.indexOf('/') > -1) ? '/' : '';
index 93e1e5e..e5791a4 100644 (file)
@@ -21,11 +21,26 @@ import alt from '../../alt';
 class FileManagerActions {
 
     constructor() {
-        this.generateActions('getFilelistSuccess', 'getFilelistError', 'updateFileLocationInput','sendDownloadFileRequst', 'addFileSuccess', 'addFileError','deletePackageFile','deleteFileSuccess','deleteFileError','openDownloadMonitoringSocketSuccess', 'openDownloadMonitoringSocketError',
-                             'getFilelistSocketSuccess',
-                             'openFileManagerSockets', 'closeFileManagerSockets','newPathNameUpdated', 'createDirectory');
+        this.generateActions(
+            'getFilelistSuccess',
+            'getFilelistError',
+            'updateFileLocationInput',
+            'sendDownloadFileRequest',
+            'addFileSuccess',
+            'addFileError',
+            'deletePackageFile',
+            'deleteFileSuccess',
+            'deleteFileError',
+            'openDownloadMonitoringSocketSuccess',
+            'openDownloadMonitoringSocketError',
+            'getFilelistSocketSuccess',
+            'openFileManagerSockets',
+            'closeFileManagerSockets',
+            'newPathNameUpdated',
+            'createDirectory'
+        );
     }
 
 }
 
-export default alt.createActions(FileManagerActions);
+export default alt.createActions(FileManagerActions);
\ No newline at end of file
index 1f0fd80..616eaad 100644 (file)
@@ -57,20 +57,29 @@ const FileManagerSource = {
     },
     addFile: function() {
         return {
-            remote: function(state, id, type, path, url, refresh) {
+            remote: function(state, id, type, assetType, path, url, refresh) {
                 return new Promise(function(resolve, reject) {
                     console.log('Adding file');
                     console.log(id, type, path, url);
                     let splitUrl = url.split('/');
                     let fileName = splitUrl[splitUrl.length -1];
-                    let packagePath = refresh ? path + ((path[path.length - 1] == '/') ? '' : '/') : path + '/' + fileName;
+                    let packagePath = refresh ? path + ((path[path.length - 1] == '/') ? '' : '/') : (path ? path + '/' + fileName : fileName);
+                    let assetFolder = assetType.toLowerCase();
                     $.ajax({
-                        beforeSend: Utils.addAuthorizationStub,
-                        url: 'api/file-manager?api_server=' + utils.getSearchParams(window.location).api_server +'&package_type=' + type + '&package_id=' + id + '&package_path=' + packagePath + '&url=' + url,
+                        beforeSend: (xhr) => {
+                                Utils.addAuthorizationStub(xhr);
+                                // lets get the buzy graphic rolling
+                                FileManagerActions.addFileSuccess.defer({
+                                                path: assetFolder + (path ? '/' + path: ''),
+                                                fileName: fileName,
+                                                refresh: refresh
+                                            });                            
+                            },
+                        url: 'api/file-manager?api_server=' + utils.getSearchParams(window.location).api_server +'&package_type=' + type + '&package_id=' + id + '&package_path=' + packagePath + '&asset_type=' + assetType + '&url=' + url,
                         success: function(data) {
                             resolve({
-                                data:data,
-                                path: path,
+                                data: data,
+                                path: assetFolder + (path ? '/' + path: ''),
                                 fileName: fileName,
                                 refresh: refresh
                             });
@@ -93,33 +102,25 @@ const FileManagerSource = {
     },
     deleteFile: function() {
         return {
-            remote: function(state, id, type, path) {
+            remote: function(state, id, type, assetType, path) {
+                let assetFolder = assetType.toLowerCase();
                 return new Promise(function(resolve, reject) {
                     $.ajax({
                         method: 'DELETE',
                         beforeSend: Utils.addAuthorizationStub,
-                        url: 'api/file-manager?api_server=' + utils.getSearchParams(window.location).api_server +'&package_type=' + type + '&package_id=' + id + '&package_path=' + path ,
+                        url: 'api/file-manager?api_server=' + utils.getSearchParams(window.location).api_server +'&package_type=' + type + '&package_id=' + id + '&asset_type=' + assetType + '&package_path=' + path ,
                         success: function(data) {
                             if (data.output.status == 'True') {
-                                resolve({
-                                    data: data,
-                                    path: path
-                                });
+                                resolve({data, assetFolder, path});
                             } else {
-                                reject({
-                                    data: data,
-                                    path: path
-                                })
+                                reject({data, assetFolder, path})
                             }
                         },
                         error: function(error) {
                             if (typeof error == 'string') {
                                 error = JSON.parse(error);
                             }
-                            reject({
-                                path: path,
-                                data: error
-                            });
+                            reject({data, assetFolder, path});
                         }
                     }).fail(function(xhr){
                         //Authentication and the handling of fail states should be wrapped up into a connection class.
index 963e57e..680a02f 100644 (file)
@@ -40,17 +40,26 @@ function getCatalogPackageManagerServerOrigin() {
        return window.location.origin;
 }
 
-function initializeDropZone(element = '#dropzone', button = false, action = ACTIONS.onboard, type, id, path) {
+function initializeDropZone(element = '#dropzone', button = false, action = ACTIONS.onboard, getUploadProps) {
        let Auth = 'Basic ' + window.sessionStorage.getItem("auth");
        let dev_download_server = Utils.getSearchParams(window.location).dev_download_server;
        DropZone.autoDiscover = false;
        return new DropZone(element, {
                paramName: 'package',
                url() {
+                       let {packageType, packageId, assetGroup, path} = getUploadProps();
                        if (action === ACTIONS.update) {
                                return getCatalogPackageManagerServerOrigin() + '/api/update';
                        }
-                       return getCatalogPackageManagerServerOrigin() + '/composer/api/file-manager?api_server=' + Utils.getSearchParams(window.location).api_server + '&package_type=' + type + '&package_id=' + id + '&package_path=' + path + ( dev_download_server ? '&dev_download_server=' + dev_download_server : '');
+                       let url = getCatalogPackageManagerServerOrigin() 
+                               + '/composer/api/file-manager?api_server=' 
+                               + Utils.getSearchParams(window.location).api_server 
+                               + '&package_type=' + packageType 
+                               + '&package_id=' + packageId 
+                               + '&package_path=' + path 
+                               + '&asset_type=' + assetGroup.id
+                               + ( dev_download_server ? '&dev_download_server=' + dev_download_server : '');
+                       return url;
                },
                headers: {
                        'Authorization': Auth
@@ -61,11 +70,12 @@ function initializeDropZone(element = '#dropzone', button = false, action = ACTI
                previewTemplate: '',
                sending(file, xhr, formData) {
                        // NOTE ie11 does not get this form data
+                       let {packageType, packageId, assetGroup, path} = getUploadProps();
                        formData.append('id', file.id);
                        FileManagerActions.addFileSuccess({
-                               fileName: file.name,
-                               path: path
-                       })
+                               path: assetGroup.folder + (path ? '/' + path: ''),
+                               fileName: file.name
+                       });
                },
                error(file, errorMessage) {
                        const response = {
@@ -119,10 +129,10 @@ function initializeDropZone(element = '#dropzone', button = false, action = ACTI
        });
 }
 
-export default class CatalogPackageManagerUploadDropZone {
+export default class FileManagerUploadDropZone {
 
-       constructor(element, button, action, type, id, path) {
-               this.dropZone = initializeDropZone(element, button, action, type, id, path);
+       constructor(element, button, action, getUploadProps) {
+               this.dropZone = initializeDropZone(element, button, action, getUploadProps);
        }
 
        static get ACTIONS() {
index c677a44..c9675b7 100644 (file)
@@ -168,7 +168,7 @@ class ComposerAppStore {
                        showDescriptor: ComposerAppActions.showDescriptor,
                        getFilelistSuccess: FileManagerActions.getFilelistSuccess,
                        updateFileLocationInput: FileManagerActions.updateFileLocationInput,
-                       sendDownloadFileRequst: FileManagerActions.sendDownloadFileRequst,
+                       sendDownloadFileRequest: FileManagerActions.sendDownloadFileRequest,
                        addFileSuccess: FileManagerActions.addFileSuccess,
                        deletePackageFile: FileManagerActions.deletePackageFile,
                        deleteFileSuccess: FileManagerActions.deleteFileSuccess,
@@ -485,7 +485,7 @@ class ComposerAppStore {
         if (self.fileMonitoringSocketID) {
                let newState = {};
                if(data.hasOwnProperty('contents')) {
-                       filesState = addInputState( _cloneDeep(this.filesState),data);
+                       filesState = updateFileState( _cloneDeep(this.filesState),data);
                                let normalizedData = normalizeTree(data);
                                newState = {
                                        files: {
@@ -511,7 +511,6 @@ class ComposerAppStore {
                                id:[],
                                data:{}
                        };
-                       data.contents.map(getContents);
                        function getContents(d) {
                                if(d.hasOwnProperty('contents')) {
                                        let contents = [];
@@ -526,25 +525,26 @@ class ComposerAppStore {
                                        f.data[d.name] = contents;
                                }
                        }
+                       getContents(data);
                        return f;
                }
-               function addInputState(obj, d) {
+               function updateFileState(obj, d) {
                        d.newFile = '';
                        if(d.hasOwnProperty('contents')) {
-                               d.contents.map(addInputState.bind(null, obj))
-                       }
-                       if(!obj[d.name]) {
-                               obj[d.name] = '';
+                               d.contents.map(updateFileState.bind(null, obj))
                        }
+                       // override any "pending" state we may have initialized
+                       obj[d.name] = '';
                        return obj;
                }
        }
-       sendDownloadFileRequst(data) {
+       sendDownloadFileRequest(data) {
                let id = data.id || this.item.id;
                let type = data.type || this.item.uiState.type;
+               let assetType = data.assetType;
                let path = data.path;
                let url = data.url;
-               this.getInstance().addFile(id, type, path, url, data.refresh);
+               this.getInstance().addFile(id, type, assetType, path, url, data.refresh);
        }
        updateFileLocationInput = (data) => {
                let name = data.name;
@@ -558,13 +558,27 @@ class ComposerAppStore {
        addFileSuccess = (data) => {
                if(!data.refresh) {
                        let path = data.path;
+                       if (path.startsWith('readme')) {
+                               // this asset type stuff should be in a more common location
+                               // this is a wee bit of a hack till it is
+                               path = '.' + path.slice(6);
+                       }
                        let fileName = data.fileName;
                        let files = _cloneDeep(this.files);
-                       let loadingIndex = files.data[path].push({
-                               status: 'DOWNLOADING',
-                               name: path + '/' + fileName
-                       }) - 1;
-                       this.setState({files: files});
+                       let assetGroup = files.data[path] || [];
+                       if (fileName) {
+                               let name = path + '/' + fileName;
+                               if (assetGroup.findIndex(f => f.name === name) == -1){
+                                       assetGroup.push({name});
+                               }
+                       }
+                       files.data[path] = assetGroup;
+                       if (files.id.indexOf(path) == -1){
+                               files.id.push(path);
+                       }
+                       let filesState = _cloneDeep(this.filesState);
+                       filesState[name] = "DOWNLOADING";
+                       this.setState({files, filesState});
                }
 
        }
@@ -634,6 +648,11 @@ class ComposerAppStore {
                }
 
                this.setState({
+                       filesState: [],
+                       files: {
+                               id:[],
+                               data:{}
+                       },
                        fileMonitoringSocketID: id,
                        fileMonitoringSocket: ws
                })
@@ -663,19 +682,28 @@ class ComposerAppStore {
        endWatchingJob(id) {
 
        }
-       deletePackageFile(name) {
+       deletePackageFile(asset) {
+               let {assetType, path} = asset;
                let id = this.item.id;
                let type = this.item.uiState.type;
-               this.getInstance().deleteFile(id, type, name);
+               this.getInstance().deleteFile(id, type, assetType, path);
        }
        deleteFileSuccess = (data) => {
-               let path = data.path.split('/')
+               let name = null;
+               let path = null;
+               if (data.assetFolder === 'readme'){
+                       // freak'n root folder is special
+                       name = data.path;
+                       path = ['.'];
+               } else {
+                       name = data.assetFolder + '/' + data.path;
+                       path = name.split('/');
+                       path.pop();
+               }
                let files = _cloneDeep(this.files);
-               path.pop();
-               path = path.join('/');
-               let pathFiles = files.data[path]
-               _remove(pathFiles, function(c) {
-                       return c.name == data.path;
+               let filesForPath = files.data[path.join('/')]
+               _remove(filesForPath, function(c) {
+                       return c.name == name;
                });
 
                this.setState({
@@ -697,12 +725,13 @@ class ComposerAppStore {
                        newPathName: value
                })
        }
-       createDirectory = () => {
+       createDirectory = (assetType) => {
                console.log(this.newPathName);
-               this.sendDownloadFileRequst({
+               this.sendDownloadFileRequest({
                        id: this.item.id,
                        type: this.item.uiState.type,
-                       path: this.item.name + '/' + this.newPathName,
+                       assetType: assetType,
+                       path: this.newPathName,
                        url: utils.getSearchParams(window.location).dev_download_server || window.location.protocol + '//' + window.location.host,
                        refresh: true
                });