openstack/skyline-console
Code Issues Proposed changes

feat: update code format

Browse Source 
update code format by yarn run lint

Change-Id: Ic413e3f4dc181549d5a751933a22f590bd38d2ad
This commit is contained in:
zhangjingwei 2024-04-03 16:05:02 +08:00
parent c728cfc32f
commit 9962be6795
30 changed files with 313 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/client/masakari/index.js
View File

@ -42,4 +42,3 @@ export class MasakariClient extends Base {
const masakariClient = new MasakariClient(); const masakariClient = new MasakariClient();
export default masakariClient; export default masakariClient;

35
src/core/i18n.js
View File

@ -174,24 +174,24 @@ const init = () => {
}); });
} else if (lang === 'tr-tr') { } else if (lang === 'tr-tr') {
moment.locale('tr', { moment.locale('tr', {
months: 'Ocak_Şubat_Mart_Nisan_Mayıs_Haziran_Temmuz_Ağustos_Eylül_Ekim_Kasım_Aralık'.split( months:
'_' 'Ocak_Şubat_Mart_Nisan_Mayıs_Haziran_Temmuz_Ağustos_Eylül_Ekim_Kasım_Aralık'.split(
), '_'
),
monthsShort: 'Oca_Şub_Mar_Nis_May_Haz_Tem_Ağu_Eyl_Eki_Kas_Ara'.split('_'), monthsShort: 'Oca_Şub_Mar_Nis_May_Haz_Tem_Ağu_Eyl_Eki_Kas_Ara'.split('_'),
weekdays: 'Pazar_Pazartesi_Salı_Çarşamba_Perşembe_Cuma_Cumartesi'.split( weekdays: 'Pazar_Pazartesi_Salı_Çarşamba_Perşembe_Cuma_Cumartesi'.split(
'_' '_'
), ),
weekdaysShort: 'Paz_Pzt_Sal_Çar_Per_Cum_Cmt'.split('_'), weekdaysShort: 'Paz_Pzt_Sal_Çar_Per_Cum_Cmt'.split('_'),
weekdaysMin: 'Pz_Pt_Sa_Ça_Pe_Cu_Ct'.split('_'), weekdaysMin: 'Pz_Pt_Sa_Ça_Pe_Cu_Ct'.split('_'),
meridiem: function (hours, minutes, isLower) { meridiem(hours, minutes, isLower) {
if (hours < 12) { if (hours < 12) {
return isLower ? 'öö' : 'ÖÖ'; return isLower ? 'öö' : 'ÖÖ';
} else {
return isLower ? 'ös' : 'ÖS';
} }
return isLower ? 'ös' : 'ÖS';
}, },
meridiemParse: /öö|ÖÖ|ös|ÖS/, meridiemParse: /öö|ÖÖ|ös|ÖS/,
isPM: function (input) { isPM(input) {
return input === 'ös' || input === 'ÖS'; return input === 'ös' || input === 'ÖS';
}, },
longDateFormat: { longDateFormat: {
@ -251,24 +251,25 @@ const init = () => {
}); });
} else if (lang === 'ru') { } else if (lang === 'ru') {
moment.locale('ru', { moment.locale('ru', {
months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июль_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split( months:
'_' 'Январь_Февраль_Март_Апрель_Май_Июнь_Июль_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split(
), '_'
),
monthsShort: 'Янв_Фев_Мрт_Апр_Май_Июн_Июл_Авг_Сен_Окт_Нбр_Дек'.split('_'), monthsShort: 'Янв_Фев_Мрт_Апр_Май_Июн_Июл_Авг_Сен_Окт_Нбр_Дек'.split('_'),
weekdays: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split( weekdays:
'_' 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split(
), '_'
),
weekdaysShort: 'Пон_Втор_Сред_Четв_Пятн_Субб_Воскр'.split('_'), weekdaysShort: 'Пон_Втор_Сред_Четв_Пятн_Субб_Воскр'.split('_'),
weekdaysMin: 'Пн_Вт_Ср_Чт_Пт_Сб_Вс'.split('_'), weekdaysMin: 'Пн_Вт_Ср_Чт_Пт_Сб_Вс'.split('_'),
meridiem: function (hours, minutes, isLower) { meridiem(hours, minutes, isLower) {
if (hours < 12) { if (hours < 12) {
return isLower ? 'ночи' : 'Ночи'; return isLower ? 'ночи' : 'Ночи';
} else {
return isLower ? 'дня' : 'Дня';
} }
return isLower ? 'дня' : 'Дня';
}, },
meridiemParse: /ночи|Ночи|дня|Дня/, meridiemParse: /ночи|Ночи|дня|Дня/,
isPM: function (input) { isPM(input) {
return input === 'дня' || input === 'Дня'; return input === 'дня' || input === 'Дня';
}, },
longDateFormat: { longDateFormat: {

6
src/pages/basic/routes/index.js
View File

@ -51,13 +51,13 @@ const Share = lazy(() =>
import(/* webpackChunkName: "share" */ 'pages/share/App') import(/* webpackChunkName: "share" */ 'pages/share/App')
); );
const ContainerInfra = lazy(() => const ContainerInfra = lazy(() =>
import(/* webpackChunkName: "container-infra" */ 'pages/container-infra/App') import(/* webpackChunkName: "container-infra" */ 'pages/container-infra/App')
); );
const ContainerService = lazy(() => const ContainerService = lazy(() =>
import(/* webpackChunkName: "Container" */ 'pages/container-service/App') import(/* webpackChunkName: "Container" */ 'pages/container-service/App')
); );
const E404 = lazy(() => const E404 = lazy(() =>
import(/* webpackChunkName: "E404" */ 'pages/base/containers/404') import(/* webpackChunkName: "E404" */ 'pages/base/containers/404')
); );
const InstanceHA = lazy(() => const InstanceHA = lazy(() =>
import(/* webpackChunkName: "Inctance-HA" */ 'pages/ha/App') import(/* webpackChunkName: "Inctance-HA" */ 'pages/ha/App')

12
src/pages/compute/containers/Instance/Detail/BaseDetail/index.jsx
View File

@ -176,11 +176,19 @@ export class BaseDetail extends Base {
get keypairCard() { get keypairCard() {
const keypair = this.detailData.key_name; const keypair = this.detailData.key_name;
const url = this.getRoutePath('keypairDetail', { id: keypair }); const url = this.getRoutePath('keypairDetail', { id: keypair });
const content = keypair ? (this.isAdminPage ? <div>{keypair}</div> : <Link to={url}>{keypair}</Link>) : '-'; const content = keypair ? (
this.isAdminPage ? (
<div>{keypair}</div>
) : (
<Link to={url}>{keypair}</Link>
)
) : (
'-'
);
const options = [ const options = [
{ {
label: t('Name'), label: t('Name'),
content: content, content,
}, },
]; ];
return { return {

39
src/pages/compute/containers/Instance/Detail/Log/index.jsx
View File

@ -15,7 +15,10 @@ export default function Log(props) {
const getLogs = async (tailSize) => { const getLogs = async (tailSize) => {
setLoading(true); setLoading(true);
const data = await globalInstanceLogStore.fetchLogs(props.detail.id, tailSize); const data = await globalInstanceLogStore.fetchLogs(
props.detail.id,
tailSize
);
setLogs(data.output); setLogs(data.output);
setLoading(false); setLoading(false);
}; };
@ -45,10 +48,7 @@ export default function Log(props) {
return ( return (
<div> <div>
<Form <Form initialValues={{ number: 35 }} onFinish={onFinish}>
initialValues={{ number: 35 }}
onFinish={onFinish}>
<Row gutter={16}> <Row gutter={16}>
<Col className="gutter-row" span={16}> <Col className="gutter-row" span={16}>
<h2 style={{ paddingLeft: 16 }}>{t('Instance Console Log')}</h2> <h2 style={{ paddingLeft: 16 }}>{t('Instance Console Log')}</h2>
@ -58,27 +58,20 @@ export default function Log(props) {
<InputNumber <InputNumber
min={1} min={1}
max={100000} max={100000}
placeholder={t("Log Length")} placeholder={t('Log Length')}
style={{ width: "100%" }} style={{ width: '100%' }}
addonafter={<SettingOutlined />} addonafter={<SettingOutlined />}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
<Col className="gutter-row" span={4}> <Col className="gutter-row" span={4}>
<div <div className={classnames(styles['table-header-btns'])}>
className={classnames( <Button type="primary" htmlType="submit">
styles['table-header-btns'])}
>
<Button
type="primary"
htmlType="submit">
<SearchOutlined /> <SearchOutlined />
</Button> </Button>
<Button <Button type="primary" onClick={() => viewFullLog()}>
type="primary" {t('View Full Log')}
onClick={() => viewFullLog()}>
{t("View Full Log")}
</Button> </Button>
</div> </div>
</Col> </Col>
@ -95,8 +88,14 @@ export default function Log(props) {
fontSize: 12, fontSize: 12,
}} }}
> >
{loading ? <Skeleton loading={loading} active /> : logs ? <pre>{logs}</pre> : t('No Logs...')} {loading ? (
<Skeleton loading={loading} active />
) : logs ? (
<pre>{logs}</pre>
) : (
t('No Logs...')
)}
</div> </div>
</div> </div>
); );
} }

35
src/pages/container-service/containers/Containers/Detail/Console.jsx
View File

@ -10,37 +10,37 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import React, { useEffect } from "react"; import React, { useEffect } from 'react';
import globalContainersStore from 'src/stores/zun/containers'; import globalContainersStore from 'src/stores/zun/containers';
export default function Console(props) { export default function Console(props) {
useEffect(() => { useEffect(() => {
globalContainersStore.attach(props.detail.uuid).then((res) => { globalContainersStore.attach(props.detail.uuid).then((res) => {
const head = document.head; const { head } = document;
const xtermCssLink = document.createElement("link"); const xtermCssLink = document.createElement('link');
xtermCssLink.rel = "stylesheet"; xtermCssLink.rel = 'stylesheet';
xtermCssLink.href = "https://cdn.jsdelivr.net/npm/xterm@4.19.0/css/xterm.css"; xtermCssLink.href =
'https://cdn.jsdelivr.net/npm/xterm@4.19.0/css/xterm.css';
head.appendChild(xtermCssLink); head.appendChild(xtermCssLink);
const xtermScript = document.createElement('script');
const xtermScript = document.createElement("script"); xtermScript.src =
xtermScript.src = "https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.js"; 'https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.js';
xtermScript.onload = () => { xtermScript.onload = () => {
const term = new window.Terminal({ const term = new window.Terminal({
cursorBlink: true, cursorBlink: true,
}); });
term.write(" >$ "); term.write(' >$ ');
term.open(document.getElementById('terminal')); term.open(document.getElementById('terminal'));
let socket = new WebSocket(res, ['binary', 'base64']); const socket = new WebSocket(res, ['binary', 'base64']);
term.on('data', function (data) { term.on('data', function (data) {
socket.send(str2ab(data)); socket.send(str2ab(data));
}); });
socket.onmessage = function (e) { socket.onmessage = function (e) {
if (e.data instanceof Blob) { if (e.data instanceof Blob) {
let f = new FileReader(); const f = new FileReader();
f.onload = function () { f.onload = function () {
term.write(f.result); term.write(f.result);
}; };
@ -50,8 +50,8 @@ export default function Console(props) {
} }
}; };
function str2ab(str) { function str2ab(str) {
let buf = new ArrayBuffer(str.length); // 2 bytes for each char const buf = new ArrayBuffer(str.length); // 2 bytes for each char
let bufView = new Uint8Array(buf); const bufView = new Uint8Array(buf);
for (let i = 0, strLen = str.length; i < strLen; i++) { for (let i = 0, strLen = str.length; i < strLen; i++) {
bufView[i] = str.charCodeAt(i); bufView[i] = str.charCodeAt(i);
} }
@ -65,14 +65,11 @@ export default function Console(props) {
head.removeChild(xtermScript); head.removeChild(xtermScript);
}; };
}); });
}, []); }, []);
return ( return (
<div> <div>
<div id="terminal"> <div id="terminal" />
</div> </div>
</div >
); );
} }

16
src/pages/ha/containers/Hosts/Detail/BaseDetail.jsx
View File

@ -31,18 +31,26 @@ export class BaseDetail extends Base {
label: t('Failover Segment'), label: t('Failover Segment'),
dataIndex: 'failover_segment_id', dataIndex: 'failover_segment_id',
render: (value, row) => { render: (value, row) => {
return <Link to={this.getRoutePath('masakariSegmentDetail', { id: row.failover_segment_id })}>{row.failover_segment.name}</Link> return (
} <Link
to={this.getRoutePath('masakariSegmentDetail', {
id: row.failover_segment_id,
})}
>
{row.failover_segment.name}
</Link>
);
},
}, },
{ {
label: t('Reserved'), label: t('Reserved'),
dataIndex: 'reserved', dataIndex: 'reserved',
valueRender: 'yesNo' valueRender: 'yesNo',
}, },
{ {
label: t('On Maintenance'), label: t('On Maintenance'),
dataIndex: 'on_maintenance', dataIndex: 'on_maintenance',
valueRender: 'yesNo' valueRender: 'yesNo',
}, },
{ {
label: t('Type'), label: t('Type'),

2
src/pages/ha/containers/Hosts/Detail/index.jsx
View File

@ -55,7 +55,7 @@ export class HostsDetail extends Base {
const hostId = parse(this.routing.location.search.slice(1)); const hostId = parse(this.routing.location.search.slice(1));
return { return {
id: params.id, id: params.id,
uuid: hostId.uuid uuid: hostId.uuid,
}; };
}; };

5
src/pages/ha/containers/Hosts/actions/Delete.jsx
View File

@ -48,6 +48,9 @@ export default class Delete extends ConfirmAction {
onSubmit = (item) => { onSubmit = (item) => {
const { uuid, failover_segment_id } = item || this.item; const { uuid, failover_segment_id } = item || this.item;
return globalHostStore.delete({ segment_id: failover_segment_id, host_id: uuid }); return globalHostStore.delete({
segment_id: failover_segment_id,
host_id: uuid,
});
}; };
} }

26
src/pages/ha/containers/Hosts/actions/Update.jsx
View File

@ -11,7 +11,7 @@
// limitations under the License. // limitations under the License.
import { inject, observer } from 'mobx-react'; import { inject, observer } from 'mobx-react';
import { ModalAction } from "src/containers/Action"; import { ModalAction } from 'src/containers/Action';
import globalHostStore from 'src/stores/masakari/hosts'; import globalHostStore from 'src/stores/masakari/hosts';
export class Update extends ModalAction { export class Update extends ModalAction {
@ -33,7 +33,7 @@ export class Update extends ModalAction {
get defaultValue() { get defaultValue() {
return { return {
...this.item ...this.item,
}; };
} }
@ -44,40 +44,42 @@ export class Update extends ModalAction {
label: t('Host Name'), label: t('Host Name'),
type: 'input', type: 'input',
disabled: true, disabled: true,
required: true required: true,
}, },
{ {
name: 'reserved', name: 'reserved',
label: t('Reserved'), label: t('Reserved'),
type: 'switch', type: 'switch',
checkedText: '', checkedText: '',
uncheckedText: '' uncheckedText: '',
}, },
{ {
name: 'type', name: 'type',
label: t('Type'), label: t('Type'),
type: 'input', type: 'input',
required: true required: true,
}, },
{ {
name: 'control_attributes', name: 'control_attributes',
label: t('Control Attribute'), label: t('Control Attribute'),
type: 'input', type: 'input',
required: true required: true,
}, },
{ {
name: 'on_maintenance', name: 'on_maintenance',
label: t('On Maintenance'), label: t('On Maintenance'),
type: 'switch', type: 'switch',
checkedText: '', checkedText: '',
uncheckedText: '' uncheckedText: '',
} },
] ];
} }
onSubmit = (values) => { onSubmit = (values) => {
return this.store.update(this.item.failover_segment_id, this.item.uuid, { 'host': values }); return this.store.update(this.item.failover_segment_id, this.item.uuid, {
} host: values,
});
};
} }
export default inject('rootStore')(observer(Update)); export default inject('rootStore')(observer(Update));

2
src/pages/ha/containers/Hosts/actions/index.jsx
View File

@ -22,7 +22,7 @@ const actionConfigs = {
}, },
], ],
}, },
batchActions: [Delete] batchActions: [Delete],
}; };
export default actionConfigs; export default actionConfigs;

20
src/pages/ha/containers/Notifications/Detail/BaseDetail.jsx
View File

@ -28,22 +28,22 @@ export class BaseDetail extends Base {
{ {
label: t('Host'), label: t('Host'),
dataIndex: 'source_host_uuid', dataIndex: 'source_host_uuid',
copyable: true copyable: true,
}, },
{ {
label: t('Generated Time'), label: t('Generated Time'),
dataIndex: 'generated_time', dataIndex: 'generated_time',
valueRender: 'toLocalTime' valueRender: 'toLocalTime',
}, },
{ {
label: t('Created At'), label: t('Created At'),
dataIndex: 'created_at', dataIndex: 'created_at',
valueRender: 'toLocalTime' valueRender: 'toLocalTime',
}, },
{ {
label: t('Updated At'), label: t('Updated At'),
dataIndex: 'updated_at', dataIndex: 'updated_at',
valueRender: 'toLocalTime' valueRender: 'toLocalTime',
}, },
]; ];
@ -57,23 +57,23 @@ export class BaseDetail extends Base {
const options = [ const options = [
{ {
label: t('Event'), label: t('Event'),
dataIndex: 'event' dataIndex: 'event',
}, },
{ {
label: t('Instance UUID'), label: t('Instance UUID'),
dataIndex: 'instance_uuid' dataIndex: 'instance_uuid',
}, },
{ {
label: t('VIR Domain Event'), label: t('VIR Domain Event'),
dataIndex: 'vir_domain_event' dataIndex: 'vir_domain_event',
} },
]; ];
return { return {
title: t('Payload'), title: t('Payload'),
sourceData: this.detailData.payload, sourceData: this.detailData.payload,
options options,
} };
} }
} }

2
src/pages/ha/containers/Notifications/Detail/index.jsx
View File

@ -12,8 +12,8 @@
import { inject, observer } from 'mobx-react'; import { inject, observer } from 'mobx-react';
import Base from 'containers/TabDetail'; import Base from 'containers/TabDetail';
import BaseDetail from './BaseDetail';
import globalNotificationStore from 'stores/masakari/notifications'; import globalNotificationStore from 'stores/masakari/notifications';
import BaseDetail from './BaseDetail';
export class NotificationsDetail extends Base { export class NotificationsDetail extends Base {
init() { init() {

2
src/pages/ha/containers/Segments/Detail/BaseDetail.jsx
View File

@ -32,7 +32,7 @@ export class BaseDetail extends Base {
{ {
label: t('Enabled'), label: t('Enabled'),
dataIndex: 'enabled', dataIndex: 'enabled',
valueRender: 'yesNo' valueRender: 'yesNo',
}, },
{ {
label: t('Created At'), label: t('Created At'),

32
src/pages/ha/containers/Segments/Detail/HostDetail.jsx
View File

@ -36,9 +36,13 @@ export class HostDetail extends Base {
title: t('Name'), title: t('Name'),
dataIndex: 'name', dataIndex: 'name',
render: (value, row) => { render: (value, row) => {
const path = this.getRoutePath('masakariHostDetail', { id: row.failover_segment_id }, { uuid: row.uuid }); const path = this.getRoutePath(
'masakariHostDetail',
{ id: row.failover_segment_id },
{ uuid: row.uuid }
);
return <Link to={path}>{value}</Link>; return <Link to={path}>{value}</Link>;
} },
}, },
{ {
title: t('UUID'), title: t('UUID'),
@ -49,7 +53,7 @@ export class HostDetail extends Base {
title: t('Reserved'), title: t('Reserved'),
dataIndex: 'reserved', dataIndex: 'reserved',
isHideable: true, isHideable: true,
valueRender: 'yesNo' valueRender: 'yesNo',
}, },
{ {
title: t('Type'), title: t('Type'),
@ -59,27 +63,33 @@ export class HostDetail extends Base {
{ {
title: t('Control Attribute'), title: t('Control Attribute'),
dataIndex: 'control_attributes', dataIndex: 'control_attributes',
isHideable: true isHideable: true,
}, },
{ {
title: t('On Maintenance'), title: t('On Maintenance'),
dataIndex: 'on_maintenance', dataIndex: 'on_maintenance',
isHideable: true, isHideable: true,
valueRender: 'yesNo' valueRender: 'yesNo',
} },
,
{ {
title: t('Failover Segment'), title: t('Failover Segment'),
dataIndex: 'failover_segment', dataIndex: 'failover_segment',
isHideable: true, isHideable: true,
render: (value, row) => { render: (value, row) => {
return <Link to={this.getRoutePath('masakariSegmentDetail', { id: row.failover_segment_id })}>{row.failover_segment.name}</Link> return (
} <Link
} to={this.getRoutePath('masakariSegmentDetail', {
id: row.failover_segment_id,
})}
>
{row.failover_segment.name}
</Link>
);
},
},
]; ];
return columns; return columns;
}; };
} }
export default inject('rootStore')(observer(HostDetail)); export default inject('rootStore')(observer(HostDetail));

39
src/pages/ha/containers/Segments/actions/AddHost.jsx
View File

@ -11,7 +11,7 @@
// limitations under the License. // limitations under the License.
import { inject, observer } from 'mobx-react'; import { inject, observer } from 'mobx-react';
import { ModalAction } from "src/containers/Action"; import { ModalAction } from 'src/containers/Action';
import globalHostStore from 'src/stores/masakari/hosts'; import globalHostStore from 'src/stores/masakari/hosts';
import globalComputeHostStore from 'src/stores/nova/compute-host'; import globalComputeHostStore from 'src/stores/nova/compute-host';
@ -19,7 +19,7 @@ export class AddHost extends ModalAction {
init() { init() {
this.store = globalHostStore; this.store = globalHostStore;
this.state = { this.state = {
host: [] host: [],
}; };
this.getHostList(); this.getHostList();
} }
@ -37,17 +37,18 @@ export class AddHost extends ModalAction {
static allowed = () => Promise.resolve(true); static allowed = () => Promise.resolve(true);
async getHostList() { async getHostList() {
const response = await globalComputeHostStore.fetchList({ binary: 'nova-compute' }); const response = await globalComputeHostStore.fetchList({
binary: 'nova-compute',
});
const hostList = await globalHostStore.fetchList(); const hostList = await globalHostStore.fetchList();
let flag = false; let flag = false;
if (hostList.length < 1) { if (hostList.length < 1) {
this.setState({ this.setState({
host: response host: response,
}); });
} } else {
else { response.forEach((newHost) => {
response.forEach(newHost => {
for (let i = 0; i < hostList.length; i++) { for (let i = 0; i < hostList.length; i++) {
if (hostList[i].name === newHost.host) { if (hostList[i].name === newHost.host) {
flag = true; flag = true;
@ -55,7 +56,7 @@ export class AddHost extends ModalAction {
} }
if (!flag) { if (!flag) {
this.setState({ this.setState({
host: [...this.state.host, newHost] host: [...this.state.host, newHost],
}); });
} }
flag = false; flag = false;
@ -74,7 +75,7 @@ export class AddHost extends ModalAction {
return { return {
segment_name: this.item.name, segment_name: this.item.name,
reserved: false, reserved: false,
on_maintenance: false on_maintenance: false,
}; };
} }
@ -84,48 +85,48 @@ export class AddHost extends ModalAction {
name: 'segment_name', name: 'segment_name',
label: t('Segment Name'), label: t('Segment Name'),
type: 'input', type: 'input',
disabled: true disabled: true,
}, },
{ {
name: 'name', name: 'name',
label: t('Host Name'), label: t('Host Name'),
type: 'select', type: 'select',
options: this.getHostName, options: this.getHostName,
required: true required: true,
}, },
{ {
name: 'reserved', name: 'reserved',
label: t('Reserved'), label: t('Reserved'),
type: 'switch', type: 'switch',
checkedText: '', checkedText: '',
uncheckedText: '' uncheckedText: '',
}, },
{ {
name: 'type', name: 'type',
label: t('Type'), label: t('Type'),
type: 'input', type: 'input',
required: true required: true,
}, },
{ {
name: 'control_attributes', name: 'control_attributes',
label: t('Control Attributes'), label: t('Control Attributes'),
type: 'input', type: 'input',
required: true required: true,
}, },
{ {
name: 'on_maintenance', name: 'on_maintenance',
label: t('On Maintenance'), label: t('On Maintenance'),
type: 'switch', type: 'switch',
checkedText: '', checkedText: '',
uncheckedText: '' uncheckedText: '',
}, },
] ];
} }
onSubmit = (values) => { onSubmit = (values) => {
const { segment_name, ...submitData } = values; const { segment_name, ...submitData } = values;
return this.store.create(this.item.uuid, { 'host': { ...submitData } }); return this.store.create(this.item.uuid, { host: { ...submitData } });
} };
} }
export default inject('rootStore')(observer(AddHost)); export default inject('rootStore')(observer(AddHost));

2
src/pages/ha/containers/Segments/actions/Delete.jsx
View File

@ -48,7 +48,7 @@ export default class Delete extends ConfirmAction {
onSubmit = (item) => { onSubmit = (item) => {
const { uuid } = item || this.item; const { uuid } = item || this.item;
let id = uuid; const id = uuid;
return globalSegmentStore.delete({ id }); return globalSegmentStore.delete({ id });
}; };
} }

92
src/pages/ha/containers/Segments/actions/StepCreate/StepHost.jsx
View File

@ -23,7 +23,7 @@ export class StepHost extends Base {
this.state = { this.state = {
host: [], host: [],
hostLoading: true, hostLoading: true,
...this.state ...this.state,
}; };
this.getHostList(); this.getHostList();
@ -44,18 +44,18 @@ export class StepHost extends Base {
allowed = () => Promise.resolve(); allowed = () => Promise.resolve();
async getHostList() { async getHostList() {
const response = await globalComputeHostStore.fetchList({
const response = await globalComputeHostStore.fetchList({ binary: 'nova-compute' }); binary: 'nova-compute',
});
const hostList = await globalHostStore.fetchList(); const hostList = await globalHostStore.fetchList();
let flag = false; let flag = false;
if (hostList.length < 1) { if (hostList.length < 1) {
this.setState({ this.setState({
host: response host: response,
}); });
} } else {
else { response.forEach((newHost) => {
response.forEach(newHost => {
for (let i = 0; i < hostList.length; i++) { for (let i = 0; i < hostList.length; i++) {
if (hostList[i].name === newHost.host) { if (hostList[i].name === newHost.host) {
flag = true; flag = true;
@ -69,9 +69,9 @@ export class StepHost extends Base {
} }
const hostMap = Object.fromEntries( const hostMap = Object.fromEntries(
this.state.host.map(host => [host.id, host]) this.state.host.map((host) => [host.id, host])
) );
this.setState({ hostMap: hostMap, hostLoading: false }); this.setState({ hostMap, hostLoading: false });
} }
get getHostName() { get getHostName() {
@ -88,7 +88,7 @@ export class StepHost extends Base {
{ {
title: t('Updated'), title: t('Updated'),
dataIndex: 'updated_at', dataIndex: 'updated_at',
valueRender: 'toLocalTime' valueRender: 'toLocalTime',
}, },
{ {
name: 'reserved', name: 'reserved',
@ -99,14 +99,14 @@ export class StepHost extends Base {
<Switch <Switch
checked={reserved} checked={reserved}
onChange={(checked) => { onChange={(checked) => {
this.setState(prevState => { this.setState((prevState) => {
const host = prevState.hostMap const host = prevState.hostMap;
host[row.id].reserved = checked host[row.id].reserved = checked;
return { hostMap: host } return { hostMap: host };
}) });
}} }}
/> />
) ),
}, },
{ {
name: 'type', name: 'type',
@ -115,18 +115,18 @@ export class StepHost extends Base {
required: true, required: true,
render: (type, row) => ( render: (type, row) => (
<Input <Input
required={true} required
defaultValue={type} defaultValue={type}
onChange={(e) => { onChange={(e) => {
const { value } = e.target const { value } = e.target;
this.setState(prevState => { this.setState((prevState) => {
const host = prevState.hostMap const host = prevState.hostMap;
host[row.id].type = value host[row.id].type = value;
return { hostMap: host } return { hostMap: host };
}) });
}} }}
/> />
) ),
}, },
{ {
name: 'control_attributes', name: 'control_attributes',
@ -135,17 +135,17 @@ export class StepHost extends Base {
render: (control_attribute, row) => ( render: (control_attribute, row) => (
<Input <Input
defaultValue={control_attribute} defaultValue={control_attribute}
required={true} required
onChange={(e) => { onChange={(e) => {
const { value } = e.target const { value } = e.target;
this.setState(prevState => { this.setState((prevState) => {
const host = prevState.hostMap const host = prevState.hostMap;
host[row.id].control_attributes = value host[row.id].control_attributes = value;
return { hostMap: host } return { hostMap: host };
}) });
}} }}
/> />
) ),
}, },
{ {
name: 'on_maintenance', name: 'on_maintenance',
@ -155,16 +155,16 @@ export class StepHost extends Base {
<Switch <Switch
checked={maintain} checked={maintain}
onChange={(checked) => { onChange={(checked) => {
this.setState(prevState => { this.setState((prevState) => {
const host = prevState.hostMap const host = prevState.hostMap;
host[row.id].on_maintenance = checked host[row.id].on_maintenance = checked;
return { hostMap: host } return { hostMap: host };
}) });
}} }}
/> />
) ),
} },
] ];
return [ return [
{ {
@ -174,15 +174,15 @@ export class StepHost extends Base {
required: true, required: true,
data: this.state.host, data: this.state.host,
isMulti: true, isMulti: true,
onRow: () => { }, onRow: () => {},
columns: columns, columns,
isLoading: this.state.hostLoading, isLoading: this.state.hostLoading,
filterParams: [ filterParams: [
{ label: t('Name'), name: 'host' }, { label: t('Name'), name: 'host' },
{ label: t('Zone'), name: 'zone' }, { label: t('Zone'), name: 'zone' },
] ],
} },
] ];
} }
} }

9
src/pages/ha/containers/Segments/actions/StepCreate/StepSegment.jsx
View File

@ -14,7 +14,6 @@ import { inject, observer } from 'mobx-react';
import Base from 'components/Form'; import Base from 'components/Form';
export class StepSegment extends Base { export class StepSegment extends Base {
get title() { get title() {
return 'StepSegment'; return 'StepSegment';
} }
@ -42,7 +41,7 @@ export class StepSegment extends Base {
name: 'segment_name', name: 'segment_name',
label: t('Segment Name'), label: t('Segment Name'),
type: 'input', type: 'input',
required: true required: true,
}, },
{ {
name: 'recovery_method', name: 'recovery_method',
@ -54,20 +53,20 @@ export class StepSegment extends Base {
{ label: t('reserved_host'), value: 'reserved_host' }, { label: t('reserved_host'), value: 'reserved_host' },
{ label: t('rh_priority'), value: 'rh_priority' }, { label: t('rh_priority'), value: 'rh_priority' },
], ],
required: true required: true,
}, },
{ {
name: 'service_type', name: 'service_type',
label: t('Service Type'), label: t('Service Type'),
type: 'input', type: 'input',
required: true, required: true,
disabled: true disabled: true,
}, },
{ {
name: 'description', name: 'description',
label: t('Description'), label: t('Description'),
type: 'textarea', type: 'textarea',
rows: 4 rows: 4,
}, },
]; ];
} }

97
src/pages/ha/containers/Segments/actions/StepCreate/index.jsx
View File

@ -12,9 +12,7 @@
import { inject, observer } from 'mobx-react'; import { inject, observer } from 'mobx-react';
import { StepAction } from 'containers/Action'; import { StepAction } from 'containers/Action';
import StepSegment from './StepSegment';
import globalSegmentStore from 'src/stores/masakari/segments'; import globalSegmentStore from 'src/stores/masakari/segments';
import StepHost from './StepHost';
import React from 'react'; import React from 'react';
import { Button, Modal } from 'antd'; import { Button, Modal } from 'antd';
import { toJS } from 'mobx'; import { toJS } from 'mobx';
@ -22,6 +20,8 @@ import { QuestionCircleFilled } from '@ant-design/icons';
import stylesConfirm from 'src/components/Confirm/index.less'; import stylesConfirm from 'src/components/Confirm/index.less';
import globalHostStore from 'src/stores/masakari/hosts'; import globalHostStore from 'src/stores/masakari/hosts';
import Notify from 'src/components/Notify'; import Notify from 'src/components/Notify';
import StepHost from './StepHost';
import StepSegment from './StepSegment';
export class StepCreate extends StepAction { export class StepCreate extends StepAction {
static id = 'instance-ha-create'; static id = 'instance-ha-create';
@ -54,28 +54,46 @@ export class StepCreate extends StepAction {
} }
next() { next() {
this.currentRef.current.wrappedInstance.checkFormInput((values) => { this.currentRef.current.wrappedInstance.checkFormInput(
this.updateData(values); (values) => {
this.updateData(values);
if (this.state.current === 0) { if (this.state.current === 0) {
this.setState({ btnIsLoading: true }) this.setState({ btnIsLoading: true });
const { segment_name, recovery_method, service_type, description } = this.state.data; const { segment_name, recovery_method, service_type, description } =
this.state.data;
globalSegmentStore.create({ segment: { name: segment_name, recovery_method, service_type, description } }).then(item => { globalSegmentStore
this.setState({ extra: toJS({ createdSegmentId: item.segment.uuid }) }, () => { .create({
this.setState((prev) => ({ current: prev.current + 1 })); segment: {
}) name: segment_name,
}, (err) => { recovery_method,
this.responseError = err; service_type,
const { response: { data: responseData } = {} } = err; description,
Notify.errorWithDetail(responseData, this.errorText); },
})
.then(
(item) => {
this.setState(
{ extra: toJS({ createdSegmentId: item.segment.uuid }) },
() => {
this.setState((prev) => ({ current: prev.current + 1 }));
}
);
},
(err) => {
this.responseError = err;
const { response: { data: responseData } = {} } = err;
Notify.errorWithDetail(responseData, this.errorText);
}
)
.finally(() => {
this.setState({ btnIsLoading: false });
});
} }
).finally(() => { },
this.setState({ btnIsLoading: false }) () => this.setState({ btnIsLoading: false })
}); );
}
}, () => this.setState({ btnIsLoading: false }));
} }
getNextBtn() { getNextBtn() {
@ -85,7 +103,11 @@ export class StepCreate extends StepAction {
} }
const { title } = this.steps[current + 1]; const { title } = this.steps[current + 1];
return ( return (
<Button type="primary" onClick={() => this.next()} loading={this.state.btnIsLoading}> <Button
type="primary"
onClick={() => this.next()}
loading={this.state.btnIsLoading}
>
{`${t('Next')}: ${title}`} {`${t('Next')}: ${title}`}
</Button> </Button>
); );
@ -117,32 +139,47 @@ export class StepCreate extends StepAction {
Modal.confirm({ Modal.confirm({
title: 'Confirm', title: 'Confirm',
icon: <QuestionCircleFilled className={stylesConfirm.warn} />, icon: <QuestionCircleFilled className={stylesConfirm.warn} />,
content: 'Segment will be deleted. Are you sure want to cancel this created segment?', content:
'Segment will be deleted. Are you sure want to cancel this created segment?',
okText: 'Confirm', okText: 'Confirm',
cancelText: 'Cancel', cancelText: 'Cancel',
loading: true, loading: true,
onOk: () => { onOk: () => {
return globalSegmentStore.delete({ id: this.state.extra.createdSegmentId }).finally(() => this.routing.push(this.listUrl)); return globalSegmentStore
} .delete({ id: this.state.extra.createdSegmentId })
.finally(() => this.routing.push(this.listUrl));
},
}); });
} else { } else {
this.routing.push(this.listUrl); this.routing.push(this.listUrl);
} }
} };
get steps() { get steps() {
return [ return [
{ title: t('Create Segment'), component: StepSegment }, { title: t('Create Segment'), component: StepSegment },
{ title: t('Add Host'), component: StepHost } { title: t('Add Host'), component: StepHost },
]; ];
} }
onSubmit = (values) => { onSubmit = (values) => {
const { name } = values; const { name } = values;
return Promise.resolve( return Promise.resolve(
name.selectedRows.forEach(item => { name.selectedRows.forEach((item) => {
const { binary, forced_down, host, id, state, status, updated_at, zone, ...hostData } = item; const {
this.store.create(this.state.extra.createdSegmentId, { 'host': { name: host, ...hostData } }) binary,
forced_down,
host,
id,
state,
status,
updated_at,
zone,
...hostData
} = item;
this.store.create(this.state.extra.createdSegmentId, {
host: { name: host, ...hostData },
});
}) })
); );
}; };

18
src/pages/ha/containers/Segments/actions/Update.jsx
View File

@ -11,7 +11,7 @@
// limitations under the License. // limitations under the License.
import { inject, observer } from 'mobx-react'; import { inject, observer } from 'mobx-react';
import { ModalAction } from "src/containers/Action"; import { ModalAction } from 'src/containers/Action';
import globalSegmentStore from 'src/stores/masakari/segments'; import globalSegmentStore from 'src/stores/masakari/segments';
export class Update extends ModalAction { export class Update extends ModalAction {
@ -33,7 +33,7 @@ export class Update extends ModalAction {
get defaultValue() { get defaultValue() {
return { return {
...this.item ...this.item,
}; };
} }
@ -43,7 +43,7 @@ export class Update extends ModalAction {
name: 'name', name: 'name',
label: t('Segment Name'), label: t('Segment Name'),
type: 'input', type: 'input',
required: true required: true,
}, },
{ {
name: 'recovery_method', name: 'recovery_method',
@ -55,20 +55,20 @@ export class Update extends ModalAction {
{ label: t('reserved_host'), value: 'reserved_host' }, { label: t('reserved_host'), value: 'reserved_host' },
{ label: t('rh_priority'), value: 'rh_priority' }, { label: t('rh_priority'), value: 'rh_priority' },
], ],
required: true required: true,
}, },
{ {
name: 'description', name: 'description',
label: t('Description'), label: t('Description'),
type: 'textarea', type: 'textarea',
rows: 4 rows: 4,
}, },
] ];
} }
onSubmit = (values) => { onSubmit = (values) => {
return this.store.update(this.item.uuid, { 'segment': values }); return this.store.update(this.item.uuid, { segment: values });
} };
} }
export default inject('rootStore')(observer(Update)); export default inject('rootStore')(observer(Update));

2
src/pages/ha/containers/Segments/actions/index.jsx
View File

@ -28,7 +28,7 @@ const actionConfigs = {
], ],
}, },
batchActions: [Delete], batchActions: [Delete],
primaryActions: [StepCreate] primaryActions: [StepCreate],
}; };
export default actionConfigs; export default actionConfigs;

3
src/pages/network/containers/DNS/Reverse/Detail/BaseDetail.jsx
View File

@ -55,7 +55,6 @@ export class BaseDetail extends Base {
options, options,
}; };
} }
} }
export default inject('rootStore')(observer(BaseDetail)); export default inject('rootStore')(observer(BaseDetail));

3
src/pages/network/containers/DNS/Reverse/Detail/index.jsx
View File

@ -12,12 +12,11 @@
import { inject, observer } from 'mobx-react'; import { inject, observer } from 'mobx-react';
import Base from 'containers/TabDetail'; import Base from 'containers/TabDetail';
import globalReverseStore from 'stores/designate/reverse';
import BaseDetail from './BaseDetail'; import BaseDetail from './BaseDetail';
import actionConfigs from '../actions'; import actionConfigs from '../actions';
import globalReverseStore from 'src/stores/designate/reverse';
export class ReverseDetail extends Base { export class ReverseDetail extends Base {
init() { init() {
this.store = globalReverseStore; this.store = globalReverseStore;
} }

5
src/pages/network/containers/LoadBalancers/LoadBalancerInstance/actions/StepCreate/BaseStep/index.jsx
View File

@ -80,10 +80,7 @@ export class BaseStep extends Base {
}; };
get formItems() { get formItems() {
const { const { network_id, subnetDetails = [] } = this.state;
network_id,
subnetDetails = [],
} = this.state;
return [ return [
{ {
name: 'name', name: 'name',

2
src/pages/network/containers/LoadBalancers/StepCreateComponents/PoolStep/index.jsx
View File

@ -56,7 +56,7 @@ export class PoolStep extends Base {
} }
get formItems() { get formItems() {
const {pool_lb_algorithm} = this.state; const { pool_lb_algorithm } = this.state;
return [ return [
{ {
name: 'pool_name', name: 'pool_name',

7
src/pages/storage/containers/Container/index.jsx
View File

@ -65,7 +65,12 @@ function PopUpContent({ name }) {
<Col span={8}>{t('Public Access')}</Col> <Col span={8}>{t('Public Access')}</Col>
<Col span={12}> <Col span={12}>
{data.link ? ( {data.link ? (
<a type="link" href={data.link.endsWith('/') ? data.link : data.link + '/'} target="_blank" rel="noreferrer"> <a
type="link"
href={data.link.endsWith('/') ? data.link : `${data.link}/`}
target="_blank"
rel="noreferrer"
>
{t('Click To View')} {t('Click To View')}
</a> </a>
) : ( ) : (

12
src/stores/designate/reverse.js
View File

@ -15,7 +15,6 @@ import client from 'client';
import Base from 'stores/base'; import Base from 'stores/base';
export class ReverseStore extends Base { export class ReverseStore extends Base {
get client() { get client() {
return client.designate.reverse.floatingips; return client.designate.reverse.floatingips;
} }
@ -34,16 +33,17 @@ export class ReverseStore extends Base {
} }
get paramsFunc() { get paramsFunc() {
return () => { }; return () => {};
} }
@action @action
set = ({ id }, body) => this.submitting(this.reverseClient.setReverse(id, body)); set = ({ id }, body) =>
this.submitting(this.reverseClient.setReverse(id, body));
@action @action
unset = ({ id }, body) => this.submitting(this.reverseClient.unsetReverse(id, body)); unset = ({ id }, body) =>
this.submitting(this.reverseClient.unsetReverse(id, body));
} }
const globalReverseStore = new ReverseStore(); const globalReverseStore = new ReverseStore();
export default globalReverseStore; export default globalReverseStore;

26
src/stores/masakari/hosts.js
View File

@ -3,7 +3,6 @@ import client from 'client';
import { action } from 'mobx'; import { action } from 'mobx';
export class HostStore extends Base { export class HostStore extends Base {
get client() { get client() {
return client.masakari.segments.hosts; return client.masakari.segments.hosts;
} }
@ -32,22 +31,24 @@ export class HostStore extends Base {
const result = []; const result = [];
if (params.segment_id) { if (params.segment_id) {
await this.client.list(params.segment_id).then(response => { await this.client.list(params.segment_id).then((response) => {
response.hosts.map(item => result.push(item)) response.hosts.map((item) => result.push(item));
}); });
} else { } else {
await this.segmentClient.list().then(async segmentList => { await this.segmentClient.list().then(async (segmentList) => {
const segmentHosts = segmentList.segments.map((it) => this.client.list(it.uuid).then(getHost => getHost.hosts)) const segmentHosts = segmentList.segments.map((it) =>
await Promise.all(segmentHosts).then(hostList => { this.client.list(it.uuid).then((getHost) => getHost.hosts)
hostList.forEach(host => { );
host.forEach(item => { await Promise.all(segmentHosts).then((hostList) => {
hostList.forEach((host) => {
host.forEach((item) => {
result.push(item); result.push(item);
}) });
}) });
}); });
}); });
} }
return { hosts: result } return { hosts: result };
} }
@action @action
@ -56,7 +57,8 @@ export class HostStore extends Base {
} }
@action @action
delete = ({ segment_id, host_id }) => this.submitting(this.client.delete(segment_id, host_id)); delete = ({ segment_id, host_id }) =>
this.submitting(this.client.delete(segment_id, host_id));
@action @action
update(segmentId, id, body) { update(segmentId, id, body) {

8
src/stores/nova/instance.js
View File

@ -181,9 +181,9 @@ export class ServerStore extends Base {
async fetchLogs(id, tailSize) { async fetchLogs(id, tailSize) {
const logs = await this.client.action(id, { const logs = await this.client.action(id, {
"os-getConsoleOutput": { 'os-getConsoleOutput': {
"length": tailSize length: tailSize,
} },
}); });
return logs; return logs;
} }
@ -235,7 +235,7 @@ export class ServerStore extends Base {
sgItems = result.map((it) => sgItems = result.map((it) =>
this.mapperSecurityGroupRule(it.security_group) this.mapperSecurityGroupRule(it.security_group)
); );
} catch (e) { } } catch (e) {}
this.securityGroups = { this.securityGroups = {
data: sgItems || [], data: sgItems || [],
interfaces: ports, interfaces: ports,