From 843a0830b61c0f304f8fe017fa0b491d3955360b Mon Sep 17 00:00:00 2001
From: Linus Pahl <46300478+linuspahl@users.noreply.github.com>
Date: Tue, 2 Jul 2024 08:19:27 +0200
Subject: [PATCH] Add ring progress component. (#19793)

---
 .../src/components/common/RingProgress.md     | 12 +++++++
 .../src/components/common/RingProgress.tsx    | 33 +++++++++++++++++++
 .../src/components/common/index.tsx           |  1 +
 3 files changed, 46 insertions(+)
 create mode 100644 graylog2-web-interface/src/components/common/RingProgress.md
 create mode 100644 graylog2-web-interface/src/components/common/RingProgress.tsx

diff --git a/graylog2-web-interface/src/components/common/RingProgress.md b/graylog2-web-interface/src/components/common/RingProgress.md
new file mode 100644
index 000000000000..00148882655a
--- /dev/null
+++ b/graylog2-web-interface/src/components/common/RingProgress.md
@@ -0,0 +1,12 @@
+```tsx
+  <RingProgress  sections={[{ value: 25, color: 'cyan' }]} label="25%" />
+```
+
+Example with multiple sections:
+```tsx
+  <RingProgress sections={[
+    { value: 40, color: 'cyan' },
+    { value: 15, color: 'orange' },
+    { value: 15, color: 'grape' },
+  ]} />
+```
diff --git a/graylog2-web-interface/src/components/common/RingProgress.tsx b/graylog2-web-interface/src/components/common/RingProgress.tsx
new file mode 100644
index 000000000000..e443b3155849
--- /dev/null
+++ b/graylog2-web-interface/src/components/common/RingProgress.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+import { RingProgress as MantineRingProgress } from '@mantine/core';
+import styled from 'styled-components';
+
+const LabelContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+type Props = Pick<React.ComponentProps<typeof MantineRingProgress>, 'label' | 'size' | 'thickness' | 'sections'>;
+
+const RingProgress = ({ label, ...props }: Props) => (
+  <MantineRingProgress roundCaps label={<LabelContainer>{label}</LabelContainer>} {...props} />
+);
+
+export default RingProgress;
diff --git a/graylog2-web-interface/src/components/common/index.tsx b/graylog2-web-interface/src/components/common/index.tsx
index 12a5d5ca776a..dda93a98fda1 100644
--- a/graylog2-web-interface/src/components/common/index.tsx
+++ b/graylog2-web-interface/src/components/common/index.tsx
@@ -99,6 +99,7 @@ export { default as QueryHelper } from './QueryHelper';
 export { default as ReactGridContainer } from './ReactGridContainer';
 export { default as ReadOnlyFormGroup } from './ReadOnlyFormGroup';
 export { default as RelativeTime } from './RelativeTime';
+export { default as RingProgress } from './RingProgress';
 export { default as ScrollButton } from './ScrollButton';
 export { default as SearchForm } from './SearchForm';
 export { default as Section } from './Section';