diff --git a/ngx-flow/projects/ngx-flow/src/lib/ngx-flow.component.ts b/ngx-flow/projects/ngx-flow/src/lib/ngx-flow.component.ts index c42e7d1..38d1b8c 100644 --- a/ngx-flow/projects/ngx-flow/src/lib/ngx-flow.component.ts +++ b/ngx-flow/projects/ngx-flow/src/lib/ngx-flow.component.ts @@ -87,14 +87,13 @@ export class NgxFlowComponent implements OnInit { description: i.aboveArrow || '', destination_ip: dist.ip, destination_port: dist.port, - diff: ' ', - diff_absolute: i.subTitle || '', - diff_num: ' ', + details: i.details, dstAlias: DIST, id: 0, info_date: i.belowArrow || '... ', - info_date_absolute: i.subTitle || '... ', + info_date_absolute: i.details || '... ', ipDirection: SRC + ' > ' + DIST, + line: i.line, messageData: null, method: ' ', method_text: i.title || i.messageID, @@ -110,7 +109,7 @@ export class NgxFlowComponent implements OnInit { srcAlias: SRC, typeItem: "SIP", - hash: i.hash + hash: i.hash, } } diff --git a/ngx-flow/projects/ngx-flow/src/models/flow.model.ts b/ngx-flow/projects/ngx-flow/src/models/flow.model.ts index caf8c14..28de49e 100644 --- a/ngx-flow/projects/ngx-flow/src/models/flow.model.ts +++ b/ngx-flow/projects/ngx-flow/src/models/flow.model.ts @@ -8,7 +8,7 @@ export interface FlowItem { destination: string; title?: string; - subTitle?: string; + details?: string; // hidden in Simplified mode aboveArrow?: string; @@ -27,7 +27,7 @@ export interface ArrowStyling { } export interface TextColors { title?: string; - subTitle?: string; + details?: string; // hidden in Simplified mode aboveArrow?: string; diff --git a/ngx-flow/projects/ngx-flow/src/tab-flow/flow-item/flow-item.component.html b/ngx-flow/projects/ngx-flow/src/tab-flow/flow-item/flow-item.component.html index 77ac933..1cb58f6 100644 --- a/ngx-flow/projects/ngx-flow/src/tab-flow/flow-item/flow-item.component.html +++ b/ngx-flow/projects/ngx-flow/src/tab-flow/flow-item/flow-item.component.html @@ -100,11 +100,12 @@
{{ - isAbsolute - ? item.diff_absolute - : item.diff - ? item.diff - : "+0.00ms" + item.details + }} +
+
+ {{ + item.line }}
diff --git a/ngx-flow/src/app/app.component.ts b/ngx-flow/src/app/app.component.ts index 9f72ba7..4b10ed5 100644 --- a/ngx-flow/src/app/app.component.ts +++ b/ngx-flow/src/app/app.component.ts @@ -53,7 +53,7 @@ export class AppComponent { { messageID: 'some unique Id as string 1', title: 'Title', - subTitle: 'subTitle', + details: 'details', aboveArrow: 'aboveArrow', belowArrow: 'belowArrow', source: 'B', diff --git a/package.json b/package.json index 877401d..d6a68cb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "qxip-flow-panel", - "version": "10.1.0", + "version": "10.1.1", "description": "Plugin providing Flow diagram for Grafana", "scripts": { "build:component": "cd ./ngx-flow && npm run build:component", diff --git a/src/components/CopyText/CopyText.tsx b/src/components/CopyText/CopyText.tsx new file mode 100644 index 0000000..2982930 --- /dev/null +++ b/src/components/CopyText/CopyText.tsx @@ -0,0 +1,33 @@ +import React, { FC, useRef, useState } from 'react'; +import { IconButton } from '@grafana/ui'; + + +export const CopyText: FC<{ text: string }> = ({ text }) => { + const [copied, setCopied] = useState(false); + const textAreaRef: any = useRef(null); + const copy = () => { + if (navigator && navigator.clipboard) { + navigator.clipboard.writeText(text); + setCopied(true); + } else { + if (textAreaRef && textAreaRef.current) { + textAreaRef.current.focus(); + textAreaRef.current.select(); + document.execCommand('copy'); + } + setCopied(false); + } + }; + return ( + <> +