feat(UISettings): add reShortNameFromAddress [YTFRONT-3861]

ytsaurus · Sep 22, 2023 · 0e953dd · 0e953dd
1 parent 13ab2a0
commit 0e953dd
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 34 deletions.
diff --git a/packages/ui/src/shared/ui-settings.ts b/packages/ui/src/shared/ui-settings.ts
@@ -66,10 +66,18 @@ export interface UISettings {
     operationsMonitoring?: UISettingsMonitoring;
 
     /**
-     * Allows to define regular expression to get hash-part from version of node by named group 'hash'
+     * Allows to define regular expression to extract hash-part from version of node by named group 'hash'
      * @example reHashFromNodeVersion: '[^~]+(?<hash>[^+]+)'
      */
     reHashFromNodeVersion?: string;
+
+    /**
+     * Allows to define regular expression to extract short-name from full address of host by named group 'shortname'.
+     *  Also it supports optional named group 'suffix' that will pe appended to shortname as is.
+     * @example reShortNameFromAddress: '(?<shortname>.*)((\\.msk\\.my-domain\\.ru)|(\\.vla\\.my-domain\\.net))'
+     * @example reShortNameFromAddress: '(?<shortname>.*)((\\.msk\\.my-domain\\.ru)|(\\.vla\\.my-domain\\.net))'
+     */
+    reShortNameFromAddress?: string;
 }
 
 export interface UISettingsMonitoring {

diff --git a/packages/ui/src/ui/containers/Host/Host.tsx b/packages/ui/src/ui/containers/Host/Host.tsx
@@ -6,35 +6,73 @@ import {getCluster} from '../../store/selectors/global';
 import Link from '../../components/Link/Link';
 import ClipboardButton from '../../components/ClipboardButton/ClipboardButton';
 import {Tooltip} from '../../components/Tooltip/Tooltip';
+import {uiSettings} from '../../config';
 
 import './Host.scss';
 
+function makeRegexpFromSettings() {
+    try {
+        return new RegExp(uiSettings.reShortNameFromAddress!);
+    } catch {
+        return undefined;
+    }
+}
+
+const reShortName = makeRegexpFromSettings();
+
+function calcShortNameByRegExp(address: string) {
+    if (reShortName) {
+        const res = reShortName?.exec(address);
+        if (res?.groups?.shortname) {
+            return [res.groups.shortname, res.groups.suffix].filter(Boolean).join('');
+        }
+    }
+    return undefined;
+}
+
+function calcShortNameByMinus(address: string) {
+    const first = address.indexOf('-');
+    const second = address.indexOf('-', first + 1);
+    const res = address.substring(0, second);
+    if (res.length) {
+        return res;
+    }
+    const dotIndex = address.indexOf('.');
+    return dotIndex === -1 ? address : address.substring(0, dotIndex);
+}
+
 const block = cn('yt-host');
 
 interface Props {
     address: string;
     className?: string;
     copyBtnClassName?: string;
+    onClick?: () => void;
+    useText?: boolean;
+    allowByRegexp?: boolean;
 }
 
-export function Host({address = '', className, copyBtnClassName}: Props) {
+export function Host({address = '', className, copyBtnClassName, onClick, useText}: Props) {
     const host = React.useMemo(() => {
-        const first = address.indexOf('-');
-        const second = address.indexOf('-', first + 1);
-        const res = address.substring(0, second);
-        if (res.length) {
-            return res;
-        }
-        const dotIndex = address.indexOf('.');
-        return dotIndex === -1 ? address : address.substring(0, dotIndex);
+        return calcShortNameByRegExp(address) || calcShortNameByMinus(address);
     }, [address]);
 
     const cluster = useSelector(getCluster);
 
     return (
-        <span className={block({hidden: !host}, className)}>
+        <span
+            className={block(
+                {hidden: !host},
+                ['elements-monospace', className].filter(Boolean).join(' '),
+            )}
+            onClick={onClick}
+        >
             <Tooltip content={address}>
-                <Link url={`/${cluster}/components/nodes/${address}`}>{host}</Link>
+                {useText ? (
+                    host
+                ) : (
+                    <Link url={`/${cluster}/components/nodes/${address}`}>{host}</Link>
+                )}
             </Tooltip>
             <span className={block('copy-btn', copyBtnClassName)}>
                 <ClipboardButton view={'flat-secondary'} text={address} />

diff --git a/packages/ui/src/ui/pages/components/tabs/Versions/VersionsV2.tsx b/packages/ui/src/ui/pages/components/tabs/Versions/VersionsV2.tsx
@@ -47,6 +47,7 @@ import {getUISizes} from '../../../../store/selectors/global';
 import templates, {ColumnAsTime, printColumnAsError} from '../../../../components/templates/utils';
 import {VersionHostInfo} from '../../../../store/reducers/components/versions/versions_v2';
 import {ClickableId, NodeColumnBanned, NodeColumnState} from '../NodeColumns';
+import {Host} from '../../../../containers/Host/Host';
 
 import './Versions.scss';
 
@@ -194,9 +195,16 @@ class VersionsV2 extends React.Component<ReduxProps> {
                 />
             ),
             error: (item) => printColumnAsError(item.error),
-            address: (item) => (
-                <ClickableId text={item.address} onClick={() => changeHostFilter(item.address)} />
-            ),
+            address: (item) => {
+                return (
+                    <Host
+                        address={item.address}
+                        onClick={() => changeHostFilter(item.address)}
+                        useText
+                        allowByRegexp
+                    />
+                );
+            },
             state: (item) => <NodeColumnState state={item.state} />,
             banned: (item) => <NodeColumnBanned banned={item.banned} />,
             decommissioned: templates.get('components').decommissioned,

diff --git a/packages/ui/src/ui/pages/components/tabs/nodes/Nodes/Nodes.scss b/packages/ui/src/ui/pages/components/tabs/nodes/Nodes/Nodes.scss
@@ -238,7 +238,7 @@ $elements-table: '.elements-table';
             }
 
             &_host {
-                width: 400px;
+                width: 350px;
             }
         }
     }

diff --git a/packages/ui/src/ui/utils/components/nodes/tables.tsx b/packages/ui/src/ui/utils/components/nodes/tables.tsx
@@ -10,6 +10,7 @@ import ClipboardButton from '../../../components/ClipboardButton/ClipboardButton
 import Label from '../../../components/Label/Label';
 import NodeActions from '../../../pages/components/tabs/nodes/NodeActions/NodeActions';
 import MemoryProgress from '../../../pages/components/tabs/nodes/MemoryProgress/MemoryProgress';
+import {Host} from '../../../containers/Host/Host';
 
 import hammer from '../../../common/hammer';
 import {
@@ -689,24 +690,8 @@ export const NODES_TABLE_TEMPLATES: Templates = {
             return hammer.format['Number'](item.IOWeight[mediumName]);
         }
     },
-    host(item, columnName) {
-        return (
-            <div
-                className="elements-column_type_id elements-column_with-hover-button"
-                title={item.host}
-            >
-                <span className="elements-monospace elements-ellipsis">
-                    {hammer.format['Address'](item.host)}
-                </span>
-                &nbsp;
-                <ClipboardButton
-                    text={item.host}
-                    view="flat-secondary"
-                    size="s"
-                    title={'Copy ' + columnName}
-                />
-            </div>
-        );
+    host(item) {
+        return <Host address={item.host} useText allowByRegexp />;
     },
     state(item) {
         const text = hammer.format['FirstUppercase'](item.state);
-Original file line number
+Diff line change
@@ Expand Up / @@ -238,7 +238,7 @@ $elements-table: '.elements-table'; @@
                 }
                 &_host {
-                    width: 400px;
+                    width: 350px;
                 }
             }
         }
@@ Expand Down @@