Skip to content

Commit 9179efe

Browse files
author
Benjamin Perez
committed
Added preview file content in object details
1 parent caba5e6 commit 9179efe

File tree

6 files changed

+58
-26
lines changed

6 files changed

+58
-26
lines changed

‎portal-ui/build/asset-manifest.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"files": {
33
"main.css": "./static/css/main.8cfac526.chunk.css",
4-
"main.js": "./static/js/main.e7f4432c.chunk.js",
5-
"main.js.map": "./static/js/main.e7f4432c.chunk.js.map",
4+
"main.js": "./static/js/main.1c64ce0b.chunk.js",
5+
"main.js.map": "./static/js/main.1c64ce0b.chunk.js.map",
66
"runtime-main.js": "./static/js/runtime-main.3fe0c1ac.js",
77
"runtime-main.js.map": "./static/js/runtime-main.3fe0c1ac.js.map",
88
"static/css/2.60e04a19.chunk.css": "./static/css/2.60e04a19.chunk.css",
@@ -18,6 +18,6 @@
1818
"static/css/2.60e04a19.chunk.css",
1919
"static/js/2.caa95816.chunk.js",
2020
"static/css/main.8cfac526.chunk.css",
21-
"static/js/main.e7f4432c.chunk.js"
21+
"static/js/main.1c64ce0b.chunk.js"
2222
]
2323
}

‎portal-ui/build/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="MinIO Console"/><link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700;900&display=swap" rel="stylesheet"/><link href="./styles/root-styles.css" rel="stylesheet"/><link rel="apple-touch-icon" sizes="180x180" href="./apple-icon-180x180.png"/><link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"/><link rel="icon" type="image/png" sizes="96x96" href="./favicon-96x96.png"/><link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png"/><link rel="manifest" href="./manifest.json"/><link rel="mask-icon" href="./safari-pinned-tab.svg" color="#3a4e54"/><title>MinIO Console</title><link href="./static/css/2.60e04a19.chunk.css" rel="stylesheet"><link href="./static/css/main.8cfac526.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div id="loader-block"><svg class="loader-svg-container" viewBox="22 22 44 44"><circle class="loader-style MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate" cx="44" cy="44" r="20.2" fill="none" stroke-width="3.6"></circle></svg></div></div><script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="./";var i=this["webpackJsonpportal-ui"]=this["webpackJsonpportal-ui"]||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="./static/js/2.caa95816.chunk.js"></script><script src="./static/js/main.e7f4432c.chunk.js"></script></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="MinIO Console"/><link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700;900&display=swap" rel="stylesheet"/><link href="./styles/root-styles.css" rel="stylesheet"/><link rel="apple-touch-icon" sizes="180x180" href="./apple-icon-180x180.png"/><link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"/><link rel="icon" type="image/png" sizes="96x96" href="./favicon-96x96.png"/><link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png"/><link rel="manifest" href="./manifest.json"/><link rel="mask-icon" href="./safari-pinned-tab.svg" color="#3a4e54"/><title>MinIO Console</title><link href="./static/css/2.60e04a19.chunk.css" rel="stylesheet"><link href="./static/css/main.8cfac526.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div id="loader-block"><svg class="loader-svg-container" viewBox="22 22 44 44"><circle class="loader-style MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate" cx="44" cy="44" r="20.2" fill="none" stroke-width="3.6"></circle></svg></div></div><script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="./";var i=this["webpackJsonpportal-ui"]=this["webpackJsonpportal-ui"]||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="./static/js/2.caa95816.chunk.js"></script><script src="./static/js/main.1c64ce0b.chunk.js"></script></body></html>

‎portal-ui/build/static/js/main.e7f4432c.chunk.js‎ renamed to ‎portal-ui/build/static/js/main.1c64ce0b.chunk.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎portal-ui/build/static/js/main.e7f4432c.chunk.js.map‎ renamed to ‎portal-ui/build/static/js/main.1c64ce0b.chunk.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ import {
5454
removeRouteLevel,
5555
} from "../../../../ObjectBrowser/actions";
5656
import { Route } from "../../../../ObjectBrowser/reducers";
57-
import { download } from "../utils";
57+
import { download, extensionPreview } from "../utils";
5858
import { TabPanel } from "../../../../../shared/tabs";
5959
import history from "../../../../../../history";
6060
import api from "../../../../../../common/api";
@@ -78,10 +78,11 @@ import AddTagModal from "./AddTagModal";
7878
import DeleteTagModal from "./DeleteTagModal";
7979
import SetLegalHoldModal from "./SetLegalHoldModal";
8080
import ScreenTitle from "../../../../Common/ScreenTitle/ScreenTitle";
81-
import DescriptionIcon from "@material-ui/icons/Description";
8281
import EditIcon from "../../../../../../icons/EditIcon";
8382
import SearchIcon from "../../../../../../icons/SearchIcon";
8483
import ObjectBrowserIcon from "../../../../../../icons/ObjectBrowserIcon";
84+
import PreviewFileContent from "../Preview/PreviewFileContent";
85+
import { BucketObject } from "../ListObjects/types";
8586

8687
const styles = (theme: Theme) =>
8788
createStyles({
@@ -267,6 +268,14 @@ const ObjectDetails = ({
267268
const bucketName = allPathData[2];
268269
const pathInBucket = allPathData.slice(3).join("/");
269270

271+
const previewObject: BucketObject = {
272+
name: actualInfo.name,
273+
version_id: actualInfo.version_id || "null",
274+
size: parseInt(actualInfo.size || "0"),
275+
content_type: "",
276+
last_modified: new Date(actualInfo.last_modified),
277+
};
278+
270279
useEffect(() => {
271280
if (loadObjectData) {
272281
const encodedPath = encodeURIComponent(pathInBucket);
@@ -602,6 +611,16 @@ const ObjectDetails = ({
602611
>
603612
<ListItemText primary="Versions" />
604613
</ListItem>
614+
<ListItem
615+
button
616+
selected={selectedTab === 2}
617+
onClick={() => {
618+
setSelectedTab(2);
619+
}}
620+
disabled={extensionPreview(objectName) === "none"}
621+
>
622+
<ListItemText primary="Preview" />
623+
</ListItem>
605624
</List>
606625
</Grid>
607626
<Grid item xs={10}>
@@ -809,6 +828,15 @@ const ObjectDetails = ({
809828
</Grid>
810829
</Fragment>
811830
</TabPanel>
831+
<TabPanel index={2} value={selectedTab}>
832+
{selectedTab === 2 && (
833+
<PreviewFileContent
834+
bucketName={bucketName}
835+
object={previewObject}
836+
isFullscreen
837+
/>
838+
)}
839+
</TabPanel>
812840
</Grid>
813841
</Grid>
814842
</Grid>

‎portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/Preview/PreviewFileContent.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,25 @@ const styles = () =>
2626
border: "0px",
2727
flex: "1 1 auto",
2828
width: "100%",
29+
height: 250,
2930
backgroundColor: "transparent",
31+
borderRadius: 5,
32+
33+
"&.image": {
34+
height: 500,
35+
},
36+
"&.text": {
37+
height: 500,
38+
},
39+
"&.audio": {
40+
height: 150,
41+
},
42+
"&.video": {
43+
height: 350,
44+
},
45+
"&.fullHeight": {
46+
height: "calc(100vh - 185px)",
47+
},
3048
},
3149
iframeBase: {
3250
backgroundColor: "#fff",
@@ -63,21 +81,6 @@ const PreviewFile = ({
6381

6482
const objectType = extensionPreview(object?.name || "");
6583

66-
let customHeight = 250;
67-
68-
switch (objectType) {
69-
case "image":
70-
case "text":
71-
customHeight = 500;
72-
break;
73-
case "audio":
74-
customHeight = 150;
75-
break;
76-
case "video":
77-
customHeight = 350;
78-
break;
79-
}
80-
8184
const iframeLoaded = () => {
8285
setLoading(false);
8386
};
@@ -93,9 +96,10 @@ const PreviewFile = ({
9396
<iframe
9497
src={path}
9598
title="File Preview"
96-
height={customHeight}
9799
allowTransparency
98-
className={classes.iframeContainer}
100+
className={`${classes.iframeContainer} ${
101+
isFullscreen ? "fullHeight" : objectType
102+
}`}
99103
onLoad={iframeLoaded}
100104
>
101105
File couldn't be loaded. Please try Download instead

0 commit comments

Comments
 (0)