Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
凌波微步_大先生
dashboard
提交
f6069b67
D
dashboard
项目概览
凌波微步_大先生
/
dashboard
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
dashboard
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
f6069b67
编写于
1月 14, 2016
作者:
P
Piotr Bryk
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #241 from bryk/details-page-productionize
Style and productionize replica set details page
上级
8b6bce99
c99c9daf
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
143 addition
and
186 deletion
+143
-186
src/app/backend/events.go
src/app/backend/events.go
+1
-0
src/app/frontend/_variables.scss
src/app/frontend/_variables.scss
+3
-0
src/app/frontend/common/components/labels/labels.scss
src/app/frontend/common/components/labels/labels.scss
+3
-5
src/app/frontend/replicasetdetail/replicasetdetail.html
src/app/frontend/replicasetdetail/replicasetdetail.html
+75
-73
src/app/frontend/replicasetdetail/replicasetdetail.scss
src/app/frontend/replicasetdetail/replicasetdetail.scss
+47
-88
src/app/frontend/replicasetdetail/sortedheader.html
src/app/frontend/replicasetdetail/sortedheader.html
+3
-3
src/app/frontend/replicasetdetail/sortedheader.scss
src/app/frontend/replicasetdetail/sortedheader.scss
+11
-17
未找到文件。
src/app/backend/events.go
浏览文件 @
f6069b67
...
...
@@ -80,6 +80,7 @@ func GetEvents(client *client.Client, namespace, replicaSetName string) (*Events
events
:=
AppendEvents
(
rsEvents
,
Events
{
Namespace
:
namespace
,
Events
:
make
([]
Event
,
0
),
})
// Get events for pods in replica set.
...
...
src/app/frontend/_variables.scss
浏览文件 @
f6069b67
...
...
@@ -37,8 +37,11 @@ $content-background: #fff;
// TODO(bryk): Get those variables from Angular Material scss files.
$foreground-1
:
rgba
(
0
,
0
,
0
,
.87
);
$foreground-2
:
rgba
(
0
,
0
,
0
,
.54
);
$foreground-3
:
rgba
(
0
,
0
,
0
,
.26
);
$foreground-4
:
rgba
(
0
,
0
,
0
,
.12
);
$regular-font-weight
:
400
;
$bold-font-weight
:
500
;
$layout-breakpoint-lg
:
1280px
;
$whiteframe-shadow-1dp
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
.2
)
,
0
1px
1px
0
rgba
(
0
,
0
,
0
,
.14
)
,
0
2px
1px
-1px
rgba
(
0
,
0
,
0
,
.12
);
...
...
src/app/frontend/common/components/labels/labels.scss
浏览文件 @
f6069b67
...
...
@@ -14,18 +14,16 @@
@import
'../../../variables'
;
$label-height
:
$caption-font-size-base
+
6
;
$label-margin
:
0
$baseline-grid
(
$baseline-grid
/
2
)
0
;
// Style taken(mostly) from angular material md-chip style.
.kd-labels
{
background-color
:
$body
;
border-radius
:
$
label-height
/
2
;
border-radius
:
$
baseline-grid
;
display
:
inline-block
;
font-size
:
$caption-font-size-base
;
line-height
:
$label-height
;
font-size
:
inherit
;
margin
:
$label-margin
;
padding
:
0
$baseline-grid
;
padding
:
(
$baseline-grid
/
4
)
$baseline-grid
;
vertical-align
:
middle
;
}
...
...
src/app/frontend/replicasetdetail/replicasetdetail.html
浏览文件 @
f6069b67
...
...
@@ -15,83 +15,82 @@ limitations under the License.
-->
<md-content
layout=
"row"
layout-fill
flex
>
<div
class=
"kd-replicasetdetail-sidebar"
layout=
"column"
>
<div
class=
"kd-replicasetdetail-sidebar-header"
flex
layout-align=
"start center"
layout=
"row"
>
<a
flex-offset=
"10"
ui-sref=
"replicasets"
>
<i
class=
"material-icons kd-replicasetdetail-sidebar-header-icon"
>
keyboard_backspace
</i>
</a>
<span
flex-offset=
"5"
flex
class=
"md-title kd-replicasetdetail-app-name"
>
{{ctrl.replicaSetDetail.name}}
</span>
<div
class=
"kd-replicasetdetail-sidebar"
layout=
"column"
flex=
"noshrink"
>
<div
class=
"kd-replicasetdetail-sidebar-header-wrapper kd-replicasetdetail-sidebar-item"
flex=
"nogrow"
>
<div
class=
"kd-replicasetdetail-sidebar-header"
layout-align=
"start center"
layout=
"row"
>
<md-button
class=
"md-icon-button"
ui-sref=
"replicasets"
>
<md-icon
md-font-library=
"material-icons"
>
arrow_back
</md-icon>
</md-button>
<h1
flex
class=
"md-title kd-replicasetdetail-app-name"
>
{{ctrl.replicaSetDetail.name}}
</h1>
</div>
</div>
<div
flex-offset=
"5"
flex
layout-align=
"start start"
layout-padding
layout=
"row"
>
<div
flex
layout=
"column"
>
<div
layout=
"row"
flex
>
<md-button
class=
"md-primary kd-replicasetdetail-sidebar-button"
>
<md-icon
class=
"material-icons"
>
refresh
</md-icon>
ROLLING UPDATE
</md-button>
<md-button
class=
"md-primary kd-replicasetdetail-sidebar-button"
ng-click=
"ctrl.handleDeleteReplicaSetDialog()"
>
<md-icon
class=
"material-icons"
>
delete
</md-icon>
DELETE
</md-button>
</div>
<div
flex
layout=
"column"
class=
"kd-replicasetdetail-sidebar-info"
>
<span>
<div
flex
layout=
"column"
class=
"kd-replicasetdetail-sidebar-item"
>
<div
layout=
"row"
flex=
"nogrow"
class=
"kd-replicasetdetail-sidebar-actions"
>
<md-button
class=
"md-primary"
ng-click=
"ctrl.handleDeleteReplicaSetDialog()"
>
<md-icon
class=
"material-icons"
>
delete
</md-icon>
DELETE
</md-button>
</div>
<div
flex
layout=
"column"
class=
"kd-replicasetdetail-sidebar-info"
>
<div>
<span
class=
"kd-replicasetdetail-sidebar-title"
>
{{ctrl.replicaSetDetail.podsDesired}} pods
<md-button
class=
"kd-replicasetdetail-sidebar-editpods-button"
>
<md-icon
class=
"material-icons md-primary"
ng-click=
"ctrl.handleUpdateReplicasDialog()"
>
mode_edit
</md-icon>
</md-button>
</span>
<md-button
class=
"md-icon-button md-primary"
>
<md-icon
class=
"material-icons"
ng-click=
"ctrl.handleUpdateReplicasDialog()"
>
mode_edit
</md-icon>
</md-button>
</div>
<span
class=
"kd-replicasetdetail-sidebar-line"
>
Label selector
</span>
<span
class=
"kd-replicasetdetail-sidebar-subline"
>
<kd-labels
labels=
"::ctrl.replicaSetDetail.labelSelector"
></kd-labels>
</span>
<span
class=
"kd-replicasetdetail-sidebar-title"
>
Replica Set
</span>
<span
class=
"kd-replicasetdetail-sidebar-line"
>
Labels
</span>
<span
class=
"kd-replicasetdetail-sidebar-subline"
>
<kd-labels
labels=
"::ctrl.replicaSetDetail.labels"
></kd-labels>
</span>
<span
class=
"kd-replicasetdetail-sidebar-line"
>
Images
</span>
<span
class=
"kd-replicasetdetail-sidebar-subline"
ng-repeat=
"image in ctrl.replicaSetDetail.containerImages"
>
{{image}}
</span>
<div
ng-if=
"::ctrl.replicaSetDetail.services"
layout=
"column"
>
<span
class=
"kd-replicasetdetail-sidebar-title"
>
Services
</span>
<span
class=
"kd-replicasetdetail-sidebar-line"
>
Label selector
</span>
<span
class=
"kd-replicasetdetail-sidebar-subline"
>
<kd-labels
labels=
"::ctrl.replicaSetDetail.labelSelector"
></kd-labels>
</span>
<span
class=
"kd-replicasetdetail-sidebar-title"
>
Replica Sets
</span>
<span
class=
"kd-replicasetdetail-sidebar-line"
>
Labels
</span>
<span
class=
"kd-replicasetdetail-sidebar-subline"
>
<kd-labels
labels=
"::ctrl.replicaSetDetail.labels"
></kd-labels>
</span>
<span
class=
"kd-replicasetdetail-sidebar-line"
>
Images
</span>
<span
class=
"kd-replicasetdetail-sidebar-subline"
ng-repeat=
"
image in ctrl.replicaSetDetail.containerImag
es"
>
{{image}}
ng-repeat=
"
service in ::ctrl.replicaSetDetail.servic
es"
>
<kd-labels
labels=
"::service.selector"
></kd-labels>
</span>
<div
ng-if=
"::ctrl.replicaSetDetail.services"
layout=
"column"
>
<span
class=
"kd-replicasetdetail-sidebar-title"
>
Service
</span>
<span
class=
"kd-replicasetdetail-sidebar-line"
>
Label selector
</span>
<span
class=
"kd-replicasetdetail-sidebar-subline"
ng-repeat=
"service in ::ctrl.replicaSetDetail.services"
>
<kd-labels
labels=
"::service.selector"
></kd-labels>
</span>
<span
class=
"kd-replicasetdetail-sidebar-line"
>
Internal endpoint
</span>
<div
class=
"kd-replicasetdetail-sidebar-subline"
ng-repeat=
"service in ::ctrl.replicaSetDetail.services"
>
<div
ng-if=
"::service.internalEndpoint"
>
<kd-service-endpoint
endpoint=
"::service.internalEndpoint"
></kd-service-endpoint>
</div>
<span
ng-hide=
"service.internalEndpoint"
>
none
</span>
<span
class=
"kd-replicasetdetail-sidebar-line"
>
Internal endpoint
</span>
<div
class=
"kd-replicasetdetail-sidebar-subline"
ng-repeat=
"service in ::ctrl.replicaSetDetail.services"
>
<div
ng-if=
"::service.internalEndpoint"
>
<kd-service-endpoint
endpoint=
"::service.internalEndpoint"
></kd-service-endpoint>
</div>
<span
class=
"kd-replicasetdetail-sidebar-line"
>
External endpoint
</span>
<div
class=
"kd-replicasetdetail-sidebar-subline"
ng-repeat=
"service in ::ctrl.replicaSetDetail.services"
>
<div
ng-repeat=
"endpoint in service.externalEndpoints"
>
<kd-service-endpoint
endpoint=
"::endpoint"
></kd-service-endpoint>
</div>
<span
class=
"kd-replicasetdetail-sidebar-subline"
ng-hide=
"::service.externalEndpoints"
>
none
</span>
<span
ng-hide=
"service.internalEndpoint"
>
none
</span>
</div>
<span
class=
"kd-replicasetdetail-sidebar-line"
>
External endpoint
</span>
<div
class=
"kd-replicasetdetail-sidebar-subline"
ng-repeat=
"service in ::ctrl.replicaSetDetail.services"
>
<div
ng-repeat=
"endpoint in service.externalEndpoints"
>
<kd-service-endpoint
endpoint=
"::endpoint"
></kd-service-endpoint>
</div>
<span
class=
"kd-replicasetdetail-sidebar-subline"
ng-hide=
"::service.externalEndpoints"
>
none
</span>
</div>
</div>
</div>
</div>
</div>
<md-tabs
flex
md-border-bottom
md-dynamic-height
>
<md-tabs
flex
=
"grow"
md-border-bottom
md-dynamic-height
>
<md-tab
label=
"Pods"
>
<md-content>
<table
class=
"kd-replicasetdetail-table"
cellspacing=
"0"
>
...
...
@@ -136,8 +135,8 @@ limitations under the License.
<th
class=
"kd-replicasetdetail-table-header"
>
<kd-sorted-header
currently-selected-column=
"ctrl.sortPodsBy"
currently-selected-order=
"ctrl.podsOrder"
column-name=
"podIP"
tooltip=
"IP adress of the pod"
>
IP
column-name=
"podIP"
tooltip=
"I
n cluster I
P adress of the pod"
>
Cluster
IP
</kd-sorted-header>
</th>
<th
class=
"kd-replicasetdetail-table-header"
>
...
...
@@ -149,11 +148,12 @@ limitations under the License.
</kd-sorted-header>
</th>
<th
class=
"kd-replicasetdetail-table-header"
>
Logs
<i
class=
"material-icons kd-replicasetdetail-help-icon"
>
help
<md-tooltip>
Display logs from the pod
</md-tooltip>
</i>
<span>
Logs
<i
class=
"material-icons kd-replicasetdetail-help-icon"
>
help
<md-tooltip>
Display logs from the pod
</md-tooltip>
</i>
<span>
</th>
<th
class=
"kd-replicasetdetail-table-header"
/>
</tr>
...
...
@@ -177,7 +177,9 @@ limitations under the License.
<td
class=
"kd-replicasetdetail-table-cell"
>
{{pod.podIP}}
</td>
<td
class=
"kd-replicasetdetail-table-cell"
>
{{pod.nodeName}}
</td>
<td
class=
"kd-replicasetdetail-table-cell"
>
Logs
<i
class=
"material-icons kd-replicasetdetail-table-icon"
>
arrow_drop_down
</i>
<span>
Logs
<i
class=
"material-icons kd-replicasetdetail-table-icon"
>
arrow_drop_down
</i>
</span>
<!-- TODO(maciaszczykm): Handle it. -->
</td>
<td
class=
"kd-replicasetdetail-table-cell"
>
...
...
@@ -266,7 +268,7 @@ limitations under the License.
</thead>
<tbody>
<tr
ng-repeat=
"event in ctrl.events | orderBy:ctrl.sortEventsBy:ctrl.eventsOrder"
>
<td
class=
"kd-replicasetdetail-table-
message
"
>
<td
class=
"kd-replicasetdetail-table-
cell
"
>
<i
ng-if=
"ctrl.isEventWarning(event)"
class=
"material-icons kd-replicasetdetail-warning-icon"
>
warning
</i>
{{event.message}}
...
...
src/app/frontend/replicasetdetail/replicasetdetail.scss
浏览文件 @
f6069b67
...
...
@@ -15,11 +15,11 @@
@import
'../variables'
;
$replicasetdetails-sidebar-bg
:
#fafafa
;
$replicasetdetails-border
:
#ddd
;
$replicasetdetails-table-message
:
#000
;
$replicasetdetails-table-cell
:
#777
;
$replicasetdetails-sidebar-width
:
315px
;
$table-cell-height
:
6
*
$baseline-grid
;
$table-cell-height-half
:
$table-cell-height
/
2
;
.kd-replicasetdetail-app-name
{
color
:
$foreground-2
;
font-weight
:
$regular-font-weight
;
...
...
@@ -27,140 +27,99 @@ $replicasetdetails-sidebar-width: 315px;
.kd-replicasetdetail-sidebar
{
background-color
:
$replicasetdetails-sidebar-bg
;
max-width
:
$replicasetdetails-sidebar-width
;
max-width
:
$replicasetdetails-sidebar-width
+
10
*
$baseline-grid
;
min-width
:
$replicasetdetails-sidebar-width
;
}
.kd-replicasetdetail-sidebar-item
{
padding-left
:
2
*
$baseline-grid
;
padding-right
:
$baseline-grid
;
}
.kd-replicasetdetail-table
{
width
:
100%
;
}
.kd-replicasetdetail-sidebar-header
{
border-bottom
:
1px
solid
$replicasetdetails-border
;
color
:
$muted
;
max-height
:
49px
;
min-height
:
49px
;
height
:
$table-cell-height
;
}
.kd-replicasetdetail-sidebar-header-icon
{
color
:
$muted
;
font-size
:
$headline-font-size-base
;
font-weight
:
$regular-font-weight
;
margin-right
:
6px
;
vertical-align
:
middle
;
}
.kd-replicasetdetail-table-message
{
border-bottom
:
1px
solid
$replicasetdetails-border
;
color
:
$replicasetdetails-table-message
;
font-size
:
$caption-font-size-base
;
font-weight
:
$regular-font-weight
;
height
:
40px
;
overflow
:
hidden
;
padding
:
5px
5px
5px
15px
;
text-align
:
left
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
.kd-replicasetdetail-sidebar-header-wrapper
{
border-bottom
:
1px
solid
$foreground-4
;
}
.kd-replicasetdetail-sidebar-title
{
font-size
:
$subhead-font-size-base
;
padding-bottom
:
10px
;
padding
-top
:
10px
;
font-weight
:
$bold-font-weight
;
padding
:
$baseline-grid
0
;
}
.kd-replicasetdetail-sidebar-line
{
color
:
$
delicate
;
font-size
:
$
caption
-font-size-base
;
padding-bottom
:
6px
;
color
:
$
foreground-2
;
font-size
:
$
body
-font-size-base
;
padding-bottom
:
$baseline-grid
;
}
.kd-replicasetdetail-sidebar-subline
{
color
:
$muted
;
font-size
:
$caption-font-size-base
;
color
:
$foreground-1
;
font-size
:
$body-font-size-base
;
overflow
:
hidden
;
padding-bottom
:
$baseline-grid
;
}
.kd-replicasetdetail-sidebar-icon
{
color
:
$primary
;
font-size
:
20px
;
padding
:
0
3px
;
vertical-align
:
top
;
text-overflow
:
ellipsis
;
}
.kd-replicasetdetail-warning-icon
{
color
:
$warning
;
font-size
:
24px
;
padding
:
0
5px
;
font-size
:
$table-cell-height-half
;
padding
:
0
$baseline-grid
;
vertical-align
:
middle
;
}
.kd-replicasetdetail-sidebar-service-icon
{
color
:
$muted
;
font-size
:
$body-font-size-base
;
padding
:
0
3px
;
vertical-align
:
top
;
}
.kd-replicasetdetail-sidebar-button
{
font-size
:
.85em
;
margin
:
0
;
padding-left
:
0
;
}
.kd-replicasetdetail-sidebar-editpods-button
{
margin
:
0
;
min-width
:
25px
;
>
md-icon
{
outline
:
none
;
}
}
.kd-replicasetdetail-options
{
margin
:
15px
;
margin
:
2
*
$baseline-grid
;
}
.kd-replicasetdetail-sidebar-info
{
padding-left
:
5px
;
// 6px needed to offset for md-button padding.
padding-left
:
$baseline-grid
+
6px
;
}
.kd-replicasetdetail-sidebar-actions
{
padding-top
:
$baseline-grid
;
}
.kd-replicasetdetail-option-picker
{
min-width
:
150px
;
padding-right
:
25px
;
padding-right
:
2
*
$baseline-grid
;
width
:
15
*
$baseline-grid
;
}
.kd-replicasetdetail-table-header
{
border-bottom
:
1px
solid
$
replicasetdetails-border
;
color
:
$
replicasetdetails-table-cell
;
border-bottom
:
1px
solid
$
foreground-4
;
color
:
$
foreground-2
;
font-size
:
$body-font-size-base
;
font-weight
:
$regular-font-weight
;
padding
:
15px
10px
15px
15px
;
height
:
$table-cell-height
;
padding
:
0
0
0
(
2
*
$baseline-grid
);
text-align
:
left
;
}
.kd-replicasetdetail-pointer
{
cursor
:
pointer
;
white-space
:
nowrap
;
}
.kd-replicasetdetail-table-cell
{
border-bottom
:
1px
solid
$replicasetdetails-border
;
color
:
$replicasetdetails-table-cell
;
font-size
:
$caption-font-size-base
;
height
:
40px
;
padding
:
5px
5px
5px
15px
;
border-bottom
:
1px
solid
$foreground-4
;
font-size
:
$body-font-size-base
;
height
:
$table-cell-height
;
padding
:
0
0
0
(
2
*
$baseline-grid
);
}
.kd-replicasetdetail-table-icon
{
font-size
:
$body-font-size-base
;
padding
:
0
3px
;
font-size
:
inherit
;
vertical-align
:
top
;
}
.kd-replicasetdetail-help-icon
{
color
:
$
muted
;
cursor
:
help
;
font-size
:
$body-font-size-base
;
padding
:
0
3px
;
vertical-align
:
middle
;
color
:
$
foreground-2
;
cursor
:
default
;
font-size
:
inherit
;
height
:
inherit
;
vertical-align
:
text-top
;
}
src/app/frontend/replicasetdetail/sortedheader.html
浏览文件 @
f6069b67
...
...
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
<
a
class=
"kd-sortedheader-pointer
"
ng-click=
"sortCtrl.changeSorting()"
>
<
button
class=
"kd-replicaset-detail-table-header-button
"
ng-click=
"sortCtrl.changeSorting()"
>
<md-icon
md-font-library=
"material-icons"
ng-show=
"sortCtrl.isArrowDown()"
class=
"kd-sortedheader-sort-icon"
>
arrow_downward
...
...
@@ -24,9 +24,9 @@ limitations under the License.
arrow_upward
</md-icon>
<ng-transclude></ng-transclude>
</
a
>
</
button
>
<md-icon
ng-show=
"sortCtrl.isTooltipAvailable()"
md-font-library=
"material-icons"
class=
"kd-
sortedheader
-help-icon"
>
class=
"kd-
replicasetdetail
-help-icon"
>
help
<md-tooltip>
{{sortCtrl.tooltip}}
</md-tooltip>
</md-icon>
src/app/frontend/replicasetdetail/sortedheader.scss
浏览文件 @
f6069b67
...
...
@@ -14,26 +14,20 @@
@import
'../variables'
;
$sortedheader-font-size
:
14px
;
.kd-replicaset-detail-table-header-button
{
background
:
inherit
;
border
:
0
;
color
:
inherit
;
padding
:
0
;
.kd-sortedheader-pointer
{
cursor
:
pointer
;
}
.kd-sortedheader-help-icon
{
color
:
$muted
;
cursor
:
help
;
font-size
:
$sortedheader-font-size
;
height
:
$sortedheader-font-size
;
padding
:
0
3px
;
vertical-align
:
text-top
;
width
:
$sortedheader-font-size
;
&
:focus
{
outline
:
none
;
}
}
.kd-sortedheader-sort-icon
{
font-size
:
$sortedheader-font-size
;
height
:
$sortedheader-font-size
;
padding
:
0
3px
;
font-size
:
inherit
;
height
:
inherit
;
vertical-align
:
text-top
;
width
:
$sortedheader-font-size
;
width
:
inherit
;
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录