{"version":3,"sources":["index.js"],"names":["App","_this","Object","C_Users_Cheng_Yu_lee_Documents_azure_static_website_blob_browser_node_modules_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_0__","this","C_Users_Cheng_Yu_lee_Documents_azure_static_website_blob_browser_node_modules_babel_runtime_helpers_esm_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_2__","C_Users_Cheng_Yu_lee_Documents_azure_static_website_blob_browser_node_modules_babel_runtime_helpers_esm_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__","call","state","data","pages","markers","loading","prefix","fetchData","listBlobs","bind","C_Users_Cheng_Yu_lee_Documents_azure_static_website_blob_browser_node_modules_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_5__","instance","_this2","setState","anonymousCredential","AnonymousCredential","pipeline","StorageURL","newPipeline","serviceURL","ServiceURL","concat","containerURL","ContainerURL","fromServiceURL","URLSearchParams","window","location","search","get","listBlobHierarchySegment","Aborter","none","page","maxresults","then","res","slice","totalPages","nextMarker","Array","prototype","push","apply","segment","blobItems","blobPrefixes","console","log","sorted","sortedData","_","orderBy","map","sort","row","id","Infinity","undefined","properties","toLowerCase","d","desc","length","blobName","urlParams","page_level","link","output","img_src","substring","parseInt","prefix_array","split","join","toString","file_format","react__WEBPACK_IMPORTED_MODULE_6___default","a","createElement","href","style","position","textDecoration","src","width","top","bytes","decimals","arguments","k","dm","sizes","i","Math","floor","parseFloat","pow","toFixed","_this3","_this$state","dataset","name","react_table__WEBPACK_IMPORTED_MODULE_10__","columns","Header","accessor","Cell","renderLink","value","ISO_time","lastModified","toISOString","replace","marginTop","file_size","formatBytes","contentLength","manual","onFetchData","defaultPageSize","minRows","defaultSorted","showPageSizeOptions","className","minHeight","maxWidth","React","Component","render","document","getElementById"],"mappings":"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","file":"static/js/main.211bd744.chunk.js","sourcesContent":["import React from \"react\";\r\nimport { render } from \"react-dom\";\r\nimport _ from \"lodash\";\r\nimport \"./index.css\";\r\n\r\n// This sample uses React Table\r\n// Check it out at https://react-table.js.org/#/story/readme\r\nimport ReactTable from \"react-table\";\r\nimport \"react-table/react-table.css\";\r\n\r\n// Import Azure Storage Blob SDK\r\nimport { Aborter, ServiceURL, ContainerURL, StorageURL, AnonymousCredential } from \"@azure/storage-blob\";\r\n\r\n// Account name, and the container to list from\r\nconst account = 'hq0epm0west0us0storage'\r\nconst container = '$web'\r\nclass App extends React.Component {\r\n    constructor() {\r\n        super();\r\n        this.state = {\r\n            data: [],\r\n            pages: -1,\r\n            markers: [],\r\n            loading: true,\r\n            prefix: \"\"\r\n        };\r\n        this.fetchData = this.listBlobs.bind(this);\r\n    }\r\n  \r\n    listBlobs(state, instance) {\r\n        // this lists Blobs in pages defined in state.pageSize\r\n        this.setState({ loading: true });\r\n    \r\n        // Use AnonymousCredential since $web container is made a 'public container' \r\n        // and does not require authorization\r\n        const anonymousCredential = new AnonymousCredential();\r\n        const pipeline = StorageURL.newPipeline(anonymousCredential);\r\n    \r\n        const serviceURL = new ServiceURL(\r\n            `https://${account}.blob.core.windows.net`,\r\n            pipeline\r\n        );\r\n    \r\n        // If you are using a SAS token, simply append to ContainerURL here. \r\n        // We will use anonymous access hence no SAS token\r\n        const containerName = container //+ `?st=2018-11-06T06%3A15%3A24Z&se=2019-11-07T06%3A15%3A00Z&sp=rl&sv=2018-03-28&sr=c&sig=4vCT7aInDWRiypkuYlezN8dos0K2h2DvQ0pnNkMJSFs%3D`;\r\n        const containerURL = ContainerURL.fromServiceURL(serviceURL, containerName);\r\n        \r\n        // Fetch the prefix in the query params to browse into folders\r\n        const urlParams = new URLSearchParams(window.location.search);\r\n        const prefix = urlParams.get('prefix');\r\n\r\n        // List objects from Blob storage using the prefix\r\n        // Delimiter for virtual directories is a forward slash '/' here\r\n        containerURL.listBlobHierarchySegment (\r\n            Aborter.none,\r\n            \"/\",\r\n            state.markers[state.page],\r\n            {\r\n                maxresults: 5000,\r\n                prefix: prefix\r\n            }\r\n        ).then(res => {\r\n            // Store the nextMarker in an array for prev/next buttons only if there are more blobs to show\r\n            const markers = state.markers.slice();\r\n            var totalPages = state.page+1;\r\n            if (res.nextMarker) {\r\n                markers[(state.page+1)] = res.nextMarker;\r\n                totalPages++;\r\n            }\r\n              \r\n            // Combine the found virtual directories and files\r\n            Array.prototype.push.apply(res.segment.blobItems, res.segment.blobPrefixes)\r\n\r\n            // This is to sort rows, and handles blobName, contentLength and lastModified time\r\n            console.log(res.segment.blobItems);\r\n            console.log(state.sorted);\r\n            console.log(state.data);\r\n            const sortedData = _.orderBy(\r\n                res.segment.blobItems,\r\n                state.sorted.map(sort => {\r\n                    return row => {\r\n                        if (row[sort.id] === null) {\r\n                            return -Infinity;\r\n                        } // TODO: following is a workaround to special case contentLength and lastModified\r\n                        else if(row[sort.id] === undefined){\r\n                            if(row.properties === undefined)\r\n                            {\r\n                                return -Infinity;\r\n                            } else {\r\n                                return row.properties[sort.id];\r\n                            }\r\n                        }\r\n                        return typeof row[sort.id] === \"string\"\r\n                            ? row[sort.id].toLowerCase()\r\n                            : row[sort.id];\r\n                    };\r\n                }),\r\n                state.sorted.map(d => (d.desc ? \"desc\" : \"asc\"))\r\n              );\r\n            console.log(sortedData);\r\n            console.log(res.segment.blobItems.length);\r\n            console.log(totalPages);\r\n            // Store the state\r\n            this.setState({\r\n                data: sortedData,\r\n                pages: totalPages,\r\n                markers: markers,\r\n                loading: false,\r\n                prefix: prefix\r\n            });\r\n    });\r\n    }\r\n\r\n    // Custom links for various scenarios (handles blobs, directories and go back link)\r\n    renderLink(blobName) {\r\n        const urlParams = new URLSearchParams(window.location.search);\r\n        var page_level = urlParams.get('pageLevel');\r\n        var link = \"\"\r\n        var output = \"\"\r\n        var img_src = \"\"\r\n        var prefix = this.state['prefix']\r\n        if(prefix != null)\r\n        {\r\n            output = \" \" + blobName.substring(prefix.length)\r\n        }\r\n        else\r\n        {\r\n            output = \" \" + blobName\r\n        }\r\n        if(blobName === \"../\")\r\n        {   \r\n            if(page_level == \"0\")\r\n            {\r\n                return null;\r\n            }\r\n            else\r\n            {\r\n                var page_level = parseInt(urlParams.get(\"pageLevel\"), 10)\r\n                var prefix_array = prefix.split(\"/\")\r\n                prefix = prefix_array.slice(-page_level - 1, -1).join(\"/\") + \"/\"\r\n                link = \"javascript: history.back()\"\r\n                // output = \" You are in \" + prefix + \" Now. Click to go back!\"\r\n                output = \"Parent Directly\"\r\n                img_src = \"./icons/back.png\"\r\n            }\r\n        }\r\n        else if(blobName.slice(-1) === \"/\")\r\n        {\r\n            link = \"?prefix=\" + blobName + \"&pageLevel=\" + (parseInt(urlParams.get(\"pageLevel\"), 10) + 1).toString(10);\r\n            img_src = \"./icons/folder.png\"\r\n        } else {\r\n            var file_format = blobName.split(\".\").slice(-1)\r\n            if(file_format == \"gz\" || file_format == \"xz\")\r\n            {\r\n                img_src = \"./icons/tar.png\"\r\n            }\r\n            else\r\n            {\r\n                img_src = \"./icons/\" + file_format + \".png\"\r\n            } \r\n            link = \"/\" + blobName\r\n        }\r\n        return (\r\n            <a href={link} style={{\r\n                position: 'relative',\r\n                textDecoration: 'none'\r\n              }}>\r\n                <img src={img_src} style={{\r\n                    width: '24px',\r\n                    position: 'relative',\r\n                    top: '5px'\r\n                    }}>\r\n                </img>\r\n                {output}\r\n            </a>\r\n        );\r\n    }\r\n    formatBytes(bytes, decimals = 2) {\r\n        if (bytes === 0) return '0 Bytes';\r\n    \r\n        const k = 1024;\r\n        const dm = decimals < 0 ? 0 : decimals;\r\n        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\r\n    \r\n        const i = Math.floor(Math.log(bytes) / Math.log(k));\r\n        if (i >= 3) {\r\n            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];\r\n        }\r\n        else {\r\n            return parseFloat((bytes / Math.pow(k, i)).toFixed(0)) + ' ' + sizes[i];\r\n        }\r\n    }\r\n    \r\n    render() {\r\n        const { data, pages, markers, loading, prefix } = this.state;\r\n        var dataset = data;\r\n        // If this is a directory view, add a go back link for the root\r\n        if(prefix !== null)\r\n        {\r\n            dataset = [{name: \"../\"}].concat(dataset);\r\n        }\r\n\r\n        return (\r\n            <div>\r\n            <ReactTable\r\n                columns={[\r\n                {\r\n                    Header: \"File Name\",\r\n                    id: \"name\",\r\n                    accessor: \"name\",\r\n                    width: 490,\r\n                    Cell: row => (\r\n                        this.renderLink(row.value)\r\n                    )\r\n                },\r\n                {\r\n                    Header: \"Last Modified\",\r\n                    id: \"lastModified\",\r\n                    accessor: (d) => {\r\n                        if(typeof d.properties !== \"undefined\" ){\r\n                            var ISO_time = d.properties.lastModified.toISOString().replace(\"T\", \" \").replace(\".000Z\", \"\")\r\n                        return (<p style={{\r\n                            marginTop: '5px'\r\n                            }}>{ISO_time}</p>);\r\n                        }\r\n                    },\r\n                    width: 200\r\n                },\r\n                {\r\n                    Header: \"Size\",\r\n                    id: \"contentLength\",\r\n                    accessor: (d) => {\r\n                        if(typeof d.properties !== \"undefined\"){\r\n                            var file_size = this.formatBytes(d.properties.contentLength)\r\n                            return (<p style={{\r\n                                marginTop: '5px'\r\n                                }}>{file_size}</p>);\r\n                        }\r\n                    },\r\n                    width: 100\r\n                }\r\n            ]}\r\n            manual // Do not paginate as we can only list objects in pages from Blob storage\r\n            data={dataset}\r\n            pages={pages} \r\n            markers={markers}\r\n            loading={loading} \r\n            onFetchData={this.fetchData} \r\n            defaultPageSize={5}\r\n            minRows={6}\r\n            defaultSorted={[\r\n                {\r\n                  id: \"lastModified\",\r\n                  desc: true\r\n                }\r\n            ]}\r\n            showPageSizeOptions={false}\r\n            className=\"-striped -highlight\"\r\n            style={{\r\n                minHeight: '250px',\r\n                maxWidth: '800px'\r\n            }}\r\n            />\r\n            </div>\r\n        );\r\n    }\r\n}\r\n\r\nrender(<App />, document.getElementById(\"root\"));"],"sourceRoot":""}