filip mertens
7 months ago
parent
86c877989a
commit
e1fc893076
@ -0,0 +1,87 @@ |
||||
import { faBan, faCaretDown, faCaretRight, faCircleCheck, faCircleInfo, faInfo, faTrash, faTriangleExclamation, faWarning } from "@fortawesome/free-solid-svg-icons"; |
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; |
||||
import React, { useContext, useEffect, useState } from "react"; |
||||
import { gitActionsContext, pluginActionsContext } from "../../state/context"; |
||||
import { gitPluginContext } from "../gitui"; |
||||
|
||||
export const LogNavigation = ({ eventKey, activePanel, callback }) => { |
||||
const context = useContext(gitPluginContext) |
||||
const actions = React.useContext(gitActionsContext) |
||||
|
||||
const [logState, setLogState] = useState({ |
||||
errorCount: 0, |
||||
warningCount: 0, |
||||
infoCount: 0, |
||||
successCount: 0 |
||||
}); |
||||
const handleClick = () => { |
||||
if (!callback) return |
||||
if (activePanel === eventKey) { |
||||
callback('') |
||||
} else { |
||||
callback(eventKey) |
||||
} |
||||
} |
||||
|
||||
useEffect(() => { |
||||
if(!context.log) return |
||||
// count different types of logs
|
||||
const errorCount = context.log.filter(log => log.type === 'error').length |
||||
const warningCount = context.log.filter(log => log.type === 'warning').length |
||||
const infoCount = context.log.filter(log => log.type === 'info').length |
||||
const successCount = context.log.filter(log => log.type === 'success').length |
||||
// update the state
|
||||
setLogState({ |
||||
errorCount, |
||||
warningCount, |
||||
infoCount, |
||||
successCount |
||||
}) |
||||
}, [context.log]) |
||||
|
||||
const clearLogs = () => { |
||||
actions.clearGitLog() |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<div className={'d-flex justify-content-between pt-1 pb-1 ' + (activePanel === eventKey ? 'bg-light' : '')}> |
||||
<span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'> |
||||
{ |
||||
activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon> |
||||
} |
||||
<label className="pl-1 nav form-check-label mr-2">LOG</label> |
||||
{logState.errorCount > 0 && ( |
||||
<div className="text-danger mr-1"> |
||||
{logState.errorCount} |
||||
<FontAwesomeIcon className="ml-1" icon={faTriangleExclamation} /> |
||||
</div> |
||||
)} |
||||
|
||||
{logState.warningCount > 0 && ( |
||||
<div className="text-warning mr-1"> |
||||
{logState.warningCount} |
||||
<FontAwesomeIcon className="ml-1" icon={faWarning} /> |
||||
</div> |
||||
)} |
||||
|
||||
{logState.infoCount > 0 && ( |
||||
<div className="text-info mr-1"> |
||||
{logState.infoCount} |
||||
<FontAwesomeIcon className="ml-1" icon={faCircleInfo} /> |
||||
</div> |
||||
)} |
||||
|
||||
{logState.successCount > 0 && ( |
||||
<div className="text-success"> |
||||
{logState.successCount} |
||||
<FontAwesomeIcon className="ml-1" icon={faCircleCheck} /> |
||||
</div> |
||||
)} |
||||
</span> |
||||
{context.log && context.log.length > 0 && ( |
||||
<FontAwesomeIcon onClick={clearLogs} className='btn btn-sm' icon={faBan}></FontAwesomeIcon>)} |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,39 @@ |
||||
// src/LogViewer.tsx
|
||||
import React, { useContext } from 'react'; |
||||
import { gitPluginContext } from '../gitui'; |
||||
|
||||
const LogViewer = () => { |
||||
const context = useContext(gitPluginContext); |
||||
|
||||
const typeToCssClass = (type: string) => { |
||||
switch (type) { |
||||
case 'error': |
||||
return 'text-danger'; |
||||
case 'warning': |
||||
return 'text-warning'; |
||||
case 'info': |
||||
return 'text-info'; |
||||
case 'debug': |
||||
return 'text-secondary'; |
||||
default: |
||||
return 'text-success'; |
||||
} |
||||
}; |
||||
|
||||
if (context.log && context.log.length > 0) { |
||||
|
||||
return ( |
||||
<div className="p-1"> |
||||
{context.log && context.log.map((log, index) => ( |
||||
<div key={index} className={`log-entry ${typeToCssClass(log.type)}`}> |
||||
[{log.type.toUpperCase()}] {log.message} |
||||
</div> |
||||
))} |
||||
</div> |
||||
); |
||||
} else { |
||||
return <div className="p-1">No logs</div> |
||||
} |
||||
}; |
||||
|
||||
export default LogViewer; |
||||
Loading…
Reference in new issue