@imposium-hub/components 1.30.0 → 1.32.0

package/components/assets/AssetField.tsx

@@ -52,21 +52,42 @@ class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState>
 
         // get the asset name from the API
         if (assetId && !this.state.assetName) {
-            api.getAssetItem(assetId).then((data : any) => {
-                this.setState({
-                    error: false,
-                    assetName: data.name
-                });
-            })
-            .catch((e : Error) => {
-                this.setState({
-                    error: true,
-                    assetName: `Cound not find asset: ${assetId}`
-                });
+            this.loadAsset();
+        }
+    }
+
+    public componentDidUpdate(prevProps, prevState) {
+
+        const {assetId} = this.props;
+
+        if (assetId && assetId !== prevProps.assetId) {
+            this.loadAsset();
+        } else if (!assetId) {
+            this.setState({
+                error: false,
+                assetName: ''
             });
         }
     }
 
+    private loadAsset() {
+
+        const {assetId, api} = this.props;
+
+        api.getAssetItem(assetId).then((data : any) => {
+            this.setState({
+                error: false,
+                assetName: data.name
+            });
+        })
+        .catch((e : Error) => {
+            this.setState({
+                error: true,
+                assetName: `Cound not find asset: ${assetId}`
+            });
+        });
+    }
+
     public setFilter(e) {
 
         const {accepts} = this.props;

package/components/assets/DataTableDnDWrapper.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { useDrag } from 'react-dnd';
-import { ASSET_DND_TYPES } from '../../constants/dnd';
-
-const DRAGGER_NAME : string = 'Asset';
+import mergeRefs from 'react-merge-refs';
 
 interface IDataTableDnDWrapper {
     children : any;
     dndType : string;
     dndName : string;
     row : any;
+    rowRef : any;
+    rowProps : any;
 }
 
 const DataTableDndWrapper : React.FC<IDataTableDnDWrapper> = (props : IDataTableDnDWrapper) => {
@@ -25,9 +25,9 @@ const DataTableDndWrapper : React.FC<IDataTableDnDWrapper> = (props : IDataTable
         });
 
         return (
-            <div ref = {drag}>
+            <tr {...props.rowProps} ref={mergeRefs([drag, props.rowRef])}>
                 {props.children}
-            </div>
+            </tr>
         );
 };
 

package/components/data-table/DataTable.tsx

@@ -348,42 +348,48 @@ const DataTable : React.FC<IDataTableProps> = (props : IDataTableProps) => {
 
                         prepareRow(row);
 
-                        const rowContent = <>
-                            <tr
-                                {...row.getRowProps()}
-                                ref = {activeRef}
-                                className = {`ip-table-row ${selectedClass}`}
-                                onClick = {(e) => {
-                                    const onClick = () => {
-                                        if (typeof props.onRowClick === 'function') {
-                                            props.onRowClick(row);
-                                        }
-                                    };
-
-                                    if (!doubleClickEnabled) {
-                                        onClick();
-                                    }
-
-                                    if (e.detail === 1 && doubleClickEnabled) {
-                                        doubleClickTimeout = window.setTimeout(onClick, 200);
-                                    }
-                                }}
-                                onDoubleClick = {(e) => {
-                                    clearTimeout(doubleClickTimeout);
-                                    if (doubleClickEnabled) {
-                                        props.onRowDoubleClick(row);
-                                    }
-                                }}
+                        const rowProps = row.getRowProps();
+                        rowProps.className = `ip-table-row ${selectedClass}`;
+                        rowProps.onClick = (e) => {
+                            const onClick = () => {
+                                if (typeof props.onRowClick === 'function') {
+                                    props.onRowClick(row);
+                                }
+                            };
+
+                            if (!doubleClickEnabled) {
+                                onClick();
+                            }
+
+                            if (e.detail === 1 && doubleClickEnabled) {
+                                doubleClickTimeout = window.setTimeout(onClick, 200);
+                            }
+                        };
+                        rowProps.onDoubleClick = (e) => {
+                            clearTimeout(doubleClickTimeout);
+                            if (doubleClickEnabled) {
+                                props.onRowDoubleClick(row);
+                            }
+                        };
+
+                        const rowContent = row.cells.map((cell) => (
+                            <td
+                                {...cell.getCellProps()}
+                                className = {`ip-table-col ${(cell.column.overflowVisible) ? 'overflow-visible' : ''}`.trim()}
                             >
-                                {row.cells.map((cell) => (
-                                    <td
-                                        {...cell.getCellProps()}
-                                        className = {`ip-table-col ${(cell.column.overflowVisible) ? 'overflow-visible' : ''}`.trim()}
-                                    >
-                                        {cell.render('Cell')}
-                                    </td>
-                                ))}
-                            </tr>
+                                {cell.render('Cell')}
+                            </td>
+                        ));
+
+                        return <React.Fragment key = {`row-${i}`}>
+
+                            {(props.dnd) && <DataTableDnDWrapper rowProps = {rowProps} rowRef = {activeRef} key = {`row-${i}`} row = {row} dndType = {props.dndType} dndName = {props.dndName}>
+                                {rowContent}
+                            </DataTableDnDWrapper>}
+
+                            {(!props.dnd) && <tr key = {`row-${i}`} ref = {activeRef} {...rowProps}>
+                                {rowContent}
+                            </tr>}
 
                             {(row.isExpanded) &&
                                 (
@@ -400,18 +406,7 @@ const DataTable : React.FC<IDataTableProps> = (props : IDataTableProps) => {
                                     </tr>
                                 )
                             }
-                        </>;
-
-                        if (props.dnd) {
-                            return <DataTableDnDWrapper key = {`row-${i}`} row = {row} dndType = {props.dndType} dndName = {props.dndName}>
-                                {rowContent}
-                            </DataTableDnDWrapper>;
-                        } else {
-
-                            return <React.Fragment key = {`row-${i}`}>
-                                {rowContent}
-                            </React.Fragment>;
-                        }
+                        </React.Fragment>;
                     })}
                 </tbody>
             </table>

package/components/dropdown/log-viewer/LogViewer.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import AnsiUp from 'ansi_up';
+import { fitToContainer } from '../../Util';
+import { previewer as copy} from '../../constants/copy';
+import { IImposiumAPI } from '../../services/API';
+
+interface ILogViewerProps {
+    jobId : string;
+    onError?(e : string) : void;
+    api : IImposiumAPI;
+}
+
+interface ILogViewerState {
+    loading : boolean;
+    log : string;
+}
+
+class LogViewer extends React.PureComponent<ILogViewerProps, ILogViewerState> {
+
+    private videoNode : any;
+    private ansi_up : any;
+
+    constructor(props) {
+
+        super(props);
+
+        this.state = {
+            loading : true,
+            log: ''
+        };
+
+        this.ansi_up = new AnsiUp();
+        this.ansi_up.use_classes = true;
+    }
+
+    private getJobLogs() {
+
+        const { api, onError, jobId } = this.props;
+
+        api.getJobLogUrl(this.props.jobId).then((resLogUrl) => {
+
+            const jobUrl = resLogUrl.signed_url;
+
+            api.getJobLog(jobUrl).then((log) => {
+
+                this.setState({
+                    loading: false,
+                    log
+                });
+
+            }).catch((e) => {
+                if (onError) {
+                    onError(copy.logDownloadError.replace('[jobId]', jobId));
+                }
+                this.setState({
+                    loading: false,
+                    log: ''
+                });
+            });
+
+        }).catch((e) => {
+            if (onError) {
+                onError(copy.logURLError.replace('[jobId]', this.props.jobId));
+            }
+            this.setState({
+                loading: false,
+                log: ''
+            });
+        });
+    }
+
+    public componentDidMount() {
+
+        if (this.props.jobId) {
+            this.getJobLogs();
+        }
+    }
+
+    public componentDidUpdate(prevProps) {
+
+        if (prevProps.jobId !== this.props.jobId && this.props.jobId) {
+            this.getJobLogs();
+        }
+    }
+    public render() {
+
+        const logHTML = this.ansi_up.ansi_to_html(this.state.log);
+
+        return (
+            <div className = 'log-viewer'>
+                <div className = 'log-html' dangerouslySetInnerHTML={{__html: logHTML}}></div>
+            </div>
+        );
+    }
+}
+
+export default LogViewer;