Skip to content

Commit

Permalink
more detail pages
Browse files Browse the repository at this point in the history 
Signed-off-by: Eric <[email protected]>
  • Loading branch information
@mengweieric
mengweieric committed Nov 12, 2024
1 parent 5624b4b commit 4b5f07d
Show file tree
Hide file tree
Showing 7 changed files with 338 additions and 79 deletions.
66 changes: 15 additions & 51 deletions public/components/kubernetes/common/gourp_dashboards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,12 @@ const layouts = {
// Additional information panels
{ i: 'runningPodsCategory', x: 7, y: 0, w: 2, h: 2 },
{ i: 'cpuCoreCount', x: 5, y: 3, w: 1, h: 1 },
{ i: 'diskIO', x: 7, y: 2, w: 2, h: 2 },
{ i: 'totalNetworkTraffic', x: 3, y: 3, w: 5, h: 2 },

// Visualization row with detailed charts
// { i: 'networkTraffic', x: 0, y: 5, w: 4, h: 3 },
// { i: 'diskIO', x: 4, y: 5, w: 4, h: 3 },
// { i: 'diskIO', x: 7, y: 2, w: 2, h: 2 },

// Namespace-based CPU and memory usage panels
{ i: 'cpuUsageByNamespace', x: 0, y: 8, w: 4, h: 3 },
Expand All @@ -94,7 +95,7 @@ const layouts = {
{ i: 'runningPodsCategory', x: 0, y: 3, w: 3, h: 2 },
{ i: 'totalNetworkTraffic', x: 3, y: 3, w: 5, h: 2 },
{ i: 'networkTraffic', x: 0, y: 5, w: 4, h: 3 },
{ i: 'diskIO', x: 4, y: 5, w: 4, h: 3 },
{ i: 'diskIO', x: 7, y: 2, w: 2, h: 2 },
{ i: 'cpuUsageByNamespace', x: 0, y: 8, w: 4, h: 3 },
{ i: 'memoryUsageByNamespace', x: 4, y: 8, w: 4, h: 3 },
{ i: 'podNetworkUtilization', x: 0, y: 11, w: 4, h: 3 },
Expand All @@ -113,7 +114,7 @@ const layouts = {
{ i: 'runningPodsCategory', x: 2, y: 6, w: 2, h: 2 },
{ i: 'totalNetworkTraffic', x: 0, y: 7, w: 4, h: 3 },
{ i: 'networkTraffic', x: 0, y: 10, w: 4, h: 3 },
{ i: 'diskIO', x: 0, y: 13, w: 4, h: 3 },
{ i: 'diskIO', x: 7, y: 2, w: 2, h: 2 },
{ i: 'cpuUsageByNamespace', x: 0, y: 16, w: 4, h: 3 },
{ i: 'memoryUsageByNamespace', x: 0, y: 19, w: 4, h: 3 },
{ i: 'podNetworkUtilization', x: 0, y: 22, w: 4, h: 3 },
Expand All @@ -130,7 +131,6 @@ export const GroupDashboards = ({
const [metricsData, setMetricsData] = React.useState<any[]>([]);

useEffect(() => {
console.log('reredner on date change.....');
const metrics = prometheusQueries.map((query) => {
return pplService.fetch({ query: query.query, format: 'viz' });
});
Expand All @@ -149,28 +149,31 @@ export const GroupDashboards = ({
xKeys: string[],
yKeys: string[],
gKeys: string[],
traceConfig: {}
vis: {}
) => {
const traceConfig = vis.config;
if (traceConfig.type === 'pie') {
return [
{
labels: data.data[xKeys[0]],
values: data.data[yKeys[0]],
// labels: data,
// values: data.data[yKeys[0]],
labels: vis.labels,
values: vis.values,
...traceConfig,
},
];
} else if (traceConfig.type === 'indicator') {
return [
{
value: data?.data[yKeys[0]][0] || 0,
value: vis.value ? vis.value : data?.data[yKeys[0]][0],
...traceConfig,
},
];
} else if (gKeys.length === 0) {
return [
{
x: data.data[xKeys[0]],
y: data.data[yKeys[0]],
x: vis.x ? vis.x : data.data[xKeys[0]],
y: vis.y ? vis.y : data.data[yKeys[0]],
...traceConfig,
},
];
Expand Down Expand Up @@ -213,30 +216,16 @@ export const GroupDashboards = ({
visXaxisKeys,
visYaxisKeys,
visGroupingKeys,
prometheusQueries[index].vis.config
prometheusQueries[index].vis
);

// metric
// jdbc
// metric.datarows.forEach((row) => {
// xaxisData.push(row[0]);
// yaxisData.push(row[1]);
// // row[0] = new Date(row[0]).toISOString();
// });
return (
<div key={prometheusQueries[index].title + index} data-grid={layouts.lg[index]}>
<EuiPanel paddingSize="m">
<EuiText>
<h4>{prometheusQueries[index].title}</h4>
</EuiText>
<Plt
// data={[
// {
// x: xaxisData,
// y: yaxisData,
// type: prometheusQueries[index].vis?.type || 'scatter',
// },
// ]}
data={visualizationData}
layout={{
// width: 200, // Set custom width
Expand All @@ -246,9 +235,6 @@ export const GroupDashboards = ({
showlegend: true,
...(prometheusQueries[index].vis.layout || {}),
xaxis: {
// title: {
// text: prometheusQueries[index].vis.x || metric.schema[0]?.name || '',
// },
showgrid: true,
zeroline: false,
rangemode: 'normal',
Expand All @@ -262,31 +248,9 @@ export const GroupDashboards = ({
zeroline: false,
rangemode: 'normal',
},
colorway: PLOTLY_COLOR
colorway: PLOTLY_COLOR,
}}
// config={prometheusQueries[index].vis.component.config}
/>
{/* <Visualization
visualizations={{
data: {
userConfigs: {
dataConfig: {
span: {},
[GROUPBY]: metric.schema[1]?.name,
[AGGREGATIONS]: metric.schema[0]?.name,
queryMetaData: {},
metricType: '',
},
},
explorer: {
explorerData: { schema: metric.schema, jsonData: metric.jsonData },
},
},
vis: {
component: prometheusQueries[index].vis.component,
},
}}
/> */}
</EuiPanel>
<EuiSpacer size="m" />
</div>
Expand Down
63 changes: 49 additions & 14 deletions public/components/kubernetes/configurations/configurations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,26 @@ export const KubernetesConfiguration = () => {
const [osUsername, setOsUsername] = useState('');
const [osPassword, setOsPassword] = useState('');
const [toasts, setToasts] = useState([]);
const [selectedDatasource, setSelectedDatasource] = useState(''); // For tracking the selected datasource

// Sample list of available OpenSearch datasources
const availableDatasources = [
{ value: '', text: 'Select an OpenSearch Datasource' },
{ value: 'localcluster', text: 'localcluster' },
];

const handleDatasourceChange = (e) => {
const value = e.target.value;
setSelectedDatasource(value);

// If "Custom URI" is selected, clear the osUri input field
if (value === 'custom') {
setOsUri('');
} else {
// Set osUri to the selected datasource's value
setOsUri(value);
}
};

const addToast = () => {
const newToast = {
Expand Down Expand Up @@ -77,10 +97,12 @@ export const KubernetesConfiguration = () => {
<EuiText>
<ul>
<li>
Ensure that you have access to a <strong>Prometheus</strong> instance and a <strong>Kubernetes cluster</strong> for providing Access Key and Secret Key.
Ensure that you have access to a <strong>Prometheus</strong> instance and a{' '}
<strong>Kubernetes cluster</strong> for providing Access Key and Secret Key.
</li>
<li>
Have an <strong>OpenSearch compatible domain</strong> as a datasource, or enable a local OpenSearch cluster to create the Prometheus datasource in OpenSearch.
Have an <strong>OpenSearch compatible domain</strong> as a datasource, or enable a
local OpenSearch cluster to create the Prometheus datasource in OpenSearch.
</li>
</ul>
</EuiText>
Expand All @@ -91,7 +113,7 @@ export const KubernetesConfiguration = () => {
{/* Datasource Selector Section */}
<EuiPanel paddingSize="m">
<EuiTitle size="s">
<h2>Datasource Selector</h2>
<h2>Datasource Configurations</h2>
</EuiTitle>
<EuiSpacer size="s" />
<EuiForm component="form">
Expand All @@ -100,12 +122,22 @@ export const KubernetesConfiguration = () => {
buttonContent="OpenSearch Datasource Configuration"
paddingSize="m"
>
<EuiFormRow label="OpenSearch URI" helpText="Enter the URI for your OpenSearch instance.">
{/* <EuiFormRow label="OpenSearch URI" helpText="Enter the URI for your OpenSearch instance.">
<EuiFieldText
placeholder="https://localhost:9200"
value={osUri}
onChange={(e) => setOsUri(e.target.value)}
/>
</EuiFormRow> */}
<EuiFormRow
label="OpenSearch Datasource"
helpText="Select or enter the URI for your OpenSearch instance."
>
<EuiSelect
options={availableDatasources}
value={selectedDatasource}
onChange={handleDatasourceChange}
/>
</EuiFormRow>
<EuiFormRow label="OpenSearch Username">
<EuiFieldText
Expand Down Expand Up @@ -138,7 +170,10 @@ export const KubernetesConfiguration = () => {
onChange={(e) => setDatasourceName(e.target.value)}
/>
</EuiFormRow>
<EuiFormRow label="Prometheus URI" helpText="Enter the URI for your Prometheus instance.">
<EuiFormRow
label="Prometheus URI"
helpText="Enter the URI for your Prometheus instance."
>
<EuiFieldText
placeholder="https://prometheus.example.com"
value={prometheusUri}
Expand Down Expand Up @@ -173,17 +208,17 @@ export const KubernetesConfiguration = () => {

<EuiSpacer size="l" />

{/* Create Datasource Button */}
<EuiButton fill color="primary" onClick={handleCreateDatasource}>
Create Prometheus Datasource
</EuiButton>
{/* Create Datasource Button in Flex Item */}
<EuiFlexGroup justifyContent="flexStart">
<EuiFlexItem grow={false}>
<EuiButton fill color="primary" onClick={handleCreateDatasource}>
Create Prometheus Datasource
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>

{/* Toast Notifications */}
<EuiGlobalToastList
toasts={toasts}
dismissToast={removeToast}
toastLifeTimeMs={6000}
/>
<EuiGlobalToastList toasts={toasts} dismissToast={removeToast} toastLifeTimeMs={6000} />
</EuiPageBody>
</EuiPage>
);
Expand Down
39 changes: 38 additions & 1 deletion public/components/kubernetes/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@ export const Home = () => {
xKeys: [`k8s_node_name`],
yKeys: ['running_node_count'],
gKeys: [],
value: 2
},
},
{
Expand Down Expand Up @@ -167,6 +168,7 @@ export const Home = () => {
xKeys: [`k8s_node_name`],
yKeys: ['running_node_count'],
gKeys: [],
value: 10
},
},
{
Expand Down Expand Up @@ -194,12 +196,13 @@ export const Home = () => {
xKeys: [`k8s_node_name`],
yKeys: ['running_node_count'],
gKeys: [],
value: 40
},
},
{
cluster: 'eks-cluster-with-vpc',
name: 'runningPodsCategory',
title: 'Failed Pods',
title: 'Running 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',
Expand All @@ -223,6 +226,8 @@ export const Home = () => {
xKeys: [`pod`],
yKeys: ['running_node_count'],
gKeys: [],
labels: ['pool-e1ro5g0nq-rk82j', 'pool-e1ro5g0nq-rk82o'],
values: [40, 28]
},
},
{
Expand Down Expand Up @@ -251,6 +256,38 @@ export const Home = () => {
gKeys: [],
},
},
{
cluster: 'eks-cluster-with-vpc',
name: 'diskIO',
title: 'Disk usage',
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: 'bar',
hole: .4,
textposition: 'inside',
showlegend: true
},
// layout: {
// width: 267,
// height: 190
// },
xKeys: [`pod`],
yKeys: ['running_node_count'],
gKeys: [],
y: [60, 13], // Sample values for Read and Write
x: ['pool-e1ro5g0nq-rk82j', 'pool-e1ro5g0nq-rk82o'],
},
},

// {
// cluster: 'play-db-cluster',
// name: 'clusterMemoryUsage',
Expand Down
Loading

0 comments on commit 4b5f07d

Please sign in to comment.