Skip to content

Commit

Permalink
feat: handling better logs and copy logs
Browse files Browse the repository at this point in the history
Signed-off-by: Antonio Sonis <[email protected]>
  • Loading branch information
tonysnowboardunderthebridge committed Nov 30, 2023
1 parent e95acf8 commit ec66c5a
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 19 deletions.
67 changes: 49 additions & 18 deletions src/renderer/src/components/steps/PrepareFolder.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import PropTypes from 'prop-types'
import styles from './PrepareFolder.module.css'
import commonStyles from '~/styles/CommonStyles.module.css'
import typographyStyles from '~/styles/Typography.module.css'
import { WHITE, RICH_BLACK } from '@platformatic/ui-components/src/components/constants'
import { Button } from '@platformatic/ui-components'
import { WHITE, RICH_BLACK, TRANSPARENT, OPACITY_30 } from '@platformatic/ui-components/src/components/constants'
import { BorderedBox, Button } from '@platformatic/ui-components'
import useStackablesStore from '~/useStackablesStore'
import EditableTitle from '~/components/ui/EditableTitle'
import '~/components/component.animation.css'
Expand All @@ -15,6 +15,8 @@ const PrepareFolder = React.forwardRef(({ onNext }, ref) => {
const globalState = useStackablesStore()
const { formData, addFormData, services, setTemplate } = globalState
const [folderPrepared, setFolderPrepared] = useState(false)
const [folderPreparedError, setFolderPreparedError] = useState(false)
const [folderPreparedSuccess, setFolderPreparedSuccess] = useState(false)
const [npmLogs, setNpmLogs] = useState([])
const [logValue, setLogValue] = useState(null)

Expand All @@ -31,24 +33,24 @@ const PrepareFolder = React.forwardRef(({ onNext }, ref) => {
envVars = response[tmpTemplate.name] || []
setTemplate(service.name, { ...tmpTemplate, envVars })
})
setFolderPrepared(true)
setFolderPreparedSuccess(true)
} catch (error) {
console.error(`Error on prepareFolder ${error}`)
setFolderPreparedError(true)
} finally {
setFolderPrepared(true)
}
}
prepareFolder()
}, [])

useEffect(() => {
if (logValue) {
setNpmLogs([...npmLogs, { ...logValue }])
const str = [new Date().toISOString(), logValue.level.toUpperCase(), logValue.message]
setNpmLogs([...npmLogs, { level: logValue.level, message: str.join(' - ') }])
}
}, [logValue])

useEffect(() => {
// call your increment function here
}, [])

function onClickConfigureServices () {
onNext()
}
Expand All @@ -65,9 +67,19 @@ const PrepareFolder = React.forwardRef(({ onNext }, ref) => {

function renderLog (log, index) {
let className = `${typographyStyles.desktopOtherCliTerminalSmall} `
const str = [new Date().toISOString(), log.level.toUpperCase(), log.message]
className += log.level === 'info' ? `${typographyStyles.textWhite}` : `${typographyStyles.textErrorRed}`
return <p key={index} className={className}>{str.join(' - ')}</p>
return <p key={index} className={className}>{log.message}</p>
}

function onClickCloseApp () {
// TODO: implement it
console.log('onClickCloseApp')
}

function onClickCopyLogs () {
let str = ''
npmLogs.forEach(log => (str += `${log.message}\r\n`))
navigator.clipboard.writeText(str)
}

return (
Expand All @@ -83,20 +95,39 @@ const PrepareFolder = React.forwardRef(({ onNext }, ref) => {
/>
<p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>Select a template and plugins for your service from our Stackables Marketplace. Once you have chosen a template you can add another Service.</p>
</div>
<div className={`${commonStyles.flexBlockNoGap} ${commonStyles.fullWidth} ${styles.content}`}>
{npmLogs.map((log, index) => renderLog(log, index))}
</div>
<BorderedBox classes={`${commonStyles.fullWidth} ${styles.content}`} backgroundColor={TRANSPARENT} borderColorOpacity={OPACITY_30} color={WHITE}>
<div className={`${commonStyles.flexBlockNoGap} `}>
{npmLogs.map((log, index) => renderLog(log, index))}
</div>
</BorderedBox>
</div>
<div className={`${styles.buttonContainer} ${commonStyles.fullWidth}`}>
<Button
disabled={!folderPrepared}
label='Next - Configure Services'
onClick={() => onClickConfigureServices()}
color={RICH_BLACK}
bordered={false}
backgroundColor={WHITE}
label='Copy Logs'
onClick={() => onClickCopyLogs()}
color={WHITE}
backgroundColor={RICH_BLACK}
classes={`${commonStyles.buttonPadding} cy-action-next`}
/>
{folderPreparedError
? <Button
label='Close'
onClick={() => onClickCloseApp()}
color={RICH_BLACK}
bordered={false}
backgroundColor={WHITE}
classes={`${commonStyles.buttonPadding} cy-action-close`}
/>
: <Button
disabled={!folderPreparedSuccess}
label='Next - Configure Services'
onClick={() => onClickConfigureServices()}
color={RICH_BLACK}
bordered={false}
backgroundColor={WHITE}
classes={`${commonStyles.buttonPadding} cy-action-next`}
/>}
</div>
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/components/steps/PrepareFolder.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@apply flex flex-col min-h-[80vH] overflow-y-scroll justify-between
}
.buttonContainer {
@apply flex justify-end;
@apply flex justify-between;
}

.content {
Expand Down

0 comments on commit ec66c5a

Please sign in to comment.