@fortawesome/free-solid-svg-icons#faMinusCircle JavaScript Examples

The following examples show how to use @fortawesome/free-solid-svg-icons#faMinusCircle. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Alert.jsx    From frontend-app-support-tools with GNU Affero General Public License v3.0 6 votes vote down vote up 
function getAlertIcon(type) {
  if (type === 'error') {
    return faExclamationTriangle;
  }
  if (type === 'danger') {
    return faMinusCircle;
  }
  if (type === 'success') {
    return faCheckCircle;
  }
  return faInfoCircle;
}
Example #2
Source File: Pods.jsx    From ThermaKube with MIT License 4 votes vote down vote up 
Pods = ({ data }) => {
  // console.log('pods data', data);
  // console.log('props', props);
  // using hooks to set state
  const [table, setTable] = useState([]); //pod data in table
  let children = [];
  data[0].children.map(child => children.push(...child.children));
  // console.log('children', children);
  useEffect(() => {
    const podList = children.map((p, i) => {
      // check status - if "Running" then render green check circle
      if (p.status === 'Running') {
        return (
          <tbody key={`tbody${i}`}>
            <tr>
              <td>{p.name}</td>
              <td>{p.namespace}</td>
              <td>
                <FontAwesomeIcon icon={faCheckCircle} color='#00df00' />
                &nbsp;&nbsp;
                {p.status}
              </td>
              <td>{p.podIP}</td>
              <td>{p.createdAt}</td>
            </tr>
          </tbody>
        );
      } else {
        // if not "Running", invoke the addAlert func to add to database and render red circle
        addAlert(p);
        return (
          <tbody key={`tbody${i}`}>
            <tr>
              <td>{p.name}</td>
              <td>{p.namespace}</td>
              <td>
                <FontAwesomeIcon icon={faMinusCircle} color='orange' />
                &nbsp;&nbsp;
                {p.status}
              </td>
              <td>{p.podIP}</td>
              <td>{p.createdAt}</td>
            </tr>
          </tbody>
        );
      }
    });
    setTable(podList);
    // use Effect will trigger every time data is changed
  }, data);

  // function that adds a new Alert - gets called in ^useEffect when pod status is not "Running"
  const addAlert = async p => {
    const token = Cookies.get('token');
    const header = {
      headers: {
        Authorization: 'Bearer' + token,
      },
    };
    // console.log('header', header);
    const postAlert = await axios.post(
      '/api/alerts',
      {
        name: p.name,
        namespace: p.namespace,
        status: p.status,
        podIP: p.podIP,
        time: Date(Date.now()).toString(),
      },
      header
    );
  };

  return (
    <div className='podContainer'>
      <h4 className='podsTitle'>Pods List</h4>
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>Pod Name</th>
            <th>Namespace</th>
            <th>Status</th>
            <th>Pod IP</th>
            <th>Created At</th>
          </tr>
        </thead>
        {table}
      </Table>
    </div>
  );
}
Example #3
Source File: Alerts_Container.jsx    From ThermaKube with MIT License 4 votes vote down vote up 
Alerts = () => {
  let [alerts, setAlerts] = useState([]);
  const [table, setTable] = useState([]); //alert data in table
  let [subHeader, setSubHeader] = useState('');
  // useEffect = Hook version of componentDidMount
  useEffect(() => {
    // console.log('cookies', Cookies.get('token'));
    const token = Cookies.get('token');
    const header = {
      headers: {
        Authorization: 'Bearer' + token,
      },
    };
    const fetchPods = async () => {
      // axios request to server side
      const result = await axios.get('/api/alerts', header);
      if (result.data) {
        alerts = []; //empty the alerts before updating with fetched data
        setAlerts(alerts.push(result.data));
      } else {
        alerts = [[]];
      }
      // console.log('alerts', alerts);
      let alertList;
      if (!alerts[0][0]) {
        setSubHeader('(No alerts currently detected)');
        alertList = [];
        alertList.push(
          <tbody key={'alertRow'}>
            <tr>
              <td>N/A</td>
              <td>N/A</td>
              <td>N/A</td>
              <td>N/A</td>
              <td>N/A</td>
            </tr>
          </tbody>
        );

        // console.log(alertList);
      } else {
        // console.log('alerts found!');
        alertList = alerts[0].map((p, i) => {
          return (
            <tbody key={`tbody${i}`}>
              <tr>
                <td>{p.name}</td>
                <td>{p.namespace}</td>
                <td>
                  <FontAwesomeIcon icon={faMinusCircle} color='orange' />
                  &nbsp;&nbsp;{p.status}
                </td>
                <td>{p.podIP}</td>
                <td>{p.time}</td>
              </tr>
            </tbody>
          );
        });
      }
      setTable(alertList);
    };

    //update every 5 seconds
    const fetchOnLoad = () => {
      if (!alerts[0]) {
        // console.log('First fetch called');
        fetchPods();
      }
      // setInterval(() => {
      //   console.log('setInterval called');
      //   fetchPods();
      // }, 5000);
    };
    fetchOnLoad();
  }, []);

  return (
    <div className='alertsContainer'>
      {table[0] && (
        <div>
          <h4 className='alertsTitle'>Alerts {subHeader}</h4>
          <Table striped bordered hover>
            <thead>
              <tr>
                <th>Pod Name</th>
                <th>Namespace</th>
                <th>Status</th>
                <th>Pod IP</th>
                <th>Time</th>
              </tr>
            </thead>
            {table}
          </Table>
        </div>
      )}
    </div>
  );
}