Skip to content

Commit 5ed7f4c

Browse files
amirfeferamirfefer
committed
Fixes #21737 - move about page to react
1 parent 0f118fd commit 5ed7f4c

File tree

17 files changed

+323
-114
lines changed

17 files changed

+323
-114
lines changed

‎app/assets/javascripts/about.js‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎app/views/about/index.html.erb‎

Lines changed: 13 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<% title _("About") %>
2-
<%= javascript 'proxy_status', 'charts', 'about' %>
32

43
<div class="row" id="about">
54
<div class="col-md-7">
@@ -16,105 +15,28 @@
1615
</ul>
1716
<div class="tab-content">
1817
<div class="tab-pane active" id="smart_proxies">
19-
<% if @smart_proxies.empty? %>
20-
<p class="ca"><%= _("No smart proxies to show") %></p>
21-
<% else %>
22-
<table class="table table-striped">
23-
<thead>
24-
<tr>
25-
<th><%= _("Name") %></th>
26-
<th><%= _("Features") %></th>
27-
<th><%= _("Status") %></th>
28-
<th><%= _("Version") %></th>
29-
</tr>
30-
</thead>
31-
<tbody>
32-
<% @smart_proxies.each do |proxy| %>
33-
<tr class="proxy-show" data-url="<%= ping_smart_proxy_path(proxy) %>">
34-
<td><%= link_to_if_authorized proxy.name, hash_for_smart_proxy_path(proxy) %></td>
35-
<td><%=h proxy.features.map(&:name).to_sentence %></td>
36-
<td><div class="proxy-show-status"><%= spinner %></div></td>
37-
<td><div class="proxy-version"><%= spinner %></div></td>
38-
</tr>
39-
<% end %>
40-
</tbody>
41-
</table>
42-
<% end %>
18+
<%= data = @smart_proxies.map {|proxy| {:id => {:name => proxy.name, :id => proxy.id},
19+
:features => h(proxy.features.map(&:name).to_sentence)}} %>
20+
<%= mount_react_component('AboutProxyTable', '#smart_proxies', data.to_json) %>
4321
</div>
4422
<% if SETTINGS[:unattended] %>
4523
<div class="tab-pane" id="available_providers">
46-
<table class="table table-striped">
47-
<thead>
48-
<tr>
49-
<th><%= _("Provider") %></th>
50-
<th><%= _("Status") %></th>
51-
</tr>
52-
</thead>
53-
<tbody>
54-
<% @providers.sort_by { |prov| prov[:friendly_name].downcase }.each do |provider| %>
55-
<tr>
56-
<td><%= provider[:friendly_name] %></td>
57-
<% if provider[:status] == :installed %>
58-
<td><div class="label label-success"><%= _('Installed') %></div></td>
59-
<% else %>
60-
<td><div class="label label-default"><%= _('Not Installed') %></div></td>
61-
<% end %>
62-
</tr>
63-
<% end %>
64-
</tbody>
65-
</table>
24+
<%= data = @providers.map {|provider| {:provider => provider[:friendly_name],
25+
:status => provider[:status] == :installed}}%>
26+
<%= mount_react_component('AboutProviderTable', '#available_providers', data.to_json) %>
27+
6628
<%= _('To enable a provider, either install the OS package (e.g. foreman-libvirt) or enable the bundler group for development setup (e.g. ovirt).') %>
6729
</div>
6830
<div class="tab-pane" id="compute_resources">
69-
<% if @compute_resources.empty? %>
70-
<p class="ca"><%= _("No compute resource to show") %></p>
71-
<% else %>
72-
<table class="table table-striped table-fixed">
73-
<thead>
74-
<tr>
75-
<th class="col-md-4"><%= _("Name") %></th>
76-
<th class="col-md-4"><%= _("Type") %></th>
77-
<th class="col-md-4"><%= _("Status") %></th>
78-
</tr>
79-
</thead>
80-
<tbody>
81-
<% @compute_resources.each do |compute| %>
82-
<tr>
83-
<td class="ellipsis"><%= link_to(compute.name, compute) %></td>
84-
<td><%= compute.provider_friendly_name %></td>
85-
<td><div class="compute-status" data-url=<%= ping_compute_resource_path(compute) %>><%= spinner %></div></td>
86-
</tr>
87-
<% end %>
88-
</tbody>
89-
</table>
90-
<% end %>
31+
<%= data = @compute_resources.map {|compute| {:id => {:name => compute.name, :id => compute.id},
32+
:type => compute.provider_friendly_name }} %>
33+
<%= mount_react_component('AboutComputeTable', '#compute_resources', data.to_json) %>
9134
</div>
9235
<% end %>
9336
<div class="tab-pane" id="plugins">
94-
<% if @plugins.empty? %>
95-
<p class="ca"><%= _("No plugins found") %></p>
96-
<% else %>
97-
<table class="table table-striped table-fixed">
98-
<thead>
99-
<tr>
100-
<th class="col-md-4"><%= _("Name") %></th>
101-
<th class="col-md-6"><%= _("Description") %></th>
102-
<th class="col-md-2"><%= _("Author") %></th>
103-
<th class="col-md-2"><%= _("Version") %></th>
104-
</tr>
105-
</thead>
106-
<tbody>
107-
<% @plugins.each do |plugin| %>
108-
<tr>
109-
<td><%= plugin.url.blank? ? plugin.name : link_to(plugin.name, plugin.url, :rel=>'external')%></td>
110-
<td class="ellipsis"><%= _(plugin.description) %></td>
111-
<td class="ellipsis"><%= plugin.author_url.blank? ? plugin.author : link_to(plugin.author, plugin.author_url)%></td>
112-
<td><%= plugin.version %></td>
113-
</tr>
114-
<% end %>
115-
</tbody>
116-
</table>
117-
<% end %>
37+
<%= data = @plugins.map {|plugin| {:name => plugin.name, :description => plugin.description,
38+
:author => plugin.author, :version => plugin.version }}%>
39+
<%= mount_react_component('AboutPluginTable', '#plugins', data.to_json) %>
11840
</div>
11941
</div>
12042
</div>

‎config/initializers/assets.rb‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@
4444
hidden_values
4545
password_strength
4646
proxy_status
47-
about
4847
parameter_override)
4948

5049
javascript += FastGettext.default_available_locales.map { |loc| "locale/#{loc}/app" }

‎config/routes.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -404,7 +404,7 @@
404404
post 'template_selected'
405405
post 'cluster_selected'
406406
get 'resource_pools'
407-
post 'ping'
407+
get 'ping'
408408
put 'associate'
409409
put 'refresh_cache'
410410
end

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@
7777
"react-numeric-input": "^2.0.7",
7878
"react-onclickoutside": "^6.6.2",
7979
"react-redux": "^5.0.2",
80+
"react-table": "^6.7.4",
8081
"redux": "^3.6.0",
8182
"redux-form": "^7.0.3",
8283
"redux-form-validators": "^2.0.1",

‎webpack/assets/javascripts/react_app/common/helpers.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,12 @@ export default {
66
});
77
},
88
noop: Function.prototype, // empty function
9+
urlBuilder(controller, action, id = undefined) {
10+
return `/${controller}/${id ? `${id}/` : ''}${action}`;
11+
},
12+
perPageQuery(query) {
13+
const urlParams = new URLSearchParams(window.location.search);
14+
15+
return urlParams.get(query);
16+
},
917
};

‎webpack/assets/javascripts/react_app/components/about/compute/index.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
import Status from '../../common/status';
3+
import Table from '../../common/table';
4+
import helpers from '../../../common/helpers';
5+
6+
class AboutComputeTable extends React.Component {
7+
render() {
8+
const columns = [
9+
{
10+
Header: 'Name',
11+
accessor: 'id',
12+
Cell: props => (
13+
<a href={helpers.urlBuilder('compute_resources', '', props.value.id)}>
14+
{props.value.name}
15+
</a>
16+
),
17+
},
18+
{
19+
Header: 'Type',
20+
accessor: 'type',
21+
},
22+
{
23+
Header: 'Status',
24+
accessor: 'id',
25+
Cell: props => (
26+
<Status
27+
data={{
28+
id: `compute_${props.value.id}`,
29+
url: helpers.urlBuilder(
30+
'compute_resources',
31+
'ping',
32+
props.value.id,
33+
),
34+
}}
35+
/>
36+
),
37+
},
38+
];
39+
40+
return (
41+
<Table data={this.props.data} columns={columns} showPagination={false} />
42+
);
43+
}
44+
}
45+
export default AboutComputeTable;

‎webpack/assets/javascripts/react_app/components/about/plugin/index.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import Table from '../../common/table';
3+
4+
class AboutPluginTable extends React.Component {
5+
render() {
6+
const columns = [
7+
{
8+
Header: 'Name',
9+
accessor: 'name',
10+
},
11+
{
12+
Header: 'Description',
13+
accessor: 'description',
14+
},
15+
{
16+
Header: 'Author',
17+
accessor: 'author',
18+
},
19+
{
20+
Header: 'Version',
21+
accessor: 'version',
22+
},
23+
];
24+
25+
return (
26+
<Table data={this.props.data} columns={columns} showPagination={false} />
27+
);
28+
}
29+
}
30+
export default AboutPluginTable;

‎webpack/assets/javascripts/react_app/components/about/provider/index.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import Table from '../../common/table';
3+
import Icon from '../../common/Icon';
4+
5+
class AboutProviderTable extends React.Component {
6+
render() {
7+
const columns = [
8+
{
9+
Header: 'Provider',
10+
accessor: 'provider',
11+
},
12+
{
13+
Header: 'Installed',
14+
accessor: 'status',
15+
Cell: data => <Icon type={data.value ? 'ok' : 'error'} />,
16+
},
17+
];
18+
19+
return (
20+
<Table data={this.props.data} columns={columns} showPagination={false} />
21+
);
22+
}
23+
}
24+
export default AboutProviderTable;

‎webpack/assets/javascripts/react_app/components/about/proxies/index.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
import { connect } from 'react-redux';
3+
import Status from '../../common/status';
4+
import { simpleLoader } from '../../common/Loader';
5+
import Table from '../../common/table';
6+
import helpers from '../../../common/helpers';
7+
8+
class AboutProxyTable extends React.Component {
9+
render() {
10+
const columns = [
11+
{
12+
Header: 'Name',
13+
accessor: 'id',
14+
width: 100,
15+
Cell: data => (
16+
<a href={helpers.urlBuilder('smart_proxies', '', data.value.id)}>
17+
{data.value.name}
18+
</a>
19+
),
20+
},
21+
{
22+
Header: 'Features',
23+
accessor: 'features',
24+
width: 250,
25+
},
26+
{
27+
Header: 'Status',
28+
accessor: 'id',
29+
width: 50,
30+
Cell: data => (
31+
<Status
32+
data={{
33+
id: `proxy_${data.value.id}`,
34+
url: helpers.urlBuilder('smart_proxies', 'ping', data.value.id),
35+
}}
36+
/>
37+
),
38+
},
39+
{
40+
Header: 'Version',
41+
accessor: 'id',
42+
width: 100,
43+
Cell: data => (
44+
<span>
45+
{this.props.status[`proxy_${data.value.id}`]
46+
? this.props.status[`proxy_${data.value.id}`].message.version
47+
: simpleLoader('xs')}
48+
</span>
49+
),
50+
},
51+
];
52+
53+
return (
54+
<Table data={this.props.data} columns={columns} showPagination={false} />
55+
);
56+
}
57+
}
58+
const mapStateToProps = ({ status }) => ({ status });
59+
60+
export default connect(mapStateToProps)(AboutProxyTable);

0 commit comments

Comments
 (0)