mirror of
https://github.com/grafana/grafana.git
synced 2026-09-05 04:40:13 -05:00
Ashley Harrison
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
import { LoadingPlaceholder } from '@grafana/ui';
|
||||
import { Box, LoadingPlaceholder } from '@grafana/ui';
|
||||
|
||||
interface Props {
|
||||
pageName?: string;
|
||||
@@ -9,9 +9,9 @@ interface Props {
|
||||
const PageLoader = ({ pageName = '' }: Props) => {
|
||||
const loadingText = `Loading ${pageName}...`;
|
||||
return (
|
||||
<div className="page-loader-wrapper">
|
||||
<Box display="flex" alignItems="center" direction="column" justifyContent="center" paddingTop={10}>
|
||||
<LoadingPlaceholder text={loadingText} />
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import Skeleton from 'react-loading-skeleton';
|
||||
|
||||
import { Text } from '@grafana/ui';
|
||||
import { SkeletonComponent, attachSkeleton } from '@grafana/ui/src/unstable';
|
||||
|
||||
import { Settings } from './AdminSettings';
|
||||
@@ -16,7 +17,11 @@ const AdminSettingsTableComponent = ({ settings }: Props) => {
|
||||
{Object.entries(settings).map(([sectionName, sectionSettings], i) => (
|
||||
<React.Fragment key={`section-${i}`}>
|
||||
<tr>
|
||||
<td className="admin-settings-section">{sectionName}</td>
|
||||
<td>
|
||||
<Text color="info" weight="bold">
|
||||
{sectionName}
|
||||
</Text>
|
||||
</td>
|
||||
<td />
|
||||
</tr>
|
||||
{Object.entries(sectionSettings).map(([settingName, settingValue], j) => (
|
||||
|
||||
@@ -5,7 +5,7 @@ import { useLocation } from 'react-router-dom';
|
||||
import { locationUtil, NavModel, NavModelItem } from '@grafana/data';
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
import { locationService } from '@grafana/runtime';
|
||||
import { Button, ToolbarButtonRow } from '@grafana/ui';
|
||||
import { Button, Stack, Text, ToolbarButtonRow } from '@grafana/ui';
|
||||
import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
|
||||
import { Page } from 'app/core/components/Page/Page';
|
||||
import { t } from 'app/core/internationalization';
|
||||
@@ -212,10 +212,12 @@ function getSectionNav(
|
||||
function MakeEditable({ dashboard, sectionNav }: SettingsPageProps) {
|
||||
return (
|
||||
<Page navModel={sectionNav}>
|
||||
<div className="dashboard-settings__header">Dashboard not editable</div>
|
||||
<Button type="submit" onClick={() => dashboard.makeEditable()}>
|
||||
Make editable
|
||||
</Button>
|
||||
<Stack direction="column" gap={2} alignItems="flex-start">
|
||||
<Text variant="h3">Dashboard not editable</Text>
|
||||
<Button type="submit" onClick={() => dashboard.makeEditable()}>
|
||||
Make editable
|
||||
</Button>
|
||||
</Stack>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
import { LoadingPlaceholder } from '@grafana/ui';
|
||||
import { Box, LoadingPlaceholder } from '@grafana/ui';
|
||||
|
||||
export interface Props {
|
||||
text?: string;
|
||||
@@ -8,8 +8,8 @@ export interface Props {
|
||||
|
||||
export const Loader = ({ text = 'Loading...' }: Props) => {
|
||||
return (
|
||||
<div className="page-loader-wrapper">
|
||||
<Box display="flex" alignItems="center" direction="column" justifyContent="center" paddingTop={10}>
|
||||
<LoadingPlaceholder text={text} />
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -60,3 +60,566 @@ input.ng-dirty.ng-invalid {
|
||||
input.invalid {
|
||||
box-shadow: inset 0 0px 5px $red;
|
||||
}
|
||||
|
||||
.gf-code-editor {
|
||||
min-height: 36px;
|
||||
min-width: 280px;
|
||||
flex-grow: 1;
|
||||
margin-right: $space-xs;
|
||||
|
||||
&.ace_editor {
|
||||
@include font-family-monospace();
|
||||
font-size: $font-size-md;
|
||||
min-height: 50px; // Include space for horizontal scrollbar
|
||||
|
||||
@include border-radius($input-border-radius);
|
||||
border: $border-width solid $input-border-color;
|
||||
}
|
||||
|
||||
.ace_content {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ace_editor.ace_autocomplete {
|
||||
@include font-family-monospace();
|
||||
font-size: $font-size-md;
|
||||
|
||||
// Ace editor adds <style> tag at the end of <head>, after grafana.css, so !important
|
||||
// is used for overriding styles with the same CSS specificity.
|
||||
background-color: $dropdownBackground !important;
|
||||
color: $dropdownLinkColor !important;
|
||||
border: 1px solid $dropdownBorder !important;
|
||||
width: 550px !important;
|
||||
|
||||
.ace_scroller {
|
||||
.ace_selected,
|
||||
.ace_active-line,
|
||||
.ace_line-hover {
|
||||
color: $dropdownLinkColorHover;
|
||||
background-color: $dropdownLinkBackgroundHover !important;
|
||||
}
|
||||
|
||||
.ace_line-hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.ace_completion-highlight {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
.ace_rightAlignedText {
|
||||
color: $text-muted;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$doc-font-size: $font-size-sm;
|
||||
|
||||
.ace_tooltip.ace_doc-tooltip {
|
||||
@include font-family-monospace();
|
||||
font-size: $doc-font-size;
|
||||
|
||||
background-color: $popover-help-bg;
|
||||
color: $popover-help-color;
|
||||
background-image: none;
|
||||
border: 1px solid $dropdownBorder;
|
||||
padding: $space-sm $space-md;
|
||||
|
||||
hr {
|
||||
background-color: $popover-help-color;
|
||||
margin: $space-sm 0;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0px 1px;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.ace_tooltip {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ace_hidden-cursors .ace_cursor {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.graph-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
&--legend-right {
|
||||
@include media-breakpoint-up(sm) {
|
||||
flex-direction: row;
|
||||
|
||||
.graph-legend {
|
||||
flex: 0 1 10px;
|
||||
max-height: 100%;
|
||||
overflow-y: initial;
|
||||
}
|
||||
|
||||
.graph-legend-series {
|
||||
display: block;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.graph-legend-table .graph-legend-series {
|
||||
display: table-row;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.graph-panel__chart {
|
||||
position: relative;
|
||||
cursor: crosshair;
|
||||
flex-grow: 1;
|
||||
min-height: 65%;
|
||||
}
|
||||
|
||||
.datapoints-warning {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 10;
|
||||
margin-top: -50px;
|
||||
margin-left: -100px;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
cursor: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.graph-legend {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
max-height: 35%;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
overflow-y: auto;
|
||||
padding-top: 6px;
|
||||
position: relative;
|
||||
|
||||
.popover-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-legend-alias {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.graph-legend-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graph-legend-icon {
|
||||
position: relative;
|
||||
padding-right: 4px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.graph-legend-icon,
|
||||
.graph-legend-alias,
|
||||
.graph-legend-value {
|
||||
display: inline;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
&.current::before {
|
||||
content: 'Current: ';
|
||||
}
|
||||
&.max::before {
|
||||
content: 'Max: ';
|
||||
}
|
||||
&.min::before {
|
||||
content: 'Min: ';
|
||||
}
|
||||
&.total::before {
|
||||
content: 'Total: ';
|
||||
}
|
||||
&.avg::before {
|
||||
content: 'Avg: ';
|
||||
}
|
||||
}
|
||||
|
||||
.graph-legend-icon .fa {
|
||||
font-size: 135%;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.graph-legend-series {
|
||||
float: left;
|
||||
white-space: nowrap;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&--right-y {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Don't move series to the right if legend is on the right as well
|
||||
.graph-panel--legend-right .graph-legend-series--right-y {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.graph-legend-value {
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.graph-legend-table {
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
|
||||
.graph-legend-series {
|
||||
display: table-row;
|
||||
float: none;
|
||||
padding-left: 0;
|
||||
&--right-y {
|
||||
float: none;
|
||||
|
||||
.graph-legend-alias::after {
|
||||
content: '(right-y)';
|
||||
padding: 0 5px;
|
||||
color: $text-color-weak;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
.graph-legend-alias,
|
||||
.graph-legend-icon,
|
||||
.graph-legend-value {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
padding: 2px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.graph-legend-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.graph-legend-value {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.graph-legend-alias {
|
||||
text-align: left;
|
||||
max-width: 650px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.graph-legend-series:nth-child(even) {
|
||||
background: $table-bg-accent;
|
||||
}
|
||||
|
||||
.graph-legend-value {
|
||||
&.current,
|
||||
&.max,
|
||||
&.min,
|
||||
&.total,
|
||||
&.avg {
|
||||
&::before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: right;
|
||||
padding: 0px 10px 1px 0;
|
||||
font-weight: bold;
|
||||
color: $blue;
|
||||
font-size: 85%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-legend-series__table-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.graph-legend-series-hidden {
|
||||
.graph-legend-value,
|
||||
.graph-legend-alias {
|
||||
color: $link-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-legend-popover {
|
||||
width: 210px;
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
.btn {
|
||||
padding: 1px 3px;
|
||||
margin-right: 0px;
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.annotation-tags {
|
||||
color: $purple;
|
||||
}
|
||||
|
||||
.graph-series-override__properties {
|
||||
margin-left: $space-md;
|
||||
}
|
||||
|
||||
.graph-tooltip {
|
||||
white-space: nowrap;
|
||||
font-size: $font-size-sm;
|
||||
background-color: $graph-tooltip-bg;
|
||||
color: $text-color;
|
||||
|
||||
.graph-tooltip-time {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
padding: $space-xxs;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.graph-tooltip-list-item {
|
||||
display: table-row;
|
||||
|
||||
&--highlight {
|
||||
color: $text-color-emphasis;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-tooltip-series-name {
|
||||
display: table-cell;
|
||||
padding: $space-xxs;
|
||||
max-width: 650px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.graph-tooltip-value {
|
||||
display: table-cell;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
padding-left: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-annotation {
|
||||
.label-tag {
|
||||
margin-right: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.graph-annotation__header {
|
||||
background: $popover-header-bg;
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.graph-annotation__title {
|
||||
font-weight: $font-weight-semi-bold;
|
||||
padding-right: $spacer;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.graph-annotation__edit-icon {
|
||||
padding-left: $spacer;
|
||||
}
|
||||
|
||||
.graph-annotation__time {
|
||||
color: $text-muted;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.graph-annotation__body {
|
||||
padding: $space-sm;
|
||||
}
|
||||
|
||||
.graph-annotation__user {
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
a[href] {
|
||||
color: $blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.left-yaxis-label {
|
||||
top: 50%;
|
||||
left: 8px;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
|
||||
.right-yaxis-label {
|
||||
top: 50%;
|
||||
right: 8px;
|
||||
transform: translateX(50%) translateY(-50%) rotate(90deg);
|
||||
}
|
||||
|
||||
.axisLabel {
|
||||
display: inline-block;
|
||||
color: $text-color;
|
||||
font-size: $font-size-sm;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alert-handle-wrapper {
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
|
||||
.alert-handle {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
float: right;
|
||||
box-shadow: $card-shadow;
|
||||
background: $card-background;
|
||||
cursor: move;
|
||||
width: 100px;
|
||||
font-size: $font-size-sm;
|
||||
border-radius: 4px;
|
||||
text-align: left;
|
||||
color: $text-muted;
|
||||
|
||||
&:hover {
|
||||
background-color: $btn-inverse-bg-hl;
|
||||
}
|
||||
|
||||
.icon-gf {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
float: left;
|
||||
border-right: 1px solid $btn-divider-left;
|
||||
padding: 6px 4px 4px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-handle-value {
|
||||
border-left: 1px solid $btn-divider-right;
|
||||
padding: $space-xs $space-sm;
|
||||
padding: 7px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
|
||||
.alert-handle-grip {
|
||||
background: url($btn-drag-image) no-repeat 50% 50%;
|
||||
background-size: 8px;
|
||||
float: right;
|
||||
width: 16px;
|
||||
height: 24px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&--T1 {
|
||||
right: -222px;
|
||||
width: 245px;
|
||||
|
||||
.alert-handle-line {
|
||||
width: 145px;
|
||||
}
|
||||
}
|
||||
|
||||
&--T0 {
|
||||
right: -104px;
|
||||
width: 129px;
|
||||
|
||||
.alert-handle-line {
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&--no-value {
|
||||
.alert-handle-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-handle-line {
|
||||
float: left;
|
||||
height: 2px;
|
||||
margin-top: 13px;
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
|
||||
&--critical {
|
||||
background-color: rgba(237, 46, 24, 0.6);
|
||||
}
|
||||
&--warning {
|
||||
background-color: rgba(247, 149, 32, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thresholds-form-disabled {
|
||||
filter: blur(3px);
|
||||
}
|
||||
|
||||
.piechart-panel {
|
||||
position: relative;
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.piechart-container {
|
||||
top: 10px;
|
||||
margin: auto;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.piechart-tooltip {
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
background-color: #141414;
|
||||
color: #d8d9da;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
|
||||
.piechart-tooltip-time {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: $space-xxs;
|
||||
font-weight: bold;
|
||||
color: #d8d9da;
|
||||
|
||||
.piechart-tooltip-value {
|
||||
display: table-cell;
|
||||
font-weight: bold;
|
||||
padding: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,16 +32,13 @@
|
||||
@import 'components/switch';
|
||||
@import 'components/tooltip';
|
||||
@import 'components/tags';
|
||||
@import 'components/panel_graph';
|
||||
@import 'components/submenu';
|
||||
@import 'components/panel_piechart';
|
||||
@import 'components/panel_pluginlist';
|
||||
@import 'components/panel_singlestat';
|
||||
@import 'components/panel_table';
|
||||
@import 'components/panel_heatmap';
|
||||
@import 'components/tagsinput';
|
||||
@import 'components/gf-form';
|
||||
@import 'components/filter-controls';
|
||||
@import 'components/filter-list';
|
||||
@import 'components/filter-table';
|
||||
@import 'components/old_stuff';
|
||||
@@ -57,12 +54,9 @@
|
||||
@import 'components/query_part';
|
||||
@import 'components/row';
|
||||
@import 'components/json_explorer';
|
||||
@import 'components/code_editor';
|
||||
@import 'components/dashboard_grid';
|
||||
@import 'components/page_header';
|
||||
@import 'components/dashboard_settings';
|
||||
@import 'components/add_data_source';
|
||||
@import 'components/page_loader';
|
||||
@import 'components/panel_header';
|
||||
|
||||
// LOAD @grafana/ui components
|
||||
@@ -70,7 +64,6 @@
|
||||
|
||||
// PAGES
|
||||
@import 'pages/dashboard';
|
||||
@import 'pages/admin';
|
||||
@import 'pages/alerting';
|
||||
@import 'pages/history';
|
||||
@import 'pages/explore';
|
||||
|
||||
@@ -1,84 +0,0 @@
|
||||
.gf-code-editor {
|
||||
min-height: 36px;
|
||||
min-width: 280px;
|
||||
flex-grow: 1;
|
||||
margin-right: $space-xs;
|
||||
|
||||
&.ace_editor {
|
||||
@include font-family-monospace();
|
||||
font-size: $font-size-md;
|
||||
min-height: 50px; // Include space for horizontal scrollbar
|
||||
|
||||
@include border-radius($input-border-radius);
|
||||
border: $border-width solid $input-border-color;
|
||||
}
|
||||
|
||||
.ace_content {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ace_editor.ace_autocomplete {
|
||||
@include font-family-monospace();
|
||||
font-size: $font-size-md;
|
||||
|
||||
// Ace editor adds <style> tag at the end of <head>, after grafana.css, so !important
|
||||
// is used for overriding styles with the same CSS specificity.
|
||||
background-color: $dropdownBackground !important;
|
||||
color: $dropdownLinkColor !important;
|
||||
border: 1px solid $dropdownBorder !important;
|
||||
width: 550px !important;
|
||||
|
||||
.ace_scroller {
|
||||
.ace_selected,
|
||||
.ace_active-line,
|
||||
.ace_line-hover {
|
||||
color: $dropdownLinkColorHover;
|
||||
background-color: $dropdownLinkBackgroundHover !important;
|
||||
}
|
||||
|
||||
.ace_line-hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.ace_completion-highlight {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
.ace_rightAlignedText {
|
||||
color: $text-muted;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$doc-font-size: $font-size-sm;
|
||||
|
||||
.ace_tooltip.ace_doc-tooltip {
|
||||
@include font-family-monospace();
|
||||
font-size: $doc-font-size;
|
||||
|
||||
background-color: $popover-help-bg;
|
||||
color: $popover-help-color;
|
||||
background-image: none;
|
||||
border: 1px solid $dropdownBorder;
|
||||
padding: $space-sm $space-md;
|
||||
|
||||
hr {
|
||||
background-color: $popover-help-color;
|
||||
margin: $space-sm 0;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0px 1px;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.ace_tooltip {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ace_hidden-cursors .ace_cursor {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
.dashboard-settings {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: $zindex-sidemenu;
|
||||
background: $dashboard-bg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dashboard-settings__body {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: $panel-bg;
|
||||
}
|
||||
|
||||
.dashboard-settings__aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: $spacer;
|
||||
}
|
||||
|
||||
.dashboard-settings__aside-header {
|
||||
color: $text-muted;
|
||||
font-size: $font-size-h3;
|
||||
padding-right: 60px;
|
||||
white-space: nowrap;
|
||||
margin-bottom: $space-md;
|
||||
|
||||
i {
|
||||
font-size: 25px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-settings__header {
|
||||
font-size: $font-size-h3;
|
||||
margin-bottom: $space-md;
|
||||
}
|
||||
|
||||
.dashboard-settings__subheader {
|
||||
color: $text-muted;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.dashboard-settings__nav-item {
|
||||
padding: 8px 40px 8px 8px;
|
||||
color: $text-color-weak;
|
||||
font-size: $font-size-md;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
@include left-brand-border;
|
||||
|
||||
&.active {
|
||||
color: $text-color;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
background: $brand-gradient-vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.gicon {
|
||||
margin-bottom: 2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 17px;
|
||||
width: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-settings__aside-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
margin: 40px $space-xl 0 0;
|
||||
|
||||
button {
|
||||
margin-bottom: $space-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-settings__json-save-button {
|
||||
margin-top: $space-md;
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
// ==========================================================================
|
||||
// FILTER CONTROLS
|
||||
// ==========================================================================
|
||||
|
||||
// Filters
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
.filter-controls-filters {
|
||||
display: inline-block;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tab-pane > .filter-controls-filters {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
// Actions
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
.filter-controls-actions {
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.filter-controls-actions > li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.filter-controls-actions-selected {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
.page-loader-wrapper {
|
||||
padding-top: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
&__spinner {
|
||||
font-size: 32px;
|
||||
margin-bottom: $space-sm;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@@ -1,436 +0,0 @@
|
||||
.graph-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
&--legend-right {
|
||||
@include media-breakpoint-up(sm) {
|
||||
flex-direction: row;
|
||||
|
||||
.graph-legend {
|
||||
flex: 0 1 10px;
|
||||
max-height: 100%;
|
||||
overflow-y: initial;
|
||||
}
|
||||
|
||||
.graph-legend-series {
|
||||
display: block;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.graph-legend-table .graph-legend-series {
|
||||
display: table-row;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.graph-panel__chart {
|
||||
position: relative;
|
||||
cursor: crosshair;
|
||||
flex-grow: 1;
|
||||
min-height: 65%;
|
||||
}
|
||||
|
||||
.datapoints-warning {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 10;
|
||||
margin-top: -50px;
|
||||
margin-left: -100px;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
cursor: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.graph-legend {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
max-height: 35%;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
overflow-y: auto;
|
||||
padding-top: 6px;
|
||||
position: relative;
|
||||
|
||||
.popover-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-legend-alias {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.graph-legend-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graph-legend-icon {
|
||||
position: relative;
|
||||
padding-right: 4px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.graph-legend-icon,
|
||||
.graph-legend-alias,
|
||||
.graph-legend-value {
|
||||
display: inline;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
&.current::before {
|
||||
content: 'Current: ';
|
||||
}
|
||||
&.max::before {
|
||||
content: 'Max: ';
|
||||
}
|
||||
&.min::before {
|
||||
content: 'Min: ';
|
||||
}
|
||||
&.total::before {
|
||||
content: 'Total: ';
|
||||
}
|
||||
&.avg::before {
|
||||
content: 'Avg: ';
|
||||
}
|
||||
}
|
||||
|
||||
.graph-legend-icon .fa {
|
||||
font-size: 135%;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.graph-legend-series {
|
||||
float: left;
|
||||
white-space: nowrap;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&--right-y {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Don't move series to the right if legend is on the right as well
|
||||
.graph-panel--legend-right .graph-legend-series--right-y {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.graph-legend-value {
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.graph-legend-table {
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
|
||||
.graph-legend-series {
|
||||
display: table-row;
|
||||
float: none;
|
||||
padding-left: 0;
|
||||
&--right-y {
|
||||
float: none;
|
||||
|
||||
.graph-legend-alias::after {
|
||||
content: '(right-y)';
|
||||
padding: 0 5px;
|
||||
color: $text-color-weak;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
.graph-legend-alias,
|
||||
.graph-legend-icon,
|
||||
.graph-legend-value {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
padding: 2px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.graph-legend-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.graph-legend-value {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.graph-legend-alias {
|
||||
text-align: left;
|
||||
max-width: 650px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.graph-legend-series:nth-child(even) {
|
||||
background: $table-bg-accent;
|
||||
}
|
||||
|
||||
.graph-legend-value {
|
||||
&.current,
|
||||
&.max,
|
||||
&.min,
|
||||
&.total,
|
||||
&.avg {
|
||||
&::before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: right;
|
||||
padding: 0px 10px 1px 0;
|
||||
font-weight: bold;
|
||||
color: $blue;
|
||||
font-size: 85%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-legend-series__table-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.graph-legend-series-hidden {
|
||||
.graph-legend-value,
|
||||
.graph-legend-alias {
|
||||
color: $link-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-legend-popover {
|
||||
width: 210px;
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
.btn {
|
||||
padding: 1px 3px;
|
||||
margin-right: 0px;
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.annotation-tags {
|
||||
color: $purple;
|
||||
}
|
||||
|
||||
.graph-series-override__properties {
|
||||
margin-left: $space-md;
|
||||
}
|
||||
|
||||
.graph-tooltip {
|
||||
white-space: nowrap;
|
||||
font-size: $font-size-sm;
|
||||
background-color: $graph-tooltip-bg;
|
||||
color: $text-color;
|
||||
|
||||
.graph-tooltip-time {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
padding: $space-xxs;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.graph-tooltip-list-item {
|
||||
display: table-row;
|
||||
|
||||
&--highlight {
|
||||
color: $text-color-emphasis;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-tooltip-series-name {
|
||||
display: table-cell;
|
||||
padding: $space-xxs;
|
||||
max-width: 650px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.graph-tooltip-value {
|
||||
display: table-cell;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
padding-left: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-annotation {
|
||||
.label-tag {
|
||||
margin-right: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.graph-annotation__header {
|
||||
background: $popover-header-bg;
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.graph-annotation__title {
|
||||
font-weight: $font-weight-semi-bold;
|
||||
padding-right: $spacer;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.graph-annotation__edit-icon {
|
||||
padding-left: $spacer;
|
||||
}
|
||||
|
||||
.graph-annotation__time {
|
||||
color: $text-muted;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.graph-annotation__body {
|
||||
padding: $space-sm;
|
||||
}
|
||||
|
||||
.graph-annotation__user {
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
a[href] {
|
||||
color: $blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.left-yaxis-label {
|
||||
top: 50%;
|
||||
left: 8px;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
|
||||
.right-yaxis-label {
|
||||
top: 50%;
|
||||
right: 8px;
|
||||
transform: translateX(50%) translateY(-50%) rotate(90deg);
|
||||
}
|
||||
|
||||
.axisLabel {
|
||||
display: inline-block;
|
||||
color: $text-color;
|
||||
font-size: $font-size-sm;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alert-handle-wrapper {
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
|
||||
.alert-handle {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
float: right;
|
||||
box-shadow: $card-shadow;
|
||||
background: $card-background;
|
||||
cursor: move;
|
||||
width: 100px;
|
||||
font-size: $font-size-sm;
|
||||
border-radius: 4px;
|
||||
text-align: left;
|
||||
color: $text-muted;
|
||||
|
||||
&:hover {
|
||||
background-color: $btn-inverse-bg-hl;
|
||||
}
|
||||
|
||||
.icon-gf {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
float: left;
|
||||
border-right: 1px solid $btn-divider-left;
|
||||
padding: 6px 4px 4px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-handle-value {
|
||||
border-left: 1px solid $btn-divider-right;
|
||||
padding: $space-xs $space-sm;
|
||||
padding: 7px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
|
||||
.alert-handle-grip {
|
||||
background: url($btn-drag-image) no-repeat 50% 50%;
|
||||
background-size: 8px;
|
||||
float: right;
|
||||
width: 16px;
|
||||
height: 24px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&--T1 {
|
||||
right: -222px;
|
||||
width: 245px;
|
||||
|
||||
.alert-handle-line {
|
||||
width: 145px;
|
||||
}
|
||||
}
|
||||
|
||||
&--T0 {
|
||||
right: -104px;
|
||||
width: 129px;
|
||||
|
||||
.alert-handle-line {
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&--no-value {
|
||||
.alert-handle-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-handle-line {
|
||||
float: left;
|
||||
height: 2px;
|
||||
margin-top: 13px;
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
|
||||
&--critical {
|
||||
background-color: rgba(237, 46, 24, 0.6);
|
||||
}
|
||||
&--warning {
|
||||
background-color: rgba(247, 149, 32, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thresholds-form-disabled {
|
||||
filter: blur(3px);
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
.piechart-panel {
|
||||
position: relative;
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.piechart-container {
|
||||
top: 10px;
|
||||
margin: auto;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.piechart-tooltip {
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
background-color: #141414;
|
||||
color: #d8d9da;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
|
||||
.piechart-tooltip-time {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: $space-xxs;
|
||||
font-weight: bold;
|
||||
color: #d8d9da;
|
||||
|
||||
.piechart-tooltip-value {
|
||||
display: table-cell;
|
||||
font-weight: bold;
|
||||
padding: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
.admin-settings-section {
|
||||
color: $variable;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
td.admin-settings-key {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.admin-list-table {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.admin-list-paging {
|
||||
float: right;
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-list-table {
|
||||
.team-permissions {
|
||||
padding-right: 120px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user