diff --git a/src/api/SwaggerApi.js b/src/api/SwaggerApi.js index 7125ca32f89aca8e82a74f59dfaa3f3f4877af21..428bb2e1f33edc65ff8a891ea79fc71a76e23a81 100644 --- a/src/api/SwaggerApi.js +++ b/src/api/SwaggerApi.js @@ -713,6 +713,12 @@ export function useTagsAndCommitIds(onError) { return useAsync({ fcn: method, call: false, onError: onError, init: [] }); } +export function useSearchTagsAndCommitsByRef(onError) { + const api = useContext(apiContext); + const method = useCallAndUnpack((gitProjectId, reference) => api.apis.Git.searchTagsAndCommitsByRefName({projectId : gitProjectId, reference: reference}), unpackTagAndCommitIdList) + return useAsync({ fcn: method, call: false, onError: onError, init: [] }); +} + export function unpackIOCStatistics(statistics) { return { ...statistics }; } diff --git a/src/components/IOC/IOCDeployDialog.js b/src/components/IOC/IOCDeployDialog.js index 17e8ef093585f144b2f592e1e196cdb06227fc1f..fb6023ec5c16b373bd674e5ff7b8360587397cd8 100644 --- a/src/components/IOC/IOCDeployDialog.js +++ b/src/components/IOC/IOCDeployDialog.js @@ -1,8 +1,9 @@ import React, { useEffect, useState } from "react"; -import { Button, TextField, Dialog, DialogActions, DialogContent, DialogTitle, Typography, makeStyles } from "@material-ui/core"; +import { Button, TextField, Dialog, DialogActions, DialogContent, DialogTitle, Typography, makeStyles, Tooltip } from "@material-ui/core"; import { Autocomplete, Alert } from "@material-ui/lab"; -import { useCSEntrySearch, useTagsAndCommitIds } from "../../api/SwaggerApi"; +import { useCSEntrySearch, useSearchTagsAndCommitsByRef } from "../../api/SwaggerApi"; import { useTypingTimer } from "../common/SearchBoxFilter/TypingTimer"; +import {formatDate} from "../common/Helper"; const useStyles = makeStyles((theme) => ({ textField: { @@ -22,7 +23,7 @@ export function IOCDeployDialog({ open, setOpen, submitCallback, hasActiveDeploy const [hosts, getHosts] = useCSEntrySearch(); const [host, setHost] = useState(null); const [query, onHostKeyUp] = useTypingTimer({interval: 500}); - const [tagOrCommitId, getTagOrCommitId] = useTagsAndCommitIds(onError); + const [tagOrCommitId, getTagOrCommitId] = useSearchTagsAndCommitsByRef(onError); const [gitRepo, setGitRepo] = useState(init.git || ""); const [gitVersion, setGitVersion] = useState(init.version || ""); const gitProjectId = init.gitProjectId; @@ -31,8 +32,6 @@ export function IOCDeployDialog({ open, setOpen, submitCallback, hasActiveDeploy setOpen(false); }; - console.log({...init}); - useEffect(() => getHosts(`fqdn:"${query}"`), [query, getHosts, getTagOrCommitId]); const onSubmit = (event) => { @@ -48,6 +47,29 @@ export function IOCDeployDialog({ open, setOpen, submitCallback, hasActiveDeploy hostCSEntryId: host ? parseInt(host.csEntryHost.id) : (init.csEntryHost ? init.csEntryHost.id : undefined)}); }; + //Creates, and formats tags/commitIds with dates into a table-format for using it in autocomplete + function createOptionTags(option) { + return ( + <table> + <tr> + <td style={{ width: "7em", maxWidth: "7em"}}> + <Typography style={{ fontFamily: "monospace", fontWeight:"bolder", + overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}> + {option.shortReference} + </Typography> + </td> + <td style={{ width: "1em" }}> + - + </td > + <td> + <Typography style={{ fontFamily: "monospace", display: 'inline-block' }}> + {formatDate(option.commitDate)} + </Typography> + </td> + </tr> + </table> + )} + return ( <Dialog open={open} onClose={handleClose}> <form onSubmit={onSubmit}> @@ -64,11 +86,26 @@ export function IOCDeployDialog({ open, setOpen, submitCallback, hasActiveDeploy options={tagOrCommitId} defaultValue = { init.version ? { "reference": init.version, - "shortReference": init.shortVersion + "shortReference": init.shortVersion ? init.shortVersion : init.version } : null } onFocus={(event) => {getTagOrCommitId(gitProjectId);}} - getOptionLabel={(option) => {return option.shortReference}} - onChange={(event, value, reason) => {setGitVersion(value?.reference); resetError();}} + getOptionLabel={(option) => { + return option.shortReference; + }} + renderOption={(option) => { + return ( + <Tooltip title = {option.description}> + <div> + {createOptionTags(option)} + </div> + </Tooltip> + )}} + onChange={(event, value, reason) => { + setGitVersion(value?.reference); + resetError(); + getTagOrCommitId(gitProjectId, value?.reference); + }} + onInputChange={(event, value, reason) => { getTagOrCommitId(gitProjectId, value);}} disabled={(!gitRepo) || (gitRepo.trim() === "")} renderInput={(params) => <TextField {...params} label="Git reference" variant="outlined" fullWidth required />} /> @@ -79,7 +116,7 @@ export function IOCDeployDialog({ open, setOpen, submitCallback, hasActiveDeploy id="host" options={hosts.hostList} defaultValue = { init } - getOptionLabel={option => {console.log(option); return option?.csEntryHost?.fqdn}} + getOptionLabel={option => {return option?.csEntryHost?.fqdn}} renderInput={(params) => <TextField {...params} label="host" variant="outlined" required/>} onChange={(event, value, reason) => {setHost(value); resetError();}} onInputChange={(event, value, reason) => {event && onHostKeyUp(event.nativeEvent)}}