Added sampling information in frontend config

config/sample-frontend-config.yaml

@@ -22,3 +22,4 @@ quickFilters:
       dst_kind: 'Service'
 alertNamespaces:
   - netobserv
+sampling: 50

pkg/handler/frontend-config.go

@@ -20,6 +20,7 @@ type frontendConfig struct {
 	} `yaml:"portNaming,omitempty" json:"portNaming"`
 	QuickFilters    []QuickFilter `yaml:"quickFilters" json:"quickFilters"`
 	AlertNamespaces []string      `yaml:"alertNamespaces" json:"alertNamespaces"`
+	Sampling        int           `yaml:"sampling" json:"sampling"`
 }
 
 func readConfigFile(filename string) (*frontendConfig, error) {

web/locales/en/plugin__netobserv-plugin.json

@@ -235,6 +235,8 @@
   "Filtered byte rate": "Filtered byte rate",
   "Filtered sum of top-k packets / filtered total packets": "Filtered sum of top-k packets / filtered total packets",
   "packets": "packets",
+  "Configuration": "Configuration",
+  "Sampling": "Sampling",
   "Cardinality": "Cardinality",
   "(top {{count}} metrics)": "(top {{count}} metrics)",
   "(top {{count}} metrics)_plural": "(top {{count}} metrics)",

web/src/api/routes.ts

@@ -96,7 +96,8 @@ export const getConfig = (): Promise<Config> => {
           : defaultConfig.portNaming.portNames
       },
       quickFilters: r.data.quickFilters,
-      alertNamespaces: r.data.alertNamespaces
+      alertNamespaces: r.data.alertNamespaces,
+      sampling: r.data.sampling
     };
   });
 };

web/src/components/query-summary/summary-panel.css

@@ -7,8 +7,13 @@
   flex-direction: column !important;
 }
 
+.summary-config-item {
+  padding-left: 15px;
+  flex-direction: column !important;
+}
+
 #cardinality-accordion {
   display: flex;
   flex-direction: column;
   gap: 0;
-}
+}

web/src/components/query-summary/summary-panel.tsx

@@ -29,6 +29,7 @@ import { Stats, TopologyMetrics } from '../../api/loki';
 import './summary-panel.css';
 import { MetricType } from '../../model/flow-query';
 import { MetricsQuerySummaryContent } from './metrics-query-summary';
+import { config } from '../../utils/config';
 
 type TypeCardinality = {
   type: string;
@@ -119,6 +120,15 @@ export const SummaryPanelContent: React.FC<{
     );
   };
 
+  const configContent = () => {
+    return (
+      <TextContent className="summary-text-container">
+        <Text component={TextVariants.h3}>{`${t('Configuration')}`}</Text>
+        <Text className="summary-config-item">{`${t('Sampling')}: ${config.sampling}`}</Text>
+      </TextContent>
+    );
+  };
+
   const cardinalityContent = () => {
     //regroup all k8s objects per type + namespace
     const namespaces: string[] = [];
@@ -317,6 +327,8 @@ export const SummaryPanelContent: React.FC<{
 
       {cardinalityContent()}
       {/*TODO: NETOBSERV-225 for extra stats on query*/}
+
+      {configContent()}
     </>
   );
 };

web/src/model/config.ts

@@ -7,6 +7,7 @@ export type Config = {
   };
   quickFilters: RawQuickFilter[];
   alertNamespaces: string[];
+  sampling: number;
 };
 
 export const defaultConfig: Config = {
@@ -15,5 +16,6 @@ export const defaultConfig: Config = {
     portNames: new Map()
   },
   quickFilters: [],
-  alertNamespaces: ['netobserv']
+  alertNamespaces: ['netobserv'],
+  sampling: 50
 };