Line data    Source code

       1              : /*
       2              :  * Copyright (C) 2020 Red Hat, Inc.
       3              :  * SPDX-License-Identifier: LGPL-2.1-or-later
       4              :  */
       5              : 
       6           34 : import React, { useState } from "react";
       7              : import { Button } from "@patternfly/react-core/dist/esm/components/Button/index.js";
       8              : import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/esm/components/Nav/index.js";
       9              : import { Icon } from "@patternfly/react-core/dist/esm/components/Icon/index.js";
      10              : import { ExclamationCircleIcon } from '@patternfly/react-icons';
      11              : 
      12           34 : import cockpit from "cockpit";
      13              : 
      14           34 : const _ = cockpit.gettext;
      15              : 
      16           34 : export const service_tabs_suffixes = ["service", "target", "socket", "timer", "path"];
      17              : 
      18              : type TabKey = "service" | "target" | "socket" | "timer" | "path";
      19              : 
      20           34 : const service_tabs: Map<TabKey, string> = new Map([
      21           34 :     ["service", _("Services")],
      22           34 :     ["target", _("Targets")],
      23           34 :     ["socket", _("Sockets")],
      24           34 :     ["timer", _("Timers")],
      25           34 :     ["path", _("Paths")],
      26           34 : ]);
      27              : // TODO: switch Iterator.prototype.map (requires ES2027)
      28              : // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator/map
      29           34 : const service_tabs_keys = [...service_tabs.keys()];
      30              : 
      31           29 : export function ServiceTabs({
      32           29 :     onChange,
      33           29 :     activeTab,
      34           29 :     tabErrors
      35           29 : }: {
      36              :     onChange: (tab: TabKey) => void;
      37              :     activeTab: TabKey;
      38              :     tabErrors: Record<TabKey, boolean>;
      39           29 : }) {
      40           29 :     const [activeItem, setActiveItem] = useState(activeTab);
      41              : 
      42           29 :     return (
      43           29 :         <Nav variant="horizontal-subnav" id="services-filter"
      44            7 :              onSelect={(_event, result) => {
      45            7 :                  const selectedTabKey = result.itemId as TabKey;
      46            7 :                  setActiveItem(selectedTabKey); onChange(selectedTabKey);
      47            7 :              }}>
      48           29 :             <NavList>
      49           29 :                 {service_tabs_keys.map(key => {
      50           29 :                     return (
      51           29 :                         <NavItem itemId={key}
      52           29 :                                  key={key}
      53           29 :                                  preventDefault
      54           29 :                                  isActive={activeItem == key}>
      55           29 :                             <Button variant="link" component="a">
      56           29 :                                 {service_tabs.get(key)}
      57            9 :                                 {tabErrors[key] ? <Icon status="danger"><ExclamationCircleIcon className="ct-exclamation-circle" /></Icon> : null}
      58           29 :                             </Button>
      59           29 :                         </NavItem>
      60              :                     );
      61           29 :                 })}
      62           29 :             </NavList>
      63           29 :         </Nav>
      64              :     );
      65           29 : }