75d8abd562
* ui: Add forking based on service instance id existence Proxies come in 2 flavours, 'normal' and sidecar. We know when a proxy is a sidecar proxy based on whether a DestinationServiceID is set. LocalServiceAddress and LocalServicePort are only relevant for sidecar proxies. This adds template logic to show different text depending on this information. Additionally adds test around connect proxies (#5418) 1. Adds page object for the instance detail page 2. Adds further scenario steps used in the tests 3. Adds acceptance testing around the instance detail page. Services with proxies and the sidecar proxies and proxies themselves 4. Adds datacenter column for upstreams 5. Fixes bug routing bug for decision as to whether to request proxy information or not
186 lines
4.9 KiB
SCSS
186 lines
4.9 KiB
SCSS
@import './dom-recycling-table/index';
|
|
table.dom-recycling {
|
|
@extend %dom-recycling-table;
|
|
}
|
|
/* project specific */
|
|
%dom-recycling-table {
|
|
/* minimum of 4x50px heigh rows plus top/bottom margins*/
|
|
min-height: 249px;
|
|
}
|
|
%dom-recycling-table tbody {
|
|
/* tbodys are all absolute so,*/
|
|
/* make room for the header */
|
|
top: 29px !important;
|
|
/* Make room for the header, plus 20px for a margin on the bottom */
|
|
width: 100%;
|
|
}
|
|
%dom-recycling-table caption ~ tbody {
|
|
/* tbodys are all absolute so,*/
|
|
/* make room for the header */
|
|
top: 57px !important;
|
|
/* Make room for the header, plus 20px for a margin on the bottom */
|
|
}
|
|
|
|
/* TODO: putting this here is less than ideal */
|
|
/* but this is another area where I am specifically */
|
|
/* targetting table-like things. This is now a prime */
|
|
/* area for a bit of refactoring/reorganizing */
|
|
|
|
/* Every type of 'row' is given a placeholder which */
|
|
/* can apply to all th's and td's in the table */
|
|
/* (the placeholders refer to a tf so `> *` will get you */
|
|
/* both th and td).
|
|
/* Next, all the below calculations let you fix a width of */
|
|
/* any number of cells, then size the remaining cells */
|
|
/* using: */
|
|
/* calc(<100% divided by number of non-fixed width cells> - <sum of widths of fixed cells divided by number of non-fixed width cells>) */
|
|
|
|
/*TODO: trs only live in tables, get rid of table */
|
|
html.template-service.template-list main table tr {
|
|
@extend %services-row;
|
|
}
|
|
html.template-service.template-show #instances table tr {
|
|
@extend %instances-row;
|
|
}
|
|
html.template-instance.template-show #upstreams table tr {
|
|
@extend %upstreams-row;
|
|
}
|
|
html.template-intention.template-list main table tr {
|
|
@extend %intentions-row;
|
|
}
|
|
html.template-kv.template-list main table tr {
|
|
@extend %kvs-row;
|
|
}
|
|
html.template-acl.template-list main table tr {
|
|
@extend %acls-row;
|
|
}
|
|
html.template-policy.template-list main table tr {
|
|
@extend %policies-row;
|
|
}
|
|
html.template-token.template-list main table tr {
|
|
@extend %tokens-row;
|
|
}
|
|
html.template-policy.template-edit [role='dialog'] table tr,
|
|
html.template-policy.template-edit main table tr {
|
|
@extend %tokens-minimal-row;
|
|
}
|
|
html.template-token.template-list main table tr td.me,
|
|
html.template-token.template-list main table tr td.me ~ td,
|
|
html.template-token.template-list main table tr th {
|
|
@extend %tokens-your-row;
|
|
}
|
|
html.template-node.template-show main table tr {
|
|
@extend %node-services-row;
|
|
}
|
|
html.template-node.template-show main table.sessions tr {
|
|
@extend %node-sessions-row;
|
|
}
|
|
@media #{$--horizontal-session-list} {
|
|
%node-sessions-row > * {
|
|
// (100% / 7) - (300px / 6) - (120px / 6)
|
|
width: calc(14.2857% - 50px - 20px);
|
|
}
|
|
%node-sessions-row > *:nth-child(2) {
|
|
width: 300px;
|
|
}
|
|
%node-sessions-row > *:nth-last-child(1) {
|
|
width: 120px;
|
|
}
|
|
}
|
|
@media #{$--lt-horizontal-session-list} {
|
|
%node-sessions-row > * {
|
|
// (100% / 2) - (300px / 2) - (120px / 2)
|
|
width: calc(50% - 150px - 60px);
|
|
}
|
|
%node-sessions-row > *:nth-child(2) {
|
|
width: 300px;
|
|
}
|
|
%node-sessions-row > *:nth-last-child(1) {
|
|
width: 120px;
|
|
}
|
|
%node-sessions-row > *:nth-child(3),
|
|
%node-sessions-row > *:nth-child(4),
|
|
%node-sessions-row > *:nth-child(5),
|
|
%node-sessions-row > *:nth-child(6) {
|
|
display: none;
|
|
}
|
|
}
|
|
%intentions-row > * {
|
|
width: calc(25% - 15px);
|
|
}
|
|
%intentions-row > *:last-child {
|
|
@extend %table-actions;
|
|
}
|
|
%acls-row > * {
|
|
width: calc(50% - 30px);
|
|
}
|
|
%acls-row > *:last-child {
|
|
@extend %table-actions;
|
|
}
|
|
%tokens-row > *:first-child,
|
|
%tokens-minimal-row > *:not(last-child),
|
|
%tokens-row > *:nth-child(2),
|
|
%tokens-your-row:nth-last-child(2) {
|
|
width: 120px;
|
|
}
|
|
%tokens-row > *:nth-child(3),
|
|
%tokens-row > *:nth-child(4) {
|
|
width: calc(50% - 150px);
|
|
}
|
|
%tokens-your-row:nth-child(4) {
|
|
width: calc(50% - 270px) !important;
|
|
}
|
|
%tokens-row > *:last-child {
|
|
@extend %table-actions;
|
|
}
|
|
%tokens-minimal-row > *:last-child {
|
|
width: calc(100% - 240px);
|
|
}
|
|
@media #{$--lt-medium-table} {
|
|
/* Token > Policies */
|
|
/* Token > Your Token */
|
|
html.template-token.template-list tr > :nth-child(2),
|
|
html.template-token.template-list tr > :nth-child(4),
|
|
html.template-token.template-list tr th:nth-child(5),
|
|
html.template-token.template-list main table tr td.me ~ td:nth-of-type(5) {
|
|
display: none;
|
|
}
|
|
html.template-service.template-show #instances tr > :nth-child(3) {
|
|
display: none;
|
|
}
|
|
%instances-row > * {
|
|
width: calc(100% / 4);
|
|
}
|
|
}
|
|
|
|
%kvs-row > *:first-child {
|
|
width: calc(100% - 60px);
|
|
}
|
|
%kvs-row > *:last-child {
|
|
@extend %table-actions;
|
|
}
|
|
%node-services-row > * {
|
|
width: calc(100% / 3);
|
|
}
|
|
%policies-row > * {
|
|
width: calc(33% - 20px);
|
|
}
|
|
%policies-row > *:last-child {
|
|
@extend %table-actions;
|
|
}
|
|
// this will get auto calculated later in tabular-collection.js
|
|
// keeping this here for reference
|
|
// %services-row > * {
|
|
// (100% / 2) - (160px / 2)
|
|
// width: calc(50% - 160px);
|
|
// }
|
|
%services-row > * {
|
|
width: auto;
|
|
}
|
|
%instances-row > * {
|
|
width: calc(100% / 5);
|
|
}
|
|
%upstreams-row > * {
|
|
width: calc(100% / 4);
|
|
}
|