in gui/frontend/src/modules/db-editor/PerformanceDashboard.tsx [535:766]
private renderMySQLStatus(gridColumn: number): ComponentChild[] {
const { graphData } = this.state;
const colors = colorSchemes.get(graphData.activeColorScheme)!;
const {
tableCacheEfficiency, selects, inserts, updates, deletes, creates, alters, drops,
totalStatements, threadsCached, threadsConnected, threadsCreated, threadsRunning,
openFiles, openStreams, openTableDefinitions, openTables, openedTableDefinitions, openedTables,
trxBegin, trxCommit, trxReleaseSavepoint, trxRollback, trxRollbackToSavepoint, trxSavepoint,
} = graphData.computedValues;
const sqlStatementsData = graphData.series.get("sqlStatementsData");
const values = [{ name: "Cache Efficiency", value: 0 }, { name: "Cache Misses", value: 0 }];
if (tableCacheEfficiency > 0) {
values[0].value = tableCacheEfficiency;
values[1].value = 1 - tableCacheEfficiency;
}
const tableCacheGraphOptions: IGraphOptions = {
viewport: { left: 0, top: 0, width: 400, height: 300 },
series: [
{
id: "sqlStatus1",
type: "pie",
radius: [60, 130],
showValues: false,
colors: [colors[Color.PieValue], colors[Color.PieNoValue]],
transformation: { x: "50%", y: "50%", width: 400, height: 300 },
tooltip: this.pieTooltipPercent,
data: values,
},
],
};
const threadsGraphOptions: IGraphOptions = {
viewport: { left: 0, top: 0, width: 400, height: 300 },
series: [
{
id: "sqlStatus2",
type: "pie",
radius: [60, 130],
showValues: false,
colors: [colors[0], colors[1], colors[2], colors[5]],
transformation: { x: "50%", y: "50%", width: 400, height: 300 },
tooltip: this.pieTooltip,
data: [
{ name: "Threads Running", value: threadsRunning },
{ name: "Threads Connected", value: threadsConnected },
{ name: "Threads Cached", value: threadsCached },
{ name: "Threads Created", value: threadsCreated },
],
},
],
};
const openFilesGraphOptions: IGraphOptions = {
viewport: { left: 0, top: 0, width: 400, height: 300 },
series: [
{
id: "sqlStatus3",
type: "pie",
radius: [60, 130],
showValues: false,
colors: [colors[0], colors[1], colors[2], colors[5], colors[3], colors[6]],
transformation: { x: "50%", y: "50%", width: 400, height: 300 },
tooltip: this.pieTooltip,
data: [
{ name: "Open Files", value: openFiles },
{ name: "Open Streams", value: openStreams },
{ name: "Open Table Definitions", value: openTableDefinitions },
{ name: "Open Tables", value: openTables },
{ name: "Total Opened Tabled Definitions", value: openedTableDefinitions },
{ name: "Total Opened Tables", value: openedTables },
],
},
],
};
const transactionGraphOptions: IGraphOptions = {
viewport: { left: 0, top: 0, width: 400, height: 300 },
series: [
{
id: "sqlStatus4",
type: "pie",
radius: [60, 130],
showValues: false,
colors: [colors[0], colors[1], colors[2], colors[5], colors[3], colors[6]],
transformation: { x: "50%", y: "50%", width: 400, height: 300 },
tooltip: this.pieTooltip,
data: [
{ name: "Begin", value: trxBegin },
{ name: "Commit", value: trxCommit },
{ name: "Release Savepoint", value: trxReleaseSavepoint },
{ name: "Rollback", value: trxRollback },
{ name: "Rollback to Savepoint", value: trxRollbackToSavepoint },
{ name: "Savepoint", value: trxSavepoint },
],
},
],
};
const timestamp = new Date().getTime();
const xDomain: [number, number] = [
timestamp - PerformanceDashboard.sampleInterval * graphData.displayInterval,
timestamp,
];
const statementsGraphOptions: IGraphOptions = {
viewport: { left: 0, top: 0, width: 400, height: 300 },
series: [
{
id: "sqlStatus5",
type: "line",
strokeWidth: 2,
colors: [colors[Color.Select], colors[Color.DML], colors[Color.DDL]],
marginLeft: 80,
xDomain,
curve: "Linear",
yTickCount: 6,
tooltip: this.statementsTooltip,
transformation: { x: 0, y: 0, width: 400, height: 300 },
data: sqlStatementsData,
},
],
};
const cells: ComponentChild[] = [];
cells.push(
<GridCell
className="title"
orientation={Orientation.TopDown}
style={{ gridColumn, gridRow: 1 }}
crossAlignment={ContentAlignment.Center}
>
<Icon className="sectionIcon" src={Assets.db.mysqlSchemaIcon} />
<Label>MySQL Status</Label>
<Label>
Primary MySQL server activity and performance statistics.
</Label>
</GridCell>,
<GridCell className="separated" orientation={Orientation.TopDown} style={{ gridColumn, gridRow: 2 }}>
<Grid columns={2} rowGap={12} style={{ marginBottom: "8px" }}>
<GridCell orientation={Orientation.TopDown}>
<Label className="pieTitle">Table Cache</Label>
<GraphHost
id="tableCacheGraph"
options={tableCacheGraphOptions}
/>
</GridCell>
<GridCell orientation={Orientation.TopDown}>
<Label className="pieTitle">Threads</Label>
<GraphHost
id="threadsGraph"
options={threadsGraphOptions}
/>
</GridCell>
<GridCell orientation={Orientation.TopDown}>
<Label className="pieTitle">Open Objects</Label>
<GraphHost
id="openFilesGraph"
options={openFilesGraphOptions}
/>
</GridCell>
<GridCell orientation={Orientation.TopDown}>
<Label className="pieTitle">Transactions</Label>
<GraphHost
id="transactionGraph"
options={transactionGraphOptions}
/>
</GridCell>
</Grid>
{this.renderNameValuePair("Cache Efficiency", `${(tableCacheEfficiency * 100).toFixed(0)}%`,
MarkerType.None, "Cache for minimizing the number of times MySQL opens database tables when " +
"accessed.")}
{this.renderNameValuePair("Total Opened Tables", `${openedTables.toLocaleString("en")}`,
MarkerType.None, "Total number of opened tables.")}
{this.renderNameValuePair("Total Transactions", `${trxBegin.toLocaleString("en")}`,
MarkerType.None, "Total number of started transactions.")}
</GridCell>,
<GridCell
className="separated"
orientation={Orientation.TopDown}
style={{ gridColumn, gridRow: 3 }}
>
<Label className="subTitle">SQL Statements Executed</Label>
<GraphHost
options={statementsGraphOptions}
/>
{this.renderNameValuePair("Total Statements", `${totalStatements}/s`,
MarkerType.None, "Total number of statements executed.")}
</GridCell>,
<GridCell className="separated" orientation={Orientation.TopDown} style={{ gridColumn, gridRow: 4 }}>
<Grid id="selectGrid" columns={2}>
<GridCell orientation={Orientation.TopDown}>
{this.renderNameValuePair("SELECT", `${selects.toFixed(0)}/s`, MarkerType.Select,
"SELECT Statements Executed")}
</GridCell>
<GridCell orientation={Orientation.TopDown}></GridCell>
<GridCell orientation={Orientation.TopDown}>
{this.renderNameValuePair("INSERT", `${inserts.toFixed(0)}/s`, MarkerType.DML,
"INSERT Statements Executed")}
</GridCell>
<GridCell orientation={Orientation.TopDown}>
{this.renderNameValuePair("CREATE", `${creates.toFixed(0)}/s`, MarkerType.DDL,
"CREATE Statements Executed")}
</GridCell>
<GridCell orientation={Orientation.TopDown}>
{this.renderNameValuePair("UPDATE", `${updates.toFixed(0)}/s`, MarkerType.DML,
"UPDATE Statements Executed")}
</GridCell>
<GridCell orientation={Orientation.TopDown}>
{this.renderNameValuePair("ALTER", `${alters.toFixed(0)}/s`, MarkerType.DDL,
"ALTER Statements Executed")}
</GridCell>
<GridCell orientation={Orientation.TopDown}>
{this.renderNameValuePair("DELETE", `${deletes.toFixed(0)}/s`, MarkerType.DML,
"DELETE Statements Executed")}
</GridCell>
<GridCell orientation={Orientation.TopDown}>
{this.renderNameValuePair("DROP", `${drops.toFixed(0)}/s`, MarkerType.DDL,
"DROP Statements Executed")}
</GridCell>
</Grid >
</GridCell >,
);
return cells;
}