import { LoadingSpinner } from '@sourcegraph/react-loading-spinner';
import AddIcon from 'mdi-react/AddIcon';
import CityIcon from 'mdi-react/CityIcon';
import SettingsIcon from 'mdi-react/SettingsIcon';
import UserIcon from 'mdi-react/UserIcon';
import WebIcon from 'mdi-react/WebIcon';
import * as React from 'react';
import { Link } from 'react-router-dom';
import { Subscription } from 'rxjs';
import { map } from 'rxjs/operators';
import { gql, queryGraphQL } from '../backend/graphql';
import { OverviewItem, OverviewList } from '../components/Overview';
import { PageTitle } from '../components/PageTitle';
import { eventLogger } from '../tracking/eventLogger';
import { createAggregateError } from '../util/errors';
import { RepositoryIcon } from '../util/icons'; // TODO: Switch to mdi icon
import { numberWithCommas, pluralize } from '../util/strings';
/**
 * A page displaying an overview of site admin information.
 */
export class SiteAdminOverviewPage extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {};
        this.subscriptions = new Subscription();
    }
    componentDidMount() {
        eventLogger.logViewEvent('SiteAdminOverview');
        this.subscriptions.add(fetchOverview().subscribe(info => this.setState({ info })));
    }
    componentWillUnmount() {
        this.subscriptions.unsubscribe();
    }
    render() {
        return (React.createElement("div", { className: "site-admin-overview-page" },
            React.createElement(PageTitle, { title: "Overview - Admin" }),
            !this.state.info && React.createElement(LoadingSpinner, { className: "icon-inline" }),
            this.props.overviewComponents.length > 0 && (React.createElement("div", { className: "mb-4" }, this.props.overviewComponents.map((C, i) => React.createElement(C, { key: i })))),
            React.createElement(OverviewList, null,
                this.state.info && (React.createElement(OverviewItem, { link: "/site-admin/repositories", icon: RepositoryIcon, actions: React.createElement(React.Fragment, null,
                        React.createElement(Link, { to: "/site-admin/configuration", className: "btn btn-primary btn-sm" },
                            React.createElement(SettingsIcon, { className: "icon-inline" }),
                            " Configure repositories"),
                        React.createElement(Link, { to: "/site-admin/repositories", className: "btn btn-secondary btn-sm" }, "View all")) },
                    numberWithCommas(this.state.info.repositories),
                    "\u00A0",
                    this.state.info.repositories !== null
                        ? pluralize('repository', this.state.info.repositories, 'repositories')
                        : '?')),
                this.state.info && (React.createElement(OverviewItem, { link: "/site-admin/users", icon: UserIcon, actions: React.createElement(React.Fragment, null,
                        React.createElement(Link, { to: "/site-admin/users/new", className: "btn btn-primary btn-sm" },
                            React.createElement(AddIcon, { className: "icon-inline" }),
                            " Create user account"),
                        React.createElement(Link, { to: "/site-admin/configuration", className: "btn btn-secondary btn-sm" },
                            React.createElement(SettingsIcon, { className: "icon-inline" }),
                            " Configure SSO"),
                        React.createElement(Link, { to: "/site-admin/users", className: "btn btn-secondary btn-sm" }, "View all")) },
                    numberWithCommas(this.state.info.users),
                    "\u00A0",
                    pluralize('user', this.state.info.users))),
                this.state.info && (React.createElement(OverviewItem, { link: "/site-admin/organizations", icon: CityIcon, actions: React.createElement(React.Fragment, null,
                        React.createElement(Link, { to: "/organizations/new", className: "btn btn-primary btn-sm" },
                            React.createElement(AddIcon, { className: "icon-inline" }),
                            " Create organization"),
                        React.createElement(Link, { to: "/site-admin/organizations", className: "btn btn-secondary btn-sm" }, "View all")) },
                    numberWithCommas(this.state.info.orgs),
                    "\u00A0",
                    pluralize('organization', this.state.info.orgs))),
                this.state.info &&
                    typeof this.state.info.repositories === 'number' && (React.createElement(OverviewItem, { icon: WebIcon, actions: React.createElement(Link, { to: "/site-admin/code-intelligence", className: "btn btn-primary btn-sm" },
                        React.createElement(SettingsIcon, { className: "icon-inline" }),
                        " Manage code intelligence") },
                    "Code intelligence is ",
                    this.state.info.hasCodeIntelligence ? 'on' : 'off')))));
    }
}
function fetchOverview() {
    return queryGraphQL(gql `
        query Overview {
            repositories {
                totalCount(precise: true)
            }
            users {
                totalCount
            }
            organizations {
                totalCount
            }
            site {
                hasCodeIntelligence
            }
        }
    `).pipe(map(({ data, errors }) => {
        if (!data || !data.repositories || !data.users || !data.organizations) {
            throw createAggregateError(errors);
        }
        return {
            repositories: data.repositories.totalCount,
            users: data.users.totalCount,
            orgs: data.organizations.totalCount,
            hasCodeIntelligence: data.site.hasCodeIntelligence,
        };
    }));
}
//# sourceMappingURL=SiteAdminOverviewPage.js.map