grafana/public/app/features/admin/UserSessions.tsx
Peter Holmberg 3c61b563c3 Ldap: Add LDAP debug page (#18759)
* Add items for navmodel and basic page

* add reducer and actions

* adding user mapping table component

* adding components for ldap tables

* add alert box on error

* close error alert box

* LDAP status page: connect APIs WIP

* LDAP debug: fetch connection status from API

* LDAP debug: fetch user info from API

* LDAP debug: improve connection error view

* LDAP debug: connection error tweaks

* LDAP debug: fix role mapping view

* LDAP debug: role mapping view tweaks

* LDAP debug: add bulk-sync button stub

* LDAP debug: minor refactor

* LDAP debug: show user teams

* LDAP debug: user info refactor

* LDAP debug: initial user page

* LDAP debug: minor refactor, remove unused angular wrapper

* LDAP debug: add sessions to user page

* LDAP debug: tweak user page

* LDAP debug: tweak view for disabled user

* LDAP debug: get sync info from API

* LDAP debug: user sync info

* LDAP debug: sync user button

* LDAP debug: clear error on page load

* LDAP debug: add user last sync info

* LDAP debug: actions refactor

* LDAP debug: roles and teams style tweaks

* Pass showAttributeMapping to LdapUserTeams

* LDAP debug: hide bulk sync button

* LDAP debug: refactor sessions component

* LDAP debug: fix loading user sessions

* LDAP debug: hide sync user button

* LDAP debug: fix fetching unavailable /ldap-sync-status endpoint

* LDAP debug: revert accidentally added fix

* LDAP debug: show error when LDAP is not enabled

* LDAP debug: refactor, move ldap components into ldap/ folder

* LDAP debug: styles refactoring

* LDAP debug: ldap reducer tests

* LDAP debug: ldap user reducer tests

* LDAP debug: fix connection error placement

* Text update

* LdapUser: Minor UI changes moving things around

* AlertBox: Removed icon-on-top as everywhere else it is centered, want to have it be consistent
2019-09-16 18:56:01 +03:00

69 lines
2.0 KiB
TypeScript

import React, { PureComponent } from 'react';
import { UserSession } from 'app/types';
interface Props {
sessions: UserSession[];
onSessionRevoke: (id: number) => void;
onAllSessionsRevoke: () => void;
}
export class UserSessions extends PureComponent<Props> {
handleSessionRevoke = (id: number) => {
return () => {
this.props.onSessionRevoke(id);
};
};
handleAllSessionsRevoke = () => {
this.props.onAllSessionsRevoke();
};
render() {
const { sessions } = this.props;
return (
<>
<h3 className="page-heading">Sessions</h3>
<div className="gf-form-group">
<div className="gf-form">
<table className="filter-table form-inline">
<thead>
<tr>
<th>Last seen</th>
<th>Logged on</th>
<th>IP address</th>
<th colSpan={2}>Browser &amp; OS</th>
</tr>
</thead>
<tbody>
{sessions &&
sessions.map((session, index) => (
<tr key={`${session.id}-${index}`}>
<td>{session.isActive ? 'Now' : session.seenAt}</td>
<td>{session.createdAt}</td>
<td>{session.clientIp}</td>
<td>{`${session.browser} on ${session.os} ${session.osVersion}`}</td>
<td>
<button className="btn btn-danger btn-small" onClick={this.handleSessionRevoke(session.id)}>
<i className="fa fa-power-off" />
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="gf-form-button-row">
{sessions.length > 0 && (
<button className="btn btn-danger" onClick={this.handleAllSessionsRevoke}>
Logout user from all devices
</button>
)}
</div>
</div>
</>
);
}
}