css (236596fb) · Commits · github_fork / Clip

src/fnordmetric/webui/fnordmetric-webui-cockpit.css

+17 −1

Original line number	Diff line number	Diff line
		@@ -90,7 +90,23 @@ fn-metric-control /deep/ fn-dropdown /deep/ #dropdown_ui {
		font-size: 13px;
		}

		fn-metric-control /deep/ .metric-control {
		fn-metric-control /deep/ .metric-control .group b {
		font-size: 13px;
		}

		fn-metric-control /deep/ fn-button {
		border: none;
		box-shadow: none;
		line-height: 36px;
		padding: 0 10px;
		margin: 0;
		}

		fn-metric-control /deep/ fn-button:hover {
		border-radius: 0;
		border-top: none;
		border-bottom: none;
		}

		fn-table /deep/ tr th {
		border-bottom: 1px solid #dee0e3;

src/libfnord/fnord-metricdb/metric-explorer/metric-control.html

+42 −173

Original line number	Diff line number	Diff line
		@@ -12,13 +12,12 @@
		fn-metric-control {
		display:block;
		height: 36px;
		overflow: hidden;
		border-bottom: 1px solid #dee0e3;
		}
		</style>
		<template id="fn-metric-control-base-tpl">
		<style type='text/css'>
		.group {
		.metric-control-group {
		height: 100%;
		float: left;
		padding: 8px 20px 10px 20px;
		@@ -28,90 +27,46 @@
		margin: 25px 20px 0 0;
		}

		.group.group_by {
		.metric-control-group.group_by {
		display: none;
		}

		.group.group_by.active {
		.metric-control-group.group_by.active {
		display: block;
		}

		.group.group_by fn-button[data-active='active'] {
		.metric-control-group.group_by fn-button[data-active='active'] {
		background: rgb(226, 232, 237);
		}

		.group.group_by fn-button {
		.metric-control-group.group_by fn-button {
		float: left;
		}

		.group.aggregation_time_window {
		.metric-control-group.aggregation_time_window {
		border-right: 1px solid rgb(226, 232, 237);
		}

		.group.aggregation_type {
		.metric-control-group.aggregation_type {
		border-right: 1px solid rgb(226, 232, 237);
		}

		.group b {
		.metric-control-group b {
		font-weight: normal;
		line-height: 12px;
		font-weight: 500;
		opacity: 0.7;
		}

		.group.scale fn-input /deep/ input {
		.metric-control-group.scale fn-input /deep/ input {
		width: 40px;
		padding: 0.67861em 0.8em !important;
		}

		fn-tooltip {
		display: none;
		position: absolute;
		z-index: 900;
		border: 1px solid #cccccc;
		max-width: 250px;
		background-color: #ffffff;
		padding: 0.833em 1em;
		font-weight: normal;
		font-style: normal;
		color: rgba(0, 0, 0, 0.8);
		border-radius: 0.2857rem;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
		font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
		font-size: 12px;
		line-height: 1.1em;
		margin:0;
		}

		fn-tooltip:before {
		position: absolute;
		content: '';
		width: 0.75em;
		height: 0.75em;
		background: #ffffff;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		z-index: 2;
		box-shadow: 1px 1px 0px 0px #b3b3b3;
		}

		fn-tooltip[data-active] {
		display: block;
		}

		fn-tooltip:before {
		bottom: -0.325em;
		left: 1em;
		top: auto;
		right: auto;
		margin-left: 0em;
		}

		.metric {
		float:left;
		height: 70px;
		width: 250px;
		border-right: 1px solid #d4d4d5;
		}

		.metric > .view {
		@@ -124,7 +79,6 @@
		display: block;
		}


		.metric > .view > h3 {
		font-size: 1rem;
		padding: 0;
		@@ -156,86 +110,6 @@
		cursor: pointer;
		}

		fn-button {
		cursor: pointer;
		display: inline-block;
		min-height: 1em;
		outline: none;
		border: none;
		vertical-align: baseline;
		color: rgba(0, 0, 0, 0.6);
		font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
		background: transparent !important;
		background-image: none;
		font-weight: normal;
		box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset;
		margin: 0em 0.25em 0em 0em;
		padding: 0.78571em 1.5em 0.78571em;
		text-transform: none;
		text-shadow: none;
		font-weight: bold;
		line-height: 1;
		font-style: normal;
		text-align: center;
		font-size: 1rem;
		text-decoration: none;
		background-image: none;
		border-radius: 0.2857rem;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
		transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
		-webkit-tap-highlight-color: transparent;
		}

		fn-button:hover {
		background: #fafafa !important;
		color: rgba(0, 0, 0, 0.8) !important;
		box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset, 0px 0px 0px 0px rgba(39, 41, 43, 0.15) inset;
		}

		fn-button:focus {
		background-color: '';
		background-image: '';
		box-shadow: 0px 0px 0px 1px transparent inset, 0px 0px 1px rgba(81, 167, 232, 0.8) inset, 0px 0px 3px 2px rgba(81, 167, 232, 0.8);
		color: rgba(0, 0, 0, 0.8);
		}

		fn-button i {
		display: inline-block;
		opacity: 1;
		margin: 0 .25rem 0 0;
		width: 1.23em;
		height: .9em;
		font-family: Icons;
		font-style: normal;
		line-height: 1;
		font-weight: 400;
		text-decoration: inherit;
		text-align: center;
		speak: none;
		font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		}

		fn-button[data-size='tiny'] {
		font-size: 0.85714286rem;
		}

		/*******************************
		Active
		*******************************/
		fn-button[data-state='active'],
		.fn-button[data-state='active'] {
		background: #fafafa !important;
		color: rgba(0, 0, 0, 0.8) !important;
		box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset, 0px 0px 0px 0px rgba(39, 41, 43, 0.15) inset;
		}

		fn-tooltip[data-pointer='right']:before {
		bottom: -0.325em;
		right: 1em;
		@@ -258,19 +132,17 @@
		</fn-search>
		</div>
		</div>
		<div class='group aggregation_type'>
		<b>Rollup</b>
		<fn-dropdown id='rollup' data-style="inline">
		<div class='metric-control-group'>
		<b>Aggregate: </b>
		<fn-dropdown id='rollup' data-style="inline small">
		<fn-dropdown-header>Sum</fn-dropdown-header>
		<fn-dropdown-item data-value='value'>Value</fn-dropdown-item>
		<fn-dropdown-item data-value='sum'>Sum</fn-dropdown-item>
		<fn-dropdown-item data-value='min'>Min</fn-dropdown-item>
		<fn-dropdown-item data-value='max'>Max</fn-dropdown-item>
		</fn-dropdown>
		</div>
		<div class='group aggregation_time_window'>
		<b>T<sub>Window</sub></b>
		<fn-dropdown id='time_window' data-style="inline">
		<b style="margin-left: 7px;">Window: </sub></b>
		<fn-dropdown id='time_window' data-style="inline small">
		<fn-dropdown-header>5 seconds</fn-dropdown-header>
		<fn-dropdown-item data-value=1>1 second</fn-dropdown-item>
		<fn-dropdown-item data-value=5>5 seconds</fn-dropdown-item>
		@@ -287,8 +159,8 @@
		<fn-dropdown-item data-value=43200>12 hours</fn-dropdown-item>
		<fn-dropdown-item data-value=86400>24 hours</fn-dropdown-item>
		</fn-dropdown>
		<b>T<sub>Step</sub></b>
		<fn-dropdown id='time_step' data-style="inline">
		<b style="margin-left: 7px;">Step: </b>
		<fn-dropdown id='time_step' data-style="inline small">
		<fn-dropdown-header>10 seconds</fn-dropdown-header>
		<fn-dropdown-item data-value=1>1 second</fn-dropdown-item>
		<fn-dropdown-item data-value=5>5 seconds</fn-dropdown-item>
		@@ -306,15 +178,17 @@
		<fn-dropdown-item data-value=86400>24 hours</fn-dropdown-item>
		</fn-dropdown>
		</div>

		<div class="group scale">
		<b>Scale</b>
		<b>Scale: </b>
		<fn-input id="scale_input" class="left" data-style="small" data-placeholder=0.8></fn-input>
		</div>

		<div class="group group_by">
		<b>Group by</b>
		<b>Group by: </b>
		</div>

		<fn-button id="control_btn" data-size="tiny">
		<fn-button id="control_btn" data-size="tiny" style="float: right;">
		<i class="fa fa-times"></i>
		</fn-button>
		</div>
		@@ -329,8 +203,7 @@
		var MetricControlComponent = function() {
		this.createdCallback = function() {
		var tpl = Fnord.getTemplate("fn-metric-control", "base");
		var shadow = this.createShadowRoot();
		shadow.appendChild(tpl);
		this.appendChild(tpl);

		var state = this.getAttribute('data-state');

		@@ -357,8 +230,8 @@
		this.handleAggregationDisplay = function() {
		var base = this;
		var elems = [
		this.shadowRoot.getElementById("time_window"),
		this.shadowRoot.getElementById("time_step")
		this.getElementById("time_window"),
		this.getElementById("time_step")
		];

		elems.forEach(function(elem) {
		@@ -399,11 +272,7 @@

		this.setAddButton = function() {
		var base = this;
		var button = this.shadowRoot.getElementById('control_btn');
		var tooltip = this.shadowRoot.getElementById("control_tooltip");
		tooltip.innerHTML = "Add Metric";
		tooltip.init(button);

		var button = this.getElementById('control_btn');
		button.querySelector("i").classList.add("fa-plus");
		button.addEventListener('fn-button-click', function() {
		base.setHeaderMetricView();
		@@ -413,8 +282,8 @@

		this.setRemoveButton = function() {
		var base = this;
		var button = this.shadowRoot.getElementById('control_btn');
		var tooltip = this.shadowRoot.getElementById("control_tooltip");
		var button = this.getElementById('control_btn');
		var tooltip = this.getElementById("control_tooltip");
		tooltip.innerHTML = "Remove Metric";
		tooltip.init(button);

		@@ -425,14 +294,14 @@

		this.handleSelectMetricControls = function() {
		var base = this;
		var search = this.shadowRoot.querySelector(".metric .view fn-search");
		var search = this.querySelector(".metric .view fn-search");

		this.shadowRoot.querySelector(
		this.querySelector(
		".metric .view i[name='edit_btn']").onclick = function() {
		base.toggleMetricView();
		}

		this.shadowRoot.querySelector(
		this.querySelector(
		".metric .view i[name='close_btn']").onclick = function() {
		base.toggleMetricView();
		}
		@@ -469,23 +338,23 @@
		};

		this.toggleMetricView = function() {
		this.shadowRoot.querySelector(
		this.querySelector(
		".metric .view[name='header']").classList.toggle("active");

		this.shadowRoot.querySelector(
		this.querySelector(
		".metric .view[name='search']").classList.toggle("active");
		};

		this.setHeaderMetricView = function() {
		this.shadowRoot.querySelector(
		this.querySelector(
		".metric .view[name='search']").classList.remove("active");

		this.shadowRoot.querySelector(
		this.querySelector(
		".metric .view[name='header']").classList.add("active");
		};

		this.setHeader = function() {
		this.shadowRoot.querySelector("h3").innerHTML = this.params.name;
		this.querySelector("h3").innerHTML = this.params.name;
		};

		this.handleControls = function() {
		@@ -493,20 +362,20 @@
		this.setHeader();
		this.setHeaderMetricView();

		var rollup = this.shadowRoot.getElementById("rollup");
		var rollup = this.getElementById("rollup");
		rollup.setAttribute('data-preselected', this.params.aggr_fn);

		var time_window = this.shadowRoot.getElementById("time_window");
		var time_window = this.getElementById("time_window");
		time_window.setAttribute('data-preselected', this.params.aggr_window);

		var time_step = this.shadowRoot.getElementById("time_step");
		var time_step = this.getElementById("time_step");
		time_step.setAttribute('data-preselected', this.params.aggr_step);

		var scale_input = this.shadowRoot.getElementById("scale_input");
		var scale_input = this.getElementById("scale_input");
		scale_input.setAttribute('data-value', this.params.scale);
		scale_input.setAttribute('data-placeholder', this.params.scale);

		var tooltip_aggr = this.shadowRoot.getElementById("tooltip_aggr");
		var tooltip_aggr = this.getElementById("tooltip_aggr");
		tooltip_aggr.initShowIf(time_window, function() {
		return (time_window.getAttribute('data-state') == 'disabled');
		});
		@@ -560,7 +429,7 @@

		this.handleGroupByControls = function() {
		var base = this;
		var group_by_field = this.shadowRoot.querySelector(".group.group_by");
		var group_by_field = this.querySelector(".group.group_by");
		var columns = this.splitColumns(this.params.columns);
		var group_by = this.splitColumns(this.params.group_by);

src/libfnord/fnord-webcomponents/components/fn-button.css

+0 −2

Original line number	Diff line number	Diff line
		@@ -45,8 +45,6 @@ fn-button,
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
		transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
		-webkit-tap-highlight-color: transparent;
		}

Admin message