Line data    Source code

       1              : /*
       2              :  * Copyright (C) 2019 Red Hat, Inc.
       3              :  * SPDX-License-Identifier: LGPL-2.1-or-later
       4              :  */
       5              : 
       6           36 : import cockpit from "cockpit";
       7              : 
       8           36 : import React from "react";
       9              : import { Button } from "@patternfly/react-core/dist/esm/components/Button/index.js";
      10              : import { Flex } from "@patternfly/react-core/dist/esm/layouts/Flex/index.js";
      11              : import { Spinner } from "@patternfly/react-core/dist/esm/components/Spinner/index.js";
      12              : import { Icon } from "@patternfly/react-core/dist/esm/components/Icon/index.js";
      13              : import {
      14              :     BugIcon,
      15              :     CheckIcon,
      16              :     EnhancementIcon,
      17              :     ExclamationCircleIcon,
      18              :     InfoCircleIcon,
      19              :     SecurityIcon,
      20              :     ExclamationTriangleIcon,
      21              : } from '@patternfly/react-icons';
      22              : 
      23              : import "./page-status.scss";
      24              : 
      25              : import { page_status } from "notifications";
      26              : 
      27            1 : function icon_for_type(type) {
      28            1 :     if (type == "error")
      29            1 :         return (
      30            1 :             <Icon status="danger">
      31            1 :                 <ExclamationCircleIcon />
      32            0 :             </Icon>
      33              :         );
      34            0 :     else if (type == "warning")
      35            0 :         return (
      36            0 :             <Icon status="warning">
      37            0 :                 <ExclamationTriangleIcon />
      38            0 :             </Icon>
      39              :         );
      40              :     else
      41            0 :         return (
      42            0 :             <Icon status="info">
      43            0 :                 <InfoCircleIcon />
      44            0 :             </Icon>
      45              :         );
      46            1 : }
      47              : 
      48            0 : function get_pficon(name) {
      49              :     // set data-pficon for the tests
      50            0 :     if (name == "security")
      51            0 :         return <Icon isInline status="danger"><SecurityIcon data-pficon={name} /></Icon>;
      52            0 :     if (name == "enhancement")
      53            0 :         return <Icon isInline status="custom"><EnhancementIcon data-pficon={name} /></Icon>;
      54            0 :     if (name == "bug")
      55            0 :         return <Icon isInline className="pf-m-important"><BugIcon data-pficon={name} /></Icon>;
      56            0 :     if (name == "check")
      57            0 :         return <Icon isInline status="success"><CheckIcon data-pficon={name} /></Icon>;
      58            0 :     if (name == "spinner")
      59            0 :         return <Spinner diameter="1em" data-pficon={name} />;
      60              : 
      61            0 :     throw new Error(`get_pficon(): unknown icon name ${name}`);
      62            0 : }
      63              : 
      64           36 : export class PageStatusNotifications extends React.Component {
      65           36 :     constructor() {
      66           36 :         super();
      67           36 :         this.state = { };
      68            1 :         this.on_page_status_changed = () => this.setState({ });
      69           36 :     }
      70              : 
      71           36 :     componentDidMount() {
      72           36 :         page_status.addEventListener("changed", this.on_page_status_changed);
      73           36 :     }
      74              : 
      75            0 :     componentWillUnmount() {
      76            0 :         page_status.removeEventListener("changed", this.on_page_status_changed);
      77            0 :     }
      78              : 
      79           36 :     render() {
      80              :         // Explicit allowlist for now, until we can get a dynamic list
      81           36 :         return ["system/services", "updates"].map(page => {
      82           36 :             const status = page_status.get(page);
      83            6 :             if (status && (status.type || status.details) && status.title) {
      84            7 :                 let action;
      85            6 :                 if (status.details && status.details.link !== undefined) {
      86            6 :                     if (status.details.link)
      87            6 :                         action = <Button variant="link" isInline component="a"
      88            0 :                                          onClick={ ev => { ev.preventDefault(); cockpit.jump("/" + status.details.link) } }>{status.title}</Button>;
      89              :                     else
      90            6 :                         action = <span>{status.title}</span>; // no link
      91            6 :                 } else {
      92            7 :                     action = <Button variant="link" isInline component="a"
      93            0 :                                      onClick={ ev => { ev.preventDefault(); cockpit.jump("/" + page) } }>{status.title}</Button>;
      94            7 :                 }
      95              : 
      96            7 :                 let icon;
      97            7 :                 if (status.details && status.details.icon)
      98            6 :                     icon = <span className={status.details.icon} />;
      99            7 :                 else if (status.details && status.details.pficon)
     100            6 :                     icon = get_pficon(status.details.pficon);
     101              :                 else
     102            7 :                     icon = icon_for_type(status.type);
     103            7 :                 return (
     104            7 :                     <li id={ "page_status_notification_" + page.replace('/', '_') } key={page}>
     105            7 :                         <Flex flexWrap={{ default: 'nowrap' }} spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
     106            7 :                             {icon}
     107            7 :                             {action}
     108            7 :                         </Flex>
     109            7 :                     </li>
     110              :                 );
     111            7 :             } else {
     112           36 :                 return null;
     113           36 :             }
     114           36 :         });
     115           36 :     }
     116           36 : }