Line data Source code
1 : /*
2 : * Copyright (C) 2019 Red Hat, Inc.
3 : * SPDX-License-Identifier: LGPL-2.1-or-later
4 : */
5 :
6 : import '../lib/patternfly/patternfly-6-cockpit.scss';
7 : import 'polyfills';
8 : import 'cockpit-dark-theme'; // once per page
9 96 : import cockpit from "cockpit";
10 :
11 96 : import React from 'react';
12 96 : import { createRoot } from "react-dom/client";
13 : import { Page, PageSection, PageSectionVariants } from "@patternfly/react-core/dist/esm/components/Page/index.js";
14 : import { Gallery } from "@patternfly/react-core/dist/esm/layouts/Gallery/index.js";
15 : import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/dist/esm/components/Dropdown/index.js';
16 : import { MenuToggle, MenuToggleAction } from "@patternfly/react-core/dist/esm/components/MenuToggle";
17 :
18 : import { superuser } from "superuser";
19 :
20 : import { SystemInformationCard } from './overview-cards/systemInformationCard.jsx';
21 : import { ConfigurationCard } from './overview-cards/configurationCard.jsx';
22 : import { HealthCard } from './overview-cards/healthCard.jsx';
23 : import { MotdCard } from './overview-cards/motdCard.jsx';
24 : import { UsageCard } from './overview-cards/usageCard.jsx';
25 : import { SuperuserAlert } from './superuser-alert.jsx';
26 : import { superuser_proxy, SuperuserIndicator } from "superuser-dialogs";
27 : import { ShutdownModal } from 'cockpit-components-shutdown.jsx';
28 : import { WithDialogs, DialogsContext } from "dialogs.jsx";
29 :
30 : import "./overview.scss";
31 :
32 96 : const _ = cockpit.gettext;
33 :
34 96 : class OverviewPage extends React.Component {
35 96 : static contextType = DialogsContext;
36 :
37 96 : constructor(props) {
38 96 : super(props);
39 :
40 96 : this.state = {
41 96 : actionIsOpen: false,
42 96 : privileged: true,
43 96 : };
44 96 : this.hostnameMonitor = this.hostnameMonitor.bind(this);
45 96 : this.onPermissionChanged = this.onPermissionChanged.bind(this);
46 :
47 96 : this.superuser = superuser_proxy();
48 96 : }
49 :
50 96 : componentDidMount() {
51 96 : this.hostnameMonitor();
52 96 : superuser.addEventListener("changed", this.onPermissionChanged);
53 96 : this.onPermissionChanged();
54 96 : }
55 :
56 0 : componentWillUnmount() {
57 0 : superuser.removeEventListener("changed", this.onPermissionChanged);
58 0 : }
59 :
60 96 : onPermissionChanged() {
61 96 : this.setState({ privileged: superuser.allowed });
62 96 : }
63 :
64 96 : hostname_text() {
65 96 : if (!this.state.hostnameData)
66 96 : return undefined;
67 :
68 86 : const pretty_hostname = this.state.hostnameData.PrettyHostname;
69 86 : const static_hostname = this.state.hostnameData.StaticHostname;
70 86 : let str = this.state.hostnameData.Hostname;
71 :
72 17 : if (pretty_hostname && static_hostname && static_hostname != pretty_hostname)
73 17 : str = pretty_hostname + " (" + static_hostname + ")";
74 86 : else if (static_hostname)
75 85 : str = static_hostname;
76 :
77 17 : return str || '';
78 96 : }
79 :
80 96 : hostnameMonitor() {
81 96 : this.client = cockpit.dbus('org.freedesktop.hostname1');
82 96 : this.hostname_proxy = this.client.proxy('org.freedesktop.hostname1',
83 96 : '/org/freedesktop/hostname1');
84 86 : this.hostname_proxy.addEventListener("changed", data => {
85 86 : this.setState({ hostnameData: data.detail });
86 86 : });
87 96 : }
88 :
89 96 : render() {
90 96 : const Dialogs = this.context;
91 96 : const { actionIsOpen } = this.state;
92 96 : const dropdownItems = [
93 96 : <DropdownItem key="reboot" id="reboot"
94 0 : onClick={() => Dialogs.show(<ShutdownModal />)}
95 96 : component="button">
96 96 : {_("Reboot")}
97 96 : </DropdownItem>,
98 96 : <DropdownItem key="shutdown" id="shutdown"
99 1 : onClick={() => Dialogs.show(<ShutdownModal shutdown />)}
100 96 : component="button">
101 96 : {_("Shutdown")}
102 96 : </DropdownItem>,
103 96 : ];
104 :
105 96 : let headerActions = null;
106 96 : if (this.state.privileged)
107 96 : headerActions = (
108 1 : <Dropdown onSelect={() => this.setState({ actionIsOpen: false })}
109 96 : toggle={(toggleRef) => (
110 96 : <MenuToggle
111 96 : ref={toggleRef}
112 96 : variant="secondary"
113 96 : splitButtonItems={[
114 96 : <MenuToggleAction
115 96 : id='reboot-button'
116 96 : key='reboot-button'
117 1 : onClick={() => Dialogs.show(<ShutdownModal />)}
118 : >
119 96 : {_("Reboot")}
120 96 : </MenuToggleAction>
121 96 : ]}
122 1 : onClick={() => this.setState({ actionIsOpen: !actionIsOpen })}
123 96 : id="shutdown-group"
124 96 : />
125 : )}
126 96 : isOpen={actionIsOpen}
127 96 : popperProps={{ position: "right" }}
128 : >
129 96 : <DropdownList>
130 96 : {dropdownItems}
131 96 : </DropdownList>
132 96 : </Dropdown>
133 : );
134 :
135 96 : const show_superuser = (
136 96 : cockpit.transport.host && cockpit.transport.host != "localhost" &&
137 34 : !(window.parent.name == "cockpit1" && window.parent.features &&
138 34 : window.parent.features.navbar_is_for_current_machine));
139 :
140 96 : return (
141 96 : <Page className='pf-m-no-sidebar'>
142 96 : <SuperuserAlert />
143 96 : <PageSection hasBodyWrapper={false} className='ct-overview-header' padding={{ default: 'padding' }}>
144 96 : <div className='ct-overview-header-hostname'>
145 96 : <h1>
146 96 : {this.hostname_text()}
147 96 : </h1>
148 96 : {this.state.hostnameData &&
149 86 : this.state.hostnameData.OperatingSystemPrettyName &&
150 86 : <div className="ct-overview-header-subheading" id="system_information_os_text">{cockpit.format(_("running $0"), this.state.hostnameData.OperatingSystemPrettyName)}</div>}
151 96 : </div>
152 96 : <div className='ct-overview-header-actions'>
153 17 : { show_superuser && <SuperuserIndicator proxy={this.superuser} /> }
154 96 : { "\n" }
155 96 : { headerActions }
156 96 : </div>
157 96 : </PageSection>
158 96 : <PageSection hasBodyWrapper={false} variant={PageSectionVariants.default}>
159 96 : <Gallery className='ct-system-overview' hasGutter>
160 96 : <MotdCard />
161 96 : <HealthCard />
162 96 : <UsageCard />
163 96 : <SystemInformationCard />
164 96 : <ConfigurationCard hostname={this.hostname_text()} />
165 96 : </Gallery>
166 96 : </PageSection>
167 96 : </Page>
168 : );
169 96 : }
170 96 : }
171 :
172 96 : function init() {
173 96 : cockpit.translate();
174 96 : const root = createRoot(document.getElementById("overview"));
175 96 : root.render(<WithDialogs><OverviewPage /></WithDialogs>);
176 96 : }
177 :
178 96 : document.addEventListener("DOMContentLoaded", init);
|
