refactor: Update style
1. Support style check: stylelint 2. Add stylelint check in lint-staged husky 2. Update styles Change-Id: Id793b0936e4c3ea27ddef0df794d5b711880599f
This commit is contained in:
Jingwei.Zhang
parent
757047a1cb
commit
ce0042945f
15
.stylelintrc.json
Normal file
15
.stylelintrc.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"extends": [
|
||||
"stylelint-config-standard",
|
||||
"stylelint-config-css-modules",
|
||||
"stylelint-config-rational-order",
|
||||
"stylelint-config-prettier"
|
||||
],
|
||||
"customSyntax": "postcss-less",
|
||||
"plugins": ["stylelint-order"],
|
||||
"rules": {
|
||||
"no-descending-specificity": null,
|
||||
"at-rule-no-unknown": null,
|
||||
"color-function-notation": "legacy"
|
||||
}
|
||||
}
|
||||
23
package.json
23
package.json
@ -13,6 +13,7 @@
|
||||
"i18n": "grunt",
|
||||
"lint": "eslint src --fix --quiet --ext .js,.jsx",
|
||||
"lint:test": "eslint test --fix --quiet --ext .js",
|
||||
"lint:style": "stylelint --fix \"src/**/*.less\" --custom-syntax postcss-less",
|
||||
"report:delete-json": "rm -rf test/e2e/results/* || true",
|
||||
"report:delete-html": "rm -rf test/e2e/report || true",
|
||||
"report:pre": "npm run report:delete-json && npm run report:delete-html && mkdir test/e2e/report",
|
||||
@ -31,11 +32,15 @@
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{css,less}": [
|
||||
"stylelint --fix",
|
||||
"git add"
|
||||
],
|
||||
"*.{js,jsx}": [
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
],
|
||||
"*.{html,css,scss,md,json}": [
|
||||
"*.{html,css,scss,less,md,json}": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
]
|
||||
@ -103,7 +108,7 @@
|
||||
"clean-webpack-plugin": "^1.0.0",
|
||||
"compression-webpack-plugin": "5.0.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^0.28.11",
|
||||
"css-loader": "1.0.1",
|
||||
"cypress": "6.8.0",
|
||||
"cypress-downloadfile": "^1.2.1",
|
||||
"cypress-file-upload": "^5.0.6",
|
||||
@ -130,18 +135,24 @@
|
||||
"istanbul-lib-coverage": "^3.0.0",
|
||||
"jest": "^26.6.3",
|
||||
"jest-enzyme": "^7.1.2",
|
||||
"less": "^3.8.1",
|
||||
"less-loader": "^4.1.0",
|
||||
"less": "3.13.0",
|
||||
"less-loader": "5.0.0",
|
||||
"lint-staged": "^11.0.0",
|
||||
"mochawesome": "^6.2.2",
|
||||
"mochawesome-merge": "^4.2.0",
|
||||
"mochawesome-report-generator": "^5.2.0",
|
||||
"postcss-less": "^2.0.0",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"postcss-less": "2.0.0",
|
||||
"postcss-loader": "3.0.0",
|
||||
"prettier": "^2.3.0",
|
||||
"react-css-modules": "^4.7.7",
|
||||
"react-hot-loader": "^4.12.20",
|
||||
"style-loader": "^0.20.3",
|
||||
"stylelint": "^14.2.0",
|
||||
"stylelint-config-css-modules": "^2.3.0",
|
||||
"stylelint-config-prettier": "^9.0.3",
|
||||
"stylelint-config-rational-order": "^0.1.2",
|
||||
"stylelint-config-standard": "^24.0.0",
|
||||
"stylelint-order": "^5.0.0",
|
||||
"terser-webpack-plugin": "4.2.3",
|
||||
"url-loader": "^4.1.1",
|
||||
"webpack": "^4.42.1",
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
|
||||
.wrapper {
|
||||
margin-top: 100px;
|
||||
border-radius: @border-radius;
|
||||
text-align: center;
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
|
||||
.image {
|
||||
@ -13,26 +13,26 @@
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 600px;
|
||||
margin-left: 60px;
|
||||
vertical-align: top;
|
||||
|
||||
:global .h1 {
|
||||
opacity: 0.4;
|
||||
color: #abb4be;
|
||||
font-size: 120px;
|
||||
line-height: 1.4;
|
||||
color: #abb4be;
|
||||
user-select: none;
|
||||
text-align: left;
|
||||
opacity: 0.4;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
p {
|
||||
text-shadow: 0 4px 8px rgba(36, 46, 66, 0.1);
|
||||
font-size: 20px;
|
||||
font-weight: @font-bold;
|
||||
line-height: 1.4;
|
||||
color: @second-title-color;
|
||||
font-weight: @font-bold;
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
text-shadow: 0 4px 8px rgba(36, 46, 66, 10%);
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
.ace_editor {
|
||||
font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
|
||||
line-height: 20px !important;
|
||||
font-family: Monaco, Menlo, Consolas, Courier New, monospace;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.ace_editor.ace-chaos {
|
||||
color: #ffffff;
|
||||
color: #fff;
|
||||
background-color: #242e42;
|
||||
}
|
||||
|
||||
@ -22,7 +23,7 @@
|
||||
}
|
||||
|
||||
.ace_editor.ace-chaos .ace_keyword {
|
||||
color: #ffffff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ace_editor.ace-chaos .ace_string {
|
||||
@ -38,8 +39,8 @@
|
||||
}
|
||||
|
||||
.ace_editor.ace-chaos .ace_indent-guide {
|
||||
border-right: 1px dotted #777;
|
||||
padding: 2px 0;
|
||||
border-right: 1px dotted #777;
|
||||
}
|
||||
|
||||
.ace_editor.ace-chaos .ace_marker-layer .ace_selection {
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
@import "~styles/variables";
|
||||
@import '~styles/variables';
|
||||
|
||||
.confirm-modal {
|
||||
:global {
|
||||
.ant-modal-confirm-body > .anticon {
|
||||
font-size: 18px;
|
||||
margin-right: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.confirm {
|
||||
color: @warn-color !important;
|
||||
}
|
||||
|
||||
@ -3,22 +3,22 @@
|
||||
@min-space: 8px;
|
||||
@mid-space: 16px;
|
||||
@lg-space: 24px;
|
||||
@box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
|
||||
@topo-line: 1px solid #D2D2D2;
|
||||
@box-shadow: 0 0 10px 0 rgba(0, 0, 0, 5%);
|
||||
@topo-line: 1px solid #d2d2d2;
|
||||
@resource-box-bg: #fbfdff;
|
||||
@resource-box-border: 1px solid #cfe1ff;
|
||||
|
||||
@success: #57E39B;
|
||||
@warning: #FEDF40;
|
||||
@error: #EB354D;
|
||||
@link: #0068FF;
|
||||
@success: #57e39b;
|
||||
@warning: #fedf40;
|
||||
@error: #eb354d;
|
||||
@link: #0068ff;
|
||||
|
||||
.card {
|
||||
flex: 1;
|
||||
margin-bottom: @mid-space;
|
||||
box-shadow: @box-shadow;
|
||||
background-color: #fff;
|
||||
border-radius: @border-radius;
|
||||
flex: 1;
|
||||
box-shadow: @box-shadow;
|
||||
|
||||
.card-content {
|
||||
padding: @mid-space;
|
||||
@ -31,9 +31,10 @@
|
||||
}
|
||||
|
||||
.title-help {
|
||||
line-height: 26px;
|
||||
margin-left: @min-space;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
div {
|
||||
word-break: break-all;
|
||||
}
|
||||
@ -42,6 +43,7 @@
|
||||
:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-typography {
|
||||
word-break: break-all;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
@import "~styles/variables";
|
||||
@import '~styles/variables';
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding-top: @body-padding;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
padding-top: @body-padding;
|
||||
|
||||
:global {
|
||||
.ant-spin-nested-loading {
|
||||
@ -23,19 +23,18 @@
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-left: @body-padding * 2;
|
||||
margin-right: @body-padding * 2;
|
||||
// padding-top: @body-padding;
|
||||
background-color: #fff;
|
||||
height: calc(100% - 48px);
|
||||
margin-right: @body-padding * 2;
|
||||
margin-left: @body-padding * 2;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
|
||||
:global {
|
||||
.ant-form-item-label>label {
|
||||
.ant-form-item-label > label {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.ant-form-item-label>.ant-form-item-required {
|
||||
.ant-form-item-label > .ant-form-item-required {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@ -47,21 +46,21 @@
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 48px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.09);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 48px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 9%);
|
||||
}
|
||||
|
||||
.btns {
|
||||
float: right;
|
||||
margin-right: 32px;
|
||||
margin-top: 8px;
|
||||
margin-right: 32px;
|
||||
|
||||
:global {
|
||||
button {
|
||||
@ -78,44 +77,45 @@
|
||||
.form-item-divider {
|
||||
width: 98% !important;
|
||||
min-width: 90% !important;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper {
|
||||
color: @color-text-body;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper-disabled {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
color: rgba(0, 0, 0, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
padding: 8px 16px;
|
||||
background: rgba(89, 157, 255, 0.15);
|
||||
margin-bottom: 16px;
|
||||
padding: 8px 16px;
|
||||
background: rgba(0, 0, 0, 15%);
|
||||
}
|
||||
|
||||
.tips-icon {
|
||||
margin-right: 4px;
|
||||
color: #0068FF;
|
||||
color: #0068ff;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
height: 48px;
|
||||
float: left;
|
||||
margin-left: 16px;
|
||||
color: rgb(72, 72, 72);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
float: left;
|
||||
height: 48px;
|
||||
margin-left: 16px;
|
||||
color: rgb(72, 72, 72);
|
||||
}
|
||||
|
||||
.submit-tip {
|
||||
font-size: 16px;
|
||||
// margin-top: 16px;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.progress-wrapper {
|
||||
width: 170px;
|
||||
}
|
||||
@ -1,14 +1,14 @@
|
||||
.add-select {
|
||||
}
|
||||
.items {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
margin-top: 8px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
|
||||
:global {
|
||||
.ant-form-item-has-success
|
||||
.ant-select:not(.ant-select-borderless)
|
||||
@ -17,22 +17,21 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
width: 90%;
|
||||
// :global {
|
||||
// .ant-form-item-has-error {
|
||||
// margin-bottom: 24px;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.remove-btn,
|
||||
.add-btn {
|
||||
padding-left: 0;
|
||||
padding-right: 8px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
.label {
|
||||
vertical-align: top;
|
||||
|
||||
:global {
|
||||
.ant-descriptions-item-label {
|
||||
width: 100px;
|
||||
color: #8A8A8A;
|
||||
color: #8a8a8a;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,14 +2,17 @@
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-right: 10px;
|
||||
max-width: 20%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.select {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.size-label {
|
||||
margin-left: 10px;
|
||||
margin-right: 40px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@ -3,43 +3,49 @@
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
width: 44px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.item-wrapper:last-child {
|
||||
width: 40px;
|
||||
}
|
||||
.item-wrapper:after {
|
||||
content: " ";
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #484848;
|
||||
|
||||
.item-wrapper::after {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: #484848;
|
||||
border-radius: 50%;
|
||||
content: ' ';
|
||||
}
|
||||
.item-wrapper:last-child:after {
|
||||
|
||||
.item-wrapper:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 40px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
padding-left: 8px;
|
||||
text-align: center;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.item:focus {
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ipv6 {
|
||||
width: 120px;
|
||||
}
|
||||
@ -3,43 +3,49 @@
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
width: 44px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.item-wrapper:last-child {
|
||||
width: 40px;
|
||||
}
|
||||
.item-wrapper:after {
|
||||
content: " ";
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #484848;
|
||||
|
||||
.item-wrapper::after {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: #484848;
|
||||
border-radius: 50%;
|
||||
content: ' ';
|
||||
}
|
||||
.item-wrapper:last-child:after {
|
||||
|
||||
.item-wrapper:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 40px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
padding-left: 8px;
|
||||
text-align: center;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.item:focus {
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ipv6 {
|
||||
width: 120px;
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
.cpu {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.ram {
|
||||
margin-left: 16px;
|
||||
margin-right: 8px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
@ -235,7 +235,7 @@ export default class NetworkSelect extends React.Component {
|
||||
label: (
|
||||
<div>
|
||||
<span>{it.name}</span>
|
||||
<span className={styles.subnet_options_cidr}>{it.cidr}</span>
|
||||
<span className={styles['subnet-options-cidr']}>{it.cidr}</span>
|
||||
</div>
|
||||
),
|
||||
name: it.name,
|
||||
|
||||
@ -1,43 +1,49 @@
|
||||
@import '~styles/variables';
|
||||
|
||||
.network-select {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 61.6px;
|
||||
margin-bottom: 0 !important;
|
||||
position: relative;
|
||||
|
||||
:global {
|
||||
.ant-form-item-control-input-content {
|
||||
height: 61.6px;
|
||||
}
|
||||
|
||||
.ant-form-item-explain {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.label {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.select {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.size-label {
|
||||
margin-left: 10px;
|
||||
margin-right: 40px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-right: 10px;
|
||||
color: @color-text-caption;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: @color-text-body;
|
||||
}
|
||||
|
||||
.subnet_options_cidr {
|
||||
padding-left: 5px;
|
||||
.subnet-options-cidr {
|
||||
margin-left: 5px;
|
||||
opacity: 0.6;
|
||||
padding-left: 5px;
|
||||
border-left: 1px solid;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
@import "~styles/variables";
|
||||
@import '~styles/variables';
|
||||
|
||||
.only-radio {
|
||||
:global {
|
||||
.ant-radio-button-wrapper {
|
||||
margin-left: 8px;
|
||||
border-radius: @border-radius;
|
||||
border-left-width: 1px;
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
.ant-radio-button-wrapper:before {
|
||||
|
||||
.ant-radio-button-wrapper::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper:first-child {
|
||||
margin-left: 0;
|
||||
border-radius: @border-radius;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "~styles/variables";
|
||||
@import '~styles/variables';
|
||||
|
||||
.checkbox {
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
@ -1,56 +1,64 @@
|
||||
@import "~styles/variables";
|
||||
@import '~styles/variables';
|
||||
|
||||
.sl-select-table {
|
||||
}
|
||||
.search-wrapper {
|
||||
margin-bottom: 16px;
|
||||
|
||||
:global {
|
||||
.ant-menu-root.ant-menu-vertical {
|
||||
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2) !important;
|
||||
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 20%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-tabs {
|
||||
display: flex;
|
||||
height: 52px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-radio-button-wrapper {
|
||||
border: none;
|
||||
color: @color-text-body;
|
||||
width: 70px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
color: @color-text-body;
|
||||
text-align: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper:not(:first-child)::before {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
|
||||
color: @primary-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-tab {
|
||||
flex: 1 auto;
|
||||
}
|
||||
|
||||
.image-tab-label {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.normal-tabs {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.pagination-footer {
|
||||
:global {
|
||||
.ant-select {
|
||||
@ -59,6 +67,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sl-select-table-backend {
|
||||
:global {
|
||||
.ant-table-footer {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "~styles/variables";
|
||||
@import '~styles/variables';
|
||||
|
||||
.title {
|
||||
font-size: @size-normal;
|
||||
font-weight: bold;
|
||||
margin-left: 12px;
|
||||
font-weight: bold;
|
||||
font-size: @size-normal;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.tip {
|
||||
position: absolute;
|
||||
right: -27px;
|
||||
top: 10px;
|
||||
right: -27px;
|
||||
}
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
.item {
|
||||
background-color: #fff;
|
||||
margin-bottom: 10px;
|
||||
background-color: #fff;
|
||||
|
||||
:global {
|
||||
.ant-descriptions-item-label {
|
||||
width: 100px;
|
||||
color: #8A8A8A;
|
||||
color: #8a8a8a;
|
||||
}
|
||||
|
||||
.ant-descriptions-item-content {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "~styles/variables";
|
||||
@import '~styles/variables';
|
||||
|
||||
.menu {
|
||||
:global(.anticon) {
|
||||
@ -22,8 +22,8 @@
|
||||
line-height: 40px;
|
||||
|
||||
.user-label {
|
||||
font-weight: "bold";
|
||||
margin-right: 8px;
|
||||
font-weight: 'bold';
|
||||
}
|
||||
|
||||
span {
|
||||
@ -54,24 +54,6 @@
|
||||
.action {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.right_message {
|
||||
|
||||
.message_avatar {
|
||||
background-color: #fff;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-badge-dot {
|
||||
transform: translate(-55%, 10%);
|
||||
}
|
||||
.ant-avatar-square {
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-menu {
|
||||
@ -80,7 +62,6 @@
|
||||
}
|
||||
|
||||
:global {
|
||||
|
||||
.ant-dropdown-menu-item:hover,
|
||||
.ant-dropdown-menu-submenu-title:hover {
|
||||
cursor: pointer;
|
||||
@ -103,16 +84,17 @@
|
||||
|
||||
.project {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
line-height: @header-height;
|
||||
cursor: pointer;
|
||||
|
||||
:global {
|
||||
.ant-divider {
|
||||
background-color: #d2d2d2;
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
margin-left: 24px;
|
||||
background-color: #d2d2d2;
|
||||
}
|
||||
|
||||
.ant-btn-link {
|
||||
position: absolute;
|
||||
min-width: 280px;
|
||||
@ -122,23 +104,23 @@
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
z-index: 200;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
padding-left: 36px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
color: @title-color;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
z-index: 200;
|
||||
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
|
||||
border: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: #bfbfbf;
|
||||
border: none;
|
||||
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
|
||||
}
|
||||
|
||||
.domain {
|
||||
@ -146,14 +128,14 @@
|
||||
}
|
||||
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
|
||||
:global {
|
||||
.ant-divider {
|
||||
background-color: #d2d2d2;
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
margin-left: 24px;
|
||||
background-color: #d2d2d2;
|
||||
}
|
||||
}
|
||||
|
||||
@ -179,17 +161,17 @@
|
||||
}
|
||||
|
||||
.single-link {
|
||||
color: @primary-color;
|
||||
margin-right: 5px;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.token {
|
||||
pre {
|
||||
padding: .4em .6em;
|
||||
padding: 0.4em 0.6em;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
background: hsla(0, 0%, 58.8%, .1);
|
||||
border: 1px solid hsla(0, 0%, 39.2%, .2);
|
||||
background: hsla(0%, 0%, 58.8%, 10%);
|
||||
border: 1px solid hsla(0%, 0%, 39.2%, 20%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
@ -5,29 +5,29 @@
|
||||
}
|
||||
|
||||
.magic-input-wrapper {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: 200px;
|
||||
border: 1px solid rgb(217, 217, 217);
|
||||
border-radius: @border-radius;
|
||||
padding: 3px 0 3px 8px;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
border: 1px solid rgb(217, 217, 217);
|
||||
border-radius: @border-radius;
|
||||
|
||||
:global {
|
||||
.ant-tag {
|
||||
background-color: @primary-color;
|
||||
height: 24px;
|
||||
margin-right: 4px;
|
||||
padding: 0 4px;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color: @primary-color;
|
||||
border: none;
|
||||
padding: 0 4px;
|
||||
margin-right: 4px;
|
||||
|
||||
.anticon-close {
|
||||
color: #fff;
|
||||
margin-left: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
|
||||
.magic-input-wrapper-active {
|
||||
border-color: @primary-color;
|
||||
box-shadow: 0 0 0 2px rgba(0, 104, 255, 0.2);
|
||||
box-shadow: 0 0 0 2px rgba(0, 104, 255, 20%);
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
@ -55,10 +55,10 @@
|
||||
|
||||
:global {
|
||||
.ant-input {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ant-input:focus {
|
||||
@ -76,33 +76,26 @@
|
||||
}
|
||||
|
||||
.ant-menu-vertical .ant-menu-item {
|
||||
font-size: 10px;
|
||||
margin-top: 0px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tagItem {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
}
|
||||
|
||||
.menu {
|
||||
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.09) !important;
|
||||
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 9%) !important;
|
||||
}
|
||||
|
||||
.menu,
|
||||
.option-menu {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 34px;
|
||||
border-radius: @border-radius;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 100;
|
||||
max-height: 310px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
|
||||
.key {
|
||||
@ -112,8 +105,8 @@
|
||||
:global {
|
||||
.ant-divider,
|
||||
.ant-divider-vertical {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -132,15 +125,15 @@
|
||||
.magic-input-wrapper .ant-tag {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin: 0 5px 0 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 0;
|
||||
right: 8px;
|
||||
color: @color-text-body;
|
||||
font-size: 12px;
|
||||
line-height: 32px;
|
||||
@ -151,19 +144,19 @@
|
||||
line-height: 24px;
|
||||
|
||||
.close-btn {
|
||||
border: none;
|
||||
height: 24px !important;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.close-option-btn {
|
||||
height: 24px !important;
|
||||
top: 3px;
|
||||
height: 24px !important;
|
||||
}
|
||||
|
||||
.magic-input-checks {
|
||||
line-height: 32px;
|
||||
margin-left: 8px;
|
||||
min-width: 120px;
|
||||
margin-left: 8px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
@ -150,7 +150,7 @@ const errorWithDetail = (err, title) => {
|
||||
buttonText={t('Click to show detail')}
|
||||
component={
|
||||
<CodeEditor
|
||||
className={styles.codeEditor}
|
||||
className={styles['code-editor']}
|
||||
value={err}
|
||||
mode="json"
|
||||
options={{
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.codeEditor {
|
||||
.code-editor {
|
||||
height: 400px !important;
|
||||
min-height: 400px !important;
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
.wrapper {
|
||||
text-align: right;
|
||||
height: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
|
||||
@ -119,7 +119,7 @@ const BaseCard = (props) => {
|
||||
return (
|
||||
<PrometheusContext.Provider value={passedContext}>
|
||||
<Card
|
||||
className={style.remove_extra_padding}
|
||||
className={style['remove-extra-padding']}
|
||||
bodyStyle={{
|
||||
// padding 24
|
||||
minHeight: visibleHeight + 48,
|
||||
|
||||
@ -90,7 +90,7 @@ const BaseContent = (props) => {
|
||||
}, [node]);
|
||||
|
||||
return (
|
||||
<div className={styles.base_content_container}>
|
||||
<div className={styles['base-content-container']}>
|
||||
<BaseContentContext.Provider value={passedContextValue}>
|
||||
{(renderTimeRangeSelect || renderNodeSelect) && (
|
||||
<Button
|
||||
|
||||
@ -119,7 +119,7 @@ Charts.defaultProps = {
|
||||
formatDataFn: handleResponses,
|
||||
},
|
||||
renderContent: ({ data }) => (
|
||||
<div className={styles.topContent}>{get(data, '[0].y', 0)}</div>
|
||||
<div className={styles['top-content']}>{get(data, '[0].y', 0)}</div>
|
||||
),
|
||||
},
|
||||
baseChartProps: {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
.topContent {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
height: 120px;
|
||||
.top-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 120px;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.remove_extra_padding {
|
||||
.remove-extra-padding {
|
||||
:global {
|
||||
.ant-card-extra {
|
||||
padding: 0;
|
||||
@ -10,8 +10,8 @@
|
||||
|
||||
.ant-card-body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.ant-card-loading-content {
|
||||
width: 100%;
|
||||
@ -20,11 +20,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.base_content_container {
|
||||
.base-content-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
padding: 20px;
|
||||
overflow-y: scroll;
|
||||
|
||||
.refresh {
|
||||
float: left;
|
||||
|
||||
@ -57,7 +57,7 @@ const SelectLang = (props) => {
|
||||
// return langMenu;
|
||||
return (
|
||||
<Dropdown overlay={langMenu} placement="bottomRight">
|
||||
<span className={classNames(styles.dropDown, className)}>
|
||||
<span className={classNames(styles['drop-down'], className)}>
|
||||
<GlobalOutlined />
|
||||
</span>
|
||||
</Dropdown>
|
||||
|
||||
@ -2,19 +2,22 @@
|
||||
:global(.anticon) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
:global(.ant-dropdown-menu-item) {
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropDown {
|
||||
line-height: 20px;
|
||||
.drop-down {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
|
||||
> i {
|
||||
font-size: 16px !important;
|
||||
transform: none !important;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "~styles/variables";
|
||||
@import '~styles/variables';
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
@ -10,25 +10,29 @@
|
||||
.ant-spin-nested-loading {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-spin-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step {
|
||||
height: 80px;
|
||||
margin-bottom: 16px;
|
||||
padding-top: 24px;
|
||||
padding-right: 56px;
|
||||
padding-left: 56px;
|
||||
padding-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.form {
|
||||
padding-top: @body-padding;
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
min-height: calc(100vh - 280px);
|
||||
padding-top: @body-padding;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
|
||||
:global {
|
||||
.sl-form {
|
||||
height: calc(100vh - 219px);
|
||||
@ -36,35 +40,39 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-height: 48px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.09);
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 48px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 9%);
|
||||
}
|
||||
|
||||
.btns {
|
||||
float: right;
|
||||
margin-right: 32px;
|
||||
min-width: 200px;
|
||||
:global{
|
||||
margin-right: 32px;
|
||||
|
||||
:global {
|
||||
button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
min-height: 48px;
|
||||
float: left;
|
||||
margin-left: 16px;
|
||||
color: rgb(72, 72, 72);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: left;
|
||||
float: left;
|
||||
min-height: 48px;
|
||||
margin-left: 16px;
|
||||
color: rgb(72, 72, 72);
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
.modal-action {
|
||||
:global {
|
||||
.ant-modal-body {
|
||||
padding: 0 0 16px 0;
|
||||
padding: 0 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,17 @@
|
||||
.table-action {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.more-action-btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-batch-menu {
|
||||
:global {
|
||||
.ant-dropdown-menu-item {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,10 +3,10 @@
|
||||
text-align: left;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
max-width: 48px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
@ -17,12 +17,15 @@
|
||||
|
||||
.action-sub-menu {
|
||||
padding: 0;
|
||||
|
||||
:global {
|
||||
.ant-dropdown-menu-submenu-popup ul {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title {
|
||||
|
||||
.ant-dropdown-menu-item,
|
||||
.ant-dropdown-menu-submenu-title {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
@ -32,6 +35,7 @@
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.single-more-action {
|
||||
:global {
|
||||
.ant-btn-link {
|
||||
|
||||
@ -607,12 +607,12 @@ export default class BaseTable extends React.Component {
|
||||
}
|
||||
|
||||
renderSelectedTitle = () => (
|
||||
<div className={styles.selectTitle}>
|
||||
<div className={styles['select-title']}>
|
||||
<div>{this.renderBatchActions()}</div>
|
||||
<div>
|
||||
<Button
|
||||
type="flat"
|
||||
className={styles.cancelSelect}
|
||||
className={styles['cancel-select']}
|
||||
onClick={this.handleCancelSelect}
|
||||
>
|
||||
{t('Cancel Select')}
|
||||
@ -826,7 +826,7 @@ export default class BaseTable extends React.Component {
|
||||
|
||||
return (
|
||||
<CustomColumns
|
||||
className={styles.columnMenu}
|
||||
className={styles['column-menu']}
|
||||
options={this.hideableRow}
|
||||
value={getHideColKeys(hideRow)}
|
||||
onChange={this.handleRowHide}
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
@import "~styles/variables";
|
||||
@import '~styles/variables';
|
||||
|
||||
.table {
|
||||
border-radius: @border-radius;
|
||||
box-shadow: @base-shadow;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
border-radius: @border-radius;
|
||||
box-shadow: @base-shadow;
|
||||
|
||||
:global {
|
||||
.ant-table-container {
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
|
||||
// .ant-table-body {
|
||||
// min-height: 500px;
|
||||
// }
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 5%);
|
||||
}
|
||||
.ant-table-pagination.ant-pagination{
|
||||
|
||||
.ant-table-pagination.ant-pagination {
|
||||
margin: 0;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
@ -25,11 +23,11 @@
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.selectTitle {
|
||||
.select-title {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.cancelSelect {
|
||||
.cancel-select {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -38,90 +36,57 @@
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.disableSearch {
|
||||
pointer-events: none !important;
|
||||
input {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
user-select: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.keyword {
|
||||
width: 100%;
|
||||
padding: 2px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.emptyText {
|
||||
& > div {
|
||||
@include TypographyTitleH5();
|
||||
}
|
||||
|
||||
& > p {
|
||||
margin-top: 4px;
|
||||
@include TypographyParagraph(@dark-color01);
|
||||
}
|
||||
|
||||
@at-root {
|
||||
.emptyTipIcon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50% 0 50% 50%;
|
||||
background: @light-color02;
|
||||
display: inline-block;
|
||||
line-height: 50px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
color: @blue-color03;
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
color: @blue-color03;
|
||||
font-weight: @font-bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.columnMenu {
|
||||
.column-menu {
|
||||
width: 160px;
|
||||
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
|
||||
border-radius: @border-radius;
|
||||
overflow: hidden;
|
||||
border-radius: @border-radius;
|
||||
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 20%);
|
||||
|
||||
:global {
|
||||
.ant-menu-vertical > .ant-menu-item {
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
margin-left: 0px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
// padding-top: @body-padding;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.table-header-btns {
|
||||
margin-bottom: @body-padding;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-bottom: @body-padding;
|
||||
|
||||
:global {
|
||||
button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ant-btn[disabled] {
|
||||
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
|
||||
box-shadow: 0 2px 0 rgba(0, 0, 0, 4.5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-row {
|
||||
float: right;
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 288px;
|
||||
height: 32px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "~styles/variables";
|
||||
@import '~styles/variables';
|
||||
|
||||
.sl-simple-table {
|
||||
:global {
|
||||
@ -6,16 +6,18 @@
|
||||
.ant-table-thead {
|
||||
tr {
|
||||
.ant-table-cell {
|
||||
padding: 8px 8px 8px 0px;
|
||||
padding: 8px 8px 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-column-sorters {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
padding: 8px 8px 8px 0px;
|
||||
padding: 8px 8px 8px 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
@lg-space: 24px;
|
||||
|
||||
.main {
|
||||
padding: 0 @mid-space;
|
||||
display: flex;
|
||||
padding: 0 @mid-space;
|
||||
|
||||
.left-side {
|
||||
width: 380px;
|
||||
|
||||
@ -2,17 +2,20 @@
|
||||
|
||||
.wrapper {
|
||||
min-height: calc(100vh - 108px);
|
||||
padding: 0 @body-padding;
|
||||
margin-top: 16px;
|
||||
padding: 0 @body-padding;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.hints {
|
||||
:global {
|
||||
.ant-alert-warning {
|
||||
background-color: #fffbe6;
|
||||
border: 1px solid #ffe58f;
|
||||
|
||||
.ant-alert-icon {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
@ -31,21 +31,21 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
padding: 0 14px;
|
||||
border-radius: @border-radius;
|
||||
background-color: @dark;
|
||||
margin: 0 0 12px;
|
||||
padding: 0 14px;
|
||||
background-color: @dark;
|
||||
border-radius: @border-radius;
|
||||
|
||||
&Item {
|
||||
min-width: 96px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0 6px;
|
||||
padding: 0 14px;
|
||||
font-weight: 500;
|
||||
color: @white;
|
||||
border: 1px solid transparent;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
border: 1px solid transparent;
|
||||
transition: all @trans-speed;
|
||||
|
||||
&:first-child {
|
||||
@ -53,10 +53,10 @@
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-radius: @border-radius;
|
||||
box-shadow: @btn-primary-shadow;
|
||||
background-color: @primary;
|
||||
border-color: @primary;
|
||||
border-radius: @border-radius;
|
||||
box-shadow: @btn-primary-shadow;
|
||||
|
||||
&:hover {
|
||||
color: @white;
|
||||
@ -66,15 +66,15 @@
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #fff;
|
||||
padding-left: @body-padding;
|
||||
padding-right: @body-padding;
|
||||
padding-bottom: 30px;
|
||||
padding-left: @body-padding;
|
||||
background-color: #fff;
|
||||
|
||||
:global {
|
||||
.ant-descriptions-title {
|
||||
@ -88,8 +88,8 @@
|
||||
}
|
||||
|
||||
.title-label {
|
||||
font-style: italic;
|
||||
margin-right: 8px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.header-button {
|
||||
@ -97,9 +97,9 @@
|
||||
}
|
||||
|
||||
.header-divider {
|
||||
width: 2px;
|
||||
margin: 0 14px 0 24px;
|
||||
background-color: @color-text-caption;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
@ -107,8 +107,8 @@
|
||||
|
||||
:global {
|
||||
.ant-tabs-bar {
|
||||
padding-left: @body-padding;
|
||||
padding-right: @body-padding;
|
||||
padding-left: @body-padding;
|
||||
}
|
||||
|
||||
.ant-tabs-nav-wrap {
|
||||
@ -133,8 +133,8 @@
|
||||
|
||||
:global {
|
||||
.ant-btn-link {
|
||||
border-color: #0068FF;
|
||||
padding: 5.6px 15px !important;
|
||||
border-color: #0068ff;
|
||||
}
|
||||
|
||||
.ant-divider-vertical {
|
||||
@ -151,7 +151,7 @@
|
||||
.ant-btn-link[disabled]:hover,
|
||||
.ant-btn-link[disabled]:focus,
|
||||
.ant-btn-link[disabled]:active {
|
||||
border-color: rgba(0, 0, 0, 0.25);
|
||||
border-color: rgba(0, 0, 0, 25%);
|
||||
}
|
||||
|
||||
.ant-btn-dangerous.ant-btn-link:active {
|
||||
|
||||
@ -1,20 +1,17 @@
|
||||
@import "~styles/variables";
|
||||
@import '~styles/variables';
|
||||
|
||||
.wrapper {
|
||||
min-height: calc(100vh - 108px);
|
||||
|
||||
:global {
|
||||
// .ant-tabs-bar {
|
||||
// background-color: #fff;
|
||||
// margin-bottom: 0;
|
||||
// padding: 0 @body-padding;
|
||||
// }
|
||||
.ant-tabs > .ant-tabs-nav {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ant-tabs-nav-wrap {
|
||||
padding: 0 @body-padding;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
.container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-flow: row;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
flex-flow: row;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
|
||||
.left {
|
||||
width: 576px;
|
||||
position: relative;
|
||||
width: 576px;
|
||||
overflow-y: auto;
|
||||
// TODO wait for RGB
|
||||
|
||||
/* TODO wait for RGB
|
||||
// background: rgb(253, 249, 252) no-repeat fixed left bottom;
|
||||
// background-size: 556px;
|
||||
// background-size: 556px; */
|
||||
|
||||
.lang {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 24px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.main {
|
||||
@ -48,32 +48,35 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1 1;
|
||||
background-color: #21242A;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
flex: 1 1;
|
||||
text-align: center;
|
||||
background-color: #21242a;
|
||||
}
|
||||
}
|
||||
|
||||
.login-image {
|
||||
margin-top: calc(100vh - 668px);
|
||||
}
|
||||
|
||||
.login-full-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.full-image-front {
|
||||
position: absolute;
|
||||
background-color: rgba(14, 34, 181, 0.15);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(14, 34, 181, 15%);
|
||||
}
|
||||
|
||||
.login-right-logo {
|
||||
position: relative;
|
||||
top: -100px;
|
||||
|
||||
@ -7,17 +7,18 @@
|
||||
.header {
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: @white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: @header-height;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-left: 230px;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
.header-collapsed {
|
||||
&:extend(.header);
|
||||
|
||||
padding-left: 88px;
|
||||
}
|
||||
|
||||
@ -43,30 +44,30 @@
|
||||
}
|
||||
|
||||
.sider {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
:global {
|
||||
.ant-layout-sider-trigger {
|
||||
background-color: @sider-background;
|
||||
position: absolute;
|
||||
width: 32px !important;
|
||||
height: 75px;
|
||||
border-width: 32px;
|
||||
right: 0;
|
||||
bottom: 48px;
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
width: 32px !important;
|
||||
height: 75px;
|
||||
font-size: 16px;
|
||||
line-height: 75px;
|
||||
background-color: @sider-background;
|
||||
border-width: 32px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
max-height: calc(100vh - 64px);
|
||||
padding-right: 14px;
|
||||
padding-left: 14px;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@ -74,13 +75,13 @@
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 30%);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 50%);
|
||||
}
|
||||
|
||||
:global {
|
||||
@ -97,9 +98,9 @@
|
||||
}
|
||||
|
||||
.anticon {
|
||||
font-size: @size-normal;
|
||||
margin-right: 20px;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
font-size: @size-normal;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
@ -117,6 +118,7 @@
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a::before {
|
||||
width: 5px;
|
||||
}
|
||||
@ -133,8 +135,8 @@
|
||||
|
||||
:global {
|
||||
.ant-menu-sub.ant-menu-inline {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.ant-menu-item > span::before {
|
||||
@ -142,11 +144,11 @@
|
||||
top: 18px;
|
||||
bottom: 0;
|
||||
left: 30px;
|
||||
content: '';
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: rgba(255, 255, 255, 0.65);
|
||||
background-color: rgba(255, 255, 255, 65%);
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.ant-menu-item-selected > span::before {
|
||||
@ -157,11 +159,6 @@
|
||||
background-color: @primary-color;
|
||||
}
|
||||
|
||||
// .ant-menu-sub {
|
||||
// .ant-menu-item-selected {
|
||||
// background-color: transparent !important;
|
||||
// }
|
||||
// }
|
||||
.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal)
|
||||
.ant-menu-item-selected {
|
||||
background-color: @primary-color;
|
||||
@ -172,8 +169,8 @@
|
||||
|
||||
.breadcrumb {
|
||||
height: @breadcrumb-height;
|
||||
background-color: #fff;
|
||||
padding-left: @body-padding-left;
|
||||
background-color: #fff;
|
||||
|
||||
.breadcrumb-item {
|
||||
line-height: @breadcrumb-height;
|
||||
@ -190,9 +187,6 @@
|
||||
|
||||
.main {
|
||||
height: calc(100vh - @header-height - @breadcrumb-height);
|
||||
// min-width: @content-width;
|
||||
// padding-left: @body-padding-left;
|
||||
// padding-right: @body-padding-right;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -202,44 +196,43 @@
|
||||
|
||||
.main-has-tab {
|
||||
margin-top: -42px;
|
||||
// max-height: calc(100vh - 58px - 44px);
|
||||
}
|
||||
|
||||
.trigger-wrapper {
|
||||
position: absolute;
|
||||
width: 24px !important;
|
||||
height: 70px;
|
||||
border-width: 24px;
|
||||
right: -24px;
|
||||
bottom: 48px;
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
width: 24px !important;
|
||||
height: 70px;
|
||||
font-size: 16px;
|
||||
line-height: 70px;
|
||||
border-width: 24px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.trigger::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
z-index: -1;
|
||||
-webkit-transform: scaleX(2.2) perspective(50px) rotateY(50deg);
|
||||
transform: scaleX(2.2) perspective(50px) rotateY(50deg);
|
||||
-webkit-transform-origin: bottom;
|
||||
transform-origin: left;
|
||||
background: rgba(0, 0, 0, 35%);
|
||||
border-right: none;
|
||||
border-radius: 0 4px 4px 0;
|
||||
transform: scaleX(2.2) perspective(50px) rotateY(50deg);
|
||||
transform: scaleX(2.2) perspective(50px) rotateY(50deg);
|
||||
transform-origin: bottom;
|
||||
transform-origin: left;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.trigger-icon {
|
||||
@ -247,19 +240,19 @@
|
||||
}
|
||||
|
||||
.base-layout {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.base-layout-sider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
width: 230px;
|
||||
background-color: @sider-background;
|
||||
z-index: 999;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
@ -274,9 +267,9 @@
|
||||
.base-layout-right {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 0;
|
||||
left: 230px;
|
||||
height: calc(100vh - 40px);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.base-layout-right-collapsed {
|
||||
@ -289,37 +282,35 @@
|
||||
}
|
||||
|
||||
.notice {
|
||||
z-index: 1100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: #0068ff;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: 0;
|
||||
line-height: 24px;
|
||||
z-index: 1100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 384px;
|
||||
max-width: calc(100vw - 48px);
|
||||
margin-bottom: 16px;
|
||||
margin: 0 24px 0 0;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px 24px;
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
color: #0068ff;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 12%), 0 6px 16px 0 rgba(0, 0, 0, 8%),
|
||||
0 9px 28px 8px rgba(0, 0, 0, 5%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-item-title {
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 140px;
|
||||
display: inline-block;
|
||||
max-width: 140px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,42 +1,48 @@
|
||||
@import '~styles/variables';
|
||||
|
||||
.main {
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
|
||||
:global {
|
||||
.ant-layout-has-sider {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.ant-table {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ant-pagination-item {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ant-layout-sider {
|
||||
background: @sider-background;
|
||||
}
|
||||
|
||||
.ant-menu.ant-menu-dark {
|
||||
background: @sider-background;
|
||||
}
|
||||
|
||||
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
|
||||
background-color: @sider-open-background;
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
|
||||
.ant-btn-primary:hover,
|
||||
.ant-btn-primary:focus {
|
||||
background-color: @hover-color;
|
||||
border-color: @hover-color;
|
||||
}
|
||||
|
||||
.ant-btn-primary[disabled]:hover {
|
||||
background-color: #f2f2f2;
|
||||
border-color: #d2d2d2;
|
||||
}
|
||||
.ant-table {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
@ -7,18 +7,14 @@
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.password_form {
|
||||
width: 310px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
background: #FFFBE6;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #FFE58F;
|
||||
color: rgba(0,0,0,0.65);
|
||||
line-height: 1.5;
|
||||
padding: 8px 12px;
|
||||
color: rgba(0, 0, 0, 65%);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
background: #fffbe6;
|
||||
border: 1px solid #ffe58f;
|
||||
border-radius: 4px;
|
||||
|
||||
:global {
|
||||
.anticon {
|
||||
@ -42,21 +38,22 @@
|
||||
:global {
|
||||
.ant-form-item-control-input-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #F2DEDE;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #A43A39;
|
||||
color: #A43A39;
|
||||
line-height: 38px;
|
||||
padding-left: 12px;
|
||||
color: #a43a39;
|
||||
font-size: 14px;
|
||||
line-height: 38px;
|
||||
background: #f2dede;
|
||||
border: 1px solid #a43a39;
|
||||
border-radius: 4px;
|
||||
|
||||
:global {
|
||||
.anticon {
|
||||
margin-right: 8px;
|
||||
|
||||
@ -275,7 +275,7 @@ export class Login extends Component {
|
||||
<SimpleForm
|
||||
formItems={this.formItems}
|
||||
name="normal_login"
|
||||
className={styles.login_form}
|
||||
className={styles['login-form']}
|
||||
initialValues={this.defaultValue}
|
||||
onFinish={this.onFinish}
|
||||
formRef={this.formRef}
|
||||
|
||||
@ -7,18 +7,19 @@
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.login_form {
|
||||
.login-form {
|
||||
width: 310px;
|
||||
}
|
||||
|
||||
.login-error {
|
||||
background: #F2DEDE;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #A43A39;
|
||||
color: #A43A39;
|
||||
line-height: 1.5;
|
||||
padding: 8px 12px;
|
||||
color: #a43a39;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
background: #f2dede;
|
||||
border: 1px solid #a43a39;
|
||||
border-radius: 4px;
|
||||
|
||||
:global {
|
||||
.anticon {
|
||||
margin-right: 8px;
|
||||
|
||||
@ -30,7 +30,7 @@ class ComputeService extends Component {
|
||||
}
|
||||
|
||||
renderAction = (item, index) => (
|
||||
<Row className={styles.sider_card} key={`${item.binary}-${index}`}>
|
||||
<Row className={styles['sider-card']} key={`${item.binary}-${index}`}>
|
||||
<Col
|
||||
span={8}
|
||||
style={{ textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden' }}
|
||||
|
||||
@ -30,7 +30,7 @@ class NetworkService extends Component {
|
||||
}
|
||||
|
||||
renderAction = (item, index) => (
|
||||
<Row className={styles.sider_card} key={`${item.binary}-${index}`}>
|
||||
<Row className={styles['sider-card']} key={`${item.binary}-${index}`}>
|
||||
<Col
|
||||
span={8}
|
||||
style={{ textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden' }}
|
||||
|
||||
@ -186,7 +186,7 @@ export class virtualResourceInfo extends Component {
|
||||
return (
|
||||
<Card
|
||||
loading={virtualResourceLoading}
|
||||
className={styles.resourceOverview}
|
||||
className={styles['resource-overview']}
|
||||
title={t('Virtual Resource Overview')}
|
||||
bordered={false}
|
||||
>
|
||||
|
||||
@ -5,35 +5,28 @@
|
||||
padding: 44px;
|
||||
overflow: auto;
|
||||
|
||||
.actionButton {
|
||||
line-height: 88px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0px 4px 1px rgba(175, 175, 175, 0.5);
|
||||
border-radius: 9px;
|
||||
opacity: 0.9;
|
||||
|
||||
font-size: 18px;
|
||||
color: #A3A3A3;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-card {
|
||||
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
|
||||
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
|
||||
}
|
||||
|
||||
.ant-card-head {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart{
|
||||
.resource{
|
||||
font-size: 16px;
|
||||
.chart {
|
||||
.resource {
|
||||
display: block;
|
||||
padding-bottom: 12px;
|
||||
margin-right: 200px;
|
||||
padding-bottom: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 14px;
|
||||
// display: block;
|
||||
padding-top: 12px;
|
||||
color: #A3A3A3;
|
||||
color: #a3a3a3;
|
||||
font-size: 14px;
|
||||
|
||||
:global {
|
||||
.ant-avatar-square {
|
||||
@ -49,30 +42,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
.resourceOverview{
|
||||
.card{
|
||||
.resource-overview {
|
||||
.card {
|
||||
height: 100%;
|
||||
margin-right: 20px;
|
||||
// padding: 30px 0 30px 0;
|
||||
|
||||
.label{
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
}
|
||||
.all{
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.status{
|
||||
color: #A3A3A3;
|
||||
.all {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #a3a3a3;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-badge-status-text{
|
||||
margin-left: 4px;
|
||||
.ant-badge-status-text {
|
||||
margin-right: 8px;
|
||||
color: #A3A3A3;
|
||||
margin-left: 4px;
|
||||
color: #a3a3a3;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@ -83,48 +76,41 @@
|
||||
height: 100%;
|
||||
|
||||
.top {
|
||||
.sider_card {
|
||||
margin: 4px 0 4px 0;
|
||||
.sider-card {
|
||||
margin: 4px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-descriptions-view {
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
overflow: auto;
|
||||
border-radius: 4px;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.ant-descriptions-item-label {
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-card-head {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.outer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
|
||||
.inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
}
|
||||
|
||||
.inner::-webkit-scrollbar {
|
||||
@ -132,9 +118,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
:global{
|
||||
:global {
|
||||
.ant-descriptions-item-container {
|
||||
.ant-descriptions-item-content{
|
||||
.ant-descriptions-item-content {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
@ -120,7 +120,7 @@ export class ProjectInfo extends Component {
|
||||
onClick={this.handleDetailInfo}
|
||||
icon={icon}
|
||||
type="link"
|
||||
className={styles.role_button}
|
||||
className={styles['role-button']}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -185,7 +185,7 @@ export class QuotaOverview extends Component {
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={title}>
|
||||
<div className={styles.progress_title}>{title}</div>
|
||||
<div className={styles['progress-title']}>{title}</div>
|
||||
</Tooltip>
|
||||
<Progress
|
||||
style={{ marginTop: 13, marginBottom: 13 }}
|
||||
|
||||
@ -53,9 +53,9 @@ const actions = [
|
||||
|
||||
export class Overview extends Component {
|
||||
renderAction = (item) => (
|
||||
<Row className={styles.actionButton} gutter={[8]}>
|
||||
<Col span={8} className={styles.main_icon}>
|
||||
<img alt="avatar" src={item.avatar} className={styles.actionIcon} />
|
||||
<Row className={styles['action-button']} gutter={[8]}>
|
||||
<Col span={8} className={styles['main-icon']}>
|
||||
<img alt="avatar" src={item.avatar} className={styles['action-icon']} />
|
||||
</Col>
|
||||
<Col span={16} style={{ textAlign: 'center' }}>
|
||||
{item.label}
|
||||
|
||||
@ -5,24 +5,23 @@
|
||||
padding: 44px;
|
||||
overflow: auto;
|
||||
|
||||
.main_icon {
|
||||
.main-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.actionButton {
|
||||
line-height: 88px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 4px 1px rgba(175, 175, 175, 0.5);
|
||||
border-radius: 9px;
|
||||
opacity: 0.9;
|
||||
|
||||
font-size: 18px;
|
||||
.action-button {
|
||||
color: #a3a3a3;
|
||||
font-size: 18px;
|
||||
line-height: 88px;
|
||||
background: #fff;
|
||||
border-radius: 9px;
|
||||
box-shadow: 0 0 4px 1px rgba(175, 175, 175, 50%);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.actionIcon {
|
||||
.action-icon {
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
@ -31,7 +30,11 @@
|
||||
|
||||
:global {
|
||||
.ant-card {
|
||||
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
|
||||
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
|
||||
}
|
||||
|
||||
.ant-card-head {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,14 +47,14 @@
|
||||
vertical-align: bottom;
|
||||
|
||||
.text {
|
||||
font-size: 21px;
|
||||
color: #252525;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.action {
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
margin-left: 40px;
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -62,9 +65,10 @@
|
||||
|
||||
.project {
|
||||
position: relative;
|
||||
|
||||
.meta {
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px dashed #e8e8e8;
|
||||
}
|
||||
|
||||
@ -74,34 +78,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
.role_button {
|
||||
.role-button {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 24px;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-card-head {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
|
||||
.inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@ -112,8 +109,6 @@
|
||||
}
|
||||
|
||||
.bottom {
|
||||
//margin: 16px 0;
|
||||
|
||||
:global {
|
||||
.ant-card {
|
||||
box-shadow: unset;
|
||||
@ -122,8 +117,8 @@
|
||||
|
||||
.title {
|
||||
.text {
|
||||
font-size: 16px;
|
||||
color: #252525;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
@ -143,10 +138,10 @@
|
||||
}
|
||||
|
||||
.action {
|
||||
font-size: 12px;
|
||||
color: #0068ff;
|
||||
float: right;
|
||||
margin-top: 6px;
|
||||
color: #0068ff;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -159,19 +154,19 @@
|
||||
border-bottom: none;
|
||||
|
||||
.ant-card-head-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #565656;
|
||||
padding-bottom: 0;
|
||||
color: #565656;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress_title {
|
||||
font-size: 14px;
|
||||
.progress-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -472,14 +472,14 @@ export class BaseDetail extends Base {
|
||||
if (globalRootStore.hasAdminRole) {
|
||||
options.splice(1, 0, {
|
||||
label: t('Details'),
|
||||
content: <pre className={styles.preWrap}>{fault.details}</pre>,
|
||||
content: <pre className={styles['pre-wrap']}>{fault.details}</pre>,
|
||||
});
|
||||
}
|
||||
return {
|
||||
labelCol: 4,
|
||||
title: t('Error'),
|
||||
options,
|
||||
className: styles.errorCard,
|
||||
className: styles['error-card'],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
|
||||
.vm-interface:first-child {
|
||||
border-left: @topo-line;
|
||||
|
||||
.interface-line {
|
||||
border-left: none;
|
||||
}
|
||||
@ -23,12 +24,13 @@
|
||||
padding-bottom: 20px;
|
||||
|
||||
.interface-line {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 60px;
|
||||
border-left: @topo-line;
|
||||
border-bottom: @topo-line;
|
||||
display: inline-block;
|
||||
border-left: @topo-line;
|
||||
}
|
||||
|
||||
.interface-item {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -37,8 +39,8 @@
|
||||
.vm {
|
||||
padding: @mid-space;
|
||||
background-color: @resource-box-bg;
|
||||
border-radius: 4px;
|
||||
border: @resource-box-border;
|
||||
border-radius: 4px;
|
||||
|
||||
.vm-icon {
|
||||
display: inline;
|
||||
@ -50,9 +52,9 @@
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
margin-right: 13px;
|
||||
margin-left: 5px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.vm-info {
|
||||
@ -60,6 +62,7 @@
|
||||
|
||||
.info-item {
|
||||
padding-bottom: @min-space;
|
||||
|
||||
.info-item-icon {
|
||||
display: inline;
|
||||
height: 16px;
|
||||
@ -78,30 +81,30 @@
|
||||
|
||||
.volume-inline {
|
||||
width: 36px;
|
||||
border-right: @topo-line;
|
||||
margin-bottom: 12px;
|
||||
border-right: @topo-line;
|
||||
}
|
||||
|
||||
.volume-content {
|
||||
flex: 1;
|
||||
|
||||
.attached-volume {
|
||||
padding: @min-space 0;
|
||||
display: flex;
|
||||
padding: @min-space 0;
|
||||
|
||||
.attached-volume-line {
|
||||
border-bottom: @topo-line;
|
||||
width: 60px;
|
||||
height: 52px;
|
||||
border-bottom: @topo-line;
|
||||
}
|
||||
|
||||
.attached-volume-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: @mid-space;
|
||||
background-color: @resource-box-bg;
|
||||
border-radius: 4px;
|
||||
border: @resource-box-border;
|
||||
border-radius: 4px;
|
||||
|
||||
.volume-icon {
|
||||
padding-right: @lg-space;
|
||||
@ -110,6 +113,7 @@
|
||||
|
||||
.volume-info {
|
||||
flex: 1;
|
||||
|
||||
.volume-info-item {
|
||||
padding-bottom: @min-space;
|
||||
|
||||
@ -117,6 +121,7 @@
|
||||
margin-right: @min-space;
|
||||
}
|
||||
}
|
||||
|
||||
:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@ -126,27 +131,29 @@
|
||||
|
||||
.attach-action-line {
|
||||
display: inline-block;
|
||||
border-bottom: @topo-line;
|
||||
width: 60px;
|
||||
height: @lg-space;
|
||||
margin-right: 10px;
|
||||
border-bottom: @topo-line;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attach-btn {
|
||||
max-width: 100px;
|
||||
|
||||
span {
|
||||
max-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.errorCard {
|
||||
.error-card {
|
||||
flex-grow: 0;
|
||||
|
||||
.preWrap {
|
||||
.pre-wrap {
|
||||
font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
font-family: Monaco, Menlo, Consolas, Courier New, monospace;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,27 +4,31 @@
|
||||
min-height: calc(100vh - 108px);
|
||||
padding: 0 @body-padding;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
// background: #FFFFFF;
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: #FFFFFF;
|
||||
font-size: larger;
|
||||
padding-bottom: 12px;
|
||||
padding-top: 12px;
|
||||
margin-bottom: 24px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
font-size: larger;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header-divider {
|
||||
margin: 0 5px 0 5px;
|
||||
background-color: @color-text-caption;
|
||||
width: 2px;
|
||||
margin: 0 5px;
|
||||
background-color: @color-text-caption;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 70px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
:global {
|
||||
.ant-radio-button-wrapper {
|
||||
@ -36,6 +40,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.security-group-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
.input {
|
||||
margin-left: 16px;
|
||||
margin-right: 32px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
min-width: 165px;
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
.input {
|
||||
margin-left: 16px;
|
||||
margin-right: 32px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
min-width: 165px;
|
||||
}
|
||||
@ -3,17 +3,21 @@
|
||||
.mb16 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
color: @color-text-body;
|
||||
}
|
||||
|
||||
.tip-title {
|
||||
font-weight: 400;
|
||||
color: @color-text-title;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
color: rgba(254, 223, 64, 1);
|
||||
margin-right: 8px;
|
||||
color: rgba(254, 223, 64, 100%);
|
||||
}
|
||||
|
||||
.tip-content {
|
||||
margin-left: 20px;
|
||||
}
|
||||
@ -1,8 +1,9 @@
|
||||
.flavor-label {
|
||||
margin-right: 16px;
|
||||
display: inline-block;
|
||||
min-width: 50px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.flavor-tab {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@ -1,78 +1,34 @@
|
||||
@import '~styles/variables';
|
||||
|
||||
.main {
|
||||
overflow-y: auto;
|
||||
margin-left: @nav-width - 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.navWrapper {
|
||||
position: fixed;
|
||||
top: 88px;
|
||||
width: @nav-width;
|
||||
height: calc(100vh - 108px);
|
||||
padding: 0 20px 40px 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav {
|
||||
z-index: 1;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 20px;
|
||||
color: #ffffff;
|
||||
color: #fff;
|
||||
vertical-align: middle;
|
||||
|
||||
:global {
|
||||
.h3 {
|
||||
color: #ffffff;
|
||||
color: #fff;
|
||||
line-height: 1.33;
|
||||
text-shadow: 0 2px 4px rgba(36, 46, 66, 0.1);
|
||||
text-shadow: 0 2px 4px rgba(36, 46, 66, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
& > p {
|
||||
color: #eff4f9;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.titleWrapper {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
padding: 12px;
|
||||
border-radius: @border-radius;
|
||||
background-color: @background-color;
|
||||
box-shadow: 0 8px 16px 0 rgba(36, 46, 66, 0.2);
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
margin-right: 12px;
|
||||
border-radius: 100px 0 100px 100px;
|
||||
background-color: rgba(239, 244, 249, 0.08);
|
||||
}
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
:global .h6 {
|
||||
font-family: @font-family-id;
|
||||
line-height: 1.43;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #d8dee5;
|
||||
}
|
||||
color: #eff4f9;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
.detail {
|
||||
margin: 0 16px;
|
||||
padding: 24px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
border: 1px solid #efefef;
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.public_key {
|
||||
text-overflow: ellipsis;
|
||||
-ms-word-wrap: break-word;
|
||||
|
||||
@ -4,27 +4,31 @@
|
||||
min-height: calc(100vh - 108px);
|
||||
padding: 0 @body-padding;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
// background: #FFFFFF;
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: #FFFFFF;
|
||||
font-size: larger;
|
||||
padding-bottom: 12px;
|
||||
padding-top: 12px;
|
||||
margin-bottom: 24px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
font-size: larger;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header-divider {
|
||||
margin: 0 5px 0 5px;
|
||||
background-color: @color-text-caption;
|
||||
width: 2px;
|
||||
margin: 0 5px;
|
||||
background-color: @color-text-caption;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
:global {
|
||||
.ant-radio-button-wrapper {
|
||||
@ -35,6 +39,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.security-group-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -66,7 +66,7 @@ export default class BaseDetail extends Base {
|
||||
|
||||
get jsonCard() {
|
||||
const content = (
|
||||
<pre className={styles.json_data}>
|
||||
<pre className={styles['json-data']}>
|
||||
{JSON.stringify(this.detailData, null, 4)}
|
||||
</pre>
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.json_data {
|
||||
.json-data {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import '~styles/variables';
|
||||
|
||||
.header-divider {
|
||||
margin: 0 5px 0 5px;
|
||||
background-color: @color-text-caption;
|
||||
width: 2px;
|
||||
margin: 0 5px;
|
||||
background-color: @color-text-caption;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import '~styles/variables';
|
||||
|
||||
.header-divider {
|
||||
margin: 0 5px 0 5px;
|
||||
background-color: @color-text-caption;
|
||||
width: 2px;
|
||||
margin: 0 5px;
|
||||
background-color: @color-text-caption;
|
||||
}
|
||||
|
||||
@ -4,31 +4,36 @@
|
||||
min-height: calc(100vh - 108px);
|
||||
padding: 0 @body-padding;
|
||||
}
|
||||
|
||||
.tablewrapper {
|
||||
min-height: calc(100vh - 108px);
|
||||
margin-top: -@body-padding;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
// background: #FFFFFF;
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: #FFFFFF;
|
||||
font-size: larger;
|
||||
padding-bottom: 12px;
|
||||
padding-top: 12px;
|
||||
margin-bottom: 24px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
font-size: larger;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header-divider {
|
||||
margin: 0 5px 0 5px;
|
||||
background-color: @color-text-caption;
|
||||
width: 2px;
|
||||
margin: 0 5px;
|
||||
background-color: @color-text-caption;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
:global {
|
||||
.ant-radio-button-wrapper {
|
||||
@ -39,21 +44,20 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.security-group-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.title-label {
|
||||
font-style: italic;
|
||||
margin-right: 8px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.header-button {
|
||||
float: right;
|
||||
}
|
||||
.header-divider {
|
||||
margin: 0 14px 0 24px;
|
||||
background-color: @color-text-caption;
|
||||
width: 2px;
|
||||
}
|
||||
@ -1,36 +1,36 @@
|
||||
.header {
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 85%);
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.list {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 5%);
|
||||
|
||||
.item {
|
||||
height: 76px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 65%);
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 65%);
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@ const topCardList = [
|
||||
metricKey: 'mysqlService.runningTime',
|
||||
},
|
||||
renderContent: ({ data }) => (
|
||||
<div className={styles.topContent}>
|
||||
<div className={styles['top-content']}>
|
||||
{/* 转化为毫秒 */}
|
||||
{formatUsedTime(get(data, '[0].y', 0) * 1000)}
|
||||
</div>
|
||||
|
||||
@ -43,7 +43,7 @@ const topCardList = [
|
||||
},
|
||||
renderContent: ({ data }) => {
|
||||
return (
|
||||
<div className={styles.topContent}>
|
||||
<div className={styles['top-content']}>
|
||||
<Row style={{ width: '100%', textAlign: 'center' }}>
|
||||
<Col span={12}>{data.up + t('Up')}</Col>
|
||||
<Col span={12}>{data.down + t('Down')}</Col>
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
.header {
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 85%);
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.list {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 5%);
|
||||
|
||||
.item {
|
||||
height: 76px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 65%);
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 65%);
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -84,11 +84,11 @@ const Index = function () {
|
||||
<Col flex="1 1">
|
||||
<div className={styles.card}>
|
||||
<Row style={{ height: '100%' }}>
|
||||
<Col span={12} className={styles.alertCardLine}>
|
||||
<Col span={12} className={styles['alert-card-line']}>
|
||||
<div className={styles.number}>{cpuCount}</div>
|
||||
<div>{t('Today CPU usage > 80% alert')}</div>
|
||||
</Col>
|
||||
<Col span={12} className={styles.alertCardLine}>
|
||||
<Col span={12} className={styles['alert-card-line']}>
|
||||
<div className={styles.number}>{memCount}</div>
|
||||
<div>{t('Today Memory usage > 80% alert')}</div>
|
||||
</Col>
|
||||
|
||||
@ -28,7 +28,7 @@ export const physicalNodeLeftTopCardList = [
|
||||
const used = get(data[0], 'y', 0);
|
||||
const total = get(data[1], 'y', 0);
|
||||
return (
|
||||
<div className={styles.topContent}>
|
||||
<div className={styles['top-content']}>
|
||||
<div>
|
||||
<Row
|
||||
style={{
|
||||
@ -68,7 +68,7 @@ export const physicalNodeLeftTopCardList = [
|
||||
const used = getSuitableValue(usedValue, 'memory');
|
||||
const total = getSuitableValue(totalValue, 'memory');
|
||||
return (
|
||||
<div className={styles.topContent}>
|
||||
<div className={styles['top-content']}>
|
||||
<div>
|
||||
<Row
|
||||
style={{
|
||||
@ -110,7 +110,7 @@ export const physicalNodeLeftTopCardList = [
|
||||
const total = getSuitableValue(totalValue, 'disk');
|
||||
const progressPercentage = computePercentage(usedValue, totalValue);
|
||||
return (
|
||||
<div className={styles.topContent}>
|
||||
<div className={styles['top-content']}>
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
@ -280,7 +280,7 @@ export const storageLeftCardList = [
|
||||
const data = get(store.data, 'y', 0);
|
||||
return (
|
||||
<div
|
||||
className={styles.topContent}
|
||||
className={styles['top-content']}
|
||||
style={{
|
||||
fontSize: 28,
|
||||
fontWeight: 600,
|
||||
@ -306,7 +306,7 @@ export const storageLeftCardList = [
|
||||
const used = getSuitableValue(usedValue, 'disk');
|
||||
const total = getSuitableValue(totalValue, 'disk');
|
||||
return (
|
||||
<div className={styles.topContent}>
|
||||
<div className={styles['top-content']}>
|
||||
<div>
|
||||
<Row
|
||||
style={{
|
||||
@ -346,7 +346,7 @@ export const storageLeftCardList = [
|
||||
(totalValue - get(data[0], 'y', 0)).toFixed(2)
|
||||
);
|
||||
return (
|
||||
<div className={styles.topContent}>
|
||||
<div className={styles['top-content']}>
|
||||
<div>
|
||||
<Row
|
||||
style={{
|
||||
|
||||
@ -61,7 +61,7 @@ const Index = () => {
|
||||
},
|
||||
visibleHeight: 200,
|
||||
renderContent: (store) => (
|
||||
<div className={styles.topContent}>{store.data}</div>
|
||||
<div className={styles['top-content']}>{store.data}</div>
|
||||
),
|
||||
}}
|
||||
topCardList={topCardList}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
.container {
|
||||
.card {
|
||||
padding: 16px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05),
|
||||
0px 0px 10px 0px rgba(0, 0, 0, 0.05);
|
||||
color: #000000;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 5%), 0 0 10px 0 rgba(0, 0, 0, 5%);
|
||||
|
||||
.tabs {
|
||||
:global {
|
||||
@ -21,74 +20,31 @@
|
||||
}
|
||||
}
|
||||
|
||||
.alertCardLine {
|
||||
.alert-card-line {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.number {
|
||||
color: rgb(232, 104, 4);
|
||||
font-size: 36px;
|
||||
color: rgb(232, 104, 74);
|
||||
}
|
||||
}
|
||||
|
||||
.alertCardTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.alertInfo {
|
||||
margin-top: 6px;
|
||||
|
||||
.alertNumber {
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.alertLevel {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.alertCardBottom {
|
||||
padding: 0 26px;
|
||||
|
||||
.buttonTitle {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin-bottom: 15px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.alertLineInfo {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
height: 100%;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
|
||||
.inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@ -98,19 +54,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.flexColumnAround {
|
||||
.top-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.topContent {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100px;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
|
||||
@ -32,7 +32,9 @@ export const topCardList = [
|
||||
metricKey: 'physicalNode.cpuCores',
|
||||
},
|
||||
renderContent: (value) => (
|
||||
<div className={styles.topContent}>{get(value.data, 'length', 0)}</div>
|
||||
<div className={styles['top-content']}>
|
||||
{get(value.data, 'length', 0)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
@ -42,7 +44,7 @@ export const topCardList = [
|
||||
metricKey: 'physicalNode.totalMem',
|
||||
},
|
||||
renderContent: (value) => (
|
||||
<div className={styles.topContent}>
|
||||
<div className={styles['top-content']}>
|
||||
{getSuitableValue(get(value.data[0], 'y', 0), 'memory')}
|
||||
</div>
|
||||
),
|
||||
@ -54,7 +56,7 @@ export const topCardList = [
|
||||
metricKey: 'physicalNode.systemRunningTime',
|
||||
},
|
||||
renderContent: (value) => (
|
||||
<div className={styles.topContent}>
|
||||
<div className={styles['top-content']}>
|
||||
{formatUsedTime(
|
||||
(moment().unix() -
|
||||
parseInt(get(value.data[0], 'y', moment().unix()), 10)) *
|
||||
|
||||
@ -149,7 +149,7 @@ const RenderTabs = () => {
|
||||
<TabPane tab="OSDs" key="osd" />
|
||||
</Tabs>
|
||||
{/* {isLoading ? (
|
||||
<div className={styles.spinContainer}>
|
||||
<div className={styles['spin-container']}>
|
||||
<Spin />
|
||||
</div>
|
||||
) : ( */}
|
||||
|
||||
@ -42,7 +42,7 @@ const StorageCluster = () => {
|
||||
const d = get(data, 'y', 0);
|
||||
return (
|
||||
<div
|
||||
className={styles.topContent}
|
||||
className={styles['top-content']}
|
||||
style={{
|
||||
fontSize: 28,
|
||||
fontWeight: 600,
|
||||
@ -139,7 +139,7 @@ const StorageCluster = () => {
|
||||
},
|
||||
renderContent: ({ data }) => {
|
||||
return (
|
||||
<Row className={styles.OSDs}>
|
||||
<Row className={styles.osd}>
|
||||
<Col span={8} />
|
||||
<Col span={8} style={{ fontSize: 14, opacity: 0.8 }}>
|
||||
{t('Up')}
|
||||
@ -190,7 +190,7 @@ const StorageCluster = () => {
|
||||
const total = getSuitableValue(totalValue, 'disk');
|
||||
const progressPercentage = computePercentage(usedValue, totalValue);
|
||||
return (
|
||||
<div className={styles.topContent}>
|
||||
<div className={styles['top-content']}>
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
|
||||
@ -1,18 +1,19 @@
|
||||
.OSDs {
|
||||
.osd {
|
||||
height: 100%;
|
||||
color: rgba(0, 0, 0, 85%);
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.header {
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
|
||||
.range {
|
||||
:global {
|
||||
.ant-radio-button-wrapper {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
color: rgba(0, 0, 0, 65%);
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper-checked {
|
||||
@ -32,15 +33,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.myCardRow {
|
||||
.my-card-row {
|
||||
.top {
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:global {
|
||||
@ -50,8 +51,8 @@
|
||||
|
||||
.ant-card-body {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
padding-top: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -59,7 +60,7 @@
|
||||
|
||||
:global {
|
||||
.ant-card-bordered {
|
||||
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
|
||||
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
|
||||
|
||||
.ant-card-head {
|
||||
border-bottom: none;
|
||||
@ -69,17 +70,17 @@
|
||||
}
|
||||
|
||||
.outer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
|
||||
.inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@ -89,13 +90,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.topContent {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
height: 120px;
|
||||
.top-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 120px;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
@ -111,7 +112,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.spinContainer {
|
||||
.spin-container {
|
||||
width: 100%;
|
||||
min-height: 400px;
|
||||
padding: 30px 50px;
|
||||
|
||||
@ -164,7 +164,7 @@ export class FloatingIps extends Base {
|
||||
|
||||
<Popover
|
||||
content={
|
||||
<Row className={styles.popover_row} gutter={[8, 8]}>
|
||||
<Row className={styles['popover-row']} gutter={[8, 8]}>
|
||||
{record.port_forwardings
|
||||
.sort((a, b) => a.external_port - b.external_port)
|
||||
.map((i, idx) => (
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.popover_row{
|
||||
.popover-row {
|
||||
max-width: 320px;
|
||||
text-align: center;
|
||||
margin: 0 !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -150,7 +150,7 @@ export default class InstanceCard extends NodeCard {
|
||||
const detailData = servers[infoIndex];
|
||||
return (
|
||||
<div
|
||||
className={styles.nodeTooltips}
|
||||
className={styles['node-tooltips']}
|
||||
style={{ top: `${y}px`, left: `${x - 8}px` }}
|
||||
>
|
||||
<Popover
|
||||
|
||||
@ -183,7 +183,9 @@ export default class NodeCard extends React.Component {
|
||||
}
|
||||
|
||||
renderTitle(type, name) {
|
||||
return <div className={styles.nodeCardTitle}>{`${type}: ${name}`}</div>;
|
||||
return (
|
||||
<div className={styles['node-card-title']}>{`${type}: ${name}`}</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -196,7 +198,7 @@ export default class NodeCard extends React.Component {
|
||||
const detailData = routers[infoIndex];
|
||||
return (
|
||||
<div
|
||||
className={styles.nodeTooltips}
|
||||
className={styles['node-tooltips']}
|
||||
style={{ top: `${y}px`, left: `${x}px` }}
|
||||
>
|
||||
<Popover
|
||||
|
||||
@ -1,45 +1,54 @@
|
||||
.nodeTooltips {
|
||||
.node-tooltips {
|
||||
:global {
|
||||
.ant-card-body {
|
||||
padding: 15px
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.image-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
// display: block;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.descriptions-item{
|
||||
|
||||
.descriptions-item {
|
||||
:global {
|
||||
.ant-descriptions-item-label {
|
||||
width: 80px;
|
||||
}
|
||||
.ant-descriptions-row > th, .ant-descriptions-row > td {
|
||||
|
||||
.ant-descriptions-row > th,
|
||||
.ant-descriptions-row > td {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nodeCardTitle {
|
||||
font-size: 16px
|
||||
|
||||
.node-card-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card-button {
|
||||
:global {
|
||||
.ant-btn-primary {
|
||||
margin-right: 6px
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 100%;
|
||||
|
||||
:global {
|
||||
.ant-btn-primary {
|
||||
margin-right: 16px
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
height: calc(100vh - 170px);
|
||||
overflow-y: auto;
|
||||
|
||||
@ -4,27 +4,31 @@
|
||||
min-height: calc(100vh - 108px);
|
||||
padding: 0 @body-padding;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
// background: #FFFFFF;
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: #FFFFFF;
|
||||
font-size: larger;
|
||||
padding-bottom: 12px;
|
||||
padding-top: 12px;
|
||||
margin-bottom: 24px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
font-size: larger;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header-divider {
|
||||
margin: 0 5px 0 5px;
|
||||
background-color: @color-text-caption;
|
||||
width: 2px;
|
||||
margin: 0 5px;
|
||||
background-color: @color-text-caption;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
:global {
|
||||
.ant-radio-button-wrapper {
|
||||
@ -35,6 +39,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.security-group-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -1,9 +1,10 @@
|
||||
.detail {
|
||||
margin: 0 16px;
|
||||
padding: 24px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
border: 1px solid #efefef;
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.public_key {
|
||||
text-overflow: ellipsis;
|
||||
-ms-word-wrap: break-word;
|
||||
|
||||
@ -220,7 +220,7 @@ export default class ContainerObject extends Base {
|
||||
const content = <PopUpContent item={data} />;
|
||||
return (
|
||||
<Popover content={content} destroyTooltipOnHide trigger="click">
|
||||
<span className="linkClass">{t('Detail Info')}</span>
|
||||
<span className="link-class">{t('Detail Info')}</span>
|
||||
</Popover>
|
||||
);
|
||||
},
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
.link-header {
|
||||
line-height: 44px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
background-color: white;
|
||||
margin-bottom: 8px;
|
||||
padding-left: 8px;
|
||||
color: rgba(0, 0, 0, 85%);
|
||||
line-height: 44px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.link-title {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.item-next {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
@ -150,7 +150,7 @@ export default class Container extends Base {
|
||||
const content = <PopUpContent name={data.name} />;
|
||||
return (
|
||||
<Popover content={content} destroyTooltipOnHide trigger="click">
|
||||
<span className="linkClass">{t('Detail Info')}</span>
|
||||
<span className="link-class">{t('Detail Info')}</span>
|
||||
</Popover>
|
||||
);
|
||||
},
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.input {
|
||||
margin-left: 16px;
|
||||
margin-right: 32px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
@ -17,6 +17,7 @@ import { inject, observer } from 'mobx-react';
|
||||
import { Row, Layout, Col, Avatar } from 'antd';
|
||||
import globalUserStore from 'stores/keystone/user';
|
||||
import ProfileIcon from 'asset/image/profile.svg';
|
||||
import classnames from 'classnames';
|
||||
import styles from './styles.less';
|
||||
|
||||
export class Overview extends Component {
|
||||
@ -33,7 +34,7 @@ export class Overview extends Component {
|
||||
|
||||
renderInfoItem(item) {
|
||||
return (
|
||||
<Row className={styles.user_info_detail_item}>
|
||||
<Row className={styles['user-info-detail-item']}>
|
||||
<Col span={6}>{item.label}</Col>
|
||||
<Col span={18}>{item.value}</Col>
|
||||
</Row>
|
||||
@ -51,14 +52,17 @@ export class Overview extends Component {
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Col span={3} className={styles.user_info_avatar}>
|
||||
<Col
|
||||
span={3}
|
||||
className={classnames(styles.hvc, styles['user-info-avatar'])}
|
||||
>
|
||||
<Avatar
|
||||
size={{ xs: 33, sm: 44, md: 55, lg: 88, xl: 110, xxl: 138 }}
|
||||
src={ProfileIcon}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={21}>
|
||||
<Row className={styles.user_info_detail}>
|
||||
<Row className={styles['user-info-detail']}>
|
||||
{Object.keys(data).map((item) => {
|
||||
return (
|
||||
<Col span={12} key={`user_info_detail_${item}`}>
|
||||
@ -82,7 +86,9 @@ export class Overview extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Layout.Content className={styles.content}>
|
||||
<Row className={styles.user_info_card}>{this.renderUserInfo()}</Row>
|
||||
<Row className={classnames(styles.bgc, styles['user-info-card'])}>
|
||||
{this.renderUserInfo()}
|
||||
</Row>
|
||||
{this.renderExtra()}
|
||||
</Layout.Content>
|
||||
);
|
||||
|
||||
@ -1,31 +1,26 @@
|
||||
@import '~styles/variables';
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
|
||||
.user_info_card {
|
||||
.normalBgc();
|
||||
.user-info-card {
|
||||
height: 255px;
|
||||
|
||||
.user_info_avatar {
|
||||
.hvc();
|
||||
}
|
||||
|
||||
.user_info_detail {
|
||||
text-align: left;
|
||||
.user-info-detail {
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
text-align: left;
|
||||
|
||||
.user_info_detail_item {
|
||||
height: 100%;
|
||||
.user-info-detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding-left: 3rem;
|
||||
color: @color-text-body;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: @color-text-body;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -33,14 +28,14 @@
|
||||
|
||||
.hvc {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.normalBgc {
|
||||
background-color: white;
|
||||
box-shadow: @base-shadow;
|
||||
padding: 24px;
|
||||
border-radius: @border-radius;
|
||||
.bgc {
|
||||
margin-bottom: 16px;
|
||||
padding: 24px;
|
||||
background-color: white;
|
||||
border-radius: @border-radius;
|
||||
box-shadow: @base-shadow;
|
||||
}
|
||||
|
||||
@ -594,7 +594,7 @@ export const actionColumn = (self) => {
|
||||
<>
|
||||
{value && (
|
||||
<Popover content={content} destroyTooltipOnHide trigger="click">
|
||||
<span className="linkClass">{value}</span>
|
||||
<span className="link-class">{value}</span>
|
||||
</Popover>
|
||||
)}
|
||||
</>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user