Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
3f0eff82
G
gitlab-foss
项目概览
李少辉-开发者
/
gitlab-foss
通知
15
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gitlab-foss
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
3f0eff82
编写于
6月 01, 2017
作者:
K
kushalpandya
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update as per review feedback
上级
4c58fd82
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
87 addition
and
43 deletion
+87
-43
app/assets/javascripts/prometheus_metrics/constants.js
app/assets/javascripts/prometheus_metrics/constants.js
+5
-0
app/assets/javascripts/prometheus_metrics/index.js
app/assets/javascripts/prometheus_metrics/index.js
+0
-1
app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
...sets/javascripts/prometheus_metrics/prometheus_metrics.js
+31
-14
app/assets/stylesheets/pages/settings.scss
app/assets/stylesheets/pages/settings.scss
+10
-20
app/views/projects/services/prometheus/_show.html.haml
app/views/projects/services/prometheus/_show.html.haml
+7
-7
spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js
...javascripts/prometheus_metrics/prometheus_metrics_spec.js
+34
-1
未找到文件。
app/assets/javascripts/prometheus_metrics/constants.js
0 → 100644
浏览文件 @
3f0eff82
export
default
{
EMPTY
:
'
empty
'
,
LOADING
:
'
loading
'
,
LIST
:
'
list
'
,
};
app/assets/javascripts/prometheus_metrics/index.js
浏览文件 @
3f0eff82
...
@@ -2,6 +2,5 @@ import PrometheusMetrics from './prometheus_metrics';
...
@@ -2,6 +2,5 @@ import PrometheusMetrics from './prometheus_metrics';
$
(()
=>
{
$
(()
=>
{
const
prometheusMetrics
=
new
PrometheusMetrics
(
'
.js-prometheus-metrics-monitoring
'
);
const
prometheusMetrics
=
new
PrometheusMetrics
(
'
.js-prometheus-metrics-monitoring
'
);
prometheusMetrics
.
init
();
prometheusMetrics
.
loadActiveMetrics
();
prometheusMetrics
.
loadActiveMetrics
();
});
});
app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
浏览文件 @
3f0eff82
import
PANEL_STATE
from
'
./constants
'
;
export
default
class
PrometheusMetrics
{
export
default
class
PrometheusMetrics
{
constructor
(
wrapperSelector
)
{
constructor
(
wrapperSelector
)
{
this
.
backOffRequestCounter
=
0
;
this
.
backOffRequestCounter
=
0
;
...
@@ -16,31 +18,48 @@ export default class PrometheusMetrics {
...
@@ -16,31 +18,48 @@ export default class PrometheusMetrics {
this
.
$missingEnvVarMetricsList
=
this
.
$missingEnvVarPanel
.
find
(
'
.js-missing-var-metrics-list
'
);
this
.
$missingEnvVarMetricsList
=
this
.
$missingEnvVarPanel
.
find
(
'
.js-missing-var-metrics-list
'
);
this
.
activeMetricsEndpoint
=
this
.
$monitoredMetricsPanel
.
data
(
'
active-metrics
'
);
this
.
activeMetricsEndpoint
=
this
.
$monitoredMetricsPanel
.
data
(
'
active-metrics
'
);
}
init
()
{
this
.
$panelToggle
.
on
(
'
click
'
,
e
=>
this
.
handlePanelToggle
(
e
));
this
.
$panelToggle
.
on
(
'
click
'
,
e
=>
this
.
handlePanelToggle
(
e
));
}
}
/* eslint-disable class-methods-use-this */
/* eslint-disable class-methods-use-this */
handlePanelToggle
(
e
)
{
handlePanelToggle
(
e
)
{
const
$toggleBtn
=
$
(
e
.
currentTarget
);
const
$toggleBtn
=
$
(
e
.
currentTarget
);
const
$currentPanelBody
=
$toggleBtn
.
parents
(
'
.panel
'
).
find
(
'
.panel-body
'
);
const
$currentPanelBody
=
$toggleBtn
.
closest
(
'
.panel
'
).
find
(
'
.panel-body
'
);
if
(
$currentPanelBody
.
is
(
'
:visible
'
))
{
$currentPanelBody
.
toggleClass
(
'
hidden
'
);
$currentPanelBody
.
addClass
(
'
hidden
'
);
if
(
$toggleBtn
.
hasClass
(
'
fa-caret-down
'
))
{
$toggleBtn
.
removeClass
(
'
fa-caret-down
'
).
addClass
(
'
fa-caret-right
'
);
$toggleBtn
.
removeClass
(
'
fa-caret-down
'
).
addClass
(
'
fa-caret-right
'
);
}
else
{
}
else
{
$currentPanelBody
.
removeClass
(
'
hidden
'
);
$toggleBtn
.
removeClass
(
'
fa-caret-right
'
).
addClass
(
'
fa-caret-down
'
);
$toggleBtn
.
removeClass
(
'
fa-caret-right
'
).
addClass
(
'
fa-caret-down
'
);
}
}
}
}
showMonitoringMetricsPanelState
(
stateName
)
{
switch
(
stateName
)
{
case
PANEL_STATE
.
LOADING
:
this
.
$monitoredMetricsLoading
.
removeClass
(
'
hidden
'
);
this
.
$monitoredMetricsEmpty
.
addClass
(
'
hidden
'
);
this
.
$monitoredMetricsList
.
addClass
(
'
hidden
'
);
break
;
case
PANEL_STATE
.
LIST
:
this
.
$monitoredMetricsLoading
.
addClass
(
'
hidden
'
);
this
.
$monitoredMetricsEmpty
.
addClass
(
'
hidden
'
);
this
.
$monitoredMetricsList
.
removeClass
(
'
hidden
'
);
break
;
default
:
this
.
$monitoredMetricsLoading
.
addClass
(
'
hidden
'
);
this
.
$monitoredMetricsEmpty
.
removeClass
(
'
hidden
'
);
this
.
$monitoredMetricsList
.
addClass
(
'
hidden
'
);
break
;
}
}
populateActiveMetrics
(
metrics
)
{
populateActiveMetrics
(
metrics
)
{
let
totalMonitoredMetrics
=
0
;
let
totalMonitoredMetrics
=
0
;
let
totalMissingEnvVarMetrics
=
0
;
let
totalMissingEnvVarMetrics
=
0
;
metrics
.
forEach
((
metric
)
=>
{
metrics
.
forEach
((
metric
)
=>
{
this
.
$monitoredMetricsList
.
append
(
`<li>
${
metric
.
group
}
<span class="badge
-count
">
${
metric
.
active_metrics
}
</span></li>`
);
this
.
$monitoredMetricsList
.
append
(
`<li>
${
metric
.
group
}
<span class="badge">
${
metric
.
active_metrics
}
</span></li>`
);
totalMonitoredMetrics
+=
metric
.
active_metrics
;
totalMonitoredMetrics
+=
metric
.
active_metrics
;
if
(
metric
.
metrics_missing_requirements
>
0
)
{
if
(
metric
.
metrics_missing_requirements
>
0
)
{
this
.
$missingEnvVarMetricsList
.
append
(
`<li>
${
metric
.
group
}
</li>`
);
this
.
$missingEnvVarMetricsList
.
append
(
`<li>
${
metric
.
group
}
</li>`
);
...
@@ -49,17 +68,17 @@ export default class PrometheusMetrics {
...
@@ -49,17 +68,17 @@ export default class PrometheusMetrics {
});
});
this
.
$monitoredMetricsCount
.
text
(
totalMonitoredMetrics
);
this
.
$monitoredMetricsCount
.
text
(
totalMonitoredMetrics
);
this
.
$monitoredMetricsLoading
.
addClass
(
'
hidden
'
);
this
.
showMonitoringMetricsPanelState
(
PANEL_STATE
.
LIST
);
this
.
$monitoredMetricsList
.
removeClass
(
'
hidden
'
);
if
(
totalMissingEnvVarMetrics
>
0
)
{
if
(
totalMissingEnvVarMetrics
>
0
)
{
this
.
$missingEnvVarPanel
.
removeClass
(
'
hidden
'
);
this
.
$missingEnvVarPanel
.
removeClass
(
'
hidden
'
);
this
.
$missingEnvVarPanel
.
find
(
'
.flash-container
'
).
off
(
'
click
'
);
this
.
$missingEnvVarMetricCount
.
text
(
totalMissingEnvVarMetrics
);
this
.
$missingEnvVarMetricCount
.
text
(
totalMissingEnvVarMetrics
);
}
}
}
}
loadActiveMetrics
()
{
loadActiveMetrics
()
{
this
.
$monitoredMetricsLoading
.
removeClass
(
'
hidden
'
);
this
.
showMonitoringMetricsPanelState
(
PANEL_STATE
.
LOADING
);
gl
.
utils
.
backOff
((
next
,
stop
)
=>
{
gl
.
utils
.
backOff
((
next
,
stop
)
=>
{
$
.
getJSON
(
this
.
activeMetricsEndpoint
)
$
.
getJSON
(
this
.
activeMetricsEndpoint
)
.
done
((
res
)
=>
{
.
done
((
res
)
=>
{
...
@@ -80,13 +99,11 @@ export default class PrometheusMetrics {
...
@@ -80,13 +99,11 @@ export default class PrometheusMetrics {
if
(
res
&&
res
.
data
&&
res
.
data
.
length
)
{
if
(
res
&&
res
.
data
&&
res
.
data
.
length
)
{
this
.
populateActiveMetrics
(
res
.
data
);
this
.
populateActiveMetrics
(
res
.
data
);
}
else
{
}
else
{
this
.
$monitoredMetricsLoading
.
addClass
(
'
hidden
'
);
this
.
showMonitoringMetricsPanelState
(
PANEL_STATE
.
EMPTY
);
this
.
$monitoredMetricsEmpty
.
removeClass
(
'
hidden
'
);
}
}
})
})
.
catch
(()
=>
{
.
catch
(()
=>
{
this
.
$monitoredMetricsLoading
.
addClass
(
'
hidden
'
);
this
.
showMonitoringMetricsPanelState
(
PANEL_STATE
.
EMPTY
);
this
.
$monitoredMetricsEmpty
.
removeClass
(
'
hidden
'
);
});
});
}
}
}
}
app/assets/stylesheets/pages/settings.scss
浏览文件 @
3f0eff82
...
@@ -39,11 +39,11 @@
...
@@ -39,11 +39,11 @@
.prometheus-metrics-monitoring
{
.prometheus-metrics-monitoring
{
.panel
{
.panel
{
.panel-toggle
{
.panel-toggle
{
width
:
12px
;
width
:
14px
;
}
&
.fa-caret-right
{
.badge
{
padding-left
:
4px
;
font-size
:
inherit
;
}
}
}
.panel-heading
.badge-count
{
.panel-heading
.badge-count
{
...
@@ -55,14 +55,9 @@
...
@@ -55,14 +55,9 @@
padding
:
0
;
padding
:
0
;
}
}
.badge-count
{
margin-left
:
3px
;
padding
:
3px
8px
;
border-radius
:
40%
;
}
.flash-container
{
.flash-container
{
margin-bottom
:
0
;
margin-bottom
:
0
;
cursor
:
default
;
.flash-notice
{
.flash-notice
{
border-radius
:
0
;
border-radius
:
0
;
...
@@ -80,25 +75,20 @@
...
@@ -80,25 +75,20 @@
margin-top
:
10px
;
margin-top
:
10px
;
margin-bottom
:
0
;
margin-bottom
:
0
;
}
}
p
{
color
:
$gl-gray-light
;
}
}
}
.loading-metrics
.
fa-spin
{
.loading-metrics
.
metrics-load-spinner
{
color
:
$loading-color
;
color
:
$loading-color
;
}
}
.metrics-list
{
.metrics-list
{
list-style-type
:
none
;
margin-bottom
:
0
;
margin
:
0
;
padding
:
0
;
li
{
li
{
padding
:
16px
;
padding
:
$gl-padding
;
.badge-count
{
.badge
{
margin-left
:
5px
;
background
:
$badge-bg
;
background
:
$badge-bg
;
}
}
}
}
...
...
app/views/projects/services/prometheus/_show.html.haml
浏览文件 @
3f0eff82
...
@@ -11,28 +11,28 @@
...
@@ -11,28 +11,28 @@
=
link_to
'More information'
,
'#'
=
link_to
'More information'
,
'#'
.col-lg-9
.col-lg-9
.panel.panel-default.js-panel-monitored-metrics
{
data:
{
"active-metrics"
=>
"#{namespace_project_prometheus_active_metrics_path(@project.namespace, @project
)}.json
"
}
}
.panel.panel-default.js-panel-monitored-metrics
{
data:
{
"active-metrics"
=>
"#{namespace_project_prometheus_active_metrics_path(@project.namespace, @project
, :json)}
"
}
}
.panel-heading
.panel-heading
%h3
.panel-title
%h3
.panel-title
Monitored
Monitored
%span
.badge
-count
.js-monitored-count
0
%span
.badge.js-monitored-count
0
.panel-body
.panel-body
.loading-metrics.js-loading-metrics
.loading-metrics.js-loading-metrics
=
icon
(
'spinner spin 3x'
)
=
icon
(
'spinner spin 3x'
,
class:
'metrics-load-spinner'
)
%p
Finding and configuring metrics...
%p
Finding and configuring metrics...
.empty-metrics.hidden.js-empty-metrics
.empty-metrics.hidden.js-empty-metrics
=
custom_icon
(
'icon_empty_metrics'
)
=
custom_icon
(
'icon_empty_metrics'
)
%p
No metrics are being monitored. To start monitoring, deploy to an environment.
%p
No metrics are being monitored. To start monitoring, deploy to an environment.
=
link_to
project_environments_path
(
@project
),
title:
'View environments'
,
class:
'btn btn-success'
do
=
link_to
project_environments_path
(
@project
),
title:
'View environments'
,
class:
'btn btn-success'
do
View environments
View environments
%ul
.metrics-list.hidden.js-metrics-list
%ul
.
list-unstyled.
metrics-list.hidden.js-metrics-list
.panel.panel-default.hidden.js-panel-missing-env-vars
.panel.panel-default.hidden.js-panel-missing-env-vars
.panel-heading
.panel-heading
%h3
.panel-title
%h3
.panel-title
=
icon
(
'caret-right lg'
,
class:
'panel-toggle js-panel-toggle'
,
'aria-label'
=>
'Toggle panel'
)
=
icon
(
'caret-right lg
fw
'
,
class:
'panel-toggle js-panel-toggle'
,
'aria-label'
=>
'Toggle panel'
)
Missing environment variable
Missing environment variable
%span
.badge
-count
.js-env-var-count
0
%span
.badge.js-env-var-count
0
.panel-body.hidden
.panel-body.hidden
.flash-container
.flash-container
.flash-notice
.flash-notice
...
@@ -42,4 +42,4 @@
...
@@ -42,4 +42,4 @@
$CI_ENVIRONMENT_SLUG
$CI_ENVIRONMENT_SLUG
to exporter
’
s queries.
to exporter
’
s queries.
=
link_to
'More information'
,
'#'
=
link_to
'More information'
,
'#'
%ul
.metrics-list.js-missing-var-metrics-list
%ul
.
list-unstyled.
metrics-list.js-missing-var-metrics-list
spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js
浏览文件 @
3f0eff82
import
PrometheusMetrics
from
'
~/prometheus_metrics/prometheus_metrics
'
;
import
PrometheusMetrics
from
'
~/prometheus_metrics/prometheus_metrics
'
;
import
PANEL_STATE
from
'
~/prometheus_metrics/constants
'
;
import
{
metrics
,
missingVarMetrics
}
from
'
./mock_data
'
;
import
{
metrics
,
missingVarMetrics
}
from
'
./mock_data
'
;
describe
(
'
PrometheusMetrics
'
,
()
=>
{
describe
(
'
PrometheusMetrics
'
,
()
=>
{
...
@@ -35,6 +36,38 @@ describe('PrometheusMetrics', () => {
...
@@ -35,6 +36,38 @@ describe('PrometheusMetrics', () => {
});
});
});
});
describe
(
'
showMonitoringMetricsPanelState
'
,
()
=>
{
let
prometheusMetrics
;
beforeEach
(()
=>
{
prometheusMetrics
=
new
PrometheusMetrics
(
'
.js-prometheus-metrics-monitoring
'
);
});
it
(
'
should show loading state when called with `loading`
'
,
()
=>
{
prometheusMetrics
.
showMonitoringMetricsPanelState
(
PANEL_STATE
.
LOADING
);
expect
(
prometheusMetrics
.
$monitoredMetricsLoading
.
hasClass
(
'
hidden
'
)).
toBeFalsy
();
expect
(
prometheusMetrics
.
$monitoredMetricsEmpty
.
hasClass
(
'
hidden
'
)).
toBeTruthy
();
expect
(
prometheusMetrics
.
$monitoredMetricsList
.
hasClass
(
'
hidden
'
)).
toBeTruthy
();
});
it
(
'
should show metrics list when called with `list`
'
,
()
=>
{
prometheusMetrics
.
showMonitoringMetricsPanelState
(
PANEL_STATE
.
LIST
);
expect
(
prometheusMetrics
.
$monitoredMetricsLoading
.
hasClass
(
'
hidden
'
)).
toBeTruthy
();
expect
(
prometheusMetrics
.
$monitoredMetricsEmpty
.
hasClass
(
'
hidden
'
)).
toBeTruthy
();
expect
(
prometheusMetrics
.
$monitoredMetricsList
.
hasClass
(
'
hidden
'
)).
toBeFalsy
();
});
it
(
'
should show empty state when called with `empty`
'
,
()
=>
{
prometheusMetrics
.
showMonitoringMetricsPanelState
(
PANEL_STATE
.
EMPTY
);
expect
(
prometheusMetrics
.
$monitoredMetricsLoading
.
hasClass
(
'
hidden
'
)).
toBeTruthy
();
expect
(
prometheusMetrics
.
$monitoredMetricsEmpty
.
hasClass
(
'
hidden
'
)).
toBeFalsy
();
expect
(
prometheusMetrics
.
$monitoredMetricsList
.
hasClass
(
'
hidden
'
)).
toBeTruthy
();
});
});
describe
(
'
populateActiveMetrics
'
,
()
=>
{
describe
(
'
populateActiveMetrics
'
,
()
=>
{
let
prometheusMetrics
;
let
prometheusMetrics
;
...
@@ -52,7 +85,7 @@ describe('PrometheusMetrics', () => {
...
@@ -52,7 +85,7 @@ describe('PrometheusMetrics', () => {
expect
(
prometheusMetrics
.
$monitoredMetricsCount
.
text
()).
toEqual
(
'
12
'
);
expect
(
prometheusMetrics
.
$monitoredMetricsCount
.
text
()).
toEqual
(
'
12
'
);
expect
(
$metricsListLi
.
length
).
toEqual
(
metrics
.
length
);
expect
(
$metricsListLi
.
length
).
toEqual
(
metrics
.
length
);
expect
(
$metricsListLi
.
first
().
find
(
'
.badge
-count
'
).
text
()).
toEqual
(
`
${
metrics
[
0
].
active_metrics
}
`
);
expect
(
$metricsListLi
.
first
().
find
(
'
.badge
'
).
text
()).
toEqual
(
`
${
metrics
[
0
].
active_metrics
}
`
);
});
});
it
(
'
should show missing environment variables list
'
,
()
=>
{
it
(
'
should show missing environment variables list
'
,
()
=>
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录