Skip to content

Commit

Permalink
markup 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@akageun
akageun committed Jul 4, 2024
1 parent ad64e9a commit 05e9dbf
Show file tree
Hide file tree
Showing 8 changed files with 75 additions and 60 deletions.
16 changes: 16 additions & 0 deletions cadio-web/src/main/webapp/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,19 @@
.breadcrumb-arrow {
--bs-breadcrumb-divider: ">"
}

.table-fixed thead > tr, .table-fixed tbody > tr {
display: flex;
justify-content: space-around;
flex: 0 0 auto;
}

.table-fixed thead > tr th, .table-fixed tbody > tr th, .table-fixed thead > tr td, .table-fixed tbody > tr td {
flex: 1;
}

.table-fixed tbody {
overflow: scroll;
display: flex;
flex-direction: column;
}
80 changes: 37 additions & 43 deletions cadio-web/src/main/webapp/src/pages/cluster/components/cluster-home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,49 +48,43 @@ const ClusterHome = () => {
</div>
</div>

<div className="table-responsive small">
<table className="table table-striped table-sm">
<thead>
<tr>
<th className={"text-center"} scope="col">Keyspace Name</th>
<th className={"text-center"} scope="col">Durable Writes</th>
<th className={"text-center"} scope="col">replication</th>
</tr>
</thead>
<tbody>
{
keyspaceListLoading ?
<tr>
<td className={"text-center"} colSpan={5}>
<div className="spinner-border text-danger" role="status">
<span className="visually-hidden">Loading...</span>
</div>
</td>
</tr> :
keyspaceList && keyspaceList.length > 0 && keyspaceList.map((info, infoIndex) => {
return (
<tr key={infoIndex}>
<th className={"text-center"}>
<Link
to={`/cluster/${routeParams.clusterId}/keyspace/${info.keyspaceName}`}
className={`nav-link d-flex align-items-center gap-2`}>
<i className="bi bi-database"></i> {info.keyspaceName}
</Link>
</th>
<td className={"text-center"}>
{info.durableWrites}
</td>
<td className={"text-center"}>
{JSON.stringify(info.replication)}
</td>
</tr>
)
})
}

</tbody>
</table>
</div>
{
keyspaceListLoading ? <div className="d-flex justify-content-center">
<div className="spinner-border" role="status">
<span className="visually-hidden">Loading...</span>
</div>
</div> :
<div className="table-responsive small">
<table className="table table-sm table-hover">
<thead>
<tr className={"table-dark"}>
<th className={"text-center"} scope="col">Keyspace Name</th>
<th className={"text-center"} scope="col">replication</th>
</tr>
</thead>
<tbody className="table-group-divider">
{
keyspaceList && keyspaceList.length > 0 && keyspaceList.map((info, infoIndex) => {
return (
<tr key={infoIndex}>
<th>
<Link
to={`/cluster/${routeParams.clusterId}/keyspace/${info.keyspaceName}`}
className={``}>
<i className="bi bi-database"></i> {info.keyspaceName}
</Link>
</th>
<td className={"text-center"}>
{JSON.stringify(info.replication)}
</td>
</tr>
)
})
}
</tbody>
</table>
</div>
}
</>
)
}
Expand Down
8 changes: 5 additions & 3 deletions cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-detail-describe.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,11 @@ const KeyspaceDetailDescribe = ({describe}) => {
{/*</div>*/}
</div>

<code style={{whiteSpace: "pre"}}>
{describe}
</code>
<pre style={{whiteSpace: "pre"}}>
<code>
{describe}
</code>
</pre>
</>
)
}
Expand Down
6 changes: 3 additions & 3 deletions cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/keyspace-table-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ import {Link} from "react-router-dom";
const KeyspaceTableList = ({clusterId, keyspace, tableList}) => {
return (
<div className="table-responsive small">
<table className="table table-striped table-sm">
<table className="table table-sm table-fixed table-lock-height table-hover">
<thead>
<tr>
<tr className={"table-dark"}>
<th className={"text-center"} scope="col">Name</th>
<th className={"text-center"} scope="col">Comment</th>
<th className={"text-center"} scope="col">Options</th>
</tr>
</thead>
<tbody>
<tbody className="table-group-divider" style={{maxHeight: "50vh"}}>
{tableList.map((table) => (
<tr key={table.id}>
<th className="text-center">
Expand Down
6 changes: 3 additions & 3 deletions cadio-web/src/main/webapp/src/pages/cluster/components/keyspace/table/table-row.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@ const TableRow = () => {
<h5 className={"h5"}>Rows</h5>

<div className="table-responsive small">
<table className="table table-striped table-sm">
<table className="table table-sm table-fixed table-lock-height table-hover">
<thead>
<tr>
<tr className={"table-dark"}>
<th scope="col">#</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
</tr>
</thead>
<tbody>
<tbody className="table-group-divider" style={{height: "50vh"}}>
{
new Array(1000).fill({
t1: "test",
Expand Down
2 changes: 1 addition & 1 deletion cadio-web/src/main/webapp/src/pages/cluster/components/query/query-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const QueryEditor = (props) => {
<button className="btn btn-sm btn-primary" type="button" data-bs-toggle="collapse"
data-bs-target="#queryOptionCollapse" aria-expanded="false"
aria-controls="queryOptionCollapse">
<i className="bi bi-gear-wide-connected"></i> Options
<i className="bi bi-gear-wide-connected"></i>
</button>
</div>
{/*<div className="btn-group btn-group-sm me-2" role="group" aria-label="First group">*/}
Expand Down
11 changes: 7 additions & 4 deletions cadio-web/src/main/webapp/src/pages/cluster/components/query/query-result.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ const QueryResult = (props) => {
</code>

<div className="table-responsive small">
<table className="table table-striped table-hover table-sm">
<table className="table table-sm table-fixed table-lock-height table-hover">
<thead>
<tr>
<tr className={"table-dark"}>
{
result.columnNames.map((info, infoIndex) => {
return (
Expand All @@ -44,10 +44,13 @@ const QueryResult = (props) => {
}
</tr>
</thead>
<tbody>
<tbody className="table-group-divider" style={{maxHeight: "50vh"}}>
{
result.rows.length <= 0 ? <>
<tr><td className={"text-center"} colSpan={result.columnNames.length}>데이터가 없습니다.</td></tr>
<tr>
<td className={"text-center"} colSpan={result.columnNames.length}>데이터가 없습니다.
</td>
</tr>
</> :
result.rows.map((row, rowIndex) => {
return (
Expand Down
6 changes: 3 additions & 3 deletions cadio-web/src/main/webapp/src/pages/home-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,16 +75,16 @@ const HomeView = () => {
<h4 className="h4">Clusters</h4>

<div className="table-responsive small">
<table className="table table-striped table-sm">
<table className="table table-sm table-hover">
<thead>
<tr>
<tr className={"table-dark"}>
<th className={"text-center"} scope="col">Cluster Name</th>
<th className={"text-center"} scope="col">ContactPoints</th>
<th className={"text-center"} scope="col">Port</th>
<th className={"text-center"} scope="col">Local Datacenter</th>
</tr>
</thead>
<tbody>
<tbody className="table-group-divider">
{
clustersLoading ? <tr>
<td colSpan={5}>
Expand Down

0 comments on commit 05e9dbf

Please sign in to comment.