refactor(ProblemFilter): migrate to ts

Author: artemmufazalov

src/components/ProblemFilter/ProblemFilter.js

@@ -0,0 +1,18 @@
+import {RadioButton} from '@gravity-ui/uikit';
+
+import {ALL, PROBLEMS, IProblemFilterValues} from '../../utils/constants';
+
+interface ProblemFilterProps {
+    value: IProblemFilterValues;
+    onChange: (value: string) => void;
+    className?: string;
+}
+
+export const ProblemFilter = ({value, onChange, className}: ProblemFilterProps) => {
+    return (
+        <RadioButton value={value} onUpdate={onChange} className={className}>
+            <RadioButton.Option value={ALL}>{ALL}</RadioButton.Option>
+            <RadioButton.Option value={PROBLEMS}>{PROBLEMS}</RadioButton.Option>
+        </RadioButton>
+    );
+};

src/components/ProblemFilter/ProblemFilter.tsx

@@ -0,0 +1 @@
+export * from './ProblemFilter';

src/components/ProblemFilter/index.ts

@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 import DataTable from '@yandex-cloud/react-data-table';
 import {Loader, TextInput, Label} from '@gravity-ui/uikit';
 
-import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {ProblemFilter} from '../../components/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
 import {AccessDenied} from '../../components/Errors/403';
 import {UptimeFilter} from '../../components/UptimeFIlter';
@@ -46,7 +46,7 @@ class Nodes extends React.Component {
         hideTooltip: PropTypes.func,
         searchQuery: PropTypes.string,
         handleSearchQuery: PropTypes.func,
-        problemFilter: problemFilterType,
+        problemFilter: PropTypes.string,
         changeFilter: PropTypes.func,
         setHeader: PropTypes.func,
         className: PropTypes.string,

src/containers/Nodes/Nodes.js

@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 import {TextInput, Label} from '@gravity-ui/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
 
-import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {ProblemFilter} from '../../components/ProblemFilter';
 import {UptimeFilter} from '../../components/UptimeFIlter';
 import {Illustration} from '../../components/Illustration';
 
@@ -48,7 +48,7 @@ class NodesViewer extends React.PureComponent {
         handleSearchQuery: PropTypes.func,
         showTooltip: PropTypes.func,
         hideTooltip: PropTypes.func,
-        problemFilter: problemFilterType,
+        problemFilter: PropTypes.string,
         nodesUptimeFilter: PropTypes.string,
         setNodesUptimeFilter: PropTypes.func,
         changeFilter: PropTypes.func,

src/containers/NodesViewer/NodesViewer.js

@@ -10,7 +10,7 @@ import ReactList from 'react-list';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import GroupTreeViewer from '../../components/GroupTreeViewer/GroupTreeViewer';
 import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
-import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {ProblemFilter} from '../../components/ProblemFilter/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
 
 import {getPoolInfo} from '../../store/reducers/pool';
@@ -38,7 +38,7 @@ class Pool extends React.Component {
         pool: PropTypes.object,
         poolName: PropTypes.string,
         match: PropTypes.object,
-        filter: problemFilterType,
+        filter: PropTypes.string,
         changeFilter: PropTypes.func,
     };
 

src/containers/Pool/Pool.js

@@ -9,7 +9,7 @@ import {Loader, Checkbox} from '@gravity-ui/uikit';
 
 import NodeNetwork from './NodeNetwork/NodeNetwork';
 import Icon from '../../../../components/Icon/Icon';
-import ProblemFilter, {problemFilterType} from '../../../../components/ProblemFilter/ProblemFilter';
+import {ProblemFilter} from '../../../../components/ProblemFilter';
 import {Illustration} from '../../../../components/Illustration';
 
 import {getNetworkInfo, setDataWasNotLoaded} from '../../../../store/reducers/network';
@@ -35,7 +35,7 @@ class Network extends React.Component {
         loading: PropTypes.bool,
         autorefresh: PropTypes.bool,
         path: PropTypes.string,
-        filter: problemFilterType,
+        filter: PropTypes.string,
         changeFilter: PropTypes.func,
     };
 

src/containers/Tenant/Diagnostics/Network/Network.js

@@ -10,7 +10,7 @@ import {Loader, TextInput, Button} from '@gravity-ui/uikit';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
 import TabletsStatistic from '../../components/TabletsStatistic/TabletsStatistic';
-import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {ProblemFilter} from '../../components/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
 import {AutoFetcher} from '../../utils/autofetcher';
 
@@ -50,7 +50,7 @@ class Tenants extends React.Component {
         searchQuery: PropTypes.string,
         handleSearchQuery: PropTypes.func,
         setHeader: PropTypes.func,
-        filter: problemFilterType,
+        filter: PropTypes.string,
         changeFilter: PropTypes.func,
         cluster: PropTypes.object,
         singleClusterMode: PropTypes.bool,

src/containers/Tenants/Tenants.js

@@ -118,6 +118,8 @@ export const COLORS_PRIORITY = {
 export const ALL = 'All';
 export const PROBLEMS = 'With problems';
 
+export type IProblemFilterValues = typeof ALL | typeof PROBLEMS;
+
 export const THEME_KEY = 'theme';
 export const INVERTED_DISKS_KEY = 'invertedDisks';
 export const SAVED_QUERIES_KEY = 'saved_queries';