css... (5e22f696) · Commits · github_fork / Clip

src/fnordmetric/adminui.cc

+5 −3

Original line number	Diff line number	Diff line
		@@ -28,8 +28,6 @@ AdminUI::AdminUI(
		webui_bundle_.addComponent("fnord/components/fn-tabbar.css");
		webui_bundle_.addComponent("fnord/components/fn-message.css");
		webui_bundle_.addComponent("fnord/components/fn-tooltip.css");
		webui_bundle_.addComponent("fnord/themes/midnight-blue.css");

		webui_bundle_.addComponent("fnord/fnord.js");
		webui_bundle_.addComponent("fnord/components/fn-appbar.html");
		webui_bundle_.addComponent("fnord/components/fn-button.html");
		@@ -62,7 +60,11 @@ AdminUI::AdminUI(
		webui_bundle_.addComponent("fnordmetric/fnordmetric-search.html");
		webui_bundle_.addComponent("fnordmetric/fnordmetric-query-editor.html");
		webui_bundle_.addComponent("fnordmetric/fnordmetric-webui.html");
		webui_bundle_.addComponent("fnordmetric/fnordmetric-webui.css");

		//webui_bundle_.addComponent("fnordmetric/fnordmetric-webui-midnightblue.css");
		//webui_bundle_.addComponent("fnord/themes/midnight-blue.css");
		webui_bundle_.addComponent("fnordmetric/fnordmetric-webui-cockpit.css");

		webui_bundle_.addComponent("fnordmetric/fnordmetric-webui-util.js");
		webui_bundle_.addComponent(
		"fnordmetric/fnordmetric-embed-query-popup.html");

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

0 → 100644

+68 −0

Original line number	Diff line number	Diff line
		body, html {
		height: 100%;
		}

		fnordmetric-app,
		#fnordmetric-viewport {
		display: block;
		font-size: 95%;
		}

		h1.page_header {
		margin: 0 0 0 20px;
		}

		.le_fnord {
		display: none;
		}

		/* fn-appbar */
		fn-appbar /deep/ .appbar_outer {
		background: #fff;
		height: 32px;
		border-bottom: 1px solid #e4e5e9;
		}

		fnordmetric-app fn-appbar /deep/ fn-appbar-section {
		line-height: 32px;
		padding: 0;
		margin: 0;
		}

		fn-appbar fn-button fn-icon {
		display: none;
		}

		fn-appbar fn-button {
		color: #444;
		font-weight: normal;
		cursor: pointer;
		font-size: 13px;
		padding: 0 5px;
		}

		fn-appbar fn-button:hover {
		background: transparent!important;
		background-color: none!important;
		border: none;
		}

		fn-metric-explorer-list .navigation,
		fn-metric-explorer-preview .navigation {
		background: #f6f6f8;
		height: 36px;
		overflow: hidden;
		padding: 0 14px;
		}

		fn-metric-explorer-list .navigation h1 {
		font-size: 14px;
		font-weight: 600;
		line-height: 38px;
		margin: 0;
		}

		fn-metric-explorer-list fn-table /deep/ table {
		border-left: none;
		border-right: none;
		}

src/fnordmetric/webui/fnordmetric-webui-midnightblue.css

0 → 100644

+27 −0

Original line number	Diff line number	Diff line
		body, html {
		height: 100%;
		}

		fnordmetric-app,
		#fnordmetric-viewport {
		display: block;
		}

		h1.page_header {
		margin: 0 0 0 20px;
		}

		.le_fnord {
		float: left;
		line-height: 49px;
		color: #cdd3d8;
		margin: 0;
		padding: 0;
		margin-left: -10px;
		font-family: "Arial";
		width: 51px;
		text-align: center;
		font-size: 24px;
		border-right: 1px solid #2e3135;
		font-weight: 600;
		}

src/fnordmetric/webui/fnordmetric-webui.css

deleted100644 → 0

+0 −988

Original line number	Diff line number	Diff line
		body, html {
		height: 100%;
		}

		fnordmetric-app,
		#fnordmetric-viewport {
		display: block;
		}

		h1.page_header {
		margin: 0 0 0 20px;
		}

		.le_fnord {
		float: left;
		line-height: 49px;
		color: #cdd3d8;
		margin: 0;
		padding: 0;
		margin-left: -10px;
		font-family: "Arial";
		width: 51px;
		text-align: center;
		font-size: 24px;
		border-right: 1px solid #2e3135;
		font-weight: 600;
		}
		/*

		body, html {
		margin: 0;
		padding: 0;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #545758;
		}

		body {
		background: #fff;
		padding-bottom: 20px;
		}



		.chart_container .load_foreground {
		position: relative;
		background: #fff;
		}


		.load_foreground i.fa {
		font-size: 48px;
		display: table-cell;
		vertical-align: middle;
		color: #aaadae;
		}



		.editor_type_chooser {

		}

		.fancy_button {
		font-weight: 600;
		border-radius: 4px;
		border: 1px solid rgba(0,0,0,0.1);
		background: linear-gradient(to bottom right, #f5f5f5, #f1f1f1);
		padding: 0 12px;
		height: 27px;
		line-height: 28px;
		display: inline-block;
		}

		input {
		width: 200px;
		height: 23px;
		float:left;
		padding: 2px;
		font-size: 14px;
		}


		.viewport {
		min-width: 900px;
		margin-top: 49px;
		}

		.headbar {
		min-width: 900px;
		height: 49px;
		top: 0;
		position: absolute;
		left: 0;
		right: 0;
		z-index:999;
		background: rgba(25, 32, 37, 1);
		border-bottom: rgba(24, 31, 36, 1);
		}

		.headbar a h1 i {
		font-size:11px;
		margin-right:8px;
		position:relative;
		top:-1px;
		}

		.headbar a h1 {
		font-weight: 400;
		font-size: 100%;
		line-height: 50px;
		height: 49px;
		padding: 0 25px;
		margin: 0;
		float: left;
		color: #cdd3d8;
		}

		.headbar a.smallpadding h1 {
		padding-right: 15px;
		}

		.headbar a.right h1 {
		float: right;
		border-left: 1px solid #2e3135
		}

		.searchbar {
		float: right;
		height: 49px;
		border-left: 1px solid #2e3135;
		padding-left: 20px;
		padding-right: 23px;
		}

		.searchbar i.fa {
		float: left;
		line-height: 49px;
		margin-right: 14px;
		font-size: 12px;
		}

		.searchbar input {
		height: 24px;
		margin-top: 8px;
		background: #2d363b;
		border: 1px solid #444e54;
		border-radius: 3px;
		color: #fff;
		font-size: 90%;
		padding: 3px 10px;
		width: 340px;
		}

		.editor_pane, .result_pane {
		position: absolute;
		box-sizing: border-box;
		}

		.editor_pane {
		border-bottom: 1px solid #dbdedf;
		overflow: hidden;
		}

		.result_pane {
		border-bottom: 1px solid #dbdedf;
		border-left: 2px solid #dbdedf;
		border-right: 1px solid #dbdedf;
		background: #e9ebed;
		}


		.viewport.horizontal_split .editor_pane {
		left: 0;
		}

		.viewport.horizontal_split .result_pane {
		margin-bottom: 50px;
		}

		.viewport.vertical_split .editor_pane {
		padding: 0 20px;
		left: 0;
		}

		.viewport.vertical_split .result_pane {
		margin-bottom: 50px;
		overflow-y: visible;
		}

		.result_pane p {
		padding: 20px;
		}

		.editor_resizer_tooltip {
		display:block;
		position: absolute;
		z-index: 100;
		background: #d7e4f2;
		}

		.editor_resizer_tooltip:hover {
		background: #d7e4f2;
		}

		.editor_resizer_tooltip.vertical {
		cursor: ns-resize;
		right: 0;
		}

		.editor_resizer_tooltip.horizontal {
		width: 5px;
		cursor: ew-resize;
		}

		.editor_pane .editor_navbar {
		background-color: #fff;
		height: 28px;
		border-bottom: 1px solid #dbdedf;
		}

		.editor_pane .editor_navbar a h3{
		float:left;
		margin:0;
		font-weight: normal;
		font-size: 14px;
		text-decoration: none;
		line-height: 28px;
		height: 28px;
		padding: 0 10px;
		border-right: 1px solid #dbdedf;
		color: #444;
		background-color: #fff;
		}

		.editor_pane .editor_navbar a.active h3 {
		background-color: #dbdedf;
		}

		.visual_editor.field {
		width: 100%;
		padding: 20px 10px 20px 20px;
		line-height: 26px;
		}

		.visual_editor.field .field_title {
		float:left;
		margin-right: 10px;
		}

		.visual_editor input {
		height: 20px;
		}

		.visual_editor input.small {
		width: 40px;
		font-size: 12px;
		}

		.visual_editor ul.dropdown * {
		clear: both;
		margin-right: 0px;
		}

		.visual_editor .simple_button {
		line-height: 26px;
		float:left;
		margin-right: 10px;
		padding: 0 5px;
		text-decoration: none;
		color: #444;
		border-radius: 4px;
		border: 1px solid #dbdedf;
		}

		.visual_editor .simple_button:hover,
		.visual_editor .simple_button.active{
		background-color: #dbdedf;
		}

		.visual_editor select {
		float:left;
		height: 26px;
		}

		.hover_tooltip {
		text-align: center;
		padding: 10px 7px;
		line-height: 13px;
		color: #fff;
		background: #2a2a2a;
		border-radius: 3px;
		font-size: 13px;
		z-index: 900;
		position: absolute;
		white-space: nowrap;
		}


		.navbar .hover_tooltip {
		top: 40px;
		}

		.result_pane .result_navbar {
		width: 100%;
		height: 40px;
		margin-top: 0px;
		border-bottom: 1px solid #dbdedf;
		text-decoration: none;
		}

		.result_pane .result_navbar a h3 {
		text-decoration: none;
		color: #444;
		line-height: 40px;
		margin: 0px;
		padding: 0 30px;
		border-right: 1px solid #dbdedf;
		float: left;
		}

		.result_pane .chart_container {
		text-align:center;
		}

		.result_pane .chart_container .svg {
		padding: 20px 10px;
		}

		.error_box {
		width: 90%;
		margin:auto;
		margin-top: 20px;
		padding: 9px 14px;
		background: rgba(230, 126, 34,0.1);
		border: 1px solid rgba(230, 126, 34,1.0);
		border-radius: 3px;
		color: rgba(122, 07, 03,1.0);
		line-height: 23px;
		}

		.result_pane .chart_container svg {
		max-width: 1100px;
		}

		.result_pane .error_field {
		width: 80%;
		padding: 10px;
		color: #444;
		}

		.pagination_navbar {
		position: absolute;
		float: right;
		height: 25px;
		line-height: 25px;
		margin-bottom: 10px;
		margin-right: 20px;
		}

		.pagination_navbar a,
		.pagination_navbar div {
		float:right;
		margin-right: 10px;
		text-decoration: none;
		color: #444;
		}

		.pagination_navbar .pagination_tooltip {
		text-align: center;
		font-weight: 500;
		padding: 0 7px;
		}

		.pagination_navbar .pagination_tooltip:hover {
		color: #009fe9;
		}

		.pagination_navbar .pagination_tooltip i.fa {
		font-size:90%;
		}

		.pagination_navbar #tooltip_back.pagination_tooltip {
		margin-right: 2px;
		}

		.pagination_navbar.metric {
		width: 100%;
		margin: auto;
		margin-top: -40px;
		right: 10px;
		}

		.pagination_navbar.metric.bottom {
		margin-top: 20px;
		margin-bottom: 20px;
		}

		.result_table .pagination_navbar {
		font-size: 90%;
		margin-top: -33px;
		}

		.result_table .metric_list {
		margin-top: 0;
		}

		.result_table table.metric_list tr.list_header {
		border-top: none;
		border-bottom: 1px solid #dbdedf;
		}

		.result_table table.metric_list th, .result_table table.metric_list td {
		height: 34px;
		line-height: 34px;
		font-size: 100%;
		}

		.result_pane .chart_container a.btn {
		float: right;
		margin-right: 0;
		}

		.result_pane table.result_table {
		width: 100%;
		max-width: 1500px;
		margin: auto;
		border-collapse: collapse;
		margin-bottom: 30px;
		}

		.result_pane table.result_table th {
		padding: 10px 0 10px 10px;
		background-color: rgba(0,0,0,0.04);
		font-weight: normal;
		}

		.result_pane table.result_table tr {
		border-bottom: 1px solid #dbdedf;
		}

		.result_pane table.result_table tr:hover td {
		background-color: #d7e4f2;
		}

		.result_pane table.result_table td {
		padding: 10px 0 10px 10px;
		text-align: center;
		}

		.viewport .metrics_error_pane {
		width: 100%;
		margin-top: 95px;
		text-align: center;
		}

		.search_bar {
		float:left;
		margin-left: 20px;
		margin-top: 9px;
		}

		.search_bar .fancy_button {
		border-radius: 0px;
		padding: 0 10px;
		float:left;
		height: 30px;
		line-height: 30px;
		}

		.search_bar .clear_button {
		float: left;
		height: 30px;
		width: 30px;
		line-height: 30px;
		font-size: 16px;
		text-align:center;
		text-decoration: none;
		color: #444;
		}

		.metrics.big_text {
		width: 80%;
		margin: auto;
		padding-top: 100px;
		font-size: 20px;
		text-align:center
		}

		.datepicker_widget.active {
		position:absolute;
		z-index: 999;
		background: #fff;
		border: 1px solid rgb(226, 232, 237);
		border-radius: 1px;

		}

		.datepicker_widget .input_container {
		width: 100%;
		height: 28px;
		padding-left: 35px;
		margin-top: 10px;
		margin-bottom: 10px;
		}

		.datepicker_widget .input_container input {
		float:left;
		width: 50px;
		}

		.datepicker_widget .input_container span {
		float:left;
		margin-left: 5px;
		margin-right: 5px;
		line-height: 28px;
		}


		.datepicker_widget table {
		margin: 9px;
		width: 200px;
		border: 1px solid rgb(226, 232, 237);
		border-radius: 3px;
		border-collapse: collapse;
		}

		.datepicker_widget table th {
		width: 25px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		font-weight: normal;
		color: #60707f;
		}

		.datepicker_widget table td {
		width: 25px;
		height: 20px;
		line-height: 20px;
		text-align:center;
		}

		.datepicker_widget table td.highlight {
		background-color: rgb(226, 232, 237);
		}

		.datepicker_widget table td.highlight_border {
		border: 1px solid #444;
		}

		.datepicker_widget .month_ttp {
		color: #444;
		padding-left: 5px;
		padding-right: 5px;
		}

		.datepicker_widget span.datepicker_title {
		font-weight: bold;
		width: 140px;
		}

		.datepicker_widget table td a {
		text-decoration: none;
		color: #444;
		}

		.metric_preview_controls .datepicker_widget {
		margin-top: 31px;
		width: 216px;
		}


		ul.autocomplete {
		position: absolute;
		top: 28px;
		margin-left: 27px;
		width: 360px;
		z-index: 999;
		padding-left: 0px;
		}

		ul.autocomplete li {
		background-color: #fff;
		border: 1px solid #dbdedf;
		list-style: none;
		list-style-type:none;
		margin:0;
		border-bottom: 1px solid #dbdedf;
		}

		ul.autocomplete li a {
		line-height:30px;
		display: block;
		padding: 0 4px;
		text-decoration: none;
		color: #444;
		}

		ul.autocomplete li.hover {
		background-color: #d7e4f2;
		}

		ul.autocomplete li:hover {
		background-color: #d7e4f2;
		}

		h1.metric {
		margin-top: 80px;
		}

		table.metric_list {
		width: 100%;
		margin-top: 5px;
		border-collapse: collapse;
		font-size: 90%;
		}

		table.metric_list tr {
		border-bottom: 1px solid rgb(226, 232, 237);
		}

		table.metric_list tr.list_header {
		border-top: 2px solid rgb(226, 232, 237);
		border-bottom: 2px solid rgb(226, 232, 237);
		background-color: #f6f8fa;
		color: #60707f;
		}

		table.metric_list tr.list_header i.sort {
		float: right;
		line-height: 40px;
		}

		table.metric_list th,
		table.metric_list td {
		text-align: left;
		font-weight: 400;
		border: none;
		height: 38px;
		line-height: 38px;
		font-size: 109%;
		padding: 0 20px;
		}

		table.metric_list th {
		line-height: 40px;
		}

		table.metric_list th {
		border-right: 1px solid rgb(226, 232, 237);
		}

		table.metric_list .clickable:hover {
		cursor:pointer;
		}

		tr.list_header th .caret {
		color: #bed0e2;
		text-decoration: none;
		font-size: 10px;
		float: right;
		}

		tr.list_header th .caret.left {
		margin-left: 5px;
		}

		table.metric_list tr:hover td {
		background-color: #f6f8fa;
		cursor: pointer;
		}

		.editor_pane .editor_menu {
		background: #dbdedf;
		height: 46px;
		box-shadow: 0 0 1px rgba(0,0,0,.1);
		}

		.info_field {
		margin: 20px 10px;
		text-align: center;
		font-size: 90%;
		}

		.popup_ui.background {
		position: fixed;
		top: 0;
		left:0;
		height: 100%;
		width: 100%;
		z-index: 1000;
		background: #e9ebed;
		opacity: 0.5;
		display: table;
		text-align: center;
		}

		.popup_ui {
		position: fixed;
		min-height: 400px;
		width: 40%;
		min-width: 700px;
		z-index: 2000;
		border: 1px solid #dbdedf;
		left: 30%;
		top:90px;
		background: #fff;
		border-radius: 3px;
		box-shadow: 0 0 3px rgba(0,0,0,.1);
		}

		.popup_ui .inner {
		padding: 20px;
		}

		.popup_ui .close_btn:hover {
		color: #009fe9;
		}

		.popup_ui .controls {
		padding-left: 50px;
		height: 50px;
		text-align:center;
		}

		.popup_ui .controls .tab {
		float:left;
		text-decoration: none;
		padding: 8px 13px;
		margin-right: 50px;
		color: #444;
		border: 1px solid #444;
		}

		.popup_ui .close_btn {
		float: right;
		color: #444;
		text-decoration: none;
		line-height: 40px;
		margin: 0 20px;
		}

		.popup_ui .inner_window {
		margin-top: 30px;
		margin-left: 20px;
		}


		h1.page_header em {
		font-style: normal;
		color: #394b59;
		}


		.metric_preview_controls {
		margin-top: 5px;
		height: 76px;
		border-top: 2px solid rgb(226, 232, 237);
		border-bottom: 2px solid rgb(226, 232, 237);
		background-color: #f6f8fa;
		color: #60707f;
		overflow: hidden;
		}

		.metric_preview_secondary_controls {
		height: 39px;
		margin: 0px;
		line-height: 39px;
		border-bottom: 1px solid #dbdedf;
		font-size: 90%;
		padding: 0 20px;
		text-align: right;
		}

		.metric_preview_secondary_controls .tab {
		float: left;
		color: #009fe9;
		}

		.metric_preview_secondary_controls a {
		color: #60707f;
		text-decoration: none;
		}

		.metric_preview_secondary_controls .btn + .btn {
		border-left: 1px solid #ececec;
		padding-left: 20px;
		}

		.metric_preview_secondary_controls .btn:hover {
		text-decoration: underline;
		cursor: pointer;
		}

		.metric_preview_secondary_controls .btn {
		float: left;
		margin-right: 20px;
		height: 22px;
		line-height: 22px;
		margin-top: 10px;
		}

		.metric_preview_secondary_controls .btn.on {
		color: #009fe9;
		}

		.metric_preview_secondary_controls .btn:first-child {
		color: #009fe9;
		font-weight:500;
		}

		.metric_preview_secondary_controls .btn .fa-database {
		font-size: 87%;
		position: relative;
		top: -1px;
		}

		.metric_preview_secondary_controls .btn i {
		position: relative;
		margin-right: 4px;
		}

		.metric_preview_secondary_controls .fa-chevron-left {
		color: rgb(84, 87, 88);
		border-right: 1px solid #ececec;
		margin-right: 5px;
		padding-right: 15px;
		height: 22px;
		line-height: 24px;
		font-size: 90%;
		}

		.metric_preview_secondary_controls .fa-chevron-right {
		color: rgb(84, 87, 88);
		border-left: 1px solid #ececec;
		margin-left: 5px;
		padding-left: 15px;
		height: 22px;
		line-height: 24px;
		font-size: 90%;
		}

		.metric_preview_secondary_controls .fa-chevron-left:hover,
		.metric_preview_secondary_controls .fa-chevron-right:hover {
		color: #009fe9;
		}

		.metric_preview_secondary_controls .current_date {
		padding: 0 10px;
		font-weight: 500;
		}

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

		.metric_preview_controls .group.aggregation_type select {
		min-width: 100px;
		}

		.metric_preview_controls .group.aggregation_time_window select {
		margin-right: 15px;
		min-width: 60px;
		}

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

		.metric_preview_controls .group.aggregation_time_window .disabled {
		opacity: 0.5;
		}

		.metric_preview_controls .group.date {
		float: right;
		}

		.metric_preview_controls .group.timespan {
		float: right;
		border-left: 1px solid rgb(226, 232, 237);
		padding-right: 0;
		}

		.metric_preview_controls .group.timespan select {
		min-width: 110px;
		}

		.metric_preview_controls .group {
		height: 64px;
		float: left;
		padding: 14px 20px 0 20px;
		overflow: hidden;
		}

		.metric_preview_controls .group.groupby i {
		margin-right: 5px;
		}

		.metric_preview_controls .group.groupby a {
		line-height: 28px;
		border: 1px solid #bbb;
		border-radius: 3px;
		padding: 0 8px;
		text-align: center;
		font-size: 12px;
		text-decoration: none;
		background: #fff;
		border: 1px solid #b3c2d0;
		color: #545758;
		height: 28px;
		display: block;
		float: left;
		margin-right: 10px;
		}

		.metric_preview_controls .group.groupby a.disabled {
		opacity: 0.5;
		}

		.metric_preview_controls .group.groupby a.disabled:hover {
		cursor: default;
		}

		.metric_preview_controls .group.groupby a.active {
		background: rgb(226, 232, 237);
		}

		.metric_preview_controls .group b {
		font-weight: normal;
		font-size: 80%;
		line-height: 12px;
		font-weight: 500;
		display: block;
		margin-bottom: 6px;
		opacity: 0.7;
		}

		.metric_preview_controls .group input {
		height: 28px;
		line-height: 28px;
		padding: 0 8px;
		font-size: 12px;
		border-radius: 4px;
		border: 1px solid #b3c2d0;
		color: #545758;
		}

		.metric_preview_controls .group input.highlighted {
		border: 1px solid rgba(230, 126, 34,1.0);
		background: rgba(230, 126, 34,0.1);
		}


		.metric_preview_controls .group select {
		-webkit-appearance: menulist-button;
		height: 30px;
		font-size: 12px;
		line-height: 30px;
		min-width: 150px;
		background: #fff;
		border: 1px solid #b3c2d0;
		color: #545758;
		}

		.single_metric_ui.chart_container {
		height: 400px;
		padding: 20px;
		text-align: center;
		}

		.single_metric_ui.table_container table.metric_list tr:hover td {
		background-color: #fff;
		cursor: default;
		}

		.single_metric_ui.chart_container svg {
		height: 100%;
		}

		.metric_preview.load_pane {
		position: absolute;
		top: 171px;
		width:100%;
		height: 100%;
		}
		*/

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

+1 −1

Original line number	Diff line number	Diff line
		@@ -74,7 +74,7 @@
		</fn-message>
		<div class="list ui">
		<div class="navigation">
		<h1 class="small left">Metrics &rsaquo; </h1>
		<h1 class="small left" style="float:left;" >Metrics &rsaquo; </h1>
		<fn-search data-size="small" data-placeholder="Search...">
		<fn-search-icon><i class="fa fa-search"></i></fn-search-icon>
		</fn-search>

Admin message