Merge pull request #10 from ovh/dev/moutqye/fix

Dev/moutqye/fix
ovh · Jan 24, 2025 · 84c2bdd · 84c2bdd
2 parents e7b8f0f + f6c4161
commit 84c2bdd
Show file tree

Hide file tree

Showing 4 changed files with 203 additions and 141 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "akvorado",
-  "version": "1.0.33",
+  "version": "1.0.34",
   "description": "Akvorado netflow data source using akvorado api",
   "scripts": {
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",

diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from 'react';
+import React, { ChangeEvent, useEffect, useState } from 'react';
 import { InlineField, Input, Stack, Select, AsyncMultiSelect, useTheme2, CollapsableSection } from '@grafana/ui';
 import { QueryEditorProps, SelectableValue, AppEvents } from '@grafana/data';
 import { DataSource, queryTypes, queryUnits } from '../datasource';
@@ -17,12 +17,27 @@ const appEvents = getAppEvents();
 type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
 
 export function QueryEditor({ query, onChange, datasource }: Props) {
-  const { limit, type, unit, dimensions, expression } = query;
+  const { limit, type, unit, dimensions, expression, truncatev4, truncatev6, topType } = query;
   const [uiDimensions, setUIDimensions] = useState<Array<SelectableValue<string>>>(
     dimensions?.map((v) => ({ label: v, value: v })) ?? [{ label: 'SrcAS', value: 'SrcAS' }]
   );
+  const [containsAddr, setContainsAddr] = useState(false);
+
+  useEffect(() => {
+    const addrCheck = uiDimensions.some(dim => dim.value != undefined && dim.value.includes('Addr'));
+    setContainsAddr(addrCheck);
+  }, [uiDimensions]);
+
+  const [uiExpression, setUIExpression] = useState<string>(expression || DEFAULT_QUERY.expression!!);
+  const [uiTopType, setUITopType] = useState<string>(topType || DEFAULT_QUERY.topType!!);
+  // Handler for the dropdown change event
+  const handleLimitTypeChange = (item: SelectableValue<string>) => {
+    const value = item.value!!;
+    setUITopType(value);
+    onChange({ ...query, topType: value });
+  };
+
 
-  const [uiExpression, setUIExpression] = useState<string>(expression || DEFAULT_QUERY.expression !!);
 
 
   const getFilterTheme = (isDark: boolean) => [
@@ -82,6 +97,7 @@ export function QueryEditor({ query, onChange, datasource }: Props) {
     }
     onChange({ ...query, dimensions: newdimensions, error: myerror });
   };
+
   const onTypeChange = (item: SelectableValue<string>) => {
     let myerror: string | undefined;
     if (item.value === 'sankey' && dimensions && dimensions.length < 2) {
@@ -99,7 +115,18 @@ export function QueryEditor({ query, onChange, datasource }: Props) {
   };
 
   const onLimitChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange({ ...query, limit: parseInt(event.target.value, 10) });
+    onChange({ ...query, limit: event.target.value });
+  };
+
+  // Handler for uiTruncatedV4 input change
+  const onTruncatedV4Change = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...query, truncatev4: event.target.value });
+  }
+
+
+  // Handler for uiTruncatedV6 input change
+  const onTruncatedV6Change = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...query, truncatev6: event.target.value });
   };
 
   const queryTypeOptions = () =>
@@ -112,6 +139,10 @@ export function QueryEditor({ query, onChange, datasource }: Props) {
       return { label: v, value: v };
     });
 
+  const queryTopOptions = () => {
+    return [{ label: "Avg", value: "avg" }, { label: "Max", value: "max" }]
+  }
+
   return (
 
     <Stack gap={1} direction={'column'}>
@@ -139,25 +170,11 @@ export function QueryEditor({ query, onChange, datasource }: Props) {
             value={limit || DEFAULT_LIMIT}
             onChange={onLimitChange}
             placeholder="Enter limit"
-            onKeyDown={(event) => {
-              const key = event.key;
-              if (
-                !(
-                  /[0-9]/.test(key) ||
-                  key === 'Backspace' ||
-                  key === 'Delete' ||
-                  key === 'ArrowLeft' ||
-                  key === 'ArrowRight'
-                )
-              ) {
-                event.preventDefault();
-              }
-            }}
             width={10}
           />
         </InlineField>
-        </Stack>
-        <Stack>
+      </Stack>
+      <Stack>
         <InlineField label="Filters" tooltip="Filters for the query" grow={true} labelWidth={16}>
           <CodeMirror
             value={uiExpression}
@@ -202,6 +219,40 @@ export function QueryEditor({ query, onChange, datasource }: Props) {
           </InlineField>
         </CollapsableSection>
       </Stack>
+      {containsAddr && (
+        <Stack>
+          <InlineField label="IPv4 /x" labelWidth={16} tooltip="IPv4 /x">
+            <Input
+              id="uiTruncatedV4"
+              type="number"
+              value={truncatev4 || '32' }
+              onChange={onTruncatedV4Change}
+              min={0}
+              max={32}
+            />
+          </InlineField>
+          <InlineField label="IPv6 /x" labelWidth={16} tooltip="IPv6 /x">
+            <Input
+              id="uiTruncatedV6"
+              type="number"
+              value={truncatev6 || '128' }
+              onChange={onTruncatedV6Change}
+              min={0}
+              max={128}
+            />
+          </InlineField>
+          <InlineField label="Top by" labelWidth={16} tooltip="Way to fetch the limit">
+            <Select
+              id="uiLimitType"
+              value={uiTopType}
+              onChange={handleLimitTypeChange}
+              options={queryTopOptions()}
+              width={20}
+            >
+            </Select>
+          </InlineField>
+        </Stack>
+      )}
     </Stack >