Add ring progress component. (#19793)

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' },
+  ]} />
+```

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;

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';