Shubham | Add get and download feature for manifest file from storage

2020-05-17 15:11:22 +05:30
parent 720b82ac4f
commit 88b9fbd0c1
1 changed files with 133 additions and 0 deletions
--- a/src/components/manifest/ShowDeploymentManifest.tsx
+++ b/src/components/manifest/ShowDeploymentManifest.tsx
@@ -0,0 +1,133 @@
+import * as React from 'react';
+import './../components.css';
+import {Button, Card, TextField, Select} from '@material-ui/core';
+import {useOktaAuth} from "@okta/okta-react";
+
+
+import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
+import Grid from "@material-ui/core/Grid";
+import MenuItem from "@material-ui/core/MenuItem";
+import MenuAppBar from '../layout/Header';
+
+function exportToJsonFile(jsonData:any)  {
+    let dataStr = JSON.stringify(jsonData);
+    let dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
+    let exportFileDefaultName = jsonData.name + '_data.json';
+    let linkElement = document.createElement('a');
+    linkElement.setAttribute('href', dataUri);
+    linkElement.setAttribute('download', exportFileDefaultName);
+    linkElement.click();
+}
+
+export const PrettyPrintJson = (props: any) => {
+    const download = () => {
+        exportToJsonFile(props.manifestData);
+        props.onClose();
+    };
+    return (
+        <Card>
+            {props.show ?
+                <Button onClick={download} className="float-right" startIcon={<CloudDownloadIcon/>} color="secondary"
+                        variant="contained">Download</Button> :
+                <>            <h1><span>Manifest File</span></h1>
+                    <Button onClick={props.onClose} className="float-right" color="secondary"
+                            variant="contained">Close</Button></>
+            }
+            <div>
+                <pre><h3>{JSON.stringify(props.manifestData, null, 2)}</h3></pre>
+            </div>
+        </Card>
+    )
+};
+
+const ShowDeploymentManifest = () => {
+    const {useState} = React;
+    const [manifestData, setManifestData] = useState({});
+    const [serviceName, setServiceName] = useState('');
+    const [environment, setEnvironment] = useState('');
+
+    const [isLoading, setIsLoading] = useState(false);
+
+    const {authState} = useOktaAuth();
+
+    function handleClick() {
+
+        if (authState.isAuthenticated) {
+            console.log("...." + serviceName + environment);
+            const {idToken} = authState;
+            fetch(
+                `http://localhost:9090/manifest/${serviceName}/${environment}`,
+                {
+                    method: 'GET',
+                    headers: {
+                        Authorization: `Bearer ${idToken}`,
+                    }
+                },
+            )
+                .then((res) => res.json())
+                .then((response) => {
+                    setManifestData(response.data);
+                })
+                .catch((error) => console.log(error));
+        }
+        setIsLoading(true);
+    }
+
+
+    function handleEnvChange(e:any) {
+        setEnvironment(e.target.value);
+    }
+
+    function handleNameChange(e:any) {
+        setServiceName(e.target.value);
+    }
+
+    return (
+        <div>
+                <MenuAppBar name="Show Manifest File"/>
+            <div className="app">
+                <Grid container spacing={1}>
+                    <Grid item xs>
+                        <label htmlFor="manifestName" style={{display: 'block', marginTop: 16}}>
+                            Deployment Manifest Service name
+                            <TextField
+                                name="manifestName"
+                                type="String"
+                                helperText="Enter Service name"
+                                variant="outlined"
+                                fullWidth
+                                onChange={handleNameChange}
+                            />
+                        </label>
+                    </Grid>
+                    <Grid item xs>
+                        <label htmlFor="manifestEnv" style={{display: 'block', marginTop: 16}}>
+                            Deployment Environment
+                            <Select
+                                name="manifestEnv"
+                                fullWidth
+                                variant="outlined"
+                                value={environment}
+                                onChange={handleEnvChange}
+                            >
+                                <MenuItem aria-label="None" value=""/>
+                                <MenuItem value="dev">Dev</MenuItem>
+                                <MenuItem value="prod">Prod</MenuItem>
+                                <MenuItem value="qa">QA</MenuItem>
+                                <MenuItem value="automation">Automation</MenuItem>
+                            </Select>
+                        </label>
+                    </Grid>
+                </Grid>
+                <br/>
+                {isLoading ?
+                    <PrettyPrintJson manifestData={manifestData} show={true} onClose={() => setIsLoading(false)}/> :
+                    <Button name="show" className="float-right" color="secondary" onClick={handleClick}>Show</Button>
+                }
+
+            </div>
+        </div>
+    );
+};
+
+export default ShowDeploymentManifest;