Skip to content

Commit

Permalink
storage: Clean up details code to use React shorthand
Browse files Browse the repository at this point in the history 
Also clean the sidebar code.
  • Loading branch information
@dperpeet
dperpeet committed Apr 5, 2017
1 parent 37f96a6 commit b784139
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 51 deletions.
47 changes: 24 additions & 23 deletions pkg/storaged/details.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
Action: {
Title: _("Delete"),
Danger: _("Deleting a RAID device will erase all data on it."),
action: function (vals) {
action: function () {
return delete_().
done(function () {
location.go('/');
Expand Down Expand Up @@ -427,36 +427,37 @@
name = n;
render();

var content = document.querySelector("#detail-content");
var sidebar = document.querySelector("#detail-sidebar");
var content = document.getElementById("detail-content");
var sidebar = document.getElementById("detail-sidebar");

React.unmountComponentAtNode(content);
React.unmountComponentAtNode(sidebar);
if (type == 'block') {
$('#detail-body').attr("class", "col-md-12");
React.render(React.createElement(ContentViews.Block,
{ client: client,
name: name
}), content);
React.render(
<ContentViews.Block client={client} name={name} />,
content
);
} else if (type == 'mdraid') {
$('#detail-body').attr("class", "col-md-8 col-lg-9 col-md-pull-4 col-lg-pull-3");
React.render(React.createElement(ContentViews.MDRaid,
{ client: client,
name: name
}), content);
React.render(React.createElement(SidebarViews.MDRaid,
{ client: client,
name: name
}), sidebar);
React.render(
<ContentViews.MDRaid client={client} name={name} />,
content
);
React.render(
<SidebarViews.MDRaid client={client} name={name} />,
sidebar
);
} else if (type == 'vgroup') {
$('#detail-body').attr("class", "col-md-8 col-lg-9 col-md-pull-4 col-lg-pull-3");
React.render(React.createElement(ContentViews.VGroup,
{ client: client,
name: name
}), content);
React.render(React.createElement(SidebarViews.VGroup,
{ client: client,
name: name
}), sidebar);
React.render(
<ContentViews.VGroup client={client} name={name} />,
content
);
React.render(
<SidebarViews.VGroup client={client} name={name} />,
sidebar
);
}

utils.show_soon("#storage-detail", !!content.firstChild);
Expand Down
2 changes: 1 addition & 1 deletion pkg/storaged/devices.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
var client = require("./client");
var jobs = require("./jobs");
var overview = require("./overview");
var details = require("./details");
var details = require("./details.jsx");
var utils = require("./utils");

require("page.css");
Expand Down
55 changes: 28 additions & 27 deletions pkg/storaged/sidebar-views.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,27 +33,26 @@ var StorageBlockNavLink = StorageControls.StorageBlockNavLink;
var _ = cockpit.gettext;

var MDRaid = React.createClass({
getInitialState: function () {
getInitialState: function() {
return { mdraid: null, block: null };
},
onClientChanged: function () {
onClientChanged: function() {
var mdraid = this.props.client.uuids_mdraid[this.props.name];
var block = mdraid && this.props.client.mdraids_block[mdraid.path];
this.setState({ mdraid: mdraid, block: block });
},
componentDidMount: function () {
componentDidMount: function() {
$(this.props.client).on("changed", this.onClientChanged);
this.onClientChanged();
},
componentWillUnmount: function () {
componentWillUnmount: function() {
$(this.props.model).off("changed", this.onClientChanged);
},

render: function () {
render: function() {
var self = this;
var client = self.props.client;
var mdraid = self.state.mdraid;
// var block = self.state.block;

if (!mdraid)
return null;
Expand Down Expand Up @@ -84,8 +83,8 @@ var MDRaid = React.createClass({
],
Action: {
Title: _("Add"),
action: function (vals) {
return utils.prepare_available_spaces(client, vals.disks).then(function () {
action: function(vals) {
return utils.prepare_available_spaces(client, vals.disks).then(function() {
var paths = Array.prototype.slice.call(arguments);
return cockpit.all(paths.map(function(p) {
return mdraid.AddDevice(p, {});
Expand All @@ -96,11 +95,11 @@ var MDRaid = React.createClass({
});
}

var members = client.mdraids_members[mdraid.path] || [ ];
var members = client.mdraids_members[mdraid.path] || [];
var dynamic_members = (mdraid.Level != "raid0");

var n_spares = 0, n_recovering = 0;
mdraid.ActiveDevices.forEach(function (as) {
mdraid.ActiveDevices.forEach(function(as) {
if (as[2].indexOf("spare") >= 0) {
if (as[1] < 0)
n_spares += 1;
Expand All @@ -115,7 +114,7 @@ var MDRaid = React.createClass({
running = mdraid.ActiveDevices && mdraid.ActiveDevices.length > 0;

function render_member(block) {
var active_state = utils.array_find(mdraid.ActiveDevices, function (as) {
var active_state = utils.array_find(mdraid.ActiveDevices, function(as) {
return as[0] == block.path;
});

Expand Down Expand Up @@ -158,13 +157,13 @@ var MDRaid = React.createClass({
<br/>
<span className="state">{states}</span>
</td>
{dynamic_members ?
{ dynamic_members ?
<td className="storage-action">
<StorageButton onClick={remove} excuse={remove_excuse}>
<span className="fa fa-minus"></span>
</StorageButton>
</td>
: null}
: null }
</tr>);
}

Expand Down Expand Up @@ -195,17 +194,17 @@ var MDRaid = React.createClass({
});

var VGroup = React.createClass({
getInitialState: function () {
getInitialState: function() {
return { vgroup: null };
},
onClientChanged: function () {
onClientChanged: function() {
this.setState({ vgroup: this.props.client.vgnames_vgroup[this.props.name] });
},
componentDidMount: function () {
componentDidMount: function() {
$(this.props.client).on("changed", this.onClientChanged);
this.onClientChanged();
},
componentWillUnmount: function () {
componentWillUnmount: function() {
$(this.props.model).off("changed", this.onClientChanged);
},

Expand All @@ -217,7 +216,7 @@ var VGroup = React.createClass({
if (!vgroup)
return null;

var pvols = client.vgroups_pvols[vgroup.path] || [ ];
var pvols = client.vgroups_pvols[vgroup.path] || [];

function filter_inside_vgroup(spc) {
var block = spc.block;
Expand All @@ -240,16 +239,16 @@ var VGroup = React.createClass({
.map(utils.available_space_to_option)
),
EmptyWarning: _("No disks are available."),
validate: function (disks) {
validate: function(disks) {
if (disks.length === 0)
return _("At least one disk is needed.");
}
}
],
Action: {
Title: _("Add"),
action: function (vals) {
return utils.prepare_available_spaces(client, vals.disks).then(function () {
action: function(vals) {
return utils.prepare_available_spaces(client, vals.disks).then(function() {
var paths = Array.prototype.slice.call(arguments);
return cockpit.all(paths.map(function(p) {
return vgroup.AddDevice(p, {});
Expand All @@ -270,19 +269,21 @@ var VGroup = React.createClass({

function pvol_empty_and_remove() {
return (vgroup.EmptyDevice(pvol.path, {})
.then(function () {
.then(function() {
vgroup.RemoveDevice(pvol.path, true, {});
}));
}

if (pvols.length == 1) {
if (pvols.length === 1) {
remove_excuse = _("The last physical volume of a volume group cannot be removed.");
} else if (pvol.FreeSize < pvol.Size) {
if (pvol.Size <= vgroup.FreeSize)
remove_action = pvol_empty_and_remove;
else
remove_excuse = cockpit.format(_("There is not enough free space elsewhere to remove this physical volume. At least $0 more free space is needed."),
utils.fmt_size(pvol.Size - vgroup.FreeSize));
remove_excuse = cockpit.format(
_("There is not enough free space elsewhere to remove this physical volume. At least $0 more free space is needed."),
utils.fmt_size(pvol.Size - vgroup.FreeSize)
);
} else {
remove_action = pvol_remove;
}
Expand All @@ -293,7 +294,7 @@ var VGroup = React.createClass({
<div><img src="images/storage-disk.png"></img></div>
</td>
<td>
<StorageBlockNavLink client={client} block={client.blocks[pvol.path]}/>
<StorageBlockNavLink client={client} block={ client.blocks[pvol.path] }/>
<br></br>
<span>
{cockpit.format(_("$0, $1 free"),
Expand Down Expand Up @@ -321,7 +322,7 @@ var VGroup = React.createClass({
</div>
<table className="table">
<tbody>
{pvols.map(render_pvol)}
{ pvols.map(render_pvol) }
</tbody>
</table>
</div>
Expand Down

0 comments on commit b784139

Please sign in to comment.