refactor(Tablet): separate TabletTable

Author: artemmufazalov

src/containers/Tablet/Tablet.js

@@ -21,48 +21,12 @@ import {CriticalActionDialog} from '../../components/CriticalActionDialog';
 import routes, {createHref} from '../../routes';
 import {getDefaultNodePath} from '../Node/NodePages';
 
+import {TabletTable} from './TabletTable';
+
 import './Tablet.scss';
 
 const b = cn('tablet-page');
 
-const TABLE_SETTINGS = {
-    displayIndices: false,
-};
-
-const CLUSTERS_COLUMNS = [
-    {
-        name: 'generation',
-        header: 'Generation',
-        align: DataTable.RIGHT,
-    },
-    {
-        name: 'nodeId',
-        header: 'Node ID',
-        align: DataTable.RIGHT,
-        sortable: false,
-    },
-    {
-        name: 'changeTime',
-        header: 'Change time',
-        align: DataTable.RIGHT,
-        sortable: false,
-        render: ({value}) => calcUptime(value),
-    },
-    {
-        name: 'state',
-        header: 'State',
-        sortable: false,
-    },
-    {
-        name: 'follower_id',
-        header: 'Follower ID',
-        sortable: false,
-        render: ({row}) => {
-            return row.leader ? 'leader' : row.followerId;
-        },
-    },
-];
-
 class Tablet extends React.Component {
     static propTypes = {
         id: PropTypes.string,
@@ -388,15 +352,7 @@ class Tablet extends React.Component {
                         </div>
                     </div>
                     <div className={b('rigth-pane')}>
-                        <DataTable
-                            data={this.props.history}
-                            columns={CLUSTERS_COLUMNS}
-                            settings={TABLE_SETTINGS}
-                            initialSortOrder={{
-                                columnId: 'generation',
-                                order: DataTable.DESCENDING,
-                            }}
-                        />
+                        <TabletTable history={this.props.history} />
                     </div>
                 </div>
                 {this.renderDialog()}

src/containers/Tablet/TabletTable/TabletTable.tsx

@@ -0,0 +1,59 @@
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+
+import type {ITabletPreparedHistoryItem} from '../../../types/store/tablet';
+import {calcUptime} from '../../../utils';
+
+const columns: Column<ITabletPreparedHistoryItem>[] = [
+    {
+        name: 'Generation',
+        align: DataTable.RIGHT,
+        render: ({row}) => row.generation,
+    },
+    {
+        name: 'Node ID',
+        align: DataTable.RIGHT,
+        sortable: false,
+        render: ({row}) => row.nodeId,
+    },
+    {
+        name: 'Change time',
+        align: DataTable.RIGHT,
+        sortable: false,
+        render: ({row}) => calcUptime(row.changeTime),
+    },
+    {
+        name: 'State',
+        sortable: false,
+        render: ({row}) => row.state,
+    },
+    {
+        name: 'Follower ID',
+        sortable: false,
+        render: ({row}) => {
+            return row.leader ? 'leader' : row.followerId;
+        },
+    },
+];
+
+const TABLE_SETTINGS = {
+    displayIndices: false,
+};
+
+interface TabletTableProps {
+    history: ITabletPreparedHistoryItem[];
+}
+
+export const TabletTable = ({history}: TabletTableProps) => {
+    return (
+        <DataTable
+            theme="yandex-cloud"
+            data={history}
+            columns={columns}
+            settings={TABLE_SETTINGS}
+            initialSortOrder={{
+                columnId: 'Generation',
+                order: DataTable.DESCENDING,
+            }}
+        />
+    );
+};

src/containers/Tablet/TabletTable/index.ts

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