UserTeams.tsx 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. import React, { PureComponent } from 'react';
  2. import { LoadingPlaceholder } from '@grafana/ui';
  3. import { Team } from 'app/types';
  4. export interface Props {
  5. teams: Team[];
  6. isLoading: boolean;
  7. }
  8. export class UserTeams extends PureComponent<Props> {
  9. render() {
  10. const { isLoading, teams } = this.props;
  11. if (isLoading) {
  12. return <LoadingPlaceholder text="Loading teams..." />;
  13. }
  14. if (teams.length === 0) {
  15. return null;
  16. }
  17. return (
  18. <div>
  19. <h3 className="page-sub-heading">Teams</h3>
  20. <div className="gf-form-group">
  21. <table className="filter-table form-inline" aria-label="User teams table">
  22. <thead>
  23. <tr>
  24. <th />
  25. <th>Name</th>
  26. <th>Email</th>
  27. <th>Members</th>
  28. </tr>
  29. </thead>
  30. <tbody>
  31. {teams.map((team: Team, index) => {
  32. return (
  33. <tr key={index}>
  34. <td className="width-4 text-center">
  35. <img className="filter-table__avatar" src={team.avatarUrl} alt="" />
  36. </td>
  37. <td>{team.name}</td>
  38. <td>{team.email}</td>
  39. <td>{team.memberCount}</td>
  40. </tr>
  41. );
  42. })}
  43. </tbody>
  44. </table>
  45. </div>
  46. </div>
  47. );
  48. }
  49. }
  50. export default UserTeams;