Merge branch 'main' into feat/export

# Conflicts:
#	src/components/SimplePanel.tsx

.github/workflows/ci.yml

@@ -20,17 +20,24 @@ jobs:
         with:
           node-version: 16
           # cache: 'npm'
+
       - name: Install dependencies
         run: |
           npm install 
           # npm ci
+      - name: Install Angular dependencies
+        run: |
+           cd ngx-flow
+           npm install
       - name: Check types
         run: npm run typecheck
       - name: Lint
         run: npm run lint
       - name: Unit tests
         run: npm run test:ci
-      - name: Build frontend
+      - name: Build Angular frontend
+        run: npm run build:component       
+      - name: Build and test frontend
         run: npm run build
 
       - name: Check for backend

.github/workflows/release.yml

@@ -21,13 +21,19 @@ jobs:
       - name: Setup Go environment
         uses: actions/setup-go@v3
         with:
-          go-version: '1.19'
+          go-version: '1.22'
 
       - name: Install dependencies
         run: |
            npm install
            # npm ci
-
+      - name: Install Angular dependencies
+        run: |
+           cd ngx-flow
+           npm install
+           # npm ci
+      - name: Build Angular frontend
+        run: npm run build:component       
       - name: Build and test frontend
         run: npm run build
 

README.md

@@ -17,8 +17,8 @@ Grafana 10+ Flow Diagram Visualization plugin
 ### Installation
 Allow and Install the unsigned plugin, ie:
 ```
-      - GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS=qxip-flow-panel
-      - GF_INSTALL_PLUGINS=https://github.com/metrico/grafana-flow/releases/download/v10.0.8/qxip-flow-panel-10.0.8.zip;qxip-flow-panel"
+- GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS=qxip-flow-panel
+- GF_INSTALL_PLUGINS=https://github.com/metrico/grafana-flow/releases/download/v10.0.10/qxip-flow-panel-10.0.10.zip;qxip-flow-panel"
 ```
 
 ### Panel Options

ngx-flow/projects/ngx-flow/src/lib/ngx-flow.component.ts

@@ -110,6 +110,7 @@ export class NgxFlowComponent implements OnInit {
             srcAlias: SRC,
 
             typeItem: "SIP",
+            hash: i.hash
         }
     }
 

ngx-flow/projects/ngx-flow/src/tab-flow/tab-flow.component.html

@@ -80,7 +80,7 @@ <h1 style="text-align: center; padding: 8rem; color: #aaa">No Data</h1>
         [isGroupByAlias]="_isCombineByAlias"
         [isSimplify]="isSimplify"
         [isAbsolute]="isAbsolute"
-        (itemClick)="onClickMessage($event.idx, $event.event, item)"
+        (itemClick)="onClickMessage(item.hash, $event.event, item)"
       ></app-flow-item>
       <div style="height: 60px"></div>
     </div>
@@ -114,8 +114,8 @@ <h1 style="text-align: center; padding: 8rem; color: #aaa">No Data</h1>
             [isGroupByAlias]="_isCombineByAlias"
             [isSimplify]="isSimplify"
             [isAbsolute]="isAbsolute"
-            (itemClick)="onClickMessage($event.idx, $event.event, item)"
-          >
+            (itemClick)="onClickMessage(item.hash, $event.event, item)"
+          > <!-- Decrease index by one due to spacer counting as zeroth index. -->
           </app-flow-item>
         </ng-template>
         <ng-template ngSwitchCase="bottom">

package.json

@@ -3,7 +3,8 @@
     "version": "10.0.13",
     "description": "Plugin providing Flow diagram for Grafana",
     "scripts": {
-        "build": "cd ./ngx-flow && npm run build:component && cd .. && webpack -c ./.config/webpack/webpack.config.ts --env production",
+        "build:component": "cd ./ngx-flow && npm run build:component",
+        "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
         "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
         "test": "jest --watch --onlyChanged",
         "test:ci": "jest --passWithNoTests --maxWorkers 4",

src/components/SimplePanel.tsx

@@ -26,6 +26,7 @@ import {
     Dropdown,
     Menu
 } from '@grafana/ui';
+import { hash } from 'helpers/hash';
 import { convertDateToFileName } from 'helpers/convertDateToFileName';
 
 
@@ -228,7 +229,7 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }: a
     const [flowData, setFlowData] = React.useState({ actors: [], data: [] });
     const [modalIsOpen, setModalIsOpen] = React.useState(false);
     const [modalData, setModalData] = React.useState({});
-    const [modalDataFields, setModalDataFields] = React.useState([]);
+    const [modalDataFields, setModalDataFields] = React.useState<Map<string, any>>();
 
     const onModalClose = () => {
         setModalIsOpen(false);
@@ -378,9 +379,8 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }: a
         if (fields) {
             const [firsField]: any = fields;
             const sortData = formattingDataAndSortIt(fields, options.sortoption);
-            setModalDataFields(sortData);
             const outData = firsField?.values;
-
+            const map = new Map();
             if (outData) {
                 valueLabelsName = Object.keys(outData?.[0] || {});
                 setFlowData({
@@ -393,6 +393,8 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }: a
                             }
                             return labelItem[optionArr] || '';
                         };
+                        const itemHash = hash(JSON.stringify(item))
+                        map.set(itemHash, item);
                         return {
                             messageID: _(options.colorGenerator) || 'Title',
                             subTitle: options.showbody && message,
@@ -402,18 +404,19 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }: a
                             aboveArrow: _(options.aboveArrow) || '',
                             belowArrow: _(options.belowArrow) || '',
                             sourceLabel: _(options.sourceLabel) || '',
-                            destinationLabel: _(options.destinationLabel) || ''
+                            destinationLabel: _(options.destinationLabel) || '',
+                            hash: itemHash
                         }
                     })
                 })
-
+                setModalDataFields(map);
             }
         }
         /* eslint-disable-next-line */
     }, [data, options]);
 
     ngxFlowClickHandler = (e: any) => {
-        const details: any = modalDataFields[e.detail];
+        const details: any = modalDataFields?.get(e.detail)
         if (typeof details.labels === 'object') {
             details.labels = JSON.stringify(details.labels);
         }

src/helpers/hash.ts

@@ -0,0 +1,19 @@
+export function hash(str: string, lenHash = 32) {
+    lenHash = lenHash || 32;
+    str = str || "";
+    let ar = str.split('').map((a) => a.charCodeAt(0)),
+        s2alength = ar.length || 1,
+        i = ar.length ? ar.reduce((p, c) => p + c) : 1,
+        s = "",
+        A,
+        B,
+        k = 0,
+        tan = Math.tan;
+    while (s.length < lenHash) {
+        A = ar[k++ % s2alength] || 0.5;
+        B = ar[k++ % s2alength ^ lenHash] || 1.5 ^ lenHash;
+        i = i + (A ^ B) % lenHash;
+        s += tan(i * B / A).toString(16).split('.')[1].slice(0, 10);
+    }
+    return s.slice(0, lenHash);
+}