Skip to content

Commit

Permalink
change nav structure and add cluster overiew
Browse files Browse the repository at this point in the history 
Signed-off-by: Eric <[email protected]>
  • Loading branch information
@mengweieric
mengweieric committed Nov 9, 2024
1 parent ee13c33 commit 9d7ac64
Show file tree
Hide file tree
Showing 6 changed files with 364 additions and 45 deletions.
58 changes: 39 additions & 19 deletions public/components/kubernetes/common/gourp_dashboards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
EuiCompressedSuperDatePicker,
EuiSpacer,
EuiPageHeader,
EuiText,
} from '@elastic/eui';
import { Responsive, WidthProvider } from 'react-grid-layout';
import { PlotlyHTMLElement } from 'plotly.js';
Expand All @@ -20,6 +21,7 @@ import PPLService from '../../../services/requests/ppl';
import { coreRefs } from '../../../framework/core_refs';
import { uiSettingsService } from '../../../../common/utils';
import { Plt } from '../../../components/visualizations/plotly/plot';
import { PLOTLY_COLOR } from '../../../../common/constants/shared';

const ResponsiveGridLayout = WidthProvider(Responsive);

Expand Down Expand Up @@ -52,19 +54,19 @@ const layouts = {
lg: [
// Top row with global usage and counts
{ i: 'clusterCPUUsage', x: 0, y: 0, w: 5, h: 2 },
{ i: 'clusterMemoryUsage', x: 2, y: 0, w: 2, h: 2 },
{ i: 'nodesCount', x: 4, y: 0, w: 1, h: 1 },
{ i: 'namespacesCount', x: 5, y: 0, w: 1, h: 2 },
{ i: 'runningPodsCount', x: 6, y: 0, w: 2, h: 2 },
{ i: 'clusterMemoryUsage', x: 0, y: 3, w: 5, h: 2 },
{ i: 'nodesCount', x: 5, y: 0, w: 1, h: 1 },
{ i: 'namespacesCount', x: 5, y: 1, w: 1, h: 1 },
{ i: 'runningPodsCount', x: 5, y: 2, w: 1, h: 1 },

// Middle row with CPU and RAM utilization
// { i: 'cpuUsage', x: 0, y: 2, w: 2, h: 1 },
// { i: 'ramUsage', x: 2, y: 2, w: 2, h: 1 },
// { i: 'ramUsage', x: 5, y: 4, w: 2, h: 1 },
// { i: 'clusterCPUUtilization', x: 4, y: 2, w: 2, h: 1 },
// { i: 'clusterMemoryUtilization', x: 6, y: 2, w: 2, h: 1 },

// Additional information panels
{ i: 'runningPodsCategory', x: 0, y: 3, w: 3, h: 2 },
{ i: 'runningPodsCategory', x: 7, y: 0, w: 2, h: 2 },
{ i: 'cpuCoreCount', x: 5, y: 3, w: 1, h: 1 },
{ i: 'totalNetworkTraffic', x: 3, y: 3, w: 5, h: 2 },

// Visualization row with detailed charts
Expand All @@ -85,7 +87,7 @@ const layouts = {
{ i: 'nodesCount', x: 4, y: 0, w: 1, h: 2 },
{ i: 'namespacesCount', x: 5, y: 0, w: 1, h: 2 },
{ i: 'runningPodsCount', x: 6, y: 0, w: 2, h: 2 },
{ i: 'cpuUsage', x: 0, y: 2, w: 2, h: 1 },
{ i: 'cpuCoreCount', x: 0, y: 2, w: 2, h: 1 },
{ i: 'ramUsage', x: 2, y: 2, w: 2, h: 1 },
{ i: 'clusterCPUUtilization', x: 4, y: 2, w: 2, h: 1 },
{ i: 'clusterMemoryUtilization', x: 6, y: 2, w: 2, h: 1 },
Expand All @@ -104,7 +106,7 @@ const layouts = {
{ i: 'nodesCount', x: 0, y: 2, w: 2, h: 2 },
{ i: 'namespacesCount', x: 2, y: 2, w: 2, h: 2 },
{ i: 'runningPodsCount', x: 0, y: 4, w: 2, h: 2 },
{ i: 'cpuUsage', x: 2, y: 4, w: 2, h: 1 },
{ i: 'cpuCoreCount', x: 2, y: 4, w: 2, h: 1 },
{ i: 'ramUsage', x: 0, y: 5, w: 2, h: 1 },
{ i: 'clusterCPUUtilization', x: 2, y: 5, w: 2, h: 1 },
{ i: 'clusterMemoryUtilization', x: 0, y: 6, w: 2, h: 1 },
Expand Down Expand Up @@ -149,10 +151,22 @@ export const GroupDashboards = ({
gKeys: string[],
traceConfig: {}
) => {
console.log('data: ', data);
console.log('xKeys[0]: ', xKeys[0]);
console.log('yKeys[0]: ', yKeys[0]);
if (gKeys.length === 0) {
if (traceConfig.type === 'pie') {
return [
{
labels: data.data[xKeys[0]],
values: data.data[yKeys[0]],
...traceConfig,
},
];
} else if (traceConfig.type === 'indicator') {
return [
{
value: data?.data[yKeys[0]][0] || 0,
...traceConfig,
},
];
} else if (gKeys.length === 0) {
return [
{
x: data.data[xKeys[0]],
Expand Down Expand Up @@ -187,22 +201,20 @@ export const GroupDashboards = ({
const renderPanel = (metrics: IMetrics[]) => {
console.log('metrics', metrics);
return metrics.map((metric, index) => {
if (!metric) {
return null;
}
// if (!metric) {
// return [];
// }

const visXaxisKeys = prometheusQueries[index].vis.xKeys;
const visYaxisKeys = prometheusQueries[index].vis.yKeys;
const visGroupingKeys = prometheusQueries[index].vis.gKeys;
console.log('metric: ', metric);
const visualizationData = getProcessedMetricsVizData(
metric,
visXaxisKeys,
visYaxisKeys,
visGroupingKeys,
prometheusQueries[index].vis.config
);
console.log('visualizationData: ', visualizationData);

// metric
// jdbc
Expand All @@ -214,6 +226,9 @@ export const GroupDashboards = ({
return (
<div key={prometheusQueries[index].title + index} data-grid={layouts.lg[index]}>
<EuiPanel paddingSize="m">
<EuiText>
<h4>{prometheusQueries[index].title}</h4>
</EuiText>
<Plt
// data={[
// {
Expand All @@ -224,6 +239,10 @@ export const GroupDashboards = ({
// ]}
data={visualizationData}
layout={{
// width: 200, // Set custom width
// height: 150, // Set custom height
margin: { t: 0, b: 0, l: 0, r: 0 }, // Minimal margins
padding: { t: 0, b: 0, l: 0, r: 0 }, // Minimal padding
showlegend: true,
...(prometheusQueries[index].vis.layout || {}),
xaxis: {
Expand All @@ -243,10 +262,10 @@ export const GroupDashboards = ({
zeroline: false,
rangemode: 'normal',
},
colorway: PLOTLY_COLOR
}}
// config={prometheusQueries[index].vis.component.config}
/>
<EuiSpacer size="m" />
{/* <Visualization
visualizations={{
data: {
Expand All @@ -269,6 +288,7 @@ export const GroupDashboards = ({
}}
/> */}
</EuiPanel>
<EuiSpacer size="m" />
</div>
);
});
Expand Down
211 changes: 187 additions & 24 deletions public/components/kubernetes/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,30 @@ import React from 'react';
import { GroupDashboards } from './common/gourp_dashboards';
import { Line } from '../visualizations/charts/lines/line';
import { convertDateTime } from '../common/query_utils';
import { Pie } from '../visualizations/charts/pie/pie';

// function determineExactSpan(startTime: number, endTime: number): string {
// const durationInSeconds = Math.round(
// (new Date(endTime).getTime() - new Date(startTime).getTime()) / 1000
// ); // Round to nearest second
function determineExactSpan(startTime: number, endTime: number): string {
const durationInSeconds = Math.round(
(new Date(endTime).getTime() - new Date(startTime).getTime()) / 1000
); // Round to nearest second

// // Convert the duration into the appropriate PPL-compatible span format
// if (durationInSeconds < 60) {
// return `${durationInSeconds}s`; // Duration in seconds
// } else if (durationInSeconds < 3600) {
// return `${Math.floor(durationInSeconds / 60)}m`; // Duration in minutes
// } else if (durationInSeconds < 86400) {
// return `${Math.floor(durationInSeconds / 3600)}h`; // Duration in hours
// } else if (durationInSeconds < 604800) {
// return `${Math.floor(durationInSeconds / 86400)}d`; // Duration in days
// } else if (durationInSeconds < 2592000) {
// return `${Math.floor(durationInSeconds / 604800)}w`; // Duration in weeks
// } else if (durationInSeconds < 31536000) {
// return `${Math.floor(durationInSeconds / 2592000)}M`; // Duration in months
// } else {
// return `${Math.floor(durationInSeconds / 31536000)}y`; // Duration in years
// }
// }
// Convert the duration into the appropriate PPL-compatible span format
if (durationInSeconds < 60) {
return `${durationInSeconds}s`; // Duration in seconds
} else if (durationInSeconds < 3600) {
return `${Math.floor(durationInSeconds / 60)}m`; // Duration in minutes
} else if (durationInSeconds < 86400) {
return `${Math.floor(durationInSeconds / 3600)}h`; // Duration in hours
} else if (durationInSeconds < 604800) {
return `${Math.floor(durationInSeconds / 86400)}d`; // Duration in days
} else if (durationInSeconds < 2592000) {
return `${Math.floor(durationInSeconds / 604800)}w`; // Duration in weeks
} else if (durationInSeconds < 31536000) {
return `${Math.floor(durationInSeconds / 2592000)}M`; // Duration in months
} else {
return `${Math.floor(durationInSeconds / 31536000)}y`; // Duration in years
}
}

function getSpanFromTimeRange(startTime, endTime) {
const durationInSeconds = new Date(endTime).getTime() - new Date(startTime).getTime();
Expand All @@ -52,7 +53,7 @@ export const Home = () => {

const start = convertDateTime(startTime, true);
const end = convertDateTime(endTime, false);
// const exactTimeInterval = determineExactSpan(start, end);
const exactTimeInterval = determineExactSpan(start, end);
const timeInterval = getSpanFromTimeRange(start, end);

return (
Expand All @@ -65,9 +66,9 @@ export const Home = () => {
{
cluster: 'eks-cluster-with-vpc',
name: 'clusterCPUUsage',
title: 'Cluster CPU Usage',
title: 'Cluster Total CPU Usage',
// query: `source = prometheus_k8s_cluster.\`cluster:node_cpu:sum_rate5m\` | where @timestamp >= '${start}' and @timestamp <= '${end}'`,
query: `source = prometheus_k8s_cluster.container_cpu_usage_seconds_total | where @timestamp >= '${start}' and @timestamp <= '${end}' | where \`cluster\` = 'eks-cluster-with-vpc' | stats sum(@value) as total_cpu_usage by span(@timestamp,${timeInterval})`,
query: `source = prometheus_k8s_cluster.container_cpu_usage_seconds_total | where @timestamp >= '${start}' and @timestamp <= '${end}' | where \`cluster\` = 'eks-cluster-with-vpc' | stats sum(@value) as total_cpu_usage by container, span(@timestamp,${timeInterval})`,
endpoint: 'prometheus',
datasource: { name: 'prometheus_k8s', type: 'prometheus' },
vis: {
Expand All @@ -85,6 +86,168 @@ export const Home = () => {
},
xKeys: [`span(@timestamp,${timeInterval})`],
yKeys: ['total_cpu_usage'],
gKeys: ['container'],
},
},
{
cluster: 'eks-cluster-with-vpc',
name: 'clusterMemoryUsage',
title: 'Cluster Total Memory Usage',
// query: `source = prometheus_k8s_cluster.\`cluster:node_cpu:sum_rate5m\` | where @timestamp >= '${start}' and @timestamp <= '${end}'`,
query: `source = prometheus_k8s_cluster.node_memory_MemTotal_bytes | where cluster = 'eks-cluster-with-vpc' | stats sum(@value) as total_memory_usage by nodename, span(@timestamp, ${timeInterval})`,
endpoint: 'prometheus',
datasource: { name: 'prometheus_k8s', type: 'prometheus' },
vis: {
component: Line,
x: 'timestamp',
y: 'total_memory_usage',
xaxisKey: '@timestamp',
yaxisKey: 'total_memory_usage',
config: {
type: 'line',
mode: 'lines',
line: {
shape: 'spline', // This makes the line smooth
},
},
xKeys: [`span(@timestamp,${timeInterval})`],
yKeys: ['total_memory_usage'],
gKeys: ['nodename'],
},
},
{
cluster: 'eks-cluster-with-vpc',
name: 'nodesCount',
title: 'Nodes',
query: `source = prometheus_k8s_cluster.\`count:up1\` | where @timestamp >= '${start}' and @timestamp <= '${end}' and cluster = 'eks-cluster-with-vpc' and @value=1 | stats count() as running_node_count by span(@timestamp, ${exactTimeInterval})`,
//query: `source = prometheus_k8s_cluster.\`count:up1\` | where \`cluster\` = 'eks-cluster-with-vpc' | dedup k8s_node_name | stats count() as running_node_count by k8s_node_name`,
endpoint: 'prometheus',
datasource: { name: 'prometheus_k8s', type: 'prometheus' },
vis: {
component: Pie,
x: 'timestamp',
y: 'Number of Nodes',
xaxisKey: '@timestamp',
yaxisKey: 'total_memory_usage',
config: {
type: 'indicator',
mode: "number"
},
layout: {
width: 250,
height: 190
},
xKeys: [`k8s_node_name`],
yKeys: ['running_node_count'],
gKeys: [],
},
},
{
cluster: 'eks-cluster-with-vpc',
name: 'namespacesCount',
title: 'Namespaces',
query: `source = prometheus_k8s_cluster.\`count:up1\` | where @timestamp >= '${start}' and @timestamp <= '${end}' and cluster = 'eks-cluster-with-vpc' and @value=1 | stats count() as running_node_count by span(@timestamp, ${exactTimeInterval})`,
//query: `source = prometheus_k8s_cluster.\`count:up1\` | where \`cluster\` = 'eks-cluster-with-vpc' | dedup k8s_node_name | stats count() as running_node_count by k8s_node_name`,
endpoint: 'prometheus',
datasource: { name: 'prometheus_k8s', type: 'prometheus' },
vis: {
component: Pie,
x: 'timestamp',
y: 'Number of Nodes',
xaxisKey: '@timestamp',
yaxisKey: 'total_memory_usage',
config: {
type: 'indicator',
mode: "number"
},
layout: {
width: 250,
height: 190
},
xKeys: [`k8s_node_name`],
yKeys: ['running_node_count'],
gKeys: [],
},
},
{
cluster: 'eks-cluster-with-vpc',
name: 'runningPodsCount',
title: 'Running Pods',
query: `source = prometheus_k8s_cluster.\`count:up1\` | where @timestamp >= '${start}' and @timestamp <= '${end}' and cluster = 'eks-cluster-with-vpc' and @value=1 | stats count() as running_node_count by span(@timestamp, ${exactTimeInterval})`,
//query: `source = prometheus_k8s_cluster.\`count:up1\` | where \`cluster\` = 'eks-cluster-with-vpc' | dedup k8s_node_name | stats count() as running_node_count by k8s_node_name`,
endpoint: 'prometheus',
datasource: { name: 'prometheus_k8s', type: 'prometheus' },
vis: {
component: Pie,
x: 'timestamp',
y: 'Number of Nodes',
xaxisKey: '@timestamp',
yaxisKey: 'total_memory_usage',
config: {
type: 'indicator',
mode: "number"
},
layout: {
width: 250,
height: 190
},
xKeys: [`k8s_node_name`],
yKeys: ['running_node_count'],
gKeys: [],
},
},
{
cluster: 'eks-cluster-with-vpc',
name: 'runningPodsCategory',
title: 'Failed Pods',
query: `source = prometheus_k8s_cluster.kube_pod_status_phase | where @timestamp >= '${start}' and @timestamp <= '${end}' and cluster = 'eks-cluster-with-vpc' | fields service_name | stats count() as node_count by service_name`,
//query: `source = prometheus_k8s_cluster.\`count:up1\` | where \`cluster\` = 'eks-cluster-with-vpc' | dedup k8s_node_name | stats count() as running_node_count by k8s_node_name`,
endpoint: 'prometheus',
datasource: { name: 'prometheus_k8s', type: 'prometheus' },
vis: {
component: Pie,
x: 'timestamp',
y: 'Number of Nodes',
xaxisKey: '@timestamp',
yaxisKey: 'total_memory_usage',
config: {
type: 'pie',
hole: .4,
textposition: 'inside',
showlegend: false
},
// layout: {
// width: 267,
// height: 190
// },
xKeys: [`pod`],
yKeys: ['running_node_count'],
gKeys: [],
},
},
{
cluster: 'eks-cluster-with-vpc',
name: 'cpuCoreCount',
title: 'Cluster CPU Cores',
query: `source = prometheus_k8s_cluster.machine_cpu_cores | where @timestamp >= '${start}' and @timestamp <= '${end}' and cluster = 'eks-cluster-with-vpc' | fields @value | stats count() as core_count`,
endpoint: 'prometheus',
datasource: { name: 'prometheus_k8s', type: 'prometheus' },
vis: {
component: Pie,
x: 'timestamp',
y: 'Number of cores',
xaxisKey: '@timestamp',
yaxisKey: 'total_memory_usage',
config: {
type: 'indicator',
mode: "number"
},
layout: {
width: 250,
height: 190
},
xKeys: [`k8s_node_name`],
yKeys: ['core_count'],
gKeys: [],
},
},
Expand Down
Loading

0 comments on commit 9d7ac64

Please sign in to comment.