Conflicts: - `app/controllers/admin/dashboard_controller.rb`: Upstream completely redesigned the admin dashboard. glitch-soc tracked extra features, but that list is gone. Followed upstram. - `app/views/admin/dashboard/index.html.haml` Upstream completely redesigned the admin dashboard. glitch-soc tracked extra features, but that list is gone. Followed upstram.master
Claire
2 years ago
commit
694c073d1f
@ -0,0 +1,23 @@ |
||||
# frozen_string_literal: true |
||||
|
||||
class Api::V1::Admin::DimensionsController < Api::BaseController |
||||
protect_from_forgery with: :exception |
||||
|
||||
before_action :require_staff! |
||||
before_action :set_dimensions |
||||
|
||||
def create |
||||
render json: @dimensions, each_serializer: REST::Admin::DimensionSerializer |
||||
end |
||||
|
||||
private |
||||
|
||||
def set_dimensions |
||||
@dimensions = Admin::Metrics::Dimension.retrieve( |
||||
params[:keys], |
||||
params[:start_at], |
||||
params[:end_at], |
||||
params[:limit] |
||||
) |
||||
end |
||||
end |
||||
@ -0,0 +1,22 @@ |
||||
# frozen_string_literal: true |
||||
|
||||
class Api::V1::Admin::MeasuresController < Api::BaseController |
||||
protect_from_forgery with: :exception |
||||
|
||||
before_action :require_staff! |
||||
before_action :set_measures |
||||
|
||||
def create |
||||
render json: @measures, each_serializer: REST::Admin::MeasureSerializer |
||||
end |
||||
|
||||
private |
||||
|
||||
def set_measures |
||||
@measures = Admin::Metrics::Measure.retrieve( |
||||
params[:keys], |
||||
params[:start_at], |
||||
params[:end_at] |
||||
) |
||||
end |
||||
end |
||||
@ -0,0 +1,22 @@ |
||||
# frozen_string_literal: true |
||||
|
||||
class Api::V1::Admin::RetentionController < Api::BaseController |
||||
protect_from_forgery with: :exception |
||||
|
||||
before_action :require_staff! |
||||
before_action :set_cohorts |
||||
|
||||
def create |
||||
render json: @cohorts, each_serializer: REST::Admin::CohortSerializer |
||||
end |
||||
|
||||
private |
||||
|
||||
def set_cohorts |
||||
@cohorts = Admin::Metrics::Retention.new( |
||||
params[:start_at], |
||||
params[:end_at], |
||||
params[:frequency] |
||||
).cohorts |
||||
end |
||||
end |
||||
@ -0,0 +1,16 @@ |
||||
# frozen_string_literal: true |
||||
|
||||
class Api::V1::Admin::TrendsController < Api::BaseController |
||||
before_action :require_staff! |
||||
before_action :set_trends |
||||
|
||||
def index |
||||
render json: @trends, each_serializer: REST::Admin::TagSerializer |
||||
end |
||||
|
||||
private |
||||
|
||||
def set_trends |
||||
@trends = TrendingTags.get(10, filtered: false) |
||||
end |
||||
end |
||||
@ -0,0 +1,115 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import api from 'mastodon/api'; |
||||
import { FormattedNumber } from 'react-intl'; |
||||
import { Sparklines, SparklinesCurve } from 'react-sparklines'; |
||||
import classNames from 'classnames'; |
||||
import Skeleton from 'mastodon/components/skeleton'; |
||||
|
||||
const percIncrease = (a, b) => { |
||||
let percent; |
||||
|
||||
if (b !== 0) { |
||||
if (a !== 0) { |
||||
percent = (b - a) / a; |
||||
} else { |
||||
percent = 1; |
||||
} |
||||
} else if (b === 0 && a === 0) { |
||||
percent = 0; |
||||
} else { |
||||
percent = - 1; |
||||
} |
||||
|
||||
return percent; |
||||
}; |
||||
|
||||
export default class Counter extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
measure: PropTypes.string.isRequired, |
||||
start_at: PropTypes.string.isRequired, |
||||
end_at: PropTypes.string.isRequired, |
||||
label: PropTypes.string.isRequired, |
||||
href: PropTypes.string, |
||||
}; |
||||
|
||||
state = { |
||||
loading: true, |
||||
data: null, |
||||
}; |
||||
|
||||
componentDidMount () { |
||||
const { measure, start_at, end_at } = this.props; |
||||
|
||||
api().post('/api/v1/admin/measures', { keys: [measure], start_at, end_at }).then(res => { |
||||
this.setState({ |
||||
loading: false, |
||||
data: res.data, |
||||
}); |
||||
}).catch(err => { |
||||
console.error(err); |
||||
}); |
||||
} |
||||
|
||||
render () { |
||||
const { label, href } = this.props; |
||||
const { loading, data } = this.state; |
||||
|
||||
let content; |
||||
|
||||
if (loading) { |
||||
content = ( |
||||
<React.Fragment> |
||||
<span className='sparkline__value__total'><Skeleton width={43} /></span> |
||||
<span className='sparkline__value__change'><Skeleton width={43} /></span> |
||||
</React.Fragment> |
||||
); |
||||
} else { |
||||
const measure = data[0]; |
||||
const percentChange = percIncrease(measure.previous_total * 1, measure.total * 1); |
||||
|
||||
content = ( |
||||
<React.Fragment> |
||||
<span className='sparkline__value__total'><FormattedNumber value={measure.total} /></span> |
||||
<span className={classNames('sparkline__value__change', { positive: percentChange > 0, negative: percentChange < 0 })}>{percentChange > 0 && '+'}<FormattedNumber value={percentChange} style='percent' /></span> |
||||
</React.Fragment> |
||||
); |
||||
} |
||||
|
||||
const inner = ( |
||||
<React.Fragment> |
||||
<div className='sparkline__value'> |
||||
{content} |
||||
</div> |
||||
|
||||
<div className='sparkline__label'> |
||||
{label} |
||||
</div> |
||||
|
||||
<div className='sparkline__graph'> |
||||
{!loading && ( |
||||
<Sparklines width={259} height={55} data={data[0].data.map(x => x.value * 1)}> |
||||
<SparklinesCurve /> |
||||
</Sparklines> |
||||
)} |
||||
</div> |
||||
</React.Fragment> |
||||
); |
||||
|
||||
if (href) { |
||||
return ( |
||||
<a href={href} className='sparkline'> |
||||
{inner} |
||||
</a> |
||||
); |
||||
} else { |
||||
return ( |
||||
<div className='sparkline'> |
||||
{inner} |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,92 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import api from 'mastodon/api'; |
||||
import { FormattedNumber } from 'react-intl'; |
||||
import { roundTo10 } from 'mastodon/utils/numbers'; |
||||
import Skeleton from 'mastodon/components/skeleton'; |
||||
|
||||
export default class Dimension extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
dimension: PropTypes.string.isRequired, |
||||
start_at: PropTypes.string.isRequired, |
||||
end_at: PropTypes.string.isRequired, |
||||
limit: PropTypes.number.isRequired, |
||||
label: PropTypes.string.isRequired, |
||||
}; |
||||
|
||||
state = { |
||||
loading: true, |
||||
data: null, |
||||
}; |
||||
|
||||
componentDidMount () { |
||||
const { start_at, end_at, dimension, limit } = this.props; |
||||
|
||||
api().post('/api/v1/admin/dimensions', { keys: [dimension], start_at, end_at, limit }).then(res => { |
||||
this.setState({ |
||||
loading: false, |
||||
data: res.data, |
||||
}); |
||||
}).catch(err => { |
||||
console.error(err); |
||||
}); |
||||
} |
||||
|
||||
render () { |
||||
const { label, limit } = this.props; |
||||
const { loading, data } = this.state; |
||||
|
||||
let content; |
||||
|
||||
if (loading) { |
||||
content = ( |
||||
<table> |
||||
<tbody> |
||||
{Array.from(Array(limit)).map((_, i) => ( |
||||
<tr className='dimension__item' key={i}> |
||||
<td className='dimension__item__key'> |
||||
<Skeleton width={100} /> |
||||
</td> |
||||
|
||||
<td className='dimension__item__value'> |
||||
<Skeleton width={60} /> |
||||
</td> |
||||
</tr> |
||||
))} |
||||
</tbody> |
||||
</table> |
||||
); |
||||
} else { |
||||
const sum = data[0].data.reduce((sum, cur) => sum + (cur.value * 1), 0); |
||||
|
||||
content = ( |
||||
<table> |
||||
<tbody> |
||||
{data[0].data.map(item => ( |
||||
<tr className='dimension__item' key={item.key}> |
||||
<td className='dimension__item__key'> |
||||
<span className={`dimension__item__indicator dimension__item__indicator--${roundTo10(((item.value * 1) / sum) * 100)}`} /> |
||||
<span title={item.key}>{item.human_key}</span> |
||||
</td> |
||||
|
||||
<td className='dimension__item__value'> |
||||
{typeof item.human_value !== 'undefined' ? item.human_value : <FormattedNumber value={item.value} />} |
||||
</td> |
||||
</tr> |
||||
))} |
||||
</tbody> |
||||
</table> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<div className='dimension'> |
||||
<h4>{label}</h4> |
||||
|
||||
{content} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,141 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import api from 'mastodon/api'; |
||||
import { FormattedMessage, FormattedNumber, FormattedDate } from 'react-intl'; |
||||
import classNames from 'classnames'; |
||||
import { roundTo10 } from 'mastodon/utils/numbers'; |
||||
|
||||
const dateForCohort = cohort => { |
||||
switch(cohort.frequency) { |
||||
case 'day': |
||||
return <FormattedDate value={cohort.period} month='long' day='2-digit' />; |
||||
default: |
||||
return <FormattedDate value={cohort.period} month='long' year='numeric' />; |
||||
} |
||||
}; |
||||
|
||||
export default class Retention extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
start_at: PropTypes.string, |
||||
end_at: PropTypes.string, |
||||
frequency: PropTypes.string, |
||||
}; |
||||
|
||||
state = { |
||||
loading: true, |
||||
data: null, |
||||
}; |
||||
|
||||
componentDidMount () { |
||||
const { start_at, end_at, frequency } = this.props; |
||||
|
||||
api().post('/api/v1/admin/retention', { start_at, end_at, frequency }).then(res => { |
||||
this.setState({ |
||||
loading: false, |
||||
data: res.data, |
||||
}); |
||||
}).catch(err => { |
||||
console.error(err); |
||||
}); |
||||
} |
||||
|
||||
render () { |
||||
const { loading, data } = this.state; |
||||
|
||||
let content; |
||||
|
||||
if (loading) { |
||||
content = <FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' />; |
||||
} else { |
||||
content = ( |
||||
<table className='retention__table'> |
||||
<thead> |
||||
<tr> |
||||
<th> |
||||
<div className='retention__table__date retention__table__label'> |
||||
<FormattedMessage id='admin.dashboard.retention.cohort' defaultMessage='Sign-up month' /> |
||||
</div> |
||||
</th> |
||||
|
||||
<th> |
||||
<div className='retention__table__number retention__table__label'> |
||||
<FormattedMessage id='admin.dashboard.retention.cohort_size' defaultMessage='New users' /> |
||||
</div> |
||||
</th> |
||||
|
||||
{data[0].data.slice(1).map((retention, i) => ( |
||||
<th key={retention.date}> |
||||
<div className='retention__table__number retention__table__label'> |
||||
{i + 1} |
||||
</div> |
||||
</th> |
||||
))} |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td> |
||||
<div className='retention__table__date retention__table__average'> |
||||
<FormattedMessage id='admin.dashboard.retention.average' defaultMessage='Average' /> |
||||
</div> |
||||
</td> |
||||
|
||||
<td> |
||||
<div className='retention__table__size'> |
||||
<FormattedNumber value={data.reduce((sum, cohort, i) => sum + ((cohort.data[0].value * 1) - sum) / (i + 1), 0)} maximumFractionDigits={0} /> |
||||
</div> |
||||
</td> |
||||
|
||||
{data[0].data.slice(1).map((retention, i) => { |
||||
const average = data.reduce((sum, cohort, k) => cohort.data[i + 1] ? sum + (cohort.data[i + 1].percent - sum)/(k + 1) : sum, 0); |
||||
|
||||
return ( |
||||
<td key={retention.date}> |
||||
<div className={classNames('retention__table__box', 'retention__table__average', `retention__table__box--${roundTo10(average * 100)}`)}> |
||||
<FormattedNumber value={average} style='percent' /> |
||||
</div> |
||||
</td> |
||||
); |
||||
})} |
||||
</tr> |
||||
</thead> |
||||
|
||||
<tbody> |
||||
{data.slice(0, -1).map(cohort => ( |
||||
<tr key={cohort.period}> |
||||
<td> |
||||
<div className='retention__table__date'> |
||||
{dateForCohort(cohort)} |
||||
</div> |
||||
</td> |
||||
|
||||
<td> |
||||
<div className='retention__table__size'> |
||||
<FormattedNumber value={cohort.data[0].value} /> |
||||
</div> |
||||
</td> |
||||
|
||||
{cohort.data.slice(1).map(retention => ( |
||||
<td key={retention.date}> |
||||
<div className={classNames('retention__table__box', `retention__table__box--${roundTo10(retention.percent * 100)}`)}> |
||||
<FormattedNumber value={retention.percent} style='percent' /> |
||||
</div> |
||||
</td> |
||||
))} |
||||
</tr> |
||||
))} |
||||
</tbody> |
||||
</table> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<div className='retention'> |
||||
<h4><FormattedMessage id='admin.dashboard.retention' defaultMessage='Retention' /></h4> |
||||
|
||||
{content} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,73 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import api from 'mastodon/api'; |
||||
import { FormattedMessage } from 'react-intl'; |
||||
import classNames from 'classnames'; |
||||
import Hashtag from 'mastodon/components/hashtag'; |
||||
|
||||
export default class Trends extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
limit: PropTypes.number.isRequired, |
||||
}; |
||||
|
||||
state = { |
||||
loading: true, |
||||
data: null, |
||||
}; |
||||
|
||||
componentDidMount () { |
||||
const { limit } = this.props; |
||||
|
||||
api().get('/api/v1/admin/trends', { params: { limit } }).then(res => { |
||||
this.setState({ |
||||
loading: false, |
||||
data: res.data, |
||||
}); |
||||
}).catch(err => { |
||||
console.error(err); |
||||
}); |
||||
} |
||||
|
||||
render () { |
||||
const { limit } = this.props; |
||||
const { loading, data } = this.state; |
||||
|
||||
let content; |
||||
|
||||
if (loading) { |
||||
content = ( |
||||
<div> |
||||
{Array.from(Array(limit)).map((_, i) => ( |
||||
<Hashtag key={i} /> |
||||
))} |
||||
</div> |
||||
); |
||||
} else { |
||||
content = ( |
||||
<div> |
||||
{data.map(hashtag => ( |
||||
<Hashtag |
||||
key={hashtag.name} |
||||
name={hashtag.name} |
||||
href={`/admin/tags/${hashtag.id}`} |
||||
people={hashtag.history[0].accounts * 1 + hashtag.history[1].accounts * 1} |
||||
uses={hashtag.history[0].uses * 1 + hashtag.history[1].uses * 1} |
||||
history={hashtag.history.reverse().map(day => day.uses)} |
||||
className={classNames(hashtag.requires_review && 'trends__item--requires-review', !hashtag.trendable && !hashtag.requires_review && 'trends__item--disabled')} |
||||
/> |
||||
))} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<div className='trends trends--compact'> |
||||
<h4><FormattedMessage id='trends.trending_now' defaultMessage='Trending now' /></h4> |
||||
|
||||
{content} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
|
||||
const Skeleton = ({ width, height }) => <span className='skeleton' style={{ width, height }}>‌</span>; |
||||
|
||||
Skeleton.propTypes = { |
||||
width: PropTypes.number, |
||||
height: PropTypes.number, |
||||
}; |
||||
|
||||
export default Skeleton; |
||||
@ -0,0 +1,26 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { IntlProvider, addLocaleData } from 'react-intl'; |
||||
import { getLocale } from '../locales'; |
||||
|
||||
const { localeData, messages } = getLocale(); |
||||
addLocaleData(localeData); |
||||
|
||||
export default class AdminComponent extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
locale: PropTypes.string.isRequired, |
||||
children: PropTypes.node.isRequired, |
||||
}; |
||||
|
||||
render () { |
||||
const { locale, children } = this.props; |
||||
|
||||
return ( |
||||
<IntlProvider locale={locale} messages={messages}> |
||||
{children} |
||||
</IntlProvider> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -1,29 +1,73 @@ |
||||
# frozen_string_literal: true |
||||
|
||||
class ActivityTracker |
||||
include Redisable |
||||
|
||||
EXPIRE_AFTER = 6.months.seconds |
||||
|
||||
class << self |
||||
include Redisable |
||||
def initialize(prefix, type) |
||||
@prefix = prefix |
||||
@type = type |
||||
end |
||||
|
||||
def increment(prefix) |
||||
key = [prefix, current_week].join(':') |
||||
def add(value = 1, at_time = Time.now.utc) |
||||
key = key_at(at_time) |
||||
|
||||
redis.incrby(key, 1) |
||||
redis.expire(key, EXPIRE_AFTER) |
||||
case @type |
||||
when :basic |
||||
redis.incrby(key, value) |
||||
when :unique |
||||
redis.pfadd(key, value) |
||||
end |
||||
|
||||
def record(prefix, value) |
||||
key = [prefix, current_week].join(':') |
||||
redis.expire(key, EXPIRE_AFTER) |
||||
end |
||||
|
||||
redis.pfadd(key, value) |
||||
redis.expire(key, EXPIRE_AFTER) |
||||
def get(start_at, end_at = Time.now.utc) |
||||
(start_at.to_date...end_at.to_date).map do |date| |
||||
key = key_at(date.to_time(:utc)) |
||||
|
||||
value = begin |
||||
case @type |
||||
when :basic |
||||
redis.get(key).to_i |
||||
when :unique |
||||
redis.pfcount(key) |
||||
end |
||||
end |
||||
|
||||
[date, value] |
||||
end |
||||
end |
||||
|
||||
def sum(start_at, end_at = Time.now.utc) |
||||
keys = (start_at.to_date...end_at.to_date).flat_map { |date| [key_at(date.to_time(:utc)), legacy_key_at(date)] }.uniq |
||||
|
||||
case @type |
||||
when :basic |
||||
redis.mget(*keys).map(&:to_i).sum |
||||
when :unique |
||||
redis.pfcount(*keys) |
||||
end |
||||
end |
||||
|
||||
private |
||||
class << self |
||||
def increment(prefix) |
||||
new(prefix, :basic).add |
||||
end |
||||
|
||||
def current_week |
||||
Time.zone.today.cweek |
||||
def record(prefix, value) |
||||
new(prefix, :unique).add(value) |
||||
end |
||||
end |
||||
|
||||
private |
||||
|
||||
def key_at(at_time) |
||||
"#{@prefix}:#{at_time.beginning_of_day.to_i}" |
||||
end |
||||
|
||||
def legacy_key_at(at_time) |
||||
"#{@prefix}:#{at_time.to_date.cweek}" |
||||
end |
||||
end |
||||
|
||||
@ -0,0 +1,15 @@ |
||||
# frozen_string_literal: true |
||||
|
||||
class Admin::Metrics::Dimension |
||||
DIMENSIONS = { |
||||
languages: Admin::Metrics::Dimension::LanguagesDimension, |
||||
sources: Admin::Metrics::Dimension::SourcesDimension, |
||||
servers: Admin::Metrics::Dimension::ServersDimension, |
||||
space_usage: Admin::Metrics::Dimension::SpaceUsageDimension, |
||||
software_versions: Admin::Metrics::Dimension::SoftwareVersionsDimension, |
||||
}.freeze |
||||
|
||||
def self.retrieve(dimension_keys, start_at, end_at, limit) |
||||
Array(dimension_keys).map { |key| DIMENSIONS[key.to_sym]&.new(start_at, end_at, limit) }.compact |
||||
end |
||||
end |
||||
@ -0,0 +1,31 @@ |
||||
# frozen_string_literal: true |
||||
|
||||
class Admin::Metrics::Dimension::BaseDimension |
||||
def initialize(start_at, end_at, limit) |
||||
@start_at = start_at&.to_datetime |
||||
@end_at = end_at&.to_datetime |
||||
@limit = limit&.to_i |
||||
end |
||||
|
||||
def key |
||||
raise NotImplementedError |
||||
end |
||||
|
||||
def data |
||||
raise NotImplementedError |
||||
end | ||||