ydb-embedded-ui 22.3.0 → 22.5.0

package/src/containers/Storage/StorageExpertModePanel/components/SpaceLegend.scss

@@ -1,6 +1,20 @@
+@use '../../../../styles/mixins';
+
 .ydb-storage-expert-mode-panel {
     --label-checkbox-size: 14px;
 
+    @each $color in 'green', 'cyan', 'light-yellow', 'yellow', 'light-orange', 'pre-orange',
+        'orange', 'red', 'black'
+    {
+        &__label_#{$color} {
+            @include mixins.capacity-alert-label-colors($color);
+
+            &:hover {
+                background-color: var(--ydb-capacity-alert-label-background) !important;
+            }
+        }
+    }
+
     &__label {
         border-radius: var(--g-border-radius-s);
         .g-label__addon_side_start {
@@ -30,86 +44,4 @@
         border: none;
         background-color: var(--g-color-base-generic-medium);
     }
-
-    // Custom color labels
-    &__label_green {
-        color: var(--g-color-text-positive-heavy);
-        background-color: var(--g-color-base-positive-light);
-
-        &:hover {
-            background-color: var(--g-color-base-positive-light) !important;
-        }
-    }
-
-    &__label_cyan {
-        color: var(--ydb-space-cyan-text);
-        background-color: var(--ydb-space-cyan-bg);
-
-        &:hover {
-            background-color: var(--ydb-space-cyan-bg) !important;
-        }
-    }
-
-    &__label_light-yellow {
-        color: var(--ydb-space-light-yellow-text);
-        background-color: var(--ydb-space-light-yellow-bg);
-
-        &:hover {
-            background-color: var(--ydb-space-light-yellow-bg) !important;
-        }
-    }
-
-    &__label_yellow {
-        color: var(--g-color-text-warning-heavy);
-        background-color: var(--g-color-base-warning-light);
-
-        &:hover {
-            background-color: var(--g-color-base-warning-light) !important;
-        }
-    }
-
-    &__label_light-orange {
-        color: var(--ydb-space-light-orange-text);
-        background-color: var(--ydb-space-light-orange-bg);
-
-        &:hover {
-            background-color: var(--ydb-space-light-orange-bg) !important;
-        }
-    }
-
-    &__label_pre-orange {
-        color: var(--ydb-space-pre-orange-text);
-        background-color: var(--ydb-space-pre-orange-bg);
-
-        &:hover {
-            background-color: var(--ydb-space-pre-orange-bg) !important;
-        }
-    }
-
-    &__label_orange {
-        color: var(--ydb-space-orange-text);
-        background-color: var(--ydb-space-orange-bg);
-
-        &:hover {
-            background-color: var(--ydb-space-orange-bg) !important;
-        }
-    }
-
-    &__label_red {
-        color: var(--g-color-base-danger-heavy);
-        background-color: var(--g-color-base-danger-light);
-
-        &:hover {
-            background-color: var(--g-color-base-danger-light) !important;
-        }
-    }
-
-    &__label_black {
-        color: var(--g-color-text-primary);
-        background-color: var(--g-color-text-dark-hint);
-
-        &:hover {
-            background-color: var(--g-color-text-dark-hint) !important;
-        }
-    }
 }

package/src/containers/Storage/StorageGroupStateLabel.tsx

@@ -0,0 +1,22 @@
+import {Check} from '@gravity-ui/icons';
+import type {LabelProps} from '@gravity-ui/uikit';
+
+import {DiskStatusLabel} from '../../components/DiskStatus/DiskStatus';
+
+import {getStorageGroupStateLabel} from './utils/getStorageGroupStateLabel';
+
+export function StorageGroupStateLabel({
+    state,
+    size = 's',
+}: {state?: string} & Pick<LabelProps, 'size'>) {
+    const label = getStorageGroupStateLabel(state);
+
+    return label ? (
+        <DiskStatusLabel
+            {...label}
+            size={size}
+            iconSize={size === 'xs' ? 12 : 14}
+            icon={label.theme === 'success' ? Check : undefined}
+        />
+    ) : null;
+}

package/src/containers/Storage/utils/getStorageGroupStateLabel.ts

@@ -0,0 +1,49 @@
+import type {TitledDiskStatusLabelData} from '../../../components/DiskStatus/DiskStatus';
+import {
+    DATA_SEVERITY,
+    NUMERIC_SEVERITY_TO_LABEL_VIEW,
+    SOLID_RED_SEVERITY,
+} from '../../../utils/disks/constants';
+import type {DisplaySeverity} from '../../../utils/disks/types';
+
+const stateSeverities = new Map<string, DisplaySeverity>([
+    ['ok', DATA_SEVERITY.GREEN],
+    ['replicating', DATA_SEVERITY.BLUE],
+    ['starting', DATA_SEVERITY.YELLOW],
+    ['degraded', DATA_SEVERITY.YELLOW],
+    ['dead', SOLID_RED_SEVERITY],
+]);
+
+export function getStorageGroupStateLabel(
+    state?: string | null,
+): TitledDiskStatusLabelData | undefined {
+    const normalizedState = state?.trim();
+
+    if (!normalizedState) {
+        return undefined;
+    }
+
+    const match = normalizedState.match(/^([^:]+)(?::\s*(.+))?$/);
+    const status = (match?.[1] ?? normalizedState).trim();
+    const value = match?.[2]?.trim();
+    let severity = stateSeverities.get(status) ?? DATA_SEVERITY.GREY;
+
+    if (status === 'degraded') {
+        const count = value?.split('(', 1)[0].trim();
+
+        if (count === '2') {
+            severity = DATA_SEVERITY.RED;
+        }
+    }
+
+    const labelView = NUMERIC_SEVERITY_TO_LABEL_VIEW[severity];
+    const title = status[0].toUpperCase() + status.slice(1);
+    const formattedValue = value?.replace(/\s*\(/g, ' (');
+
+    return {
+        title,
+        value: formattedValue,
+        theme: labelView.theme,
+        dangerHeavy: Boolean(labelView.dangerHeavy),
+    };
+}

package/src/containers/StorageGroupPage/StorageGroupPage.scss

@@ -1,5 +1,3 @@
-@use '../../styles/mixins.scss';
-
 .ydb-storage-group-page {
     position: relative;
 
@@ -8,9 +6,7 @@
     height: 100%;
     padding: 0 20px;
 
-    &__meta,
-    &__title,
-    &__info,
+    &__summary,
     &__storage-title {
         position: sticky;
         left: 0;
@@ -18,20 +14,30 @@
         margin-bottom: 20px;
     }
 
+    &__summary {
+        margin-top: var(--g-spacing-4);
+        margin-bottom: var(--g-spacing-6);
+    }
+
     &__meta {
-        margin-top: 20px;
+        margin-bottom: var(--g-spacing-4);
     }
 
     &__title {
-        margin-bottom: 60px;
+        margin-bottom: var(--g-spacing-4);
     }
 
-    &__storage-title {
-        margin-bottom: 0;
-        @include mixins.header-1-typography();
+    &__title-content {
+        flex: 1;
+
+        min-width: 0;
+    }
+
+    &__refresh-control {
+        flex-shrink: 0;
     }
 
-    &__info {
-        margin-top: var(--g-spacing-10);
+    &__storage-title {
+        margin: 0;
     }
 }

package/src/containers/StorageGroupPage/StorageGroupPage.tsx

@@ -1,24 +1,28 @@
 import React from 'react';
 
+import {ArrowLeft} from '@gravity-ui/icons';
+import {Button, Flex, Icon, Text} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 import {Helmet} from 'react-helmet-async';
+import {useHistory} from 'react-router-dom';
 import {StringParam, useQueryParams} from 'use-query-params';
 
-import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle';
+import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
+import {CopyableValue} from '../../components/CopyableValue/CopyableValue';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
-import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
 import {StorageGroupInfo} from '../../components/StorageGroupInfo/StorageGroupInfo';
 import {useCapabilitiesLoaded} from '../../store/reducers/capabilities/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {storageApi} from '../../store/reducers/storage/storage';
-import {EFlag} from '../../types/api/enums';
 import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {useAutoRefreshInterval, useTypedDispatch} from '../../utils/hooks';
 import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
 import {useAppTitle} from '../App/AppTitleContext';
 import {PaginatedStorage} from '../Storage/PaginatedStorage';
+import {StorageGroupStateLabel} from '../Storage/StorageGroupStateLabel';
 
 import {storageGroupPageKeyset} from './i18n';
 
@@ -28,14 +32,13 @@ const storageGroupPageCn = cn('ydb-storage-group-page');
 
 export function StorageGroupPage() {
     const dispatch = useTypedDispatch();
+    const history = useHistory();
     const database = useDatabaseFromQuery();
     const containerRef = React.useRef<HTMLDivElement>(null);
 
     const [{groupId}] = useQueryParams({groupId: StringParam});
-
-    React.useEffect(() => {
-        dispatch(setHeaderBreadcrumbs('storageGroup', {groupId, database}));
-    }, [dispatch, groupId, database]);
+    const showBackButton = Boolean(groupId) && history.length > 1;
+    const showRefreshInTitle = Boolean(groupId) && !showBackButton;
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const capabilitiesLoaded = useCapabilitiesLoaded();
@@ -49,7 +52,12 @@ export function StorageGroupPage() {
         },
     );
 
-    const storageGroupData = groupQuery.data?.groups?.[0];
+    const storageGroupData = groupQuery.currentData?.groups?.[0];
+    const state = storageGroupData?.State;
+
+    React.useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('storageGroup', {groupId: groupId ?? undefined, database}));
+    }, [dispatch, groupId, database]);
 
     const loading = groupQuery.isFetching && storageGroupData === undefined;
     const {appTitle} = useAppTitle();
@@ -68,29 +76,56 @@ export function StorageGroupPage() {
     };
 
     const renderPageMeta = () => {
-        if (!groupId) {
+        if (!showBackButton) {
             return null;
         }
 
-        const items = [`${storageGroupPageKeyset('pool-name')}: ${storageGroupData?.PoolName}`];
-
         return (
-            <PageMetaWithAutorefresh
+            <Flex
                 className={storageGroupPageCn('meta')}
-                loading={loading}
-                items={items}
-            />
+                alignItems="center"
+                justifyContent="space-between"
+                gap={2}
+            >
+                <Button view="outlined" onClick={() => history.goBack()}>
+                    <Icon data={ArrowLeft} />
+                    {storageGroupPageKeyset('action_back')}
+                </Button>
+                <AutoRefreshControl className={storageGroupPageCn('refresh-control')} />
+            </Flex>
         );
     };
 
     const renderPageTitle = () => {
         return (
-            <EntityPageTitle
+            <Flex
                 className={storageGroupPageCn('title')}
-                entityName={storageGroupPageKeyset('storage-group')}
-                status={storageGroupData?.Overall || EFlag.Grey}
-                id={groupId}
-            />
+                alignItems="flex-start"
+                gap={2}
+                wrap="nowrap"
+            >
+                <Flex
+                    className={storageGroupPageCn('title-content')}
+                    alignItems="center"
+                    gap={2}
+                    wrap="wrap"
+                >
+                    <Text variant="header-1">{storageGroupPageKeyset('storage-group')}</Text>
+                    <CopyableValue
+                        copyText={groupId}
+                        fieldName={storageGroupPageKeyset('storage-group')}
+                        copyButtonLabel={storageGroupPageKeyset('action_copy-group-id-from-title')}
+                    >
+                        <Text variant="header-1" color="hint">
+                            {groupId || EMPTY_DATA_PLACEHOLDER}
+                        </Text>
+                    </CopyableValue>
+                    <StorageGroupStateLabel state={state} />
+                </Flex>
+                {showRefreshInTitle && (
+                    <AutoRefreshControl className={storageGroupPageCn('refresh-control')} />
+                )}
+            </Flex>
         );
     };
 
@@ -107,9 +142,9 @@ export function StorageGroupPage() {
         }
         return (
             <React.Fragment>
-                <div className={storageGroupPageCn('storage-title')}>
+                <Text as="h2" variant="subheader-3" className={storageGroupPageCn('storage-title')}>
                     {storageGroupPageKeyset('storage')}
-                </div>
+                </Text>
                 <PaginatedStorage
                     database={database}
                     groupId={groupId}
@@ -132,10 +167,12 @@ export function StorageGroupPage() {
     return (
         <div className={storageGroupPageCn(null)} ref={containerRef}>
             {renderHelmet()}
-            {renderPageMeta()}
-            {renderPageTitle()}
-            {renderError()}
-            {renderInfo()}
+            <div className={storageGroupPageCn('summary')}>
+                {renderPageMeta()}
+                {renderPageTitle()}
+                {renderError()}
+                {renderInfo()}
+            </div>
             {renderStorage()}
         </div>
     );

package/src/containers/StorageGroupPage/i18n/en.json

@@ -1,5 +1,6 @@
 {
   "storage-group": "Storage Group",
   "storage": "Storage",
-  "pool-name": "Pool Name"
+  "action_back": "Back",
+  "action_copy-group-id-from-title": "Copy Storage Group ID from page title"
 }

package/src/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -110,7 +110,7 @@ function Overview({type, path, database, databaseFullPath}: OverviewProps) {
                 />
             ),
             [EPathType.EPathTypeStreamingQuery]: () => (
-                <StreamingQueryInfo path={path} database={database} />
+                <StreamingQueryInfo path={path} database={database} data={data} />
             ),
         };
 
@@ -129,6 +129,10 @@ function Overview({type, path, database, databaseFullPath}: OverviewProps) {
 
         const content = pathTypeToComponent[type]?.();
 
+        if (isStreamingQuery) {
+            return content;
+        }
+
         const commonInfo = (
             <SchemaObjectInfoContainer data={currentData ?? undefined} type={type} path={path} />
         );

package/src/containers/Tenant/Diagnostics/Overview/SchemaObjectInfo/SchemaObjectInfo.tsx

@@ -18,6 +18,7 @@ export interface SchemaObjectInfoProps {
     path: string;
     itemsAfterType?: YDBDefinitionListItem[];
     additionalItems?: YDBDefinitionListItem[];
+    createdContent?: YDBDefinitionListItem['content'];
 }
 
 export function SchemaObjectInfo({
@@ -26,6 +27,7 @@ export function SchemaObjectInfo({
     path,
     itemsAfterType,
     additionalItems,
+    createdContent,
 }: SchemaObjectInfoProps) {
     const showAdministrativeFields = useUserPermissions()?.IsAdministrationAllowed === true;
     const items = React.useMemo(
@@ -37,8 +39,17 @@ export function SchemaObjectInfo({
                 itemsAfterType,
                 additionalItems,
                 showAdministrativeFields,
+                createdContent,
             }),
-        [additionalItems, data, fallbackType, itemsAfterType, path, showAdministrativeFields],
+        [
+            additionalItems,
+            createdContent,
+            data,
+            fallbackType,
+            itemsAfterType,
+            path,
+            showAdministrativeFields,
+        ],
     );
 
     return (

package/src/containers/Tenant/Diagnostics/Overview/SchemaObjectInfo/prepareSchemaObjectInfo.tsx

@@ -40,6 +40,7 @@ interface PrepareSchemaObjectInfoItemsParams {
     itemsAfterType?: YDBDefinitionListItem[];
     additionalItems?: YDBDefinitionListItem[];
     showAdministrativeFields?: boolean;
+    createdContent?: YDBDefinitionListItem['content'];
 }
 
 function isPresent(value: string | number | undefined): value is string | number {
@@ -83,6 +84,7 @@ export function prepareSchemaObjectInfoItems({
     itemsAfterType = [],
     additionalItems = [],
     showAdministrativeFields = false,
+    createdContent,
 }: PrepareSchemaObjectInfoItemsParams): YDBDefinitionListItem[] {
     const self = data?.PathDescription?.Self;
     let pathId = self?.PathId;
@@ -116,21 +118,20 @@ export function prepareSchemaObjectInfoItems({
         );
     }
 
-    if (Number(createStep)) {
+    items.push({
+        name: schemaObjectInfoKeyset('field_full-path'),
+        content: isPresent(fullPath) ? fullPath : EMPTY_DATA_PLACEHOLDER,
+        copyText: isPresent(fullPath) ? fullPath : undefined,
+    });
+
+    if (createdContent || Number(createStep)) {
         items.push({
             name: tenantKeyset('field_created'),
-            content: formatDateTime(createStep),
+            content: createdContent || formatDateTime(createStep),
         });
     }
 
-    items.push(
-        {
-            name: schemaObjectInfoKeyset('field_full-path'),
-            content: isPresent(fullPath) ? fullPath : EMPTY_DATA_PLACEHOLDER,
-            copyText: isPresent(fullPath) ? fullPath : undefined,
-        },
-        ...additionalItems,
-    );
+    items.push(...additionalItems);
 
     return items.filter(({content}) => content !== undefined && content !== null && content !== '');
 }

package/src/containers/Tenant/Diagnostics/Overview/StreamingQueryInfo/StreamingQueryInfo.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {dateTimeParse} from '@gravity-ui/date-utils';
 import {Label} from '@gravity-ui/uikit';
 
 import {Loader} from '../../../../../components/Loader';
@@ -7,8 +8,11 @@ import type {YDBDefinitionListItem} from '../../../../../components/YDBDefinitio
 import {YDBDefinitionList} from '../../../../../components/YDBDefinitionList/YDBDefinitionList';
 import {YQLCodePreview} from '../../../../../components/YQLCodePreview/YQLCodePreview';
 import {streamingQueriesApi} from '../../../../../store/reducers/streamingQuery/streamingQuery';
+import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
+import {EPathType} from '../../../../../types/api/schema';
 import type {IQueryResult} from '../../../../../types/store/query';
 import {cn} from '../../../../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../../../../utils/constants';
 import {
     getStringifiedData,
     stripIndentByFirstLine,
@@ -16,6 +20,7 @@ import {
 } from '../../../../../utils/dataFormatters/dataFormatters';
 import {parseIssuesData} from '../../../../../utils/query';
 import {ResultIssuesModal} from '../../../Query/Issues/Issues';
+import {SchemaObjectInfo} from '../SchemaObjectInfo/SchemaObjectInfo';
 
 import i18n from './i18n';
 
@@ -24,26 +29,37 @@ import './StreamingQueryInfo.scss';
 interface StreamingQueryProps {
     database: string;
     path: string;
+    data?: TEvDescribeSchemeResult;
 }
 
 const b = cn('ydb-streaming-query-info');
 
-export function StreamingQueryInfo({database, path}: StreamingQueryProps) {
-    const {data: sysData, isFetching} = streamingQueriesApi.useGetStreamingQueryInfoQuery(
+export function StreamingQueryInfo({database, path, data}: StreamingQueryProps) {
+    const {currentData: sysData, isFetching} = streamingQueriesApi.useGetStreamingQueryInfoQuery(
         {database, path},
         {skip: !database || !path},
     );
     const loading = isFetching && sysData === undefined;
 
-    if (loading) {
-        return <Loader size="s" className={b('loader')} />;
-    }
-
-    const {items, queryText} = prepareStreamingQueryItems(sysData);
+    const {items, queryText, createdContent, stateItems} = prepareStreamingQueryInfo(
+        sysData,
+        data?.PathDescription?.Self?.CreateStep,
+    );
 
     return (
         <React.Fragment>
-            <YDBDefinitionList items={items} />
+            <SchemaObjectInfo
+                data={data}
+                fallbackType={EPathType.EPathTypeStreamingQuery}
+                path={path}
+                createdContent={createdContent}
+                itemsAfterType={stateItems}
+            />
+            {loading ? (
+                <Loader size="s" className={b('loader')} />
+            ) : items.length ? (
+                <YDBDefinitionList items={items} />
+            ) : null}
             {queryText ? (
                 <YQLCodePreview title={i18n('field_query-text')} text={queryText} />
             ) : null}
@@ -73,27 +89,40 @@ function StateLabel({state}: {state?: string}) {
     return <Label theme={theme}>{state}</Label>;
 }
 
-function prepareStreamingQueryItems(sysData?: IQueryResult) {
+export function prepareStreamingQueryInfo(sysData?: IQueryResult, createStep?: string | number) {
     if (!sysData) {
-        return {items: [], queryText: undefined};
+        return {items: [], queryText: undefined, createdContent: undefined, stateItems: []};
     }
 
-    const info: YDBDefinitionListItem[] = [];
-    const state = getStringifiedData(sysData.resultSets?.[0]?.result?.[0]?.State);
-
-    const queryText = getStringifiedData(sysData.resultSets?.[0]?.result?.[0]?.Text);
+    const row = sysData.resultSets?.[0]?.result?.[0];
+    const createdContent =
+        formatLifecycleValue(row?.CreatedAt, row?.CreatedBy, createStep) ??
+        (row && 'CreatedAt' in row ? EMPTY_DATA_PLACEHOLDER : undefined);
+    const lifecycleFields = [
+        {name: i18n('field_started'), timestamp: 'StartedAt', user: 'StartedBy'},
+        {name: i18n('field_modified'), timestamp: 'ModifiedAt', user: 'ModifiedBy'},
+        {name: i18n('field_stopped'), timestamp: 'FinishedAt', user: 'StoppedBy'},
+    ];
+    const info: YDBDefinitionListItem[] = lifecycleFields
+        .filter(({timestamp}) => row && timestamp in row)
+        .map(({name, timestamp, user}) => ({
+            name,
+            content: formatLifecycleValue(row?.[timestamp], row?.[user]) ?? EMPTY_DATA_PLACEHOLDER,
+        }));
+    const state = getStringifiedData(row?.Status);
+
+    const queryText = getStringifiedData(row?.Text);
     let normalizedQueryText = trimOuterEmptyLines(queryText);
     normalizedQueryText = stripIndentByFirstLine(normalizedQueryText);
 
-    const errorRaw = sysData.resultSets?.[0]?.result?.[0]?.Error;
+    const errorRaw = row?.Issues;
 
     // We use custom error check, because error type can be non-standard
     const errorData = parseIssuesData(errorRaw);
 
-    info.push({
-        name: i18n('field_query-state'),
-        content: <StateLabel state={state} />,
-    });
+    const stateItems: YDBDefinitionListItem[] = [
+        {name: i18n('field_query-state'), content: <StateLabel state={state} />},
+    ];
 
     if (errorData) {
         info.push({
@@ -102,5 +131,39 @@ function prepareStreamingQueryItems(sysData?: IQueryResult) {
         });
     }
 
-    return {items: info, queryText: normalizedQueryText};
+    return {items: info, queryText: normalizedQueryText, createdContent, stateItems};
+}
+
+function formatLifecycleValue(
+    timestamp: string | number | null | undefined,
+    user: string | number | null | undefined,
+    fallback?: string | number,
+) {
+    let milliseconds = NaN;
+    if (typeof timestamp === 'number') {
+        milliseconds = timestamp;
+    } else if (typeof timestamp === 'string') {
+        milliseconds = Date.parse(timestamp);
+    }
+    const dateMilliseconds =
+        Number.isFinite(milliseconds) && milliseconds > 0 ? milliseconds : Number(fallback);
+    const date =
+        Number.isFinite(dateMilliseconds) && dateMilliseconds > 0
+            ? dateTimeParse(dateMilliseconds)?.format('YYYY-MM-DD HH:mm:ss')
+            : undefined;
+
+    if (!date && !user) {
+        return undefined;
+    }
+
+    if (!user) {
+        return date;
+    }
+
+    return (
+        <React.Fragment>
+            {i18n('value_date-by-user', {date: date || EMPTY_DATA_PLACEHOLDER})}{' '}
+            <Label theme="normal">{String(user)}</Label>
+        </React.Fragment>
+    );
 }

package/src/containers/Tenant/Diagnostics/Overview/StreamingQueryInfo/i18n/en.json

@@ -1,5 +1,9 @@
 {
   "field_query-state": "State",
   "field_query-error": "Error",
-  "field_query-text": "Text"
+  "field_query-text": "Text",
+  "field_started": "Started",
+  "field_modified": "Modified",
+  "field_stopped": "Stopped",
+  "value_date-by-user": "{{date}} by"
 }