Line data    Source code

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