class Interface extends React.Component {
constructor(props) {
super(props);
this.state = {
realtime: this.getCookie(),
resetting: false,
opstate: props.opstate
}
this.polling = false;
this.isSecure = (window.location.protocol === 'https:');
if (this.getCookie()) {
this.startTimer();
}
}
startTimer = () => {
this.setState({realtime: true})
this.polling = setInterval(() => {
this.setState({fetching: true, resetting: false});
axios.get(window.location.pathname, {time: Date.now()})
.then((response) => {
this.setState({opstate: response.data});
});
}, this.props.realtimeRefresh * 1000);
}
stopTimer = () => {
this.setState({realtime: false, resetting: false})
clearInterval(this.polling)
}
realtimeHandler = () => {
const realtime = !this.state.realtime;
if (!realtime) {
this.stopTimer();
this.removeCookie();
} else {
this.startTimer();
this.setCookie();
}
}
resetHandler = () => {
if (this.state.realtime) {
this.setState({resetting: true});
axios.get(window.location.pathname, {params: {reset: 1}})
.then((response) => {
console.log('success: ', response.data);
});
} else {
window.location.href = '?reset=1';
}
}
setCookie = () => {
let d = new Date();
d.setTime(d.getTime() + (this.props.cookie.ttl * 86400000));
document.cookie = `${this.props.cookie.name}=true;expires=${d.toUTCString()};path=/${this.isSecure ? ';secure' : ''}`;
}
removeCookie = () => {
document.cookie = `${this.props.cookie.name}=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/${this.isSecure ? ';secure' : ''}`;
}
getCookie = () => {
const v = document.cookie.match(`(^|;) ?${this.props.cookie.name}=([^;]*)(;|$)`);
return v ? !!v[2] : false;
};
txt = (text, ...args) => {
if (this.props.language !== null && this.props.language.hasOwnProperty(text) && this.props.language[text]) {
text = this.props.language[text];
}
args.forEach((arg, i) => {
text = text.replaceAll(`{${i}}`, arg);
});
return text;
};
render() {
const { opstate, realtimeRefresh, ...otherProps } = this.props;
return (
<>
>
);
}
}
function MainNavigation(props) {
return (
{
props.allow.filelist &&
}
{
(props.allow.filelist && props.opstate.blacklist.length &&
)
}
{
(props.allow.filelist && props.opstate.preload.length &&
)
}
{
props.allow.reset &&
}
{
props.allow.realtime &&
}
);
}
class Tabs extends React.Component {
constructor(props) {
super(props);
this.state = {
activeTab: this.props.children[0].props.label,
};
}
onClickTabItem = (tab) => {
this.setState({ activeTab: tab });
}
render() {
const {
onClickTabItem,
state: { activeTab }
} = this;
const children = this.props.children.filter(Boolean);
return (
<>
{children.map((child) => {
const { tabId, label, className, handler, tabIndex } = child.props;
return (
);
})}
{children.map((child) => (
{child.props.children}
))}
>
);
}
}
class Tab extends React.Component {
onClick = () => {
const { label, onClick } = this.props;
onClick(label);
}
render() {
const {
onClick,
props: { activeTab, label, tabIndex, tabId },
} = this;
let className = 'nav-tab';
if (this.props.className) {
className += ` ${this.props.className}`;
}
if (activeTab === label) {
className += ' active';
}
return (
{label}
);
}
}
function OverviewCounts(props) {
if (props.overview === false) {
return (
{props.txt(`You have opcache.file_cache_only turned on. As a result, the memory information is not available. Statistics and file list may also not be returned by opcache_get_statistics() .`)}
);
}
const graphList = [
{id: 'memoryUsageCanvas', title: props.txt('memory'), show: props.highlight.memory, value: props.overview.used_memory_percentage},
{id: 'hitRateCanvas', title: props.txt('hit rate'), show: props.highlight.hits, value: props.overview.hit_rate_percentage},
{id: 'keyUsageCanvas', title: props.txt('keys'), show: props.highlight.keys, value: props.overview.used_key_percentage},
{id: 'jitUsageCanvas', title: props.txt('jit buffer'), show: props.highlight.jit, value: props.overview.jit_buffer_used_percentage}
];
return (
{graphList.map((graph) => {
if (!graph.show) {
return null;
}
return (
{graph.title}
);
})}
{props.overview.readable.interned &&
}
);
}
function GeneralInfo(props) {
return (
{props.txt('General info')}
Zend OPcache {props.version.version}
PHP {props.version.php}
{props.txt('Host')} {props.version.host}
{props.txt('Server Software')} {props.version.server}
{ props.start ? {props.txt('Start time')} {props.start} : null }
{ props.reset ? {props.txt('Last reset')} {props.reset} : null }
);
}
function Directives(props) {
let directiveList = (directive) => {
return (
{
directive.v.map((item, key) => {
return Array.isArray(item)
? {directiveList({v:item})}
: {item}
})
}
);
};
let directiveNodes = props.directives.map(function(directive) {
let map = { 'opcache.':'', '_':' ' };
let dShow = directive.k.replace(/opcache\.|_/gi, function(matched){
return map[matched];
});
let vShow;
if (directive.v === true || directive.v === false) {
vShow = React.createElement('i', {}, props.txt(directive.v.toString()));
} else if (directive.v === '') {
vShow = React.createElement('i', {}, props.txt('no value'));
} else {
if (Array.isArray(directive.v)) {
vShow = directiveList(directive);
} else {
vShow = directive.v;
}
}
return (
{dShow}
{vShow}
);
});
return (
{props.txt('Directives')}
{directiveNodes}
);
}
function Functions(props) {
return (
{props.txt('Available functions')}
{props.functions.map(f =>
{f}
)}
);
}
function UsageGraph(props) {
const percentage = Math.round(((3.6 * props.value)/360)*100);
return (props.charts
?
: {percentage} %
);
}
/**
* This component is from
* MIT License (MIT), Copyright (c) 2019 Martin Juzl
*/
class ReactCustomizableProgressbar extends React.Component {
constructor(props) {
super(props);
this.state = {
animationInited: false
};
}
componentDidMount() {
const { initialAnimation, initialAnimationDelay } = this.props
if (initialAnimation)
setTimeout(this.initAnimation, initialAnimationDelay)
}
initAnimation = () => {
this.setState({ animationInited: true })
}
getProgress = () => {
const { initialAnimation, progress } = this.props
const { animationInited } = this.state
return initialAnimation && !animationInited ? 0 : progress
}
getStrokeDashoffset = strokeLength => {
const { counterClockwise, inverse, steps } = this.props
const progress = this.getProgress()
const progressLength = (strokeLength / steps) * (steps - progress)
if (inverse) return counterClockwise ? 0 : progressLength - strokeLength
return counterClockwise ? -1 * progressLength : progressLength
}
getStrokeDashArray = (strokeLength, circumference) => {
const { counterClockwise, inverse, steps } = this.props
const progress = this.getProgress()
const progressLength = (strokeLength / steps) * (steps - progress)
if (inverse) return `${progressLength}, ${circumference}`
return counterClockwise
? `${strokeLength * (progress / 100)}, ${circumference}`
: `${strokeLength}, ${circumference}`
}
getTrackStrokeDashArray = (strokeLength, circumference) => {
const { initialAnimation } = this.props
const { animationInited } = this.state
if (initialAnimation && !animationInited) return `0, ${circumference}`
return `${strokeLength}, ${circumference}`
}
getExtendedWidth = () => {
const {
strokeWidth,
pointerRadius,
pointerStrokeWidth,
trackStrokeWidth
} = this.props
const pointerWidth = pointerRadius + pointerStrokeWidth
if (pointerWidth > strokeWidth && pointerWidth > trackStrokeWidth) return pointerWidth * 2
else if (strokeWidth > trackStrokeWidth) return strokeWidth * 2
else return trackStrokeWidth * 2
}
getPointerAngle = () => {
const { cut, counterClockwise, steps } = this.props
const progress = this.getProgress()
return counterClockwise
? ((360 - cut) / steps) * (steps - progress)
: ((360 - cut) / steps) * progress
}
render() {
const {
radius,
pointerRadius,
pointerStrokeWidth,
pointerFillColor,
pointerStrokeColor,
fillColor,
trackStrokeWidth,
trackStrokeColor,
trackStrokeLinecap,
strokeColor,
strokeWidth,
strokeLinecap,
rotate,
cut,
trackTransition,
transition,
progress
} = this.props
const d = 2 * radius
const width = d + this.getExtendedWidth()
const circumference = 2 * Math.PI * radius
const strokeLength = (circumference / 360) * (360 - cut)
return (
{trackStrokeWidth > 0 && (
)}
{strokeWidth > 0 && (
)}
{pointerRadius > 0 && (
)}
{progress}%
)
}
}
ReactCustomizableProgressbar.defaultProps = {
radius: 100,
progress: 0,
steps: 100,
cut: 0,
rotate: -90,
strokeWidth: 20,
strokeColor: 'indianred',
fillColor: 'none',
strokeLinecap: 'round',
transition: '.3s ease',
pointerRadius: 0,
pointerStrokeWidth: 20,
pointerStrokeColor: 'indianred',
pointerFillColor: 'white',
trackStrokeColor: '#e6e6e6',
trackStrokeWidth: 20,
trackStrokeLinecap: 'round',
trackTransition: '.3s ease',
counterClockwise: false,
inverse: false,
initialAnimation: false,
initialAnimationDelay: 0
};
function MemoryUsagePanel(props) {
return (
memory usage
{props.txt('total memory')}: {props.total}
{props.txt('used memory')}: {props.used}
{props.txt('free memory')}: {props.free}
{ props.preload &&
{props.txt('preload memory')}: {props.preload}
}
{props.txt('wasted memory')}: {props.wasted} ({props.wastedPercent}%)
{ props.jitBuffer &&
{props.txt('jit buffer')}: {props.jitBuffer}
}
{ props.jitBufferFree &&
{props.txt('jit buffer free')}: {props.jitBufferFree} ({100 - props.jitBufferFreePercentage}%)
}
);
}
function StatisticsPanel(props) {
return (
{props.txt('opcache statistics')}
{props.txt('number of cached')} files: {props.num_cached_scripts}
{props.txt('number of hits')}: {props.hits}
{props.txt('number of misses')}: {props.misses}
{props.txt('blacklist misses')}: {props.blacklist_miss}
{props.txt('number of cached keys')}: {props.num_cached_keys}
{props.txt('max cached keys')}: {props.max_cached_keys}
);
}
function InternedStringsPanel(props) {
return (
{props.txt('interned strings usage')}
{props.txt('buffer size')}: {props.buffer_size}
{props.txt('used memory')}: {props.strings_used_memory}
{props.txt('free memory')}: {props.strings_free_memory}
{props.txt('number of strings')}: {props.number_of_strings}
);
}
class CachedFiles extends React.Component {
constructor(props) {
super(props);
this.doPagination = (typeof props.perPageLimit === "number"
&& props.perPageLimit > 0
);
this.state = {
currentPage: 1,
searchTerm: props.searchTerm,
refreshPagination: 0,
sortBy: `last_used_timestamp`,
sortDir: `desc`
}
}
setSearchTerm = debounce(searchTerm => {
this.setState({
searchTerm,
refreshPagination: !(this.state.refreshPagination)
});
}, this.props.debounceRate);
onPageChanged = currentPage => {
this.setState({ currentPage });
}
handleInvalidate = e => {
e.preventDefault();
if (this.props.realtime) {
axios.get(window.location.pathname, {params: { invalidate_searched: this.state.searchTerm }})
.then((response) => {
console.log('success: ' , response.data);
});
} else {
window.location.href = e.currentTarget.href;
}
}
changeSort = e => {
this.setState({ [e.target.name]: e.target.value });
}
compareValues = (key, order = 'asc') => {
return function innerSort(a, b) {
if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
return 0;
}
const varA = (typeof a[key] === 'string') ? a[key].toUpperCase() : a[key];
const varB = (typeof b[key] === 'string') ? b[key].toUpperCase() : b[key];
let comparison = 0;
if (varA > varB) {
comparison = 1;
} else if (varA < varB) {
comparison = -1;
}
return (
(order === 'desc') ? (comparison * -1) : comparison
);
};
}
render() {
if (!this.props.allow.fileList) {
return null;
}
if (this.props.allFiles.length === 0) {
return {this.props.txt('No files have been cached or you have opcache.file_cache_only turned on')}
;
}
const { searchTerm, currentPage } = this.state;
const offset = (currentPage - 1) * this.props.perPageLimit;
const filesInSearch = (searchTerm
? this.props.allFiles.filter(file => {
return !(file.full_path.indexOf(searchTerm) === -1);
})
: this.props.allFiles
);
filesInSearch.sort(this.compareValues(this.state.sortBy, this.state.sortDir));
const filesInPage = (this.doPagination
? filesInSearch.slice(offset, offset + this.props.perPageLimit)
: filesInSearch
);
const allFilesTotal = this.props.allFiles.length;
const showingTotal = filesInSearch.length;
const showing = showingTotal !== allFilesTotal ? ", {1} showing due to filter '{2}'" : "";
return (
{this.props.txt(`{0} files cached${showing}`, allFilesTotal, showingTotal, this.state.searchTerm)}
{ this.props.allow.invalidate && this.state.searchTerm && showingTotal !== allFilesTotal &&
{this.props.txt('Invalidate all matching files')}
}
{this.doPagination &&
}
{this.props.txt('Last used')}
{this.props.txt('Last modified')}
{this.props.txt('Path')}
{this.props.txt('Number of hits')}
{this.props.txt('Memory consumption')}
{this.props.txt('Descending')}
{this.props.txt('Ascending')}
{this.props.txt('Script')}
{filesInPage.map((file, index) => {
return
})}
);
}
}
class CachedFile extends React.Component {
handleInvalidate = e => {
e.preventDefault();
if (this.props.realtime) {
axios.get(window.location.pathname, {params: { invalidate: e.currentTarget.getAttribute('data-file') }})
.then((response) => {
console.log('success: ' , response.data);
});
} else {
window.location.href = e.currentTarget.href;
}
}
render() {
return (
{this.props.full_path}
{this.props.txt('hits')}: {this.props.readable.hits},
{this.props.txt('memory')}: {this.props.readable.memory_consumption},
{ this.props.last_modified && <>{this.props.txt('last modified')}: {this.props.last_modified}, > }
{this.props.txt('last used')}: {this.props.last_used}
{ !this.props.timestamp && - {this.props.txt('has been invalidated')} }
{ this.props.canInvalidate && , {this.props.txt('force file invalidation')} }
);
}
}
class IgnoredFiles extends React.Component {
constructor(props) {
super(props);
this.doPagination = (typeof props.perPageLimit === "number"
&& props.perPageLimit > 0
);
this.state = {
currentPage: 1,
refreshPagination: 0
}
}
onPageChanged = currentPage => {
this.setState({ currentPage });
}
render() {
if (!this.props.allow.fileList) {
return null;
}
if (this.props.allFiles.length === 0) {
return {this.props.txt('No files have been ignored via opcache.blacklist_filename ')}
;
}
const { currentPage } = this.state;
const offset = (currentPage - 1) * this.props.perPageLimit;
const filesInPage = (this.doPagination
? this.props.allFiles.slice(offset, offset + this.props.perPageLimit)
: this.props.allFiles
);
const allFilesTotal = this.props.allFiles.length;
return (
{this.props.txt('{0} ignore file locations', allFilesTotal)}
{this.doPagination &&
}
{this.props.txt('Path')}
{filesInPage.map((file, index) => {
return {file}
})}
);
}
}
class PreloadedFiles extends React.Component {
constructor(props) {
super(props);
this.doPagination = (typeof props.perPageLimit === "number"
&& props.perPageLimit > 0
);
this.state = {
currentPage: 1,
refreshPagination: 0
}
}
onPageChanged = currentPage => {
this.setState({ currentPage });
}
render() {
if (!this.props.allow.fileList) {
return null;
}
if (this.props.allFiles.length === 0) {
return {this.props.txt('No files have been preloaded opcache.preload ')}
;
}
const { currentPage } = this.state;
const offset = (currentPage - 1) * this.props.perPageLimit;
const filesInPage = (this.doPagination
? this.props.allFiles.slice(offset, offset + this.props.perPageLimit)
: this.props.allFiles
);
const allFilesTotal = this.props.allFiles.length;
return (
{this.props.txt('{0} preloaded files', allFilesTotal)}
{this.doPagination &&
}
{this.props.txt('Path')}
{filesInPage.map((file, index) => {
return {file}
})}
);
}
}
class Pagination extends React.Component {
constructor(props) {
super(props);
this.state = { currentPage: 1 };
this.pageNeighbours =
typeof props.pageNeighbours === "number"
? Math.max(0, Math.min(props.pageNeighbours, 2))
: 0;
}
componentDidMount() {
this.gotoPage(1);
}
componentDidUpdate(props) {
const { refresh } = this.props;
if (props.refresh !== refresh) {
this.gotoPage(1);
}
}
gotoPage = page => {
const { onPageChanged = f => f } = this.props;
const currentPage = Math.max(0, Math.min(page, this.totalPages()));
this.setState({ currentPage }, () => onPageChanged(currentPage));
};
totalPages = () => {
return Math.ceil(this.props.totalRecords / this.props.pageLimit);
}
handleClick = (page, evt) => {
evt.preventDefault();
this.gotoPage(page);
};
handleJumpLeft = evt => {
evt.preventDefault();
this.gotoPage(this.state.currentPage - this.pageNeighbours * 2 - 1);
};
handleJumpRight = evt => {
evt.preventDefault();
this.gotoPage(this.state.currentPage + this.pageNeighbours * 2 + 1);
};
handleMoveLeft = evt => {
evt.preventDefault();
this.gotoPage(this.state.currentPage - 1);
};
handleMoveRight = evt => {
evt.preventDefault();
this.gotoPage(this.state.currentPage + 1);
};
range = (from, to, step = 1) => {
let i = from;
const range = [];
while (i <= to) {
range.push(i);
i += step;
}
return range;
}
fetchPageNumbers = () => {
const totalPages = this.totalPages();
const pageNeighbours = this.pageNeighbours;
const totalNumbers = this.pageNeighbours * 2 + 3;
const totalBlocks = totalNumbers + 2;
if (totalPages > totalBlocks) {
let pages = [];
const leftBound = this.state.currentPage - pageNeighbours;
const rightBound = this.state.currentPage + pageNeighbours;
const beforeLastPage = totalPages - 1;
const startPage = leftBound > 2 ? leftBound : 2;
const endPage = rightBound < beforeLastPage ? rightBound : beforeLastPage;
pages = this.range(startPage, endPage);
const pagesCount = pages.length;
const singleSpillOffset = totalNumbers - pagesCount - 1;
const leftSpill = startPage > 2;
const rightSpill = endPage < beforeLastPage;
const leftSpillPage = "LEFT";
const rightSpillPage = "RIGHT";
if (leftSpill && !rightSpill) {
const extraPages = this.range(startPage - singleSpillOffset, startPage - 1);
pages = [leftSpillPage, ...extraPages, ...pages];
} else if (!leftSpill && rightSpill) {
const extraPages = this.range(endPage + 1, endPage + singleSpillOffset);
pages = [...pages, ...extraPages, rightSpillPage];
} else if (leftSpill && rightSpill) {
pages = [leftSpillPage, ...pages, rightSpillPage];
}
return [1, ...pages, totalPages];
}
return this.range(1, totalPages);
};
render() {
if (!this.props.totalRecords || this.totalPages() === 1) {
return null
}
const { currentPage } = this.state;
const pages = this.fetchPageNumbers();
return (
);
}
}
function Footer(props) {
return (
);
}
function debounce(func, wait, immediate) {
let timeout;
wait = wait || 250;
return function() {
let context = this, args = arguments;
let later = function() {
timeout = null;
if (!immediate) {
func.apply(context, args);
}
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) {
func.apply(context, args);
}
};
}