pk, fk analyse, show in structure tab

web/src/appobj/constraintAppObject.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { PrimaryKeyIcon, ForeignKeyIcon } from '../icons';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import showModal from '../modals/showModal';
+import ConnectionModal from '../modals/ConnectionModal';
+import axios from '../utility/axios';
+import { openNewTab } from '../utility/common';
+import { useSetOpenedTabs } from '../utility/globalState';
+
+/** @param props {import('dbgate').ConstraintInfo} */
+function getConstraintIcon(props) {
+  if (props.constraintType == 'primaryKey') return PrimaryKeyIcon;
+  if (props.constraintType == 'foreignKey') return ForeignKeyIcon;
+  return null;
+}
+
+/** @param props {import('dbgate').ConstraintInfo} */
+export default function constraintAppObject(props, { setOpenedTabs }) {
+  const title = props.constraintName;
+  const key = title;
+  const Icon = getConstraintIcon(props);
+
+  return { title, key, Icon };
+}

web/src/tabs/TableStructureTab.js

@@ -1,9 +1,12 @@
 import React from 'react';
-import useFetch from '../utility/useFetch';
 import styled from 'styled-components';
+import _ from 'lodash';
 import theme from '../theme';
+import useFetch from '../utility/useFetch';
 import ObjectListControl from '../utility/ObjectListControl';
 import { TableColumn } from '../utility/TableControl';
+import columnAppObject from '../appobj/columnAppObject';
+import constraintAppObject from '../appobj/constraintAppObject';
 
 const WhitePage = styled.div`
   position: absolute;
@@ -21,10 +24,12 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
     params: { conid, database, schemaName, pureName },
   });
   if (!tableInfo) return null;
+  const { columns, primaryKey, foreignKeys } = tableInfo;
   return (
     <WhitePage>
       <ObjectListControl
-        collection={tableInfo.columns.map((x, index) => ({ ...x, ordinal: index + 1 }))}
+        collection={columns.map((x, index) => ({ ...x, ordinal: index + 1 }))}
+        makeAppObj={columnAppObject}
         title="Columns"
       >
         <TableColumn
@@ -73,6 +78,30 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
           )}
         /> */}
       </ObjectListControl>
+
+      <ObjectListControl collection={_.compact([primaryKey])} makeAppObj={constraintAppObject} title="Primary key">
+        <TableColumn
+          fieldName="columns"
+          header="Columns"
+          formatter={row => row.columns.map(x => x.columnName).join(', ')}
+        />
+      </ObjectListControl>
+
+      <ObjectListControl collection={foreignKeys} makeAppObj={constraintAppObject} title="Foreign keys">
+        <TableColumn
+          fieldName="baseColumns"
+          header="Base columns"
+          formatter={row => row.columns.map(x => x.columnName).join(', ')}
+        />
+        <TableColumn fieldName="refTable" header="Referenced table" formatter={row => row.refTableName} />
+        <TableColumn
+          fieldName="refColumns"
+          header="Referenced columns"
+          formatter={row => row.columns.map(x => x.refColumnName).join(', ')}
+        />
+        <TableColumn fieldName="updateAction" header="ON UPDATE" />
+        <TableColumn fieldName="deleteAction" header="ON DELETE" />
+      </ObjectListControl>
     </WhitePage>
   );
 }

web/src/utility/ObjectListControl.js

@@ -27,7 +27,7 @@ const ObjectListBody = styled.div`
   //   margin-top: 3px;
 `;
 
-export default function ObjectListControl({ collection = [], title, showIfEmpty = false, children }) {
+export default function ObjectListControl({ collection = [], title, showIfEmpty = false, makeAppObj, children }) {
   if (collection.length == 0 && !showIfEmpty) return null;
 
   return (
@@ -40,7 +40,7 @@ export default function ObjectListControl({ collection = [], title, showIfEmpty
           <TableColumn
             fieldName="displayName"
             header="Name"
-            formatter={col => <AppObjectControl data={col} makeAppObj={columnAppObject} component="span" />}
+            formatter={col => <AppObjectControl data={col} makeAppObj={makeAppObj} component="span" />}
           />
           {children}
         </TableControl>