fix: design refinements of query banner (#2630)

Author: astandrik

src/components/QueriesActivityBar/QueriesActivityAlert.scss

@@ -0,0 +1,25 @@
+.queries-activity-alert {
+    $b: &;
+
+    border-radius: var(--g-border-radius-s);
+
+    &__card {
+        width: 100%;
+        padding: 0;
+
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-s);
+    }
+
+    &__content {
+        padding: calc(var(--g-spacing-5) - 1px) var(--g-spacing-4);
+    }
+
+    &__title {
+        color: var(--g-color-text-primary);
+    }
+
+    &__open-queries-button {
+        margin-left: var(--g-spacing-1);
+    }
+}

src/components/QueriesActivityBar/QueriesActivityAlert.tsx

@@ -0,0 +1,98 @@
+import {CirclePlay, Display, Person} from '@gravity-ui/icons';
+import {Button, Card, Flex, Icon, Label, Text} from '@gravity-ui/uikit';
+import {useHistory, useLocation} from 'react-router-dom';
+
+import {TenantTabsGroups, getTenantPath} from '../../containers/Tenant/TenantPages';
+import {parseQuery} from '../../routes';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../store/reducers/tenant/constants';
+import {cn} from '../../utils/cn';
+
+import i18n from './i18n';
+
+import './QueriesActivityAlert.scss';
+
+const b = cn('queries-activity-alert');
+
+interface QueriesActivityAlertProps {
+    runningQueriesCount: number;
+    uniqueApplications: number;
+    uniqueUsers: number;
+}
+
+export function QueriesActivityAlert({
+    runningQueriesCount,
+    uniqueApplications,
+    uniqueUsers,
+}: QueriesActivityAlertProps) {
+    const history = useHistory();
+    const location = useLocation();
+
+    const handleOpenRunningQueries = () => {
+        const queryParams = parseQuery(location);
+        const path = getTenantPath({
+            ...queryParams,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
+            queryMode: 'running',
+        });
+        history.push(path);
+    };
+
+    return (
+        <div className={b()}>
+            <Card className={b('card')} type="container" view="outlined">
+                <Flex
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap={4}
+                    className={b('content')}
+                >
+                    <Flex>
+                        <Text variant="subheader-2" className={b('title')}>
+                            {i18n('title_queries-activity')}
+                        </Text>
+                    </Flex>
+                    <Flex wrap alignItems="center" gap={1} className={b('stats')}>
+                        <Label
+                            theme={runningQueriesCount > 0 ? 'success' : 'unknown'}
+                            icon={<Icon data={CirclePlay} />}
+                            size="s"
+                            value={String(runningQueriesCount)}
+                        >
+                            {i18n('field_running-queries')}
+                        </Label>
+
+                        <Label
+                            theme="unknown"
+                            icon={<Icon data={Display} />}
+                            size="s"
+                            value={String(uniqueApplications)}
+                        >
+                            {i18n('field_applications')}
+                        </Label>
+
+                        <Label
+                            theme="unknown"
+                            icon={<Icon data={Person} />}
+                            size="s"
+                            value={String(uniqueUsers)}
+                        >
+                            {i18n('field_users')}
+                        </Label>
+
+                        {runningQueriesCount > 0 && (
+                            <Button
+                                view="outlined"
+                                size="s"
+                                onClick={handleOpenRunningQueries}
+                                className={b('open-queries-button')}
+                            >
+                                {i18n('action_open-running-queries')}
+                            </Button>
+                        )}
+                    </Flex>
+                </Flex>
+            </Card>
+        </div>
+    );
+}

src/components/QueriesActivityBar/QueriesActivityBar.scss

@@ -1,5 +1,3 @@
-@use '../../styles/mixins.scss';
-
 .queries-activity-bar {
     $b: &;
 
@@ -15,11 +13,6 @@
     }
 
     &__header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: var(--g-spacing-3);
-
         padding: var(--g-spacing-3) var(--g-spacing-4);
 
         cursor: pointer;
@@ -44,63 +37,24 @@
         }
     }
 
-    &__content-wrapper {
-        display: flex;
-        flex-grow: 1;
-        align-items: center;
-        gap: var(--g-spacing-2);
-    }
-
-    &__metrics {
-        display: flex;
-        align-items: center;
-        gap: var(--g-spacing-1);
-    }
-
     &__content {
-        display: flex;
-        flex-direction: column;
-        gap: var(--g-spacing-4);
-
         padding-top: var(--g-spacing-3);
         padding-bottom: var(--g-spacing-3);
     }
 
     &__stats {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: var(--g-spacing-1);
-
         padding: 0 var(--g-spacing-4);
     }
 
     &__open-queries-button {
-        margin-left: 4px;
+        margin-left: var(--g-spacing-1);
     }
 
     &__charts {
-        display: flex;
-        gap: var(--g-spacing-4);
-
         padding: 0 var(--g-spacing-4);
 
         @media (max-width: 1200px) {
-            flex-direction: column;
+            flex-direction: column !important;
         }
     }
-
-    &__chart-container {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        gap: var(--g-spacing-3);
-    }
-
-    // Focus states for accessibility
-    &__header:focus-visible,
-    &__open-queries-button:focus-visible {
-        outline: 2px solid var(--g-color-line-focus);
-        outline-offset: 2px;
-    }
 }