open-consul/ui/packages/consul-ui/app/components/topology-metrics/skin.scss

85 lines
1.7 KiB
SCSS
Raw Normal View History

.topology-container {
color: rgb(var(--tone-gray-700));
}
// Columns/Containers & Lines
#downstream-container,
#metrics-container,
#upstream-container {
border: 1px solid rgb(var(--tone-gray-200));
border-radius: var(--decor-radius-100);
}
#downstream-container,
#upstream-container {
background-color: rgb(var(--tone-gray-100));
}
#downstream-container div:first-child {
display: inline-flex;
span::before {
@extend %with-info-circle-outline-mask, %as-pseudo;
background-color: rgb(var(--tone-gray-500));
}
}
// Metrics Container
#metrics-container {
div:first-child {
background-color: rgb(var(--white));
}
Add metrics rendering to the new topology view. (#8858) * Remove unused StatsCard component * Create Card and Stats contextual components with styling * Send endpoint, item, and protocol to Stats as props * WIP basic plumbing for metrics in Ember * WIP metrics data source now works for different protocols and produces reasonable mock responses * WIP sparkline component * Mostly working metrics and graphs in topology * Fix date in tooltip to actually be correct * Clean up console.log * Add loading frame and create a style sheet for Stats * Various polish fixes: - Loading state for graph - Added fake latency cookie value to test loading - If metrics provider has no series/stats for the service show something that doesn't look broken - Graph hover works right to the edge now - Stats boxes now wrap so they are either shown or not as will fit not cut off - Graph resizes when browser window size changes - Some tweaks to number formats and stat metrics to make them more compact/useful * Thread Protocol through topology model correctly * Rebuild assetfs * Fix failing tests and remove stats-card now it's changed and become different * Fix merge conflict * Update api doublt * more merge fixes * Add data-permission and id attr to Card * Run JS linter * Move things around so the tests run with everything available * Get tests passing: 1. Remove fakeLatency setTimeout (will be replaced with CONSUL_LATENCY in mocks) 2. Make sure any event handlers are removed * Make sure the Consul/scripts are available before the app * Make sure interval gets set if there is no cookie value * Upgrade mocks so we can use CONSUL_LATENCY * Fix handling of no series values from Prometheus * Update assetfs and fix a comment * Rebase and rebuild assetfs; fix tcp metric series units to be bits not bytes * Rebuild assetfs * Hide stats when provider is not configured Co-authored-by: kenia <keniavalladarez@gmail.com> Co-authored-by: John Cowen <jcowen@hashicorp.com>
2020-10-09 20:31:15 +00:00
.link {
background-color: rgb(var(--tone-gray-100));
a {
color: rgb(var(--tone-gray-700));
}
a::before {
background-color: rgb(var(--tone-gray-500));
}
a:hover {
color: rgb(var(--color-action));
}
.metrics-link::before {
@extend %with-exit-mask, %as-pseudo;
}
.config-link::before {
@extend %with-docs-mask, %as-pseudo;
}
}
}
// SVG Line styling
#downstream-lines svg,
#upstream-lines svg {
path {
fill: var(--transparent);
}
circle {
fill: rgb(var(--white));
}
.allow-arrow {
fill: rgb(var(--tone-gray-300));
stroke-linejoin: round;
}
path,
.allow-dot,
.allow-arrow {
stroke: rgb(var(--tone-gray-300));
stroke-width: 2;
}
path[data-permission='not-defined'],
path[data-permission='empty'] {
stroke-dasharray: 4;
}
path[data-permission='deny'] {
stroke: rgb(var(--tone-red-500));
}
.deny-dot {
stroke: rgb(var(--tone-red-500));
stroke-width: 2;
}
.deny-arrow {
fill: rgb(var(--tone-red-500));
stroke: rgb(var(--tone-red-500));
stroke-linejoin: round;
}
}