Skip to content

Commit

Permalink
Merge pull request #30 from microcks/v3
Browse files Browse the repository at this point in the history
V3
  • Loading branch information
hguerrero authored Jan 20, 2024
2 parents 988f568 + 652192e commit b4377c5
Show file tree
Hide file tree
Showing 8 changed files with 374 additions and 152 deletions.
27 changes: 13 additions & 14 deletions client/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/
import { createDockerDesktopClient } from '@docker/extension-api-client';
import React, { useEffect, useState } from 'react';

import DoneOutlinedIcon from '@mui/icons-material/DoneOutlined';
Expand All @@ -25,6 +24,7 @@ import SettingsIcon from '@mui/icons-material/Settings';
import Backdrop from '@mui/material/Backdrop';
import IconButton from '@mui/material/IconButton';

import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Chip from '@mui/material/Chip';
Expand All @@ -35,8 +35,9 @@ import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';

import { ExecStreamOptions } from '@docker/extension-api-client-types/dist/v1';
import './App.css';
import {
getExtensionConfig,
getHome,
Expand All @@ -48,25 +49,23 @@ import { getContainerInfo } from './api/containers';
import { sendMetric } from './api/metrics';
import { ensureNetworkExists } from './api/network';
import { ensureVolumeExists } from './api/volume';
import './App.css';
import AlertDialog from './components/AlertDialog';
import ClipboardCopy from './components/ClipboardCopy';
import DeleteDialog from './components/DeleteDialog';
import Footer from './components/Footer';
import Settings from './components/Settings';
import ImportDialog from './components/ImportDialog';
import Services from './components/Services';
import SettingsDialog from './components/Settings';
import { ContainerStatus } from './types/ContainerStatus';
import { ExtensionConfig } from './types/ExtensionConfig';
import {
APP_CONTAINER,
ASYNC_MINION_CONTAINER,
EXTENSION_NETWORK,
EXTENSION_VOLUME,
KAFKA_CONTAINER,
POSTMAN_CONTAINER,
POSTMAN_CONTAINER
} from './utils/constants';
import Services from './components/Services';
import { useDockerDesktopClient } from './utils/ddclient';
import { ExecStreamOptions } from '@docker/extension-api-client-types/dist/v1';
import AlertDialog from './components/AlertDialog';
import ClipboardCopy from './components/ClipboardCopy';

const isWindows = () => {
const platform = useDockerDesktopClient().host.platform;
Expand Down Expand Up @@ -297,7 +296,7 @@ const App = () => {
`${9090 + config.portOffset}:9090`,
'--label',
'com.docker.compose.project=microcks_microcks-docker-desktop-extension-desktop-extension',
'quay.io/microcks/microcks-uber:latest',
'quay.io/microcks/microcks-uber:latest-extension',
];
if (!appStatus.exists) {
console.log('Creating ', APP_CONTAINER);
Expand Down Expand Up @@ -725,7 +724,7 @@ const App = () => {
setIsSettingsDialog(true);
};

const handleCloseSettings = async (
const handleCloseSettingsDialog = async (
config: ExtensionConfig | undefined | null,
) => {
setIsSettingsDialog(!isSettingsDialog);
Expand Down Expand Up @@ -961,11 +960,11 @@ const App = () => {
</Footer>
</Box>
)}
<Settings
<SettingsDialog
config={config}
isRunning={appStatus.isRunning}
isDialogOpen={isSettingsDialog}
handleCloseDialog={handleCloseSettings}
closeHandler={handleCloseSettingsDialog}
/>
<DeleteDialog
open={openDeleteDialog}
Expand Down
4 changes: 2 additions & 2 deletions client/src/api/metrics.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { createDockerDesktopClient } from '@docker/extension-api-client';

var clientID = "";

function send(eventName: string, clientID: string, payload: Object) {
const send = (eventName: string, clientID: string, payload: Object) => {
fetch(`https://microcks-dde-metrics-oafcwlgvlq-ew.a.run.app/collect`, {
method: "POST",
body: JSON.stringify({
Expand All @@ -36,7 +36,7 @@ function send(eventName: string, clientID: string, payload: Object) {
});
}

export function sendMetric(eventName: string, payload: Object) {
export const sendMetric = (eventName: string, payload: Object) => {
if (clientID !== "") {
send(eventName, clientID, payload);
} else {
Expand Down
112 changes: 112 additions & 0 deletions client/src/components/ImportDialog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import UploadIcon from '@mui/icons-material/Upload';
import Button from '@mui/material/Button';
import Checkbox from '@mui/material/Checkbox';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormGroup from '@mui/material/FormGroup';
import TextField from '@mui/material/TextField';
import React, { useState } from 'react';
import { throwErrorAsString } from '../api/utils';
import { ExtensionConfig } from '../types/ExtensionConfig';

const ImportDialog: React.FC<{
isDialogOpen: boolean;
config: ExtensionConfig;
closeHandler: (refresh?: boolean) => void;
}> = ({ isDialogOpen, config, closeHandler }) => {
const [fileToUpload, setFileToUpload] = useState<File>();
const [isSecondary, setIsSecondary] = useState(false);

const uploadFile = async (event: React.MouseEvent<HTMLElement>) => {
try {
const formData = new FormData();
formData.append('file', fileToUpload as File);
formData.append('mainArtifact', isSecondary ? 'false' : 'true');

const response = await fetch(
`http://localhost:${
8080 + config.portOffset || 8080
}/api/artifact/upload`,
{
method: 'POST',
body: formData,
},
);

if (!response.ok) {
console.error(response.statusText);
return;
}

handleClose(true);
} catch (error) {
throwErrorAsString(error);
}
};

const handleClose = (refresh?: boolean) => {
setFileToUpload(undefined);
setIsSecondary(false);
closeHandler(refresh);
};

const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setFileToUpload(event.target.files?.[0]);
};

const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setIsSecondary(event.target.checked);
};

return (
<Dialog
open={isDialogOpen}
onClose={(event, reason) => handleClose()}
fullWidth
>
<DialogTitle>Upload Artifact</DialogTitle>
<DialogContent>
<TextField
autoFocus
margin="dense"
id="artifact"
type="file"
fullWidth
onChange={handleInputChange}
/>
<FormGroup>
<FormControlLabel
control={
<Checkbox
checked={isSecondary}
onChange={handleCheckboxChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
}
label="This is a secondary artifact"
/>
</FormGroup>
</DialogContent>
<DialogActions>
<Button variant="outlined" onClick={(event) => handleClose()}>
Cancel
</Button>
<Button
startIcon={<UploadIcon />}
variant="contained"
color="primary"
size="large"
onClick={uploadFile}
disabled={fileToUpload === undefined}
>
Import
</Button>
</DialogActions>
</Dialog>
);
};

export default ImportDialog;
65 changes: 44 additions & 21 deletions client/src/components/MockURLRow.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import LaunchIcon from '@mui/icons-material/Launch';
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import React from 'react';
import { useDockerDesktopClient } from '../utils/ddclient';
import ClipboardCopy from './ClipboardCopy';
import { Box } from '@mui/material';

interface MockURLRowProps {
bindings?: any;
Expand All @@ -21,26 +22,48 @@ const MockURLRow: React.FC<MockURLRowProps> = ({
const ddClient = useDockerDesktopClient();

return bindings ? (
<Box marginLeft={1} display="flex" flexDirection="column">
{Object.keys(bindings).map((binding: any) => (
<>
<Typography variant="body1">
{bindings[binding].type} endpoint:{' '}
<Link variant="subtitle1" underline="hover">
{mockURL}
</Link>
<ClipboardCopy copyText={mockURL} />
</Typography>
<Typography variant="body1">
{bindings[binding].type} destination:{' '}
<Link variant="subtitle1" underline="hover">
{destination}
</Link>
<ClipboardCopy copyText={destination || ''} />
</Typography>
</>
))}
</Box>
<>
{Object.keys(bindings).map((binding: any) =>
binding == 'KAFKA' ? (
<Box
key={binding}
marginLeft={1}
display="flex"
flexDirection="column"
>
<Typography variant="body1">
{bindings[binding].type} endpoint:{' '}
<Link variant="subtitle1" underline="hover">
{mockURL}
</Link>
<ClipboardCopy copyText={mockURL} />
</Typography>
<Typography variant="body1">
{bindings[binding].type} destination:{' '}
<Link variant="subtitle1" underline="hover">
{destination}
</Link>
<ClipboardCopy copyText={destination || ''} />
</Typography>
</Box>
) : (
<Box
key={binding}
marginLeft={1}
sx={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}
>
<WarningAmberIcon />
<Typography variant="body1" component="span" marginLeft={1}>
This extension does not support the {binding} binding at this time.
</Typography>
</Box>
),
)}
</>
) : (
<Typography noWrap>
<Link
Expand Down
Loading

0 comments on commit b4377c5

Please sign in to comment.