particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ImagesTable: add image download link

Browse source 
The new blobby image types are uploaded to aws.s3 for download. Instead
of linking to a cloud instance, these image types display a download
link.
This commit is contained in:
Jacob Kozol 2022-01-12 18:37:50 +01:00 • committed by Sanne Raymaekers
parent f1f3c0cd66
commit 59e951653d
3 changed files with 107 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/Components/ImagesTable/ImageLink.js
View file

@ -2,9 +2,15 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Button, TextContent, Text, TextVariants, Popover } from '@patternfly/react-core';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import { DownloadIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
const ImageLink = (props) => {
const fileExtensions = {
vsphere: '.vmdk',
'guest-image': '.qcow2',
'image-installer': '.iso',
};
const uploadStatus = props.imageStatus ? props.imageStatus.upload_status : undefined;
if (uploadStatus) {
if (uploadStatus.type === 'aws') {
@ -78,6 +84,19 @@ const ImageLink = (props) => {
</Button>
</Popover>
);
} else if (uploadStatus.type === 'aws.s3') {
return (
<Button
component="a"
target="_blank"
variant="link"
icon={ <DownloadIcon /> }
iconPosition="right"
isInline
href={ uploadStatus.options.url }>
Download {fileExtensions[props.imageType]}
</Button>
);
}
}
@ -86,6 +105,7 @@ const ImageLink = (props) => {
ImageLink.propTypes = {
imageStatus: PropTypes.object,
imageType: PropTypes.string,
uploadOptions: PropTypes.object,
};

1
src/Components/ImagesTable/ImagesTable.js
View file

@ -114,6 +114,7 @@ class ImagesTable extends Component {
{ title: <ImageBuildStatus status={ compose.image_status ? compose.image_status.status : '' } /> },
{ title: <ImageLink
imageStatus={ compose.image_status }
imageType={ compose.request.image_requests[0].image_type }
uploadOptions={ compose.request.image_requests[0].upload_request.options } /> },
]
};

87
src/test/Components/ImagesTable/ImagesTable.test.js
View file

@ -262,7 +262,88 @@ const store = {
type: 'azure'
}
},
}
},
'b7193673-8dcc-4a5f-ac30-e9f4940d8346': {
created_at: '2022-01-11 13:33:33.767002 +0000 UTC',
id: 'b7193673-8dcc-4a5f-ac30-e9f4940d8346',
request: {
distribution: RHEL_8,
image_requests: [
{
architecture: 'x86_64',
image_type: 'vsphere',
upload_request: {
options: {},
type: 'aws.s3'
}
}
]
},
image_status: {
status: 'success',
upload_status: {
options: {
url: 'https://s3.amazonaws.com/b7193673-8dcc-4a5f-ac30-e9f4940d8346-disk.vmdk'
},
status: 'success',
type: 'aws.s3'
}
}
},
'4873fd0f-1851-4b9f-b4fe-4639fce90794': {
created_at: '2022-01-11 13:33:33.767002 +0000 UTC',
id: '4873fd0f-1851-4b9f-b4fe-4639fce90793',
request: {
distribution: RHEL_8,
image_requests: [
{
architecture: 'x86_64',
image_type: 'image-installer',
upload_request: {
options: {},
type: 'aws.s3'
}
}
]
},
image_status: {
status: 'success',
upload_status: {
options: {
url: 'https://s3.amazonaws.com/4873fd0f-1851-4b9f-b4fe-4639fce90794-installer.iso'
},
status: 'success',
type: 'aws.s3'
}
}
},
'7b7d0d51-7106-42ab-98f2-f89872a9d599': {
created_at: '2022-01-11 13:33:33.767002 +0000 UTC',
id: '7b7d0d51-7106-42ab-98f2-f89872a9d599',
request: {
distribution: RHEL_8,
image_requests: [
{
architecture: 'x86_64',
image_type: 'guest-image',
upload_request: {
options: {},
type: 'aws.s3'
}
}
]
},
image_status: {
status: 'success',
upload_status: {
options: {
url: 'https://s3.amazonaws.com/7b7d0d51-7106-42ab-98f2-f89872a9d599-disk.qcow2'
},
status: 'success',
type: 'aws.s3'
}
}
},
}
}
};
@ -301,7 +382,9 @@ describe('Images Table', () => {
// render the expected <ImageBuildStatus /> and compare the text content
let testElement = document.createElement('testElement');
render(<Upload uploadType={ compose.request.image_requests[0].upload_request.type } />, { container: testElement });
render(<Upload
imageType={ compose.request.image_requests[0].image_type }
uploadType={ compose.request.image_requests[0].upload_request.type } />, { container: testElement });
expect(row.cells[3]).toHaveTextContent(testElement.textContent);
// render the expected <ImageBuildStatus /> and compare the text content