mirror of
https://github.com/tdurieux/anonymous_github.git
synced 2026-09-12 13:48:58 +02:00
235 lines
19 KiB
HTML
235 lines
19 KiB
HTML
<div class="container page dashboard-page paper-page">
|
|
<div class="row">
|
|
<div class="w-100">
|
|
<div class="paper-crumbs">My work / <span class="here">Dashboard</span></div>
|
|
<div class="d-flex align-items-end justify-content-between flex-wrap" style="gap: 12px;">
|
|
<div>
|
|
<h1 class="paper-page-title">Your <em>anonymizations</em></h1>
|
|
<p class="paper-page-lede">Every repository, pull request, and gist you’ve mirrored, with live status and stats.</p>
|
|
</div>
|
|
<div class="dashboard-heading-actions">
|
|
<a href="/anonymize" class="btn btn-ink">
|
|
<i class="fa fa-plus-circle" aria-hidden="true"></i> New anonymization
|
|
</a>
|
|
<a href="/connections" class="dashboard-connections-link">
|
|
<i class="fab fa-github" aria-hidden="true"></i> GitHub connections <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quota -->
|
|
<div class="quota-row" v-if="quota">
|
|
<div class="quota-item" v-for="(q, index) in [
|
|
{key: 'repository', label: 'Repositories', kind: 'count'},
|
|
{key: 'storage', label: 'Storage', kind: 'bytes'},
|
|
{key: 'file', label: 'Files', kind: 'count'}
|
|
]">
|
|
<div class="quota-header">
|
|
<span class="quota-label">{{ q?.label }}</span>
|
|
<span class="quota-value" v-if="q?.kind === 'count'">
|
|
{{ fmt?.number(quota[q?.key].used) }}<span v-if="!quota[q?.key].unlimited"> / {{ fmt?.number(quota[q?.key].total) }}</span>
|
|
<span class="quota-unlimited-tag" v-if="quota[q?.key].unlimited">Unlimited</span>
|
|
</span>
|
|
<span class="quota-value" v-if="q?.kind === 'bytes'">
|
|
{{ fmt?.humanFileSize(quota[q?.key].used) }}<span v-if="!quota[q?.key].unlimited"> / {{ fmt?.humanFileSize(quota[q?.key].total) }}</span>
|
|
<span class="quota-unlimited-tag" v-if="quota[q?.key].unlimited">Unlimited</span>
|
|
</span>
|
|
</div>
|
|
<div class="quota-track" role="progressbar" aria-valuemin="0" :class="'quota-' + quota[q?.key].level" :aria-label="(q?.label) + " quota"" :aria-valuenow="(quota[q?.key].used)" :aria-valuemax="(quota[q?.key].unlimited ? quota[q?.key].used : quota[q?.key].total)" :aria-valuetext="(quota[q?.key].unlimited ? 'unlimited' : fmt.number(quota[q?.key].percent, 0) + '% used')">
|
|
<div class="quota-fill" v-if="!quota[q?.key].unlimited" :style="{width: quota[q?.key].percent + '%'}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search + filters -->
|
|
<form class="w-100 dashboard-filter-row" aria-label="Filter anonymizations" accept-charset="UTF-8" v-form="viewState" @submit.prevent="submitForm($event, () => { $event.preventDefault() })">
|
|
<div class="search-wrap">
|
|
<input type="search" id="search" class="form-control" aria-label="Search anonymizations" placeholder="Search by name, source, or conference…" autocomplete="off" v-field="{ state: viewState, set: value => { search = value }, value: search, form: null, options: {} }">
|
|
</div>
|
|
<div class="dashboard-filter-controls">
|
|
<div class="btn-group" role="group" aria-label="Type">
|
|
<button type="button" class="btn" :class="{'btn-primary': typeFilter === 'all'}" @click="typeFilter = 'all'" :aria-pressed="(typeFilter === 'all')">All</button>
|
|
<button type="button" class="btn" :class="{'btn-primary': typeFilter === 'repo'}" @click="typeFilter = 'repo'" :aria-pressed="(typeFilter === 'repo')">Repos</button>
|
|
<button type="button" class="btn" :class="{'btn-primary': typeFilter === 'pr'}" @click="typeFilter = 'pr'" :aria-pressed="(typeFilter === 'pr')">PRs</button>
|
|
<button type="button" class="btn" :class="{'btn-primary': typeFilter === 'gist'}" @click="typeFilter = 'gist'" :aria-pressed="(typeFilter === 'gist')">Gists</button>
|
|
</div>
|
|
|
|
<div class="dropdown">
|
|
<button class="btn dropdown-toggle" type="button" id="dropdownSort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<span class="filter-btn-label">Sort</span>
|
|
<span class="filter-btn-value">{{ sortLabel() }}</span>
|
|
<i class="fas" aria-hidden="true" :class="sortDesc() ? 'fa-arrow-down' : 'fa-arrow-up'"></i>
|
|
<span class="sr-only">{{ sortDesc() ? 'descending' : 'ascending' }}</span>
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownSort">
|
|
<h6 class="dropdown-header">Order by</h6>
|
|
<div class="form-check dropdown-item" v-for="(def, field, index) in sortFields">
|
|
<input class="form-check-input" type="radio" name="sort" @click="setSort(field, def.defaultDesc)" :checked="isSortedBy(field)" :id=""sort-" + (index)">
|
|
<label class="form-check-label" :for=""sort-" + (index)">{{ def?.label }}</label>
|
|
</div>
|
|
<div class="dropdown-divider"></div>
|
|
<button type="button" class="dropdown-item" @click="toggleSortDirection()">
|
|
<i class="fas fa-exchange-alt fa-rotate-90" aria-hidden="true"></i>
|
|
{{ sortDesc() ? 'Switch to ascending' : 'Switch to descending' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown">
|
|
<button class="btn dropdown-toggle" type="button" id="dropdownStatus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<span class="filter-btn-label">Status</span>
|
|
<span class="filter-btn-value" v-if="!hasHiddenStatus()">All</span>
|
|
<span class="filter-btn-value" v-if="hasHiddenStatus()">{{ hiddenStatusCount() }} hidden</span>
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownStatus">
|
|
<h6 class="dropdown-header">Show statuses</h6>
|
|
<div class="form-check dropdown-item" v-for="(label, key, index) in statusKeyLabels">
|
|
<input class="form-check-input" type="checkbox" v-field="{ state: viewState, set: value => { filters.status[key] = value }, value: filters?.status[key], form: null, options: {} }" :id=""status-" + (key)">
|
|
<label class="form-check-label" :for=""status-" + (key)">{{ label }}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Result count + active filter chips -->
|
|
<div class="dashboard-meta" v-if="!loading">
|
|
<span class="dashboard-count">
|
|
<span v-if="filteredItems?.length === items?.length">{{ fmt?.number(items?.length) }} anonymization<span v-if="items?.length !== 1">s</span></span>
|
|
<span v-if="filteredItems?.length !== items?.length">{{ fmt?.number(filteredItems?.length) }} of {{ fmt?.number(items?.length) }} shown</span>
|
|
</span>
|
|
<template v-for="(v, f, index) in filters?.status"><span class="filter-chip" v-if="v === false">
|
|
Hiding {{ statusKeyLabels[f] }}
|
|
<button type="button" class="filter-chip-close" @click="filters.status[f] = true;" :aria-label=""Show " + (statusKeyLabels[f]) + " again"">×</button>
|
|
</span></template>
|
|
<button type="button" class="btn-link-inline" v-if="hasActiveFilters()" @click="clearFilters()">Clear filters</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="paper-table paper-table-dashboard w-100" role="table" aria-label="Anonymizations" :aria-busy="(loading)">
|
|
<div class="paper-table-head" role="row">
|
|
<div role="columnheader" :aria-sort="(isSortedBy('_name') ? (sortDesc() ? 'descending' : 'ascending') : 'none')">
|
|
<button type="button" class="sortable" :class="{active: isSortedBy('_name')}" @click="setSort('_name')">
|
|
Anonymization <i class="fas" aria-hidden="true" v-if="isSortedBy('_name')" :class="sortDesc() ? 'fa-arrow-down' : 'fa-arrow-up'"></i>
|
|
</button>
|
|
</div>
|
|
<div role="columnheader" :aria-sort="(isSortedBy('status') ? (sortDesc() ? 'descending' : 'ascending') : 'none')">
|
|
<button type="button" class="sortable" :class="{active: isSortedBy('status')}" @click="setSort('status')">
|
|
Status <i class="fas" aria-hidden="true" v-if="isSortedBy('status')" :class="sortDesc() ? 'fa-arrow-down' : 'fa-arrow-up'"></i>
|
|
</button>
|
|
</div>
|
|
<div role="columnheader" class="num" :aria-sort="(isSortedBy('pageView') ? (sortDesc() ? 'descending' : 'ascending') : 'none')">
|
|
<button type="button" class="sortable" :class="{active: isSortedBy('pageView')}" @click="setSort('pageView')">
|
|
Views <i class="fas" aria-hidden="true" v-if="isSortedBy('pageView')" :class="sortDesc() ? 'fa-arrow-down' : 'fa-arrow-up'"></i>
|
|
</button>
|
|
</div>
|
|
<div role="columnheader" :aria-sort="(isSortedBy('options.expirationDate') ? (sortDesc() ? 'descending' : 'ascending') : 'none')">
|
|
<button type="button" class="sortable" :class="{active: isSortedBy('options.expirationDate')}" @click="setSort('options.expirationDate')">
|
|
Expires <i class="fas" aria-hidden="true" v-if="isSortedBy('options.expirationDate')" :class="sortDesc() ? 'fa-arrow-down' : 'fa-arrow-up'"></i>
|
|
</button>
|
|
</div>
|
|
<div role="columnheader"><span class="sr-only">Actions</span></div>
|
|
</div>
|
|
|
|
<!-- Loading skeleton: keeps the layout stable while the three lists load -->
|
|
<template v-for="(i, index) in [1, 2, 3, 4]"><div class="paper-table-row paper-table-skeleton" role="row" aria-hidden="true" v-if="loading">
|
|
<div class="cell-anon" role="cell"><span class="skeleton skeleton-badge"></span><div class="anon-text"><span class="skeleton skeleton-line" style="width: 38%"></span><span class="skeleton skeleton-line skeleton-line-sm" style="width: 56%"></span></div></div>
|
|
<div class="cell-status" role="cell"><span class="skeleton skeleton-line" style="width: 60%"></span></div>
|
|
<div class="cell-views num" role="cell"><span class="skeleton skeleton-line" style="width: 40%"></span></div>
|
|
<div class="cell-expires" role="cell"><span class="skeleton skeleton-line" style="width: 55%"></span></div>
|
|
<div class="cell-actions" role="cell"></div>
|
|
</div></template>
|
|
|
|
<template v-for="(item, index) in filteredItems" :key="(item?._type + ':' + (item?._id || index))"><div class="paper-table-row" role="row" v-if="!loading" :class="{'repo-inactive': item?._statusKey == 'expired' || item?._statusKey == 'removed', 'repo-error': item?.status == 'error', 'row-clickable': !!item?._viewUrl}" @click="openItem(item, $event)">
|
|
<div class="cell-anon" role="cell">
|
|
<span class="type-badge" :class="{'type-repo': item?._type === 'repo', 'type-pr': item?._type === 'pr', 'type-gist': item?._type === 'gist'}">{{ item?._type === 'repo' ? 'Repo' : item?._type === 'pr' ? 'PR' : 'Gist' }}</span>
|
|
<div class="anon-text">
|
|
<div class="anon-title">
|
|
<a class="repo-name" v-if="item?._viewUrl" v-text="item?._name" :href="safeUrl((item?._viewUrl))"></a>
|
|
<span class="repo-name repo-name-static" v-if="!item?._viewUrl" v-text="item?._name"></span>
|
|
<span class="type-badge type-coauthor" title="You are a co-author on this anonymization" v-if="item?.role === 'coauthor'">Co-author</span>
|
|
</div>
|
|
<div class="anon-sub" v-if="!item?._broken || item?.conference">
|
|
<span class="anon-source" v-if="item?._type === 'repo' && item?.source?.fullName && !item?._broken">
|
|
<a target="_blank" rel="noopener" v-text="item?.source?.fullName" :href="safeUrl("https://github.com/" + (item?.source?.fullName) + "/")"></a><span v-if="item?.options?.update && item?.source?.branch"> · <a target="_blank" rel="noopener" v-text="item?.source?.branch" :href="safeUrl("https://github.com/" + (item?.source?.fullName) + "/tree/" + (item?.source?.branch))"></a></span><span v-if="item?.source?.commit"> · <a class="commit-hash" target="_blank" rel="noopener" :href="safeUrl("https://github.com/" + (item?.source?.fullName) + "/tree/" + (item?.source?.commit))">@{{ item?.source?.commit?.substring(0, 8) }}</a></span>
|
|
</span>
|
|
<span class="anon-source" v-if="item?._type === 'pr' && item?.source?.repositoryFullName && !item?._broken">
|
|
<a target="_blank" rel="noopener" v-text="item?._source" :href="safeUrl("https://github.com/" + (item?.source?.repositoryFullName) + "/pull/" + (item?.source?.pullRequestId))"></a>
|
|
</span>
|
|
<span class="anon-source" v-if="item?._type === 'gist' && item?.source?.gistId && !item?._broken">
|
|
<a target="_blank" rel="noopener" v-text="item?._source" :href="safeUrl("https://gist.github.com/" + (item?.source?.gistId))"></a>
|
|
</span>
|
|
<span class="cell-conf conf-tag" v-if="item?.conference" :title="(item?.conference)"><i class="fas fa-university" aria-hidden="true"></i> <span v-text="item?.conference"></span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell-status" role="cell">
|
|
<div class="status-line">
|
|
<span class="status-dot" aria-hidden="true" :class="'status-' + item?._statusKey"></span>
|
|
<span class="status-word" v-text="fmt?.statusLabel(item?.status)"></span>
|
|
</div>
|
|
<div class="status-sub status-sub-error" v-if="item?.status == 'error' && item?.statusMessage" v-text="fmt?.statusMsg(item?.statusMessage)" :title="(item?.statusMessage)"></div>
|
|
<div class="status-sub status-sub-warn" v-if="item?._stale" :title=""Last activity " + (fmt?.humanTime(item?.anonymizeDate || item?.lastView))">
|
|
Last activity {{ fmt?.humanTime(item?.anonymizeDate || item?.lastView) }} · may be stuck
|
|
</div>
|
|
<div class="status-sub" v-if="item?.status != 'error' && !item?._stale && item?.anonymizeDate">
|
|
anonymized {{ fmt?.humanTime(item?.anonymizeDate) }}
|
|
</div>
|
|
</div>
|
|
<div class="cell-views num" role="cell" v-text="fmt?.number(item?.pageView)"></div>
|
|
<div class="cell-expires" role="cell">
|
|
<span class="expires-never" v-if="item?._expiry?.kind === 'never'">Never</span>
|
|
<span v-if="item?._expiry?.kind === 'date'" v-text="fmt?.humanTime(item?._expiry?.date)"></span>
|
|
<span class="expires-past" v-if="item?._expiry?.kind === 'expired' && item?._expiry?.date">Expired {{ fmt?.humanTime(item?._expiry?.date) }}</span>
|
|
<span class="expires-past" v-if="item?._expiry?.kind === 'expired' && !item?._expiry?.date">Expired</span>
|
|
<span class="empty-dash" aria-label="Not applicable" v-if="item?._expiry?.kind === 'none'">—</span>
|
|
</div>
|
|
<div class="cell-actions" role="cell">
|
|
<div class="dropdown" v-if="!item?._broken">
|
|
<button class="btn btn-icon-dots" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" :aria-label=""Actions for " + (item?._name)">
|
|
<i class="fas fa-ellipsis-h" aria-hidden="true"></i>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
<a class="dropdown-item" :href="safeUrl((item?._viewUrl))">
|
|
<i class="fa fa-eye" aria-hidden="true"></i> View
|
|
</a>
|
|
<a class="dropdown-item" target="_self" v-if="item?._type === 'repo' && item?.options?.page && item?.status == 'ready'" :href="safeUrl("/w/" + (item?.repoId) + "/")">
|
|
<i class="fas fa-globe" aria-hidden="true"></i> View page
|
|
</a>
|
|
<a class="dropdown-item" :href="safeUrl((item?._editUrl))">
|
|
<i class="far fa-edit" aria-hidden="true"></i> Edit
|
|
</a>
|
|
<button type="button" class="dropdown-item" v-if="item?.status == 'ready' || item?.status == 'error'" @click="refreshItem(item)">
|
|
<i class="fas fa-sync" aria-hidden="true"></i> Force update
|
|
</button>
|
|
<button type="button" class="dropdown-item" v-if="item?.status == 'removed'" @click="refreshItem(item)">
|
|
<i class="fas fa-check-circle" aria-hidden="true"></i> Enable
|
|
</button>
|
|
<button type="button" class="dropdown-item" v-if="item?.status == 'expired'" @click="extendItem(item)">
|
|
<i class="fas fa-calendar-plus" aria-hidden="true"></i> Extend 6 months
|
|
</button>
|
|
<div v-if="(item?.status == 'ready' || item?.status == 'expired' || item?.status == 'error') && item?.role !== 'coauthor'">
|
|
<div class="dropdown-divider"></div>
|
|
<button type="button" class="dropdown-item dropdown-item-danger" @click="removeItem(item)">
|
|
<i class="fas fa-trash-alt" aria-hidden="true"></i> Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div></template>
|
|
|
|
<div class="paper-table-empty" v-if="!loading && filteredItems?.length == 0">
|
|
<i class="fas fa-inbox" aria-hidden="true"></i>
|
|
<span v-if="items?.length == 0">You have no anonymizations yet.</span>
|
|
<span v-if="items?.length > 0">Nothing matches the current filters.</span>
|
|
<div class="paper-table-empty-actions">
|
|
<button type="button" class="btn btn-outline-ink" v-if="hasActiveFilters()" @click="clearFilters()">Clear filters</button>
|
|
<a href="/anonymize" class="btn btn-ink" v-if="items?.length == 0"><i class="fa fa-plus-circle mr-1" aria-hidden="true"></i> New anonymization</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|