Merge pull request #42 from tiithansen/ingress-page

Multiple ingress improvements
tiithansen · Jul 31, 2024 · 9db98ec · 9db98ec
2 parents dc2ff53 + 644c7db
commit 9db98ec
Show file tree

Hide file tree

Showing 14 changed files with 423 additions and 69 deletions.
diff --git a/src/components/AlertsTable/index.tsx b/src/components/AlertsTable/index.tsx
@@ -28,14 +28,6 @@ const KNOWN_SEVERITY_COLORS: SeverityColors  = {
     'info': 'primary',
 }
 
-const namespaceVariable = createNamespaceVariable();
-
-const searchVariable = new TextBoxVariable({
-    name: 'search',
-    label: 'Search',
-    value: '',
-});
-
 const columns: Array<Column<TableRow>> = [
     {
         id: 'alertname',
@@ -188,8 +180,12 @@ export function AlertsTable(labelFilters?: LabelFilters, showVariableControls =
 
     const variables = new SceneVariableSet({
         variables: shouldCreateVariables ? [
-            namespaceVariable,
-            searchVariable,
+            createNamespaceVariable(),
+            new TextBoxVariable({
+                name: 'alertSearch',
+                label: 'Search',
+                value: '',
+            }),
         ]: []
     })
 

diff --git a/src/components/ResourceBreakdownTable/index.tsx b/src/components/ResourceBreakdownTable/index.tsx
@@ -14,14 +14,6 @@ import { Metrics } from 'metrics/metrics';
 import { SortingState } from 'common/sortingHelpers';
 import { AsyncTable, Column, ColumnSortingConfig } from 'components/AsyncTable';
 
-const namespaceVariable = createNamespaceVariable();
-
-const searchVariable = new TextBoxVariable({
-    name: 'search',
-    label: 'Search',
-    value: '',
-});
-
 interface TableRow {
     cluster: string;
     namespace: string;
@@ -360,8 +352,12 @@ export const ResourceBreakdownTable = () => {
 
     const variables = new SceneVariableSet({
         variables: [
-            namespaceVariable,
-            searchVariable,
+            createNamespaceVariable(),
+            new TextBoxVariable({
+                name: 'namespaceSearch',
+                label: 'Search',
+                value: '',
+            }),
         ]
     });
 

diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
@@ -4,14 +4,9 @@ import { Clusters } from '../../pages/Clusters';
 import { Workloads } from '../../pages/Workloads';
 import { prefixRoute } from '../../utils/utils.routing';
 import { ROUTES } from '../../constants';
-import { usePluginProps } from 'utils/utils.plugin';
 import { Network } from 'pages/Network';
 
-export const Routes = () => {
-
-  const props = usePluginProps();
-  console.log(props);
-
+export const Routes = () => {  
   return (
     <Switch>
       <Route path={prefixRoute(`${ROUTES.Clusters}`)} component={Clusters} />

diff --git a/src/metrics/metrics.ts b/src/metrics/metrics.ts
@@ -356,6 +356,8 @@ export const Metrics = {
         name: 'kube_ingressclass_info',
         labels:{
             cluster: 'cluster',
+            ingressClass: 'ingressclass',
+            controller: 'controller',
         }
     },
     // Services

diff --git a/src/pages/Clusters/Clusters.tsx b/src/pages/Clusters/Clusters.tsx
@@ -17,18 +17,16 @@ import { getNodesScene } from './tabs/Nodes/Nodes';
 import { usePluginProps } from 'utils/utils.plugin';
 import { NodePage } from './pages/Node/Node';
 
-const timeRange = new SceneTimeRange({
-    from: 'now-1h',
-    to: 'now',
-});
-
 function getScene({ datasource }: { datasource: string }) {
     return new SceneApp({
         pages: [
             new SceneAppPage({
                 title: 'Clusters',
                 url: prefixRoute(`${ROUTES.Clusters}`),
-                $timeRange: timeRange,
+                $timeRange: new SceneTimeRange({
+                    from: 'now-1h',
+                    to: 'now',
+                }),
                 $variables: new SceneVariableSet({
                     variables: [
                         new DataSourceVariable({
@@ -60,7 +58,6 @@ function getScene({ datasource }: { datasource: string }) {
                         getScene: () => getNodesScene(),
                     }),
                 ],
-                getScene: getOverviewScene,
                 drilldowns: [
                     {
                         routePath: prefixRoute(`${ROUTES.Clusters}/nodes/:cluster/:name`),

diff --git a/src/pages/Clusters/tabs/Nodes/Nodes.tsx b/src/pages/Clusters/tabs/Nodes/Nodes.tsx
@@ -20,14 +20,6 @@ import { SortingState } from 'common/sortingHelpers';
 import { prefixRoute } from 'utils/utils.routing';
 import { ROUTES } from '../../../../constants';
 
-const clusterVariable = createClusterVariable();
-
-const searchVariable = new TextBoxVariable({
-    name: 'search',
-    label: 'Search',
-    value: '',
-});
-
 function determineMemoryUsageColor(row: TableRow) {
     let usageColor: TextColor = 'primary'
     if (row.memory.usage < 50) {
@@ -273,8 +265,12 @@ export const getNodesScene = () => {
 
     const variables = new SceneVariableSet({
         variables: [
-            clusterVariable,
-            searchVariable
+            createClusterVariable(),
+            new TextBoxVariable({
+                name: 'search',
+                label: 'Search',
+                value: '',
+            }),
         ]
     })
 

diff --git a/src/pages/Network/Network.tsx b/src/pages/Network/Network.tsx
@@ -13,6 +13,7 @@ import { usePluginProps } from 'utils/utils.plugin';
 import { createTimeRange, createTopLevelVariables } from '../../common/variableHelpers';
 import { getIngressesScene } from './tabs/Ingresses/Ingresses';
 import { getServicesScene } from './tabs/Services/Services';
+import { IngressPage } from './pages/ingresses';
 
 function getScene({ datasource }: { datasource: string }) {
 
@@ -48,6 +49,12 @@ function getScene({ datasource }: { datasource: string }) {
                 }),
             ],
             getScene: getIngressesScene,
+            drilldowns: [
+                {
+                    routePath: prefixRoute(`${ROUTES.Network}/ingresses/:namespace/:name`),
+                    getPage: IngressPage
+                },
+            ],
         }),
         ]
     })

diff --git a/src/pages/Network/components/nginx/NginxPanels.tsx b/src/pages/Network/components/nginx/NginxPanels.tsx
@@ -0,0 +1,66 @@
+import { PanelBuilders, SceneQueryRunner } from "@grafana/scenes"
+
+export function getNginxLatencyPanel(ingress: string, namespace: string) {
+    return PanelBuilders.timeseries()
+        .setTitle('Latency P95 [5m]')
+        .setData(
+            new SceneQueryRunner({
+                datasource: {
+                    uid: '$datasource',
+                    type: 'prometheus',
+                },
+                queries: [
+                    {
+                        refId: 'latency',
+                        expr: `
+                            histogram_quantile(
+                                0.95,
+                                sum(
+                                    rate(
+                                        nginx_ingress_controller_request_duration_seconds_bucket{
+                                            cluster="$cluster",
+                                            ingress="${ingress}",
+                                            exported_namespace="${namespace}",
+                                        }[5m]
+                                    )
+                                ) by (host, path, le)
+                            )
+                        `,
+                        legendFormat: '{{host}} - {{path}}',
+                    },
+                ],
+            })
+        )
+        .build()
+}
+
+export function getNginxRequestRatePanel(ingress: string, namespace: string) {
+    return PanelBuilders.timeseries()
+        .setTitle('Request Rate [5m]')
+        .setData(
+            new SceneQueryRunner({
+                datasource: {
+                    uid: '$datasource',
+                    type: 'prometheus',
+                },
+                queries: [
+                    {
+                        refId: 'rate',
+                        expr: `
+                            sum(
+                                rate(
+                                    nginx_ingress_controller_requests{
+                                        cluster="$cluster",
+                                        ingress="${ingress}",
+                                        exported_namespace="${namespace}",
+                                    }[5m]
+                                )
+                            ) by (host, path, status)
+                        `,
+                        legendFormat: '[{{status}}] {{host}} - {{path}}',
+                    },
+                ],
+            })
+        )
+        .build()
+}