Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
1c4c4ba1
Commit
1c4c4ba1
authored
5 years ago
by
Adriel Santiago
Committed by
Phil Hughes
5 years ago
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Remove ECharts metrics dashboard feature flag
parent
3daa53e8
Changes
7
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
295 additions
and
7 deletions
+295
-7
app/assets/javascripts/monitoring/components/charts/area.vue
app/assets/javascripts/monitoring/components/charts/area.vue
+2
-2
app/controllers/projects/environments_controller.rb
app/controllers/projects/environments_controller.rb
+0
-5
changelogs/unreleased/adriel-remove-feature-flag.yml
changelogs/unreleased/adriel-remove-feature-flag.yml
+5
-0
spec/javascripts/helpers/vue_test_utils_helper.js
spec/javascripts/helpers/vue_test_utils_helper.js
+19
-0
spec/javascripts/helpers/vue_test_utils_helper_spec.js
spec/javascripts/helpers/vue_test_utils_helper_spec.js
+48
-0
spec/javascripts/monitoring/charts/area_spec.js
spec/javascripts/monitoring/charts/area_spec.js
+220
-0
spec/javascripts/monitoring/mock_data.js
spec/javascripts/monitoring/mock_data.js
+1
-0
No files found.
app/assets/javascripts/monitoring/components/charts/area.vue
View file @
1c4c4ba1
...
@@ -189,8 +189,8 @@ export default {
...
@@ -189,8 +189,8 @@ export default {
<
template
>
<
template
>
<div
class=
"prometheus-graph col-12 col-lg-6"
>
<div
class=
"prometheus-graph col-12 col-lg-6"
>
<div
class=
"prometheus-graph-header"
>
<div
class=
"prometheus-graph-header"
>
<h5
class=
"prometheus-graph-title"
>
{{
graphData
.
title
}}
</h5>
<h5
ref=
"graphTitle"
class=
"prometheus-graph-title"
>
{{
graphData
.
title
}}
</h5>
<div
class=
"prometheus-graph-widgets"
><slot></slot></div>
<div
ref=
"graphWidgets"
class=
"prometheus-graph-widgets"
><slot></slot></div>
</div>
</div>
<gl-area-chart
<gl-area-chart
ref=
"areaChart"
ref=
"areaChart"
...
...
This diff is collapsed.
Click to expand it.
app/controllers/projects/environments_controller.rb
View file @
1c4c4ba1
...
@@ -11,11 +11,6 @@ class Projects::EnvironmentsController < Projects::ApplicationController
...
@@ -11,11 +11,6 @@ class Projects::EnvironmentsController < Projects::ApplicationController
before_action
:verify_api_request!
,
only: :terminal_websocket_authorize
before_action
:verify_api_request!
,
only: :terminal_websocket_authorize
before_action
:expire_etag_cache
,
only:
[
:index
]
before_action
:expire_etag_cache
,
only:
[
:index
]
before_action
do
push_frontend_feature_flag
(
:area_chart
,
project
)
end
# Returns all environments or all folders based on the :nested param
def
index
def
index
@environments
=
project
.
environments
@environments
=
project
.
environments
.
with_state
(
params
[
:scope
]
||
:available
)
.
with_state
(
params
[
:scope
]
||
:available
)
...
...
This diff is collapsed.
Click to expand it.
changelogs/unreleased/adriel-remove-feature-flag.yml
0 → 100644
View file @
1c4c4ba1
---
title
:
Update metrics dashboard graph design
merge_request
:
24653
author
:
type
:
changed
This diff is collapsed.
Click to expand it.
spec/javascripts/helpers/vue_test_utils_helper.js
0 → 100644
View file @
1c4c4ba1
/* eslint-disable import/prefer-default-export */
const
vNodeContainsText
=
(
vnode
,
text
)
=>
(
vnode
.
text
&&
vnode
.
text
.
includes
(
text
))
||
(
vnode
.
children
&&
vnode
.
children
.
filter
(
child
=>
vNodeContainsText
(
child
,
text
)).
length
);
/**
* Determines whether a `shallowMount` Wrapper contains text
* within one of it's slots. This will also work on Wrappers
* acquired with `find()`, but only if it's parent Wrapper
* was shallowMounted.
* NOTE: Prefer checking the rendered output of a component
* wherever possible using something like `text()` instead.
* @param {Wrapper} shallowWrapper - Vue test utils wrapper (shallowMounted)
* @param {String} slotName
* @param {String} text
*/
export
const
shallowWrapperContainsSlotText
=
(
shallowWrapper
,
slotName
,
text
)
=>
!!
shallowWrapper
.
vm
.
$slots
[
slotName
].
filter
(
vnode
=>
vNodeContainsText
(
vnode
,
text
)).
length
;
This diff is collapsed.
Click to expand it.
spec/javascripts/helpers/vue_test_utils_helper_spec.js
0 → 100644
View file @
1c4c4ba1
import
{
shallowMount
}
from
'
@vue/test-utils
'
;
import
{
shallowWrapperContainsSlotText
}
from
'
./vue_test_utils_helper
'
;
describe
(
'
Vue test utils helpers
'
,
()
=>
{
describe
(
'
shallowWrapperContainsSlotText
'
,
()
=>
{
const
mockText
=
'
text
'
;
const
mockSlot
=
`<div>
${
mockText
}
</div>`
;
let
mockComponent
;
beforeEach
(()
=>
{
mockComponent
=
shallowMount
(
{
render
(
h
)
{
h
(
`<div>mockedComponent</div>`
);
},
},
{
slots
:
{
default
:
mockText
,
namedSlot
:
mockSlot
,
},
},
);
});
it
(
'
finds text within shallowWrapper default slot
'
,
()
=>
{
expect
(
shallowWrapperContainsSlotText
(
mockComponent
,
'
default
'
,
mockText
)).
toBe
(
true
);
});
it
(
'
finds text within shallowWrapper named slot
'
,
()
=>
{
expect
(
shallowWrapperContainsSlotText
(
mockComponent
,
'
namedSlot
'
,
mockText
)).
toBe
(
true
);
});
it
(
'
returns false when text is not present
'
,
()
=>
{
const
searchText
=
'
absent
'
;
expect
(
shallowWrapperContainsSlotText
(
mockComponent
,
'
default
'
,
searchText
)).
toBe
(
false
);
expect
(
shallowWrapperContainsSlotText
(
mockComponent
,
'
namedSlot
'
,
searchText
)).
toBe
(
false
);
});
it
(
'
searches with case-sensitivity
'
,
()
=>
{
const
searchText
=
mockText
.
toUpperCase
();
expect
(
shallowWrapperContainsSlotText
(
mockComponent
,
'
default
'
,
searchText
)).
toBe
(
false
);
expect
(
shallowWrapperContainsSlotText
(
mockComponent
,
'
namedSlot
'
,
searchText
)).
toBe
(
false
);
});
});
});
This diff is collapsed.
Click to expand it.
spec/javascripts/monitoring/charts/area_spec.js
0 → 100644
View file @
1c4c4ba1
import
{
shallowMount
}
from
'
@vue/test-utils
'
;
import
{
GlAreaChart
}
from
'
@gitlab/ui/dist/charts
'
;
import
{
shallowWrapperContainsSlotText
}
from
'
spec/helpers/vue_test_utils_helper
'
;
import
Area
from
'
~/monitoring/components/charts/area.vue
'
;
import
MonitoringStore
from
'
~/monitoring/stores/monitoring_store
'
;
import
MonitoringMock
,
{
deploymentData
}
from
'
../mock_data
'
;
describe
(
'
Area component
'
,
()
=>
{
const
mockWidgets
=
'
mockWidgets
'
;
let
mockGraphData
;
let
areaChart
;
let
spriteSpy
;
beforeEach
(()
=>
{
const
store
=
new
MonitoringStore
();
store
.
storeMetrics
(
MonitoringMock
.
data
);
store
.
storeDeploymentData
(
deploymentData
);
[
mockGraphData
]
=
store
.
groups
[
0
].
metrics
;
areaChart
=
shallowMount
(
Area
,
{
propsData
:
{
graphData
:
mockGraphData
,
containerWidth
:
0
,
deploymentData
:
store
.
deploymentData
,
},
slots
:
{
default
:
mockWidgets
,
},
});
spriteSpy
=
spyOnDependency
(
Area
,
'
getSvgIconPathContent
'
).
and
.
callFake
(
()
=>
new
Promise
(
resolve
=>
resolve
()),
);
});
afterEach
(()
=>
{
areaChart
.
destroy
();
});
it
(
'
renders chart title
'
,
()
=>
{
expect
(
areaChart
.
find
({
ref
:
'
graphTitle
'
}).
text
()).
toBe
(
mockGraphData
.
title
);
});
it
(
'
contains graph widgets from slot
'
,
()
=>
{
expect
(
areaChart
.
find
({
ref
:
'
graphWidgets
'
}).
text
()).
toBe
(
mockWidgets
);
});
describe
(
'
wrapped components
'
,
()
=>
{
describe
(
'
GitLab UI area chart
'
,
()
=>
{
let
glAreaChart
;
beforeEach
(()
=>
{
glAreaChart
=
areaChart
.
find
(
GlAreaChart
);
});
it
(
'
is a Vue instance
'
,
()
=>
{
expect
(
glAreaChart
.
isVueInstance
()).
toBe
(
true
);
});
it
(
'
receives data properties needed for proper chart render
'
,
()
=>
{
const
props
=
glAreaChart
.
props
();
expect
(
props
.
data
).
toBe
(
areaChart
.
vm
.
chartData
);
expect
(
props
.
option
).
toBe
(
areaChart
.
vm
.
chartOptions
);
expect
(
props
.
formatTooltipText
).
toBe
(
areaChart
.
vm
.
formatTooltipText
);
expect
(
props
.
thresholds
).
toBe
(
areaChart
.
props
(
'
alertData
'
));
});
it
(
'
recieves a tooltip title
'
,
()
=>
{
const
mockTitle
=
'
mockTitle
'
;
areaChart
.
vm
.
tooltip
.
title
=
mockTitle
;
expect
(
shallowWrapperContainsSlotText
(
glAreaChart
,
'
tooltipTitle
'
,
mockTitle
)).
toBe
(
true
);
});
it
(
'
recieves tooltip content
'
,
()
=>
{
const
mockContent
=
'
mockContent
'
;
areaChart
.
vm
.
tooltip
.
content
=
mockContent
;
expect
(
shallowWrapperContainsSlotText
(
glAreaChart
,
'
tooltipContent
'
,
mockContent
)).
toBe
(
true
,
);
});
describe
(
'
when tooltip is showing deployment data
'
,
()
=>
{
beforeEach
(()
=>
{
areaChart
.
vm
.
tooltip
.
isDeployment
=
true
;
});
it
(
'
uses deployment title
'
,
()
=>
{
expect
(
shallowWrapperContainsSlotText
(
glAreaChart
,
'
tooltipTitle
'
,
'
Deployed
'
)).
toBe
(
true
,
);
});
it
(
'
renders commit sha in tooltip content
'
,
()
=>
{
const
mockSha
=
'
mockSha
'
;
areaChart
.
vm
.
tooltip
.
sha
=
mockSha
;
expect
(
shallowWrapperContainsSlotText
(
glAreaChart
,
'
tooltipContent
'
,
mockSha
)).
toBe
(
true
);
});
});
});
});
describe
(
'
methods
'
,
()
=>
{
describe
(
'
formatTooltipText
'
,
()
=>
{
const
mockDate
=
deploymentData
[
0
].
created_at
;
const
generateSeriesData
=
type
=>
({
seriesData
:
[
{
componentSubType
:
type
,
value
:
[
mockDate
,
5.55555
],
},
],
value
:
mockDate
,
});
describe
(
'
series is of line type
'
,
()
=>
{
beforeEach
(()
=>
{
areaChart
.
vm
.
formatTooltipText
(
generateSeriesData
(
'
line
'
));
});
it
(
'
formats tooltip title
'
,
()
=>
{
expect
(
areaChart
.
vm
.
tooltip
.
title
).
toBe
(
'
31 May 2017, 9:23PM
'
);
});
it
(
'
formats tooltip content
'
,
()
=>
{
expect
(
areaChart
.
vm
.
tooltip
.
content
).
toBe
(
'
CPU (Cores) 5.556
'
);
});
});
describe
(
'
series is of scatter type
'
,
()
=>
{
beforeEach
(()
=>
{
areaChart
.
vm
.
formatTooltipText
(
generateSeriesData
(
'
scatter
'
));
});
it
(
'
formats tooltip title
'
,
()
=>
{
expect
(
areaChart
.
vm
.
tooltip
.
title
).
toBe
(
'
31 May 2017, 9:23PM
'
);
});
it
(
'
formats tooltip sha
'
,
()
=>
{
expect
(
areaChart
.
vm
.
tooltip
.
sha
).
toBe
(
'
f5bcd1d9
'
);
});
});
});
describe
(
'
getScatterSymbol
'
,
()
=>
{
beforeEach
(()
=>
{
areaChart
.
vm
.
getScatterSymbol
();
});
it
(
'
gets rocket svg path content for use as deployment data symbol
'
,
()
=>
{
expect
(
spriteSpy
).
toHaveBeenCalledWith
(
'
rocket
'
);
});
});
describe
(
'
onResize
'
,
()
=>
{
const
mockWidth
=
233
;
const
mockHeight
=
144
;
beforeEach
(()
=>
{
spyOn
(
Element
.
prototype
,
'
getBoundingClientRect
'
).
and
.
callFake
(()
=>
({
width
:
mockWidth
,
height
:
mockHeight
,
}));
areaChart
.
vm
.
onResize
();
});
it
(
'
sets area chart width
'
,
()
=>
{
expect
(
areaChart
.
vm
.
width
).
toBe
(
mockWidth
);
});
it
(
'
sets area chart height
'
,
()
=>
{
expect
(
areaChart
.
vm
.
height
).
toBe
(
mockHeight
);
});
});
});
describe
(
'
computed
'
,
()
=>
{
describe
(
'
chartData
'
,
()
=>
{
it
(
'
utilizes all data points
'
,
()
=>
{
expect
(
Object
.
keys
(
areaChart
.
vm
.
chartData
)).
toEqual
([
'
Cores
'
]);
expect
(
areaChart
.
vm
.
chartData
.
Cores
.
length
).
toBe
(
297
);
});
it
(
'
creates valid data
'
,
()
=>
{
const
data
=
areaChart
.
vm
.
chartData
.
Cores
;
expect
(
data
.
filter
(([
time
,
value
])
=>
new
Date
(
time
).
getTime
()
>
0
&&
typeof
value
===
'
number
'
)
.
length
,
).
toBe
(
data
.
length
);
});
});
describe
(
'
scatterSeries
'
,
()
=>
{
it
(
'
utilizes deployment data
'
,
()
=>
{
expect
(
areaChart
.
vm
.
scatterSeries
.
data
).
toEqual
([
[
'
2017-05-31T21:23:37.881Z
'
,
0
],
[
'
2017-05-30T20:08:04.629Z
'
,
0
],
[
'
2017-05-30T17:42:38.409Z
'
,
0
],
]);
});
});
describe
(
'
xAxisLabel
'
,
()
=>
{
it
(
'
constructs a label for the chart x-axis
'
,
()
=>
{
expect
(
areaChart
.
vm
.
xAxisLabel
).
toBe
(
'
Core Usage
'
);
});
});
describe
(
'
yAxisLabel
'
,
()
=>
{
it
(
'
constructs a label for the chart y-axis
'
,
()
=>
{
expect
(
areaChart
.
vm
.
yAxisLabel
).
toBe
(
'
CPU (Cores)
'
);
});
});
});
});
This diff is collapsed.
Click to expand it.
spec/javascripts/monitoring/mock_data.js
View file @
1c4c4ba1
...
@@ -326,6 +326,7 @@ export const metricsGroupsAPIResponse = {
...
@@ -326,6 +326,7 @@ export const metricsGroupsAPIResponse = {
{
{
id
:
6
,
id
:
6
,
title
:
'
CPU usage
'
,
title
:
'
CPU usage
'
,
y_label
:
'
CPU
'
,
weight
:
1
,
weight
:
1
,
queries
:
[
queries
:
[
{
{
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment