Build plugin with grafana toolkit (#1539)
* Use grafana toolkit template for building plugin * Fix linter and type errors * Update styles building * Fix sass deprecation warning * Remove empty js files produced by webpack building sass * Fix signing script * Replace classnames with cx * Fix data source config page * Use custom webpack config instead of overriding original one * Use gpx_ prefix for plugin executable * Remove unused configs * Roll back react hooks dependencies usage * Move plugin-specific ts config to root config file * Temporary do not use rst2html for function description tooltip * Remove unused code * remove unused dependencies * update react table dependency * Migrate tests to typescript * remove unused dependencies * Remove old webpack configs * Add sign target to makefile * Add magefile * Update CI test job * Update go packages * Update build instructions * Downgrade go version to 1.18 * Fix go version in ci * Fix metric picker * Add comment to webpack config * remove angular mocks * update bra config * Rename datasource-zabbix to datasource (fix mage build) * Add instructions for building backend with mage * Fix webpack targets * Fix ci backend tests * Add initial e2e tests * Fix e2e ci tests * Update docker compose for cypress tests * build grafana docker image * Fix docker stop task * CI: add Grafana compatibility check
This commit is contained in:
Alexander Zobnin
GitHub
283
src/styles/_panel-triggers.scss
Normal file
283
src/styles/_panel-triggers.scss
Normal file
@@ -0,0 +1,283 @@
|
||||
.triggers-panel-scroll {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.triggers-panel-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.card-section {
|
||||
padding: 2px;
|
||||
margin-bottom: 0.4rem;
|
||||
overflow: auto;
|
||||
|
||||
.alert-rule-list {
|
||||
.alert-rule-item {
|
||||
.alert-rule-item__text {
|
||||
display: flex;
|
||||
max-height: 1.6em;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
padding-right: 1em;
|
||||
|
||||
&.zbx-description--newline {
|
||||
max-height: unset;
|
||||
|
||||
.zbx-description {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.zbx-description {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span {
|
||||
padding-right: 0.4em;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 8 through 9 {
|
||||
&.font-size--#{$i * 10} {
|
||||
&,
|
||||
.alert-rule-item__name {
|
||||
font-size: 1% * $i * 10;
|
||||
}
|
||||
|
||||
.alert-rule-item__icon {
|
||||
width: unset;
|
||||
font-size: 1% * $i * 10;
|
||||
}
|
||||
|
||||
.alert-rule-item__time,
|
||||
.alert-rule-item__text,
|
||||
.zabbix-hostname {
|
||||
font-size: 1% * $i * 10 * 0.8;
|
||||
}
|
||||
|
||||
.zbx-trigger-tags .label-tag {
|
||||
font-size: 1% * $i * 10 * 0.6;
|
||||
padding: 0.3em 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 11 through 25 {
|
||||
&.font-size--#{$i * 10} {
|
||||
&,
|
||||
.alert-rule-item__name {
|
||||
font-size: 1% * $i * 10;
|
||||
}
|
||||
|
||||
.alert-rule-item__icon {
|
||||
width: unset;
|
||||
font-size: 1% * $i * 10;
|
||||
}
|
||||
|
||||
.alert-rule-item__time,
|
||||
.alert-rule-item__text,
|
||||
.zabbix-hostname {
|
||||
font-size: 1% * $i * 10 * 0.8;
|
||||
}
|
||||
|
||||
.zbx-trigger-tags .label-tag {
|
||||
font-size: 1% * $i * 10 * 0.6;
|
||||
padding: 0.3em 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zabbix-trigger-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.zabbix-hostname {
|
||||
color: $gray-2;
|
||||
margin-left: 1em;
|
||||
font-weight: 500;
|
||||
|
||||
i {
|
||||
padding-right: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.zbx-description {
|
||||
color: $gray-3;
|
||||
font-weight: normal;
|
||||
margin-left: 0.6em;
|
||||
|
||||
&--newline {
|
||||
margin-left: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.zbx-trigger-tags {
|
||||
margin-left: 0.6rem;
|
||||
|
||||
.zbx-tag {
|
||||
color: $zbx-tag-color;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
margin-right: 4px;
|
||||
padding: 1px 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.trigger-info-block {
|
||||
display: flex;
|
||||
|
||||
i, a {
|
||||
margin-right: 0.3rem;
|
||||
color: $gray-2;
|
||||
}
|
||||
}
|
||||
|
||||
.zabbix-trigger-source {
|
||||
margin-right: 1.5rem;
|
||||
margin-left: 1rem;
|
||||
font-weight: 500;
|
||||
|
||||
i {
|
||||
padding-right: 0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-rule-item__icon .icon-gf {
|
||||
right: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.zbx-trigger-card {
|
||||
position: relative;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.zabbix-trigger {
|
||||
&--blinked {
|
||||
opacity: 0.4;
|
||||
animation: zabbix-triggers-icon 0.8s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s infinite alternate;
|
||||
}
|
||||
}
|
||||
|
||||
.zbx-maintenance-icon {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
.zbx-trigger-highlighted {
|
||||
color: $zbx-text-highlighted;
|
||||
background: linear-gradient(135deg, $zbx-card-background-start, $zbx-card-background-stop);
|
||||
|
||||
.alert-rule-item__body,
|
||||
.alert-rule-item__header,
|
||||
.alert-rule-item__time,
|
||||
.zabbix-hostname,
|
||||
.zbx-description {
|
||||
color: $zbx-text-highlighted;
|
||||
}
|
||||
|
||||
.alert-rule-item__text {
|
||||
.zbx-trigger-state,
|
||||
.zbx-trigger-severity {
|
||||
color: $zbx-text-highlighted;
|
||||
}
|
||||
}
|
||||
|
||||
.zbx-trigger-lastchange .trigger-info-block.zbx-status-icons {
|
||||
a, i {
|
||||
color: $zbx-text-highlighted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zabbix-triggers-icon {
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.triggers-panel-footer {
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
font-size: 90%;
|
||||
line-height: 2px;
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ul > li {
|
||||
display: inline; // Remove list-style and block-level defaults
|
||||
}
|
||||
ul > li > a {
|
||||
float: left; // Collapse white-space
|
||||
padding: 4px 12px;
|
||||
text-decoration: none;
|
||||
border-left-width: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: $tight-form-func-bg;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ack-tooltip {
|
||||
&.popper {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.ack-comments {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.ack-add-button {
|
||||
padding-top: 0.4rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table td, th {
|
||||
padding-right: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.triggers-severity-config {
|
||||
&.gf-form-label {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.icon-gf {
|
||||
font-size: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
// fix for phantomjs (it has troubles with flex blocks rendering)
|
||||
.body--phantomjs {
|
||||
.triggers-panel-container {
|
||||
.alert-rule-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert-rule-item__body,
|
||||
.alert-rule-item__icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user