ColumnList Sorting (#110)

- js -> java

cassdio-core/src/main/java/kr/hakdang/cassdio/core/domain/cluster/keyspace/table/column/ClusterTableColumnCommander.java

@@ -17,7 +17,9 @@
 import org.springframework.stereotype.Service;
 
 import java.time.Duration;
+import java.util.Comparator;
 import java.util.List;
+import java.util.Map;
 
 import static com.datastax.oss.driver.api.querybuilder.QueryBuilder.bindMarker;
 import static java.util.Collections.emptyList;
@@ -55,12 +57,23 @@ public CqlSessionSelectResults columnList(String clusterId, String keyspace, Str
 
  ResultSet resultSet = session.execute(statement);
 
+ List<Map<String, Object>> rows = convertRows(session, resultSet)
+ .stream()
+ .peek(row -> row.put("sortValue", makeSortValue(row)))
+ .sorted(Comparator.comparing(row -> String.valueOf(row.get("sortValue"))))
+ .toList();
+
  return CqlSessionSelectResults.of(
- convertRows(session, resultSet),
+ rows,
  CassdioColumnDefinition.makes(resultSet.getColumnDefinitions())
  );
  }
 
+ private String makeSortValue(Map<String, Object> row) {
+ ColumnKind columnKind = ColumnKind.findByCode(String.valueOf(row.get("kind")));
+ return String.format("%s-%s", columnKind.getOrder(), row.get("position"));
+ }
+
  private SelectFrom getColumnTable(CqlSession session, String keyspace) {
  if (ClusterUtils.isVirtualKeyspace(session.getContext(), keyspace)) {
  return QueryBuilder

cassdio-web/src/main/webapp/src/components/cluster/modal/table-detail-modal.js

@@ -36,14 +36,10 @@ const TableDetailModal = ({show, handleClose, clusterId, keyspaceName, tableName
  return;
  }
 
- const sortedColumnList = CassdioUtils.columnListSorting(
- data.result.columnList
- );
-
  setTableInfo({
  detail: data.result.detail,
  describe: data.result.describe,
- columnList: sortedColumnList,
+ columnList: data.result.columnList,
  })
 
  })

cassdio-web/src/main/webapp/src/components/cluster/modal/table-row-detail-modal.js

@@ -2,7 +2,7 @@ import {useEffect} from "react";
 import {Modal, OverlayTrigger, Tooltip} from "react-bootstrap";
 import {toast} from "react-toastify";
 
-const TableRowDetailModal = ({show, handleClose, rowDetailView, convertedRowHeader}) => {
+const TableRowDetailModal = ({show, handleClose, rowDetailView, columnList}) => {
 
  const handleCopyClipBoard = async (data) => {
  try {
@@ -32,7 +32,7 @@ const TableRowDetailModal = ({show, handleClose, rowDetailView, convertedRowHead
  <table className="table table-sm table-hover">
  <tbody>
  {
- convertedRowHeader && convertedRowHeader.map((info, infoIndex) => {
+ columnList.rows && columnList.rows.map((info, infoIndex) => {
  return (
  <tr key={`row${infoIndex}`}>
  <th className={"text-center"} key={`resultHeader${infoIndex}`}

cassdio-web/src/main/webapp/src/hooks/useTable.js

@@ -1,7 +1,6 @@
 import {toast} from "react-toastify";
 import {useNavigate, useParams} from "react-router-dom";
 import {useState} from "react";
-import {CassdioUtils} from "utils/cassdioUtils";
 import clusterTableTruncateApi from "../remotes/clusterTableTruncateApi";
 import clusterTableDropApi from "../remotes/clusterTableDropApi";
 import clusterTableRowApi from "../remotes/clusterTableRowApi";
@@ -59,9 +58,11 @@ export default function useTable() {
  rows: [],
  rowHeader: [],
  columnList: [],
- convertedRowHeader: [],
  };
 
+ const doInitQueryResult = () => {
+ setQueryResult(initQueryResult);
+ }
 
  const [queryResult, setQueryResult] = useState(initQueryResult)
  const [nextCursor, setNextCursor] = useState('')
@@ -88,7 +89,6 @@ export default function useTable() {
  rows: [...queryResult.rows, ...data.result.rows],
  rowHeader: data.result.rowHeader,
  columnList: data.result.columnList,
- convertedRowHeader: CassdioUtils.convertRowHeader(data.result.columnList, data.result.rowHeader),
  })
  }).finally(() => {
  if (!setLoading) {
@@ -103,6 +103,7 @@ export default function useTable() {
  doTableTruncate,
  doTableDrop,
  doGetTableRows,
+ doInitQueryResult,
  queryLoading,
  queryResult,
  nextCursor

cassdio-web/src/main/webapp/src/pages/cluster/cluster-table-page.js

@@ -18,6 +18,7 @@ const ClusterTablePage = () => {
  doTableTruncate,
  doTableDrop,
  doGetTableRows,
+ doInitQueryResult,
  queryLoading,
  queryResult,
  nextCursor,
@@ -41,6 +42,7 @@ const ClusterTablePage = () => {
  return () => {
  //hide component
  setTableName('');
+ doInitQueryResult();
  };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tableName]);
@@ -99,7 +101,7 @@ const ClusterTablePage = () => {
  {/*</button>*/}
 
  <div className="dropdown">
- <button className="btn btn-outline-danger btn-sm dropdown-toggle" type="button"
+ <button className="btn btn-outline-secondary btn-sm dropdown-toggle" type="button"
  data-bs-toggle="dropdown"
  aria-expanded="false">
  <i className="bi bi-three-dots"></i>
@@ -119,7 +121,7 @@ const ClusterTablePage = () => {
  <tr className={"table-dark"}>
  <th className={"text-center"} scope="col">#</th>
  {
- queryResult.convertedRowHeader.map((info, infoIndex) => {
+ queryResult.columnList.rows && queryResult.columnList.rows.map((info, infoIndex) => {
  return (
  <th className={"text-center text-truncate"} key={`resultHeader${infoIndex}`}
  scope="col">
@@ -150,7 +152,7 @@ const ClusterTablePage = () => {
  {
  queryResult.rows.length <= 0 ? <>
  <tr>
- <td className={"text-center"} colSpan={queryResult.convertedRowHeader.length + 1}>
+ <td className={"text-center"} colSpan={queryResult.columnList.rows && queryResult.columnList.rows.length + 1}>
  No Data
  </td>
  </tr>
@@ -179,7 +181,7 @@ const ClusterTablePage = () => {
  </div>
  </td>
  {
- queryResult.convertedRowHeader.map((info, infoIndex) => {
+ queryResult.columnList.rows && queryResult.columnList.rows.map((info, infoIndex) => {
  return (
  <td className={"text-center text-break text-truncate"}
  key={`resultItem${infoIndex}`}>
@@ -243,7 +245,7 @@ const ClusterTablePage = () => {
  showRowDetail && rowDetailView && <TableRowDetailModal
  show={showRowDetail}
  rowDetailView={rowDetailView}
- convertedRowHeader={queryResult.convertedRowHeader}
+ columnList={queryResult.columnList}
  handleClose={() => setShowRowDetail(false)}
  />
  }

cassdio-web/src/main/webapp/src/utils/cassdioUtils.js

@@ -10,89 +10,4 @@ export const CassdioUtils = {
 
  return data;
  },
-
- convertRowHeader: (columnList, rowHeader) => {
- const convertedMap = CassdioUtils.columnListSortValueMap(columnList);
-
- const result = []
- for (const header of rowHeader) {
- const key = CassdioUtils.makeRowKey(header.keyspace, header.table, header.columnName)
-
- const convertedColumnInfo = convertedMap[key];
- result.push(convertedColumnInfo)
-
- }
-
- return result;
- },
-
- columnListSortValueMap: (columnList) => {
- if (!columnList || columnList.rows.length <= 0) {
- return [];
- }
-
- const rows = columnList.rows;
-
- const kindSort = {
- 'partition_key': 0,
- 'clustering': 1,
- 'regular': 2,
- 'unknown': 3,
- }
-
- const temp = {}
-
- for (const row of rows) {
-
- temp[CassdioUtils.makeRowKey(row.keyspace_name, row.table_name, row.column_name)] = {
- ...row,
- sortValue: `${kindSort[row.kind]}-${row.position}`
- }
- }
-
- return temp;
- },
-
- makeRowKey: (keyspace, table, column) => {
- return `${keyspace}.${table}.${column}`
- },
-
- columnListSorting: (columnList) => {
- if (!columnList || columnList.rows.length <= 0) {
- return [];
- }
-
- const rows = columnList.rows;
-
- const kindSort = {
- 'partition_key': 0,
- 'clustering': 1,
- 'regular': 2,
- 'unknown': 3,
- }
-
- const temp = []
-
- for (const row of rows) {
- temp.push({
- ...row,
- sortValue: `${kindSort[row.kind]}-${row.position}`
- })
- }
-
- temp.sort(function (a, b) {
- if (a.sortValue < b.sortValue) {
- return -1;
- }
- if (a.sortValue > b.sortValue) {
- return 1;
- }
- return 0;
- })
-
- return {
- ...columnList,
- rows: temp
- };
- }
 };