Many fix

README.md

@@ -1,4 +1,4 @@
-![Tabix Logo](https://tabix.io/img/LogoTabix22Icon.png?utm_source=git)
+![Tabix Logo](https://tabix.io/img/tabixLogo-IconText-DB7315.png?utm_source=git)
 
 Open source simple business intelligence application and sql editor tool for Clickhouse.
 

app/src/components/Dashboard/EditorTabPage/Draw/Draw.tsx

@@ -41,8 +41,7 @@ export default class Draw extends React.Component<Props & FlexProps> {
 
   componentDidMount() {
     // Process data
-    this.data = PlotlyCreator.create(this.props.data);
-
+    // this.data = PlotlyCreator.create(this.props.data);
     // // Resizer init
     // sizeSensor.bind(this.rootRef.current, (el) => {
     //   // @ToDo: move to react-sizeme, react-resize-detector[useResizeDetector], use call onResizeGrid?
@@ -71,19 +70,19 @@ export default class Draw extends React.Component<Props & FlexProps> {
     const { data, className, ...flexProps } = this.props;
     const myChartAdvisor = new ChartAdvisor();
     const ddata = data.rows;
-    console.log('Draw-> render data', ddata);
+    // console.log('Draw-> render data', ddata);
     const results = myChartAdvisor.advise({ data: ddata });
-    console.log('results', results);
+    // console.log('results', results);
 
     const myAdvisor = new Advisor();
     const advices = myAdvisor.advise({
       data: ddata,
       // fields: ['number', 'ss', 'cc'],
       options: { refine: true },
     });
-    console.log('advices', advices);
+    // console.log('advices', advices);
 
-    console.log('DATA', data.rows);
+    // console.log('DATA', data.rows);
     return (
       <Flex componentRef={this.rootRef} column {...flexProps}>
         <AutoChart

app/src/components/Dashboard/MetricsTabPage/MetricsTabPage.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
 import { typedInject } from '../../../module/mobx-utils';
 import { Stores, TabsStore } from '../../../stores';
-import { Button, Collapse } from 'antd';
-import { RequestPool } from '../../../services/api/provider/CoreProvider';
-import { DataTable } from 'components/Dashboard';
+import { Button, Collapse, Divider } from 'antd';
+import { RequestPool } from 'services/api/provider/CoreProvider';
 import { observer } from 'mobx-react';
 import { DataDecorator } from 'services';
+import { TableSheet } from 'components/TableSheet';
+import { CaretRightOutlined } from '@ant-design/icons';
 
 const { Panel } = Collapse;
+
 interface InjectedProps {
   store: TabsStore;
 }
 
 type Props = InjectedProps;
+
 @observer
 class MetricsTabPage extends React.Component<Props> {
   protected data: { [key: string]: DataDecorator } = {};
@@ -34,6 +37,11 @@ class MetricsTabPage extends React.Component<Props> {
     dataUpdate: Date.now(),
   };
 
+  componentDidMount() {
+    //
+    this.go();
+  }
+
   request = async () => {
     const { api } = this.props.store;
     // Pool of requests
@@ -45,35 +53,40 @@ class MetricsTabPage extends React.Component<Props> {
   private go = () => {
     const { store } = this.props;
     this.request().then((e) => {
-      console.log(e);
-      for (const key in e) {
+      for (const key in e.pool) {
         if (!this.data[key]) {
           this.data[key] = new DataDecorator();
         }
-        if (!e[key].isError) {
-          this.data[key].apply(e[key].response);
+        if (!e.pool[key].isError) {
+          this.data[key].apply(e.pool[key].response);
         }
       }
       this.setState({ dataUpdate: Date.now() });
-      console.log('RESP:', e);
     });
   };
+
   renderTable(table: string) {
     if (this.data[table]) {
       return (
-        <DataTable dataUpdate={this.state.dataUpdate} height={300} data={this.data[table]} fill />
+        <TableSheet
+          dataUpdate={this.state.dataUpdate}
+          defaultHeight={300}
+          data={this.data[table]}
+          fill
+        />
       );
     } else {
       return <b>{table} not ready</b>;
     }
   }
+
   //
   renderItems() {
     const items = [];
     for (const key in this.pool) {
       const title: string = key;
       items.push(
-        <Panel header={title} key={title}>
+        <Panel header={title} key={title} style={{ overflow: 'auto' }}>
           {this.renderTable(key)}
         </Panel>
       );
@@ -85,9 +98,11 @@ class MetricsTabPage extends React.Component<Props> {
   render() {
     return (
       <div>
-        <b>MetricsTabPage</b>
-        <hr />
-        <Button onClick={this.go}>GOG</Button>
+        <Divider style={{ margin: ' 5px 0' }}>Metrics & Diagnostic </Divider>
+        <Button onClick={this.go}>
+          <CaretRightOutlined style={{ color: 'orange' }} /> Reload
+        </Button>
+        <Divider />
         <Collapse>{this.renderItems()}</Collapse>
         {/*{this.renderTable('replicas')}*/}
         {/*{this.renderTable('replicaQueue')}*/}

app/src/components/Dashboard/ProcessesTabPage/ProcessesTabPage.tsx

@@ -8,6 +8,7 @@ import { TableSheet } from 'components/TableSheet';
 import { DataDecorator } from 'services';
 import { CaretRightOutlined, PauseOutlined, CloseOutlined } from '@ant-design/icons';
 
+//
 interface InjectedProps {
   store: TabsStore;
 }
@@ -263,7 +264,7 @@ class ProcessesTabPage extends React.Component<Props> {
           </span>
           <Divider dashed={true} style={{ margin: ' 5px 0' }} />
         </Flex>
-        <Flex vfill={true} hfill={true} style={{ border: '1px solid #a88532' }}>
+        <Flex vfill={true} hfill={true}>
           <TableSheet dataUpdate={dataUpdate} data={this.data} fill />
         </Flex>
       </div>

app/src/components/Dashboard/TableViewTabPage/TableViewTabPage.tsx

@@ -9,10 +9,12 @@ import SimpleEditor from '../EditorTabPage/SqlEditor/SimpleEditor';
 import { CaretRightOutlined, PauseOutlined, CloseOutlined } from '@ant-design/icons';
 import { TableFilter } from './TableFilter';
 import { Flex } from 'reflexy';
+import { TableSheet } from 'components/TableSheet';
 
 import { Stores, TabsStore } from '../../../stores';
 
 const { TabPane } = Tabs;
+
 interface InjectedProps {
   store: TabsStore;
   serverStructure?: ServerStructure.Server;
@@ -23,37 +25,72 @@ type Props = InjectedProps;
 
 export class TableViewTabPage extends React.Component<Props> {
   state = {
+    dataTableUpdated: 0,
     dataUpdate: Date.now(),
     describe: '',
     visibleTableFilter: false,
   };
   private data: DataDecorator = new DataDecorator();
-
+  private dataTable: DataDecorator = new DataDecorator();
+  private COLS: DataDecorator = new DataDecorator();
+  private PARTS: DataDecorator = new DataDecorator();
+
+  /**
+   *
+   * @param tableName `db.tb` like `ads.block_views_sharded`
+   */
   private getPool = (tableName: string): RequestPool => {
     const { api } = this.props.store;
-    return {
+    // console.log('LOad ', tableName);
+    const [db, tb] = tableName.split('.');
+    const pool = {
       DESCRIBE: api.prepared().template('DESCRIBE TABLE ' + tableName),
       SHOWCREATE: api.prepared().template('SHOW CREATE TABLE ' + tableName),
     };
+
+    if (db.length && tb.length) {
+      pool['COLS'] = api.prepared().columnsPerOneTable(500, db, tb);
+      pool['PARTS'] = api.prepared().partsPerOneTable(500, db, tb);
+    }
+
+    return pool;
   };
+
   componentDidMount() {
     this.loadDescribe();
   }
+
   onTab = (activeKey: string) => {
-    console.log('ON TAB Open', activeKey);
+    // console.log('ON TAB Open', activeKey);
+  };
+  loadData = async () => {
+    // console.log('loadData->loadData');
+    const { api } = this.props.store;
+    const { model } = this.props;
+    const tableId = model.tableId;
+    return await api.query('SELECT * FROM ' + tableId + ' LIMIT 200').then((e) => {
+      this.dataTable = e;
+      this.setState({ dataTableUpdated: e.dataUpdate });
+    });
   };
-
   private loadDescribe = () => {
     this.requestTableDescribe().then((e) => {
       // console.log('ON TAB', e);
       let describe = 'Error can`t fetch:SHOW CREATE TABLE';
 
-      if (!e['SHOWCREATE'].isError) {
-        const d = new DataDecorator(e['SHOWCREATE']);
+      if (!e.pool['SHOWCREATE'].isError) {
+        const d = new DataDecorator(e.pool['SHOWCREATE']);
         describe = d.getStatementResponse();
       }
-      if (!e['DESCRIBE'].isError) {
-        this.data = new DataDecorator(e['DESCRIBE']);
+      //
+      if (!e.pool['PARTS'].isError) {
+        this.PARTS = new DataDecorator(e.pool['PARTS']);
+      }
+      if (!e.pool['DESCRIBE'].isError) {
+        this.data = new DataDecorator(e.pool['DESCRIBE']);
+      }
+      if (!e.pool['COLS'].isError) {
+        this.COLS = new DataDecorator(e.pool['COLS']);
       }
 
       this.setState({ describe: describe, dataUpdate: Date.now() });
@@ -65,10 +102,11 @@ export class TableViewTabPage extends React.Component<Props> {
     const tableId = model.tableId;
     return await api.fetchPool(this.getPool(tableId));
   };
+
   render() {
     const { serverStructure, model } = this.props;
     const tableId = model.tableId;
-    const { describe, dataUpdate } = this.state;
+    const { describe, dataUpdate, dataTableUpdated } = this.state;
     const showTableFilter = () => {
       this.setState({ visibleTableFilter: true });
     };
@@ -94,7 +132,7 @@ export class TableViewTabPage extends React.Component<Props> {
 
         <Tabs
           type="card"
-          defaultActiveKey="3"
+          defaultActiveKey="1"
           onTabClick={this.onTab}
           onChange={this.onTab}
           style={{ height: '100%' }}
@@ -106,26 +144,29 @@ export class TableViewTabPage extends React.Component<Props> {
               </Flex>
 
               <Flex row hfill style={{ height: '60%' }}>
-                <DataTable dataUpdate={dataUpdate} data={this.data} />
+                <TableSheet dataUpdate={dataUpdate} data={this.data} title="DESCRIBE" />
               </Flex>
             </Row>
           </TabPane>
 
           <TabPane tab="Stats" key="2">
-            <Flex row fill={true} style={{ height: 'calc(50vh-40px)', border: '1px solid orange' }}>
-              calc(50vh-40px)
-            </Flex>
-
-            <Flex row style={{ border: '1px solid orange', height: 'calc(50vh-40px)' }}>
-              <DataTable dataUpdate={dataUpdate} data={this.data} />
-            </Flex>
+            <Row style={{ height: 'calc(50vh - 30px)' }}>
+              <TableSheet dataUpdate={dataUpdate} data={this.PARTS} title="System.parts" />
+            </Row>
+            <Row>
+              <Divider></Divider>
+              <TableSheet dataUpdate={dataUpdate} data={this.COLS} title="System.columns" />
+            </Row>
           </TabPane>
 
           <TabPane tab="Data" key="3">
-            <Row style={{ height: 'calc(90vh - 30px)', border: '1px solid orange' }}>
-              <Flex row hfill style={{ height: '30%', border: '1px solid orange' }}>
-                <Button type="primary" onClick={showTableFilter}>
-                  Open
+            <Row style={{ height: 'calc(50vh - 30px)' }}>
+              <Flex row hfill style={{ height: '30%' }}>
+                <Button type="dashed" onClick={showTableFilter}>
+                  Filter
+                </Button>
+                <Button type="primary" onClick={this.loadData}>
+                  Load data
                 </Button>
                 <Drawer
                   title="Select Filter"
@@ -138,8 +179,10 @@ export class TableViewTabPage extends React.Component<Props> {
                 </Drawer>
               </Flex>
 
-              <Flex row hfill style={{ border: '1px solid orange', height: '90%' }}>
-                <DataTable dataUpdate={dataUpdate} data={this.data} />
+              <Flex row hfill>
+                {dataTableUpdated > 0 && (
+                  <TableSheet dataUpdate={dataUpdate} data={this.dataTable} />
+                )}
               </Flex>
             </Row>
           </TabPane>

app/src/components/TableSheet/Header.tsx

@@ -27,6 +27,7 @@ export interface HeaderProps extends HeaderCfgProps {
   sheetType: string;
   sheet: SpreadSheet;
   setSheetType: React.Dispatch<any>;
+  title?: string;
 }
 
 export const Header: FC<HeaderProps> = ({
@@ -43,6 +44,7 @@ export const Header: FC<HeaderProps> = ({
   dataCfg,
   options,
   setSheetType,
+  title,
   ...restProps
 }) => {
   // Todo : SwitcherHeader
@@ -86,10 +88,11 @@ export const Header: FC<HeaderProps> = ({
       <Button icon={<VerticalAlignMiddleOutlined />}>Type</Button>
     </Dropdown>,
   ];
+
   return (
     <Row align={'middle'} justify={'end'}>
       <Col span={18} push={6}>
-        Table by {currentSheet}
+        {title}
       </Col>
       <Col span={6} pull={18}>
         <Popover content={pop} title="Table settings ...">