-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(frontend): add gestion fichiers (#237)
* feat(frontend): add gestion fichiers * make fake key more explicit * oups * feat(frontend): much nicer code * wip * wip * wip * wip * hum * wip * ci: update configmap container name * ci: fix helm args * fix(frontend): remove unused end Co-authored-by: Julien Bouquillon <[email protected]> Co-authored-by: LionelB <[email protected]>
- Loading branch information
3 people
authored
Jan 4, 2021
1 parent
c03e09f
commit 881f2c1
Showing
21 changed files
with
844 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| # Gestion des fichiers dans les différents environemments | ||
|
|
||
| Les url des fichiers sauvegardée en base sont relatives. | ||
| Pour chaque environnement, il faudra spécifier, l'url du serveur ainsi que le nom du container. | ||
|
|
||
| ## Organisation | ||
|
|
||
| ### cdtn | ||
|
|
||
| | déploiement | container | instance azure | | ||
| | ----------- | --------- | -------------- | | ||
| | branche | cdtn-dev | dev | | ||
| | master | cdtn | dev | | ||
| | preprod | cdtn | dev | | ||
| | prod | cdtn | prod | | ||
|
|
||
| ### cdtn-admin | ||
|
|
||
| | déploiement | container | instance | | ||
| | ----------- | --------- | -------- | | ||
| | branche | cdtn-dev | dev | | ||
| | master | cdtn | dev | | ||
|
|
||
| ## Synchronisation (job ci de copie) | ||
|
|
||
| ### cdtn | ||
|
|
||
| **mep** : copie des fichiers cdtn (dev) › cdtn (prod) | ||
| **ingest (prod)** : copie les fichier de cdtn (dev) › cdtn (prod) | ||
|
|
||
| ### cdtn-admin | ||
|
|
||
| **branche**: copie de cdtn (dev) › cdtn-dev (dev) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| /** @jsx jsx */ | ||
|
|
||
| import PropTypes from "prop-types"; | ||
| import { useEffect, useState } from "react"; | ||
| import { IoMdCheckmark, IoMdClipboard } from "react-icons/io"; | ||
| import { Button } from "src/components/button"; | ||
| import { jsx } from "theme-ui"; | ||
|
|
||
| export const CopyButton = ({ | ||
| onClip, | ||
| copied: optionalCopiedProp = false, | ||
| text, | ||
| ...props | ||
| }) => { | ||
| const [copied, setCopied] = useState(optionalCopiedProp); | ||
| const [hasClipboardApi, setHasClipboardApi] = useState(false); | ||
| useEffect(() => { | ||
| setCopied(optionalCopiedProp); | ||
| }, [optionalCopiedProp, setCopied]); | ||
| useEffect(() => { | ||
| setHasClipboardApi(Boolean(navigator?.clipboard)); | ||
| }, [setHasClipboardApi]); | ||
|
|
||
| return hasClipboardApi ? ( | ||
| <Button | ||
| {...props} | ||
| disabled={copied} | ||
| onClick={(evt) => { | ||
| evt.preventDefault(); | ||
| navigator.clipboard.writeText(text).then(() => { | ||
| setCopied(true); | ||
| if (onClip) { | ||
| onClip(text); | ||
| } | ||
| }); | ||
| }} | ||
| > | ||
| {copied ? ( | ||
| <> | ||
| <IoMdCheckmark sx={iconSx} /> Copié ! | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <IoMdClipboard sx={iconSx} /> | ||
| Copier | ||
| </> | ||
| )} | ||
| </Button> | ||
| ) : null; | ||
| }; | ||
|
|
||
| const iconSx = { | ||
| height: "iconSmall", | ||
| mr: "xxsmall", | ||
| width: "iconSmall", | ||
| }; | ||
|
|
||
| CopyButton.propTypes = { | ||
| copied: PropTypes.bool, | ||
| onClip: PropTypes.func, | ||
| text: PropTypes.string.isRequired, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| /** @jsx jsx */ | ||
|
|
||
| import PropTypes from "prop-types"; | ||
| import { useCallback } from "react"; | ||
| import { useDropzone } from "react-dropzone"; | ||
| import { jsx, Spinner } from "theme-ui"; | ||
|
|
||
| const defaultStyles = { | ||
| border: "2px dotted silver", | ||
| borderRadius: "small", | ||
| p: "medium", | ||
| }; | ||
|
|
||
| export function DropZone({ onDrop: onDropCallback, uploading, customStyles }) { | ||
| const onDrop = useCallback( | ||
| async (acceptedFiles) => { | ||
| const formData = new FormData(); | ||
| for (const i in acceptedFiles) { | ||
| if (acceptedFiles[i] instanceof File) { | ||
| formData.append(acceptedFiles[i].path, acceptedFiles[i]); | ||
| } | ||
| } | ||
| onDropCallback(formData); | ||
| }, | ||
| [onDropCallback] | ||
| ); | ||
|
|
||
| const { getRootProps, getInputProps, isDragAccept } = useDropzone({ | ||
| accept: | ||
| "image/jpeg, image/png, application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document", | ||
| onDrop, | ||
| }); | ||
|
|
||
| if (isDragAccept) { | ||
| defaultStyles.backgroundColor = "dropZone"; | ||
| } else { | ||
| delete defaultStyles.backgroundColor; | ||
| } | ||
| return ( | ||
| <div {...getRootProps()} sx={{ ...defaultStyles, ...customStyles }}> | ||
| <input {...getInputProps()} /> | ||
| {uploading ? <Spinner /> : <p>Glissez vos fichiers ici</p>} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| DropZone.propTypes = { | ||
| customStyles: PropTypes.object, | ||
| onDrop: PropTypes.func.isRequired, | ||
| uploading: PropTypes.bool.isRequired, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { AbortController } from "@azure/abort-controller"; | ||
| import { | ||
| BlobServiceClient, | ||
| StorageSharedKeyCredential, | ||
| } from "@azure/storage-blob"; | ||
|
|
||
| const AZURE_STORAGE_ACCOUNT = { | ||
| key: process.env.AZURE_STORAGE_ACCOUNT_KEY || "", | ||
| name: process.env.AZURE_STORAGE_ACCOUNT_NAME || "", | ||
| }; | ||
|
|
||
| export const getBlobContainer = (containerName) => { | ||
| const sharedKeyCredential = new StorageSharedKeyCredential( | ||
| AZURE_STORAGE_ACCOUNT.name, | ||
| AZURE_STORAGE_ACCOUNT.key | ||
| ); | ||
|
|
||
| const service = new BlobServiceClient( | ||
| `https://${AZURE_STORAGE_ACCOUNT.name}.blob.core.windows.net`, | ||
| sharedKeyCredential | ||
| ); | ||
|
|
||
| return service.getContainerClient(containerName); | ||
| }; | ||
|
|
||
| export const getContainerBlobs = async (containerName) => { | ||
| const container = getBlobContainer(containerName); | ||
| const blobs = []; | ||
| for await (const blob of container.listBlobsFlat()) { | ||
| blobs.push({ | ||
| contentLength: blob.properties.contentLength, | ||
| lastModified: blob.properties.lastModified, | ||
| name: blob.name, | ||
| url: `https://${AZURE_STORAGE_ACCOUNT.name}.blob.core.windows.net/${containerName}/${blob.name}`, | ||
| }); | ||
| } | ||
| return blobs; | ||
| }; | ||
|
|
||
| export const deleteBlob = async (containerName, blobName) => { | ||
| const container = getBlobContainer(containerName); | ||
| const client = container.getBlockBlobClient(blobName); | ||
| return client.delete(); | ||
| }; | ||
|
|
||
| export const uploadBlob = async (containerName, stream) => { | ||
| const container = getBlobContainer(containerName); | ||
| const client = container.getBlockBlobClient(stream.name); | ||
| const blockSize = 4 * 1024 * 1024; | ||
| const timeout = 30 * 60 * 1000; | ||
| const concurrency = 20; | ||
| const options = { abortSignal: AbortController.timeout(timeout) }; | ||
| try { | ||
| return client.uploadStream(stream, blockSize, concurrency, options); | ||
| } catch (err) { | ||
| console.log("Error", err); | ||
| throw new Error("Error while uploading the file to azure"); | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.