service grafana

src/Routes/Base/Header/HelpBar.react.jsx

@@ -12,6 +12,7 @@ import SettingsUser from './Settings/SettingsUser';
 import Settings from './Settings/Settings.react';
 import InactiveModeTag from './InactiveMode';
 import ExperimentPicker from './ExperimentPicker.react';
+import ServicesStatus from '../../../components/ServicesStatus/ServicesStatus';
 
 const Container = styled(FlexBox.Auto)`
   position: relative;
@@ -21,6 +22,8 @@ const HelpBar = () => {
   const { keycloakEnable } = useSelector(selectors.connection);
   return (
     <Container className={USER_GUIDE.HEADER.SOCIALS}>
+      <ServicesStatus />
+
       <InactiveModeTag />
 
       <ExperimentPicker />

src/Routes/Base/Header/InactiveMode.jsx

@@ -6,10 +6,10 @@ import React from 'react';
 import styled from 'styled-components';
 
 const Tag = styled(AntTag)`
-  position: absolute;
-  right: 1em;
-  top: 50%;
-  transform: translateY(-50%);
+
+
+
+
 `;
 
 const Content = styled.span`

src/components/ServicesStatus/ServiceRow.jsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Popover, Typography } from 'antd';
+import styled from 'styled-components';
+
+import StatusLamp from './StatusLamp';
+import SubServicesPopover from './SubServicesPopover';
+
+const Row = styled.div`
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 8px;
+  border-radius: 6px;
+  cursor: default;
+  user-select: none;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+`;
+
+const ServiceRow = ({ service }) => {
+  const isOk = useMemo(() => {
+    const subServices = service.services || [];
+    return Boolean(service.status) && subServices.every(item => item.status);
+  }, [service]);
+
+  return (
+    <Popover
+      content={<SubServicesPopover subServices={service.services} />}
+      placement="bottom"
+      trigger="hover">
+      <Row>
+        <StatusLamp isOk={isOk} />
+        <Typography.Text>{service.serviceName}</Typography.Text>
+      </Row>
+    </Popover>
+  );
+};
+
+ServiceRow.propTypes = {
+  service: PropTypes.shape({
+    serviceName: PropTypes.string.isRequired,
+    status: PropTypes.bool.isRequired,
+    services: PropTypes.arrayOf(
+      PropTypes.shape({
+        subServiceName: PropTypes.string.isRequired,
+        status: PropTypes.bool.isRequired,
+        number: PropTypes.number.isRequired,
+      })
+    ),
+  }).isRequired,
+};
+
+export default ServiceRow;

src/components/ServicesStatus/ServicesStatus.jsx

@@ -0,0 +1,104 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from 'antd';
+import styled from 'styled-components';
+
+import StatusLamp from './StatusLamp';
+import ServiceRow from './ServiceRow';
+import servicesStatusMock from './mockData';
+
+const Container = styled.div`
+  position: relative;
+  display: inline-flex;
+  flex-direction: row-reverse;
+  gap: 8px;
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+
+`;
+
+const HeaderRow = styled.div`
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+`;
+
+const ServicesList = styled.div`
+  width: max-content;
+  position: ${props => (props.$isOpen ? 'static' : 'absolute')};
+  right: calc(100% + 12px);
+  top: 0;
+  display: flex;
+  flex-direction: row;
+
+
+
+  align-items: flex-start;
+  gap: 8px;
+  opacity: ${props => (props.$isOpen ? 1 : 0)};
+  transform: ${props =>
+    props.$isOpen ? 'translateX(0)' : 'translateX(8px)'};
+  pointer-events: ${props => (props.$isOpen ? 'auto' : 'none')};
+  transition: opacity 180ms ease, transform 180ms ease;
+  transform-origin: right top;
+`;
+
+const ServicesStatus = ({ services = servicesStatusMock, label = 'Service metrics' }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const isGlobalOk = useMemo(() => {
+    return services.every(service => {
+      const subServices = service.services || [];
+      return service.status && subServices.every(item => item.status);
+    });
+  }, [services]);
+
+  const handleToggle = () => setIsOpen(prev => !prev);
+
+  return (
+    <Container>
+      <HeaderRow
+        role="button"
+        tabIndex={0}
+        onClick={handleToggle}
+        onKeyDown={event => {
+          if (event.key === 'Enter' || event.key === ' ') handleToggle();
+        }}>
+        <StatusLamp isOk={isGlobalOk} />
+        <Typography.Text strong>{label}</Typography.Text>
+      </HeaderRow>
+
+      <ServicesList $isOpen={isOpen}>
+        {services.map(service => (
+          <ServiceRow key={service.serviceName} service={service} />
+        ))}
+      </ServicesList>
+    </Container>
+  );
+};
+
+ServicesStatus.propTypes = {
+  services: PropTypes.arrayOf(
+    PropTypes.shape({
+      serviceName: PropTypes.string.isRequired,
+      status: PropTypes.bool.isRequired,
+      services: PropTypes.arrayOf(
+        PropTypes.shape({
+          subServiceName: PropTypes.string.isRequired,
+          status: PropTypes.bool.isRequired,
+          number: PropTypes.number.isRequired,
+        })
+      ),
+    })
+  ),
+  label: PropTypes.string,
+};
+
+export default ServicesStatus;

src/components/ServicesStatus/StatusLamp.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const Lamp = styled.span`
+  width: ${props => props.$size}px;
+  height: ${props => props.$size}px;
+  border-radius: 50%;
+  display: inline-block;
+  background-color: ${props => (props.$isOk ? '#52c41a' : '#ff4d4f')};
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
+  margin-right: 8px;
+`;
+
+const StatusLamp = ({ isOk, size = 10 }) => (
+  <Lamp $isOk={isOk} $size={size} />
+);
+
+StatusLamp.propTypes = {
+  isOk: PropTypes.bool.isRequired,
+  size: PropTypes.number,
+};
+
+export default StatusLamp;

src/components/ServicesStatus/SubServicesPopover.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from 'antd';
+import styled from 'styled-components';
+
+import StatusLamp from './StatusLamp';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 220px;
+  gap: 6px;
+`;
+
+const SubRow = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const EmptyText = styled(Typography.Text)`
+  color: rgba(0, 0, 0, 0.45);
+`;
+
+const SubServicesPopover = ({ subServices = [] }) => {
+  if (!subServices.length) {
+    return (
+      <Wrapper>
+        <EmptyText>No sub services</EmptyText>
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper>
+      {subServices.map(item => (
+        <SubRow key={item.subServiceName}>
+          <StatusLamp isOk={item.status} size={8} />
+          <Typography.Text>
+            {String(item.status)}, {item.subServiceName} : {item.number}
+          </Typography.Text>
+        </SubRow>
+      ))}
+    </Wrapper>
+  );
+};
+
+SubServicesPopover.propTypes = {
+  subServices: PropTypes.arrayOf(
+    PropTypes.shape({
+      subServiceName: PropTypes.string.isRequired,
+      status: PropTypes.bool.isRequired,
+      number: PropTypes.number.isRequired,
+    })
+  ),
+};
+
+export default SubServicesPopover;

src/components/ServicesStatus/index.js

@@ -0,0 +1 @@
+export { default } from './ServicesStatus';

src/components/ServicesStatus/mockData.js

@@ -0,0 +1,88 @@
+const servicesStatusMock = [
+  {
+    serviceName: 'auth-service',
+    status: false, // OK | DEGRADED | DOWN
+    uptime: 99.98,
+    latencyMsP95: 120,
+    errorRate: 0.2,
+    requestsPerSecond: 85,
+    services: [
+      {
+        subServiceName: 'login-api',
+        status: false,
+        latencyMsP95: 95,
+        errorRate: 0.1,
+        rps: 40,
+        lastCheck: '2026-02-05T08:42:10Z',
+        number: 1
+      },
+      {
+        subServiceName: 'token-refresh',
+        status: 'DEGRADED',
+        latencyMsP95: 280,
+        errorRate: 2.8,
+        rps: 12,
+        lastCheck: '2026-02-05T08:42:10Z',
+        number: 2
+      }
+    ],
+  },
+  {
+    serviceName: 'payments-service',
+    status: 'DEGRADED',
+    uptime: 99.2,
+    latencyMsP95: 420,
+    errorRate: 3.5,
+    requestsPerSecond: 22,
+    services: [
+      {
+        subServiceName: 'credit-card-processor',
+        status: 'OK',
+        latencyMsP95: 180,
+        errorRate: 0.6,
+        rps: 18,
+        lastCheck: '2026-02-05T08:42:10Z',
+              number: 1
+      },
+      {
+        subServiceName: 'invoice-generator',
+        status: 'DOWN',
+        latencyMsP95: null,
+        errorRate: 100,
+        rps: 0,
+        lastCheck: '2026-02-05T08:41:02Z',
+              number: 1
+      },
+    ],
+  },
+  {
+    serviceName: 'notifications-service',
+    status: 'DOWN',
+    uptime: 97.6,
+    latencyMsP95: null,
+    errorRate: 100,
+    requestsPerSecond: 0,
+    services: [
+      {
+        subServiceName: 'email-sender',
+        status: 'OK',
+        latencyMsP95: 210,
+        errorRate: 0.4,
+        rps: 55,
+        lastCheck: '2026-02-05T08:42:10Z',
+              number: 1,
+      },
+      {
+        subServiceName: 'sms-gateway',
+        status: 'DOWN',
+        latencyMsP95: null,
+        errorRate: 100,
+        rps: 0,
+        lastCheck: '2026-02-05T08:40:31Z',
+              number: 2,
+      },
+    ],
+  },
+];
+
+export default servicesStatusMock;

src/components/index.js

@@ -5,3 +5,4 @@ export { default as GrafanaLink } from './GrafanaLink';
 export { default as ParticleAnimation } from './ParticleAnimation';
 export { default as VersionsTable } from './TableVersions/VersionsTable.react';
 export { default as AuditTrailTable } from './TableVersions/AuditTrailTable';
+export { default as ServicesStatus } from './ServicesStatus';