47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { usePluginContext } from '../../../context/PluginContext/usePluginContext';
|
|
import ProgressBar from '../../common/ProgressBar/ProgressBar';
|
|
import './BulkUpdateProgress.css';
|
|
|
|
/**
|
|
* Component that displays the progress of bulk plugin updates
|
|
*/
|
|
export const BulkUpdateProgress: React.FC = () => {
|
|
const { bulkUpdateProgress } = usePluginContext();
|
|
|
|
// If no bulk update is in progress, don't render anything
|
|
if (!bulkUpdateProgress) {
|
|
return null;
|
|
}
|
|
|
|
const progressPercentage = bulkUpdateProgress.total > 0
|
|
? Math.round((bulkUpdateProgress.processed / bulkUpdateProgress.total) * 100)
|
|
: 0;
|
|
|
|
return (
|
|
<div className="bulk-update-progress">
|
|
<div className="bulk-update-header">
|
|
<h3 className="bulk-update-title">
|
|
Checking for Updates
|
|
</h3>
|
|
<span className="bulk-update-count">
|
|
{bulkUpdateProgress.processed} of {bulkUpdateProgress.total}
|
|
</span>
|
|
</div>
|
|
|
|
<ProgressBar
|
|
value={progressPercentage}
|
|
color={progressPercentage === 100 ? 'success' : 'primary'}
|
|
showPercentage={true}
|
|
/>
|
|
|
|
<div className="bulk-update-details">
|
|
<span className="current-plugin">
|
|
Processing: <strong>{bulkUpdateProgress.current_plugin_name}</strong>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BulkUpdateProgress; |