71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
import React, { PureComponent } from "react";
|
|
|
|
interface SeriesNameProps {
|
|
labels: {[key: string]: string} | null;
|
|
format: boolean;
|
|
}
|
|
|
|
class SeriesName extends PureComponent<SeriesNameProps> {
|
|
renderFormatted(): React.ReactNode {
|
|
const labels = this.props.labels!;
|
|
|
|
let labelNodes: React.ReactNode[] = [];
|
|
let first = true;
|
|
for (let label in labels) {
|
|
if (label === '__name__') {
|
|
continue;
|
|
}
|
|
|
|
labelNodes.push(
|
|
<span key={label}>
|
|
{!first && ', '}
|
|
<span className="legend-label-name">{label}</span>=
|
|
<span className="legend-label-value">"{labels[label]}"</span>
|
|
</span>
|
|
);
|
|
|
|
if (first) {
|
|
first = false;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<span className="legend-metric-name">{labels.__name__ || ''}</span>
|
|
<span className="legend-label-brace">{'{'}</span>
|
|
{labelNodes}
|
|
<span className="legend-label-brace">{'}'}</span>
|
|
</>
|
|
);
|
|
}
|
|
|
|
renderPlain() {
|
|
const labels = this.props.labels!;
|
|
|
|
let tsName = (labels.__name__ || '') + '{';
|
|
let labelStrings: string[] = [];
|
|
for (let label in labels) {
|
|
if (label !== '__name__') {
|
|
labelStrings.push(label + '="' + labels[label] + '"');
|
|
}
|
|
}
|
|
tsName += labelStrings.join(', ') + '}';
|
|
return tsName;
|
|
}
|
|
|
|
render() {
|
|
if (this.props.labels === null) {
|
|
return 'scalar';
|
|
}
|
|
|
|
if (this.props.format) {
|
|
return this.renderFormatted();
|
|
}
|
|
// Return a simple text node. This is much faster to scroll through
|
|
// for longer lists (hundreds of items).
|
|
return this.renderPlain();
|
|
}
|
|
}
|
|
|
|
export default SeriesName;
|