Browse Source

Merge remote-tracking branch 'glitch/main'

main
embr 1 month ago
parent
commit
80f9fdb8bc
  1. 1
      Dockerfile
  2. 4
      Gemfile
  3. 32
      Gemfile.lock
  4. 12
      Vagrantfile
  5. 37
      app/controllers/admin/dashboard_controller.rb
  6. 23
      app/controllers/api/v1/admin/dimensions_controller.rb
  7. 22
      app/controllers/api/v1/admin/measures_controller.rb
  8. 22
      app/controllers/api/v1/admin/retention_controller.rb
  9. 16
      app/controllers/api/v1/admin/trends_controller.rb
  10. 27
      app/controllers/api/v1/instances/activity_controller.rb
  11. 7
      app/controllers/media_controller.rb
  12. 4
      app/helpers/application_helper.rb
  13. 1
      app/helpers/settings_helper.rb
  14. 115
      app/javascript/flavours/glitch/components/admin/Counter.js
  15. 92
      app/javascript/flavours/glitch/components/admin/Dimension.js
  16. 141
      app/javascript/flavours/glitch/components/admin/Retention.js
  17. 73
      app/javascript/flavours/glitch/components/admin/Trends.js
  18. 61
      app/javascript/flavours/glitch/components/hashtag.js
  19. 27
      app/javascript/flavours/glitch/components/poll.js
  20. 11
      app/javascript/flavours/glitch/components/skeleton.js
  21. 26
      app/javascript/flavours/glitch/containers/admin_component.js
  22. 2
      app/javascript/flavours/glitch/containers/media_container.js
  23. 2
      app/javascript/flavours/glitch/features/compose/components/search_results.js
  24. 2
      app/javascript/flavours/glitch/features/getting_started/components/trends.js
  25. 24
      app/javascript/flavours/glitch/packs/admin.js
  26. 193
      app/javascript/flavours/glitch/styles/admin.scss
  27. 53
      app/javascript/flavours/glitch/styles/components/search.scss
  28. 57
      app/javascript/flavours/glitch/styles/dashboard.scss
  29. 2
      app/javascript/flavours/glitch/theme.yml
  30. 8
      app/javascript/flavours/glitch/util/numbers.js
  31. 2
      app/javascript/flavours/vanilla/theme.yml
  32. 115
      app/javascript/mastodon/components/admin/Counter.js
  33. 92
      app/javascript/mastodon/components/admin/Dimension.js
  34. 141
      app/javascript/mastodon/components/admin/Retention.js
  35. 73
      app/javascript/mastodon/components/admin/Trends.js
  36. 61
      app/javascript/mastodon/components/hashtag.js
  37. 27
      app/javascript/mastodon/components/poll.js
  38. 11
      app/javascript/mastodon/components/skeleton.js
  39. 26
      app/javascript/mastodon/containers/admin_component.js
  40. 2
      app/javascript/mastodon/containers/media_container.js
  41. 2
      app/javascript/mastodon/features/compose/components/search_results.js
  42. 2
      app/javascript/mastodon/features/getting_started/components/trends.js
  43. 8
      app/javascript/mastodon/utils/numbers.js
  44. 24
      app/javascript/packs/admin.js
  45. 2
      app/javascript/styles/fonts/montserrat.scss
  46. 1
      app/javascript/styles/fonts/roboto-mono.scss
  47. 4
      app/javascript/styles/fonts/roboto.scss
  48. 193
      app/javascript/styles/mastodon/admin.scss
  49. 53
      app/javascript/styles/mastodon/components.scss
  50. 57
      app/javascript/styles/mastodon/dashboard.scss
  51. 70
      app/lib/activity_tracker.rb
  52. 15
      app/lib/admin/metrics/dimension.rb
  53. 31
      app/lib/admin/metrics/dimension/base_dimension.rb
  54. 23
      app/lib/admin/metrics/dimension/languages_dimension.rb
  55. 23
      app/lib/admin/metrics/dimension/servers_dimension.rb
  56. 69
      app/lib/admin/metrics/dimension/software_versions_dimension.rb
  57. 23
      app/lib/admin/metrics/dimension/sources_dimension.rb
  58. 70
      app/lib/admin/metrics/dimension/space_usage_dimension.rb
  59. 15
      app/lib/admin/metrics/measure.rb
  60. 33
      app/lib/admin/metrics/measure/active_users_measure.rb
  61. 46
      app/lib/admin/metrics/measure/base_measure.rb
  62. 33
      app/lib/admin/metrics/measure/interactions_measure.rb
  63. 35
      app/lib/admin/metrics/measure/new_users_measure.rb
  64. 35
      app/lib/admin/metrics/measure/opened_reports_measure.rb
  65. 36
      app/lib/admin/metrics/measure/resolved_reports_measure.rb
  66. 67
      app/lib/admin/metrics/retention.rb
  67. 4
      app/models/account_statuses_cleanup_policy.rb
  68. 2
      app/models/admin/action_log_filter.rb
  69. 2
      app/models/media_attachment.rb
  70. 2
      app/models/status.rb
  71. 4
      app/presenters/instance_presenter.rb
  72. 19
      app/serializers/rest/admin/cohort_serializer.rb
  73. 5
      app/serializers/rest/admin/dimension_serializer.rb
  74. 13
      app/serializers/rest/admin/measure_serializer.rb
  75. 13
      app/serializers/rest/admin/tag_serializer.rb
  76. 3
      app/services/post_status_service.rb
  77. 2
      app/validators/reaction_validator.rb
  78. 184
      app/views/admin/dashboard/index.html.haml
  79. 6
      chart/Chart.lock
  80. 2
      chart/Chart.yaml
  81. 1
      config/application.rb
  82. 2
      config/environments/production.rb
  83. 31
      config/initializers/twitter_regex.rb
  84. 50
      config/locales/en.yml
  85. 6
      config/routes.rb
  86. 52
      gemset.nix
  87. 22
      lib/cli.rb
  88. 11
      lib/mastodon/accounts_cli.rb
  89. 34
      package.json
  90. 63
      spec/controllers/media_controller_spec.rb
  91. 8
      spec/models/account_statuses_cleanup_policy_spec.rb
  92. 20
      spec/models/media_attachment_spec.rb
  93. 50
      spec/services/post_status_service_spec.rb
  94. 44
      spec/views/statuses/show.html.haml_spec.rb
  95. 2
      streaming/index.js
  96. 1181
      yarn.lock
  97. 744
      yarn.nix

1
Dockerfile

@ -56,6 +56,7 @@ COPY Gemfile* package.json yarn.lock /opt/mastodon/
RUN cd /opt/mastodon && \
bundle config set deployment 'true' && \
bundle config set without 'development test' && \
bundle config set silence_root_warning true && \
bundle install -j"$(nproc)" && \
yarn install --pure-lockfile

4
Gemfile

@ -5,7 +5,7 @@ ruby '>= 2.5.0', '< 3.1.0'
gem 'pkg-config', '~> 1.4'
gem 'puma', '~> 5.4'
gem 'puma', '~> 5.5'
gem 'rails', '~> 6.1.4'
gem 'sprockets', '~> 3.7.2'
gem 'thor', '~> 1.1'
@ -136,7 +136,7 @@ group :development do
gem 'letter_opener', '~> 1.7'
gem 'letter_opener_web', '~> 1.4'
gem 'memory_profiler'
gem 'rubocop', '~> 1.21', require: false
gem 'rubocop', '~> 1.22', require: false
gem 'rubocop-rails', '~> 2.12', require: false
gem 'brakeman', '~> 5.1', require: false
gem 'bundler-audit', '~> 0.9', require: false

32
Gemfile.lock

@ -188,7 +188,7 @@ GEM
docile (1.3.4)
domain_name (0.5.20190701)
unf (>= 0.0.5, < 1.0.0)
doorkeeper (5.5.3)
doorkeeper (5.5.4)
railties (>= 5)
dotenv (2.7.6)
dotenv-rails (2.7.6)
@ -262,7 +262,7 @@ GEM
hiredis (0.6.3)
hkdf (0.3.0)
htmlentities (4.3.4)
http (5.0.2)
http (5.0.4)
addressable (~> 2.8)
http-cookie (~> 1.0)
http-form_data (~> 2.2)
@ -326,7 +326,7 @@ GEM
addressable (~> 2.7)
letter_opener (1.7.0)
launchy (~> 2.2)
letter_opener_web (1.4.0)
letter_opener_web (1.4.1)
actionmailer (>= 3.2)
letter_opener (~> 1.0)
railties (>= 3.2)
@ -357,7 +357,7 @@ GEM
mime-types (3.3.1)
mime-types-data (~> 3.2015)
mime-types-data (3.2020.0512)
mini_mime (1.1.1)
mini_mime (1.1.2)
mini_portile2 (2.6.1)
minitest (5.14.4)
msgpack (1.4.2)
@ -376,7 +376,7 @@ GEM
concurrent-ruby (~> 1.0, >= 1.0.2)
sidekiq (>= 3.5)
statsd-ruby (~> 1.4, >= 1.4.0)
oj (3.13.7)
oj (3.13.9)
omniauth (1.9.1)
hashie (>= 3.4.6)
rack (>= 1.6.2, < 3)
@ -424,7 +424,7 @@ GEM
pry-rails (0.3.9)
pry (>= 0.10.4)
public_suffix (4.0.6)
puma (5.4.0)
puma (5.5.1)
nio4r (~> 2.0)
pundit (2.1.1)
activesupport (>= 3.0.0)
@ -520,18 +520,18 @@ GEM
rspec-support (3.10.2)
rspec_junit_formatter (0.4.1)
rspec-core (>= 2, < 4, != 2.12.0)
rubocop (1.21.0)
rubocop (1.22.1)
parallel (~> 1.10)
parser (>= 3.0.0.0)
rainbow (>= 2.2.2, < 4.0)
regexp_parser (>= 1.8, < 3.0)
rexml
rubocop-ast (>= 1.9.1, < 2.0)
rubocop-ast (>= 1.12.0, < 2.0)
ruby-progressbar (~> 1.7)
unicode-display_width (>= 1.4.0, < 3.0)
rubocop-ast (1.11.0)
rubocop-ast (1.12.0)
parser (>= 3.0.1.1)
rubocop-rails (2.12.2)
rubocop-rails (2.12.3)
activesupport (>= 4.2.0)
rack (>= 1.1)
rubocop (>= 1.7.0, < 2.0)
@ -565,7 +565,7 @@ GEM
sidekiq (>= 3)
thwait
tilt (>= 1.4.0)
sidekiq-unique-jobs (7.1.7)
sidekiq-unique-jobs (7.1.8)
brpoplpush-redis_script (> 0.1.1, <= 2.0.0)
concurrent-ruby (~> 1.0, >= 1.0.5)
sidekiq (>= 5.0, < 8.0)
@ -623,12 +623,12 @@ GEM
unf (~> 0.1.0)
tzinfo (2.0.4)
concurrent-ruby (~> 1.0)
tzinfo-data (1.2021.2)
tzinfo-data (1.2021.3)
tzinfo (>= 1.0.0)
unf (0.1.4)
unf_ext
unf_ext (0.0.7.7)
unicode-display_width (1.7.0)
unf_ext (0.0.8)
unicode-display_width (1.8.0)
uniform_notifier (1.14.2)
warden (1.2.9)
rack (>= 2.0.9)
@ -748,7 +748,7 @@ DEPENDENCIES
private_address_check (~> 0.5)
pry-byebug (~> 3.9)
pry-rails (~> 0.3)
puma (~> 5.4)
puma (~> 5.5)
pundit (~> 2.1)
rack (~> 2.2.3)
rack-attack (~> 6.5)
@ -765,7 +765,7 @@ DEPENDENCIES
rspec-rails (~> 5.0)
rspec-sidekiq (~> 3.1)
rspec_junit_formatter (~> 0.4)
rubocop (~> 1.21)
rubocop (~> 1.22)
rubocop-rails (~> 2.12)
ruby-progressbar (~> 1.11)
sanitize (~> 6.0)

12
Vagrantfile

@ -45,16 +45,8 @@ sudo apt-get install \
# Install rvm
read RUBY_VERSION < .ruby-version
gpg_command="gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB"
$($gpg_command)
if [ $? -ne 0 ];then
echo "GPG command failed, This prevented RVM from installing."
echo "Retrying once..." && $($gpg_command)
if [ $? -ne 0 ];then
echo "GPG failed for the second time, please ensure network connectivity."
echo "Exiting..." && exit 1
fi
fi
curl -sSL https://rvm.io/mpapis.asc | gpg --import
curl -sSL https://rvm.io/pkuczynski.asc | gpg --import
curl -sSL https://raw.githubusercontent.com/rvm/rvm/stable/binscripts/rvm-installer | bash -s stable --ruby=$RUBY_VERSION
source /home/vagrant/.rvm/scripts/rvm

37
app/controllers/admin/dashboard_controller.rb

@ -1,50 +1,17 @@
# frozen_string_literal: true
require 'sidekiq/api'
module Admin
class DashboardController < BaseController
def index
@system_checks = Admin::SystemCheck.perform
@users_count = User.count
@time_period = (1.month.ago.to_date...Time.now.utc.to_date)
@pending_users_count = User.pending.count
@registrations_week = Redis.current.get("activity:accounts:local:#{current_week}") || 0
@logins_week = Redis.current.pfcount("activity:logins:#{current_week}")
@interactions_week = Redis.current.get("activity:interactions:#{current_week}") || 0
@relay_enabled = Relay.enabled.exists?
@single_user_mode = Rails.configuration.x.single_user_mode
@registrations_enabled = Setting.registrations_mode != 'none'
@deletions_enabled = Setting.open_deletion
@invites_enabled = Setting.min_invite_role == 'user'
@search_enabled = Chewy.enabled?
@version = Mastodon::Version.to_s
@database_version = ActiveRecord::Base.connection.execute('SELECT VERSION()').first['version'].match(/\A(?:PostgreSQL |)([^\s]+).*\z/)[1]
@redis_version = redis_info['redis_version']
@reports_count = Report.unresolved.count
@queue_backlog = Sidekiq::Stats.new.enqueued
@recent_users = User.confirmed.recent.includes(:account).limit(8)
@database_size = ActiveRecord::Base.connection.execute('SELECT pg_database_size(current_database())').first['pg_database_size']
@redis_size = redis_info['used_memory']
@ldap_enabled = ENV['LDAP_ENABLED'] == 'true'
@cas_enabled = ENV['CAS_ENABLED'] == 'true'
@saml_enabled = ENV['SAML_ENABLED'] == 'true'
@pam_enabled = ENV['PAM_ENABLED'] == 'true'
@hidden_service = ENV['ALLOW_ACCESS_TO_HIDDEN_SERVICE'] == 'true'
@trending_hashtags = TrendingTags.get(10, filtered: false)
@pending_reports_count = Report.unresolved.count
@pending_tags_count = Tag.pending_review.count
@authorized_fetch = authorized_fetch_mode?
@whitelist_enabled = whitelist_mode?
@profile_directory = Setting.profile_directory
@timeline_preview = Setting.timeline_preview
@keybase_integration = Setting.enable_keybase
@trends_enabled = Setting.trends
end
private
def current_week
@current_week ||= Time.now.utc.to_date.cweek
end
def redis_info
@redis_info ||= begin
if Redis.current.is_a?(Redis::Namespace)

23
app/controllers/api/v1/admin/dimensions_controller.rb

@ -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

22
app/controllers/api/v1/admin/measures_controller.rb

@ -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

22
app/controllers/api/v1/admin/retention_controller.rb

@ -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

16
app/controllers/api/v1/admin/trends_controller.rb

@ -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

27
app/controllers/api/v1/instances/activity_controller.rb

@ -14,22 +14,21 @@ class Api::V1::Instances::ActivityController < Api::BaseController
private
def activity
weeks = []
12.times do |i|
day = i.weeks.ago.to_date
week_id = day.cweek
week = Date.commercial(day.cwyear, week_id)
weeks << {
week: week.to_time.to_i.to_s,
statuses: Redis.current.get("activity:statuses:local:#{week_id}") || '0',
logins: Redis.current.pfcount("activity:logins:#{week_id}").to_s,
registrations: Redis.current.get("activity:accounts:local:#{week_id}") || '0',
statuses_tracker = ActivityTracker.new('activity:statuses:local', :basic)
logins_tracker = ActivityTracker.new('activity:logins', :unique)
registrations_tracker = ActivityTracker.new('activity:accounts:local', :basic)
(0...12).map do |i|
start_of_week = i.weeks.ago
end_of_week = start_of_week + 6.days
{
week: start_of_week.to_i.to_s,
statuses: statuses_tracker.sum(start_of_week, end_of_week).to_s,
logins: logins_tracker.sum(start_of_week, end_of_week).to_s,
registrations: registrations_tracker.sum(start_of_week, end_of_week).to_s,
}
end
weeks
end
def require_enabled_api!

7
app/controllers/media_controller.rb

@ -28,7 +28,12 @@ class MediaController < ApplicationController
private
def set_media_attachment
@media_attachment = MediaAttachment.attached.find_by!(shortcode: params[:id] || params[:medium_id])
id = params[:id] || params[:medium_id]
return if id.nil?
scope = MediaAttachment.local.attached
# If id is 19 characters long, it's a shortcode, otherwise it's an identifier
@media_attachment = id.size == 19 ? scope.find_by!(shortcode: id) : scope.find_by!(id: id)
end
def verify_permitted_status!

4
app/helpers/application_helper.rb

@ -137,6 +137,10 @@ module ApplicationHelper
end
end
def react_admin_component(name, props = {})
content_tag(:div, nil, data: { 'admin-component': name.to_s.camelcase, props: Oj.dump({ locale: I18n.locale }.merge(props)) })
end
def body_classes
output = (@body_classes || '').split(' ')
output << "flavour-#{current_flavour.parameterize}"

1
app/helpers/settings_helper.rb

@ -41,6 +41,7 @@ module SettingsHelper
ka: 'ქართული',
kab: 'Taqbaylit',
kk: 'Қазақша',
kmr: 'Kurmancî',
kn: 'ಕನ್ನಡ',
ko: '한국어',
ku: 'سۆرانی',

115
app/javascript/flavours/glitch/components/admin/Counter.js

@ -0,0 +1,115 @@
import React from 'react';
import PropTypes from 'prop-types';
import api from 'flavours/glitch/util/api';
import { FormattedNumber } from 'react-intl';
import { Sparklines, SparklinesCurve } from 'react-sparklines';
import classNames from 'classnames';
import Skeleton from 'flavours/glitch/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>
);
}
}
}

92
app/javascript/flavours/glitch/components/admin/Dimension.js

@ -0,0 +1,92 @@
import React from 'react';
import PropTypes from 'prop-types';
import api from 'flavours/glitch/util/api';
import { FormattedNumber } from 'react-intl';
import { roundTo10 } from 'flavours/glitch/util/numbers';
import Skeleton from 'flavours/glitch/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>
);
}
}

141
app/javascript/flavours/glitch/components/admin/Retention.js

@ -0,0 +1,141 @@
import React from 'react';
import PropTypes from 'prop-types';
import api from 'flavours/glitch/util/api';
import { FormattedMessage, FormattedNumber, FormattedDate } from 'react-intl';
import classNames from 'classnames';
import { roundTo10 } from 'flavours/glitch/util/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>
);
}
}

73
app/javascript/flavours/glitch/components/admin/Trends.js

@ -0,0 +1,73 @@
import React from 'react';
import PropTypes from 'prop-types';
import api from 'flavours/glitch/util/api';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import Hashtag from 'flavours/glitch/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>
);
}
}

61
app/javascript/flavours/glitch/components/hashtag.js

@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Permalink from './permalink';
import ShortNumber from 'flavours/glitch/components/short_number';
import Skeleton from 'flavours/glitch/components/skeleton';
import classNames from 'classnames';
class SilentErrorBoundary extends React.Component {
@ -47,45 +49,38 @@ const accountsCountRenderer = (displayNumber, pluralReady) => (
/>
);
const Hashtag = ({ hashtag }) => (
<div className='trends__item'>
export const ImmutableHashtag = ({ hashtag }) => (
<Hashtag
name={hashtag.get('name')}
href={hashtag.get('url')}
to={`/tags/${hashtag.get('name')}`}
people={hashtag.getIn(['history', 0, 'accounts']) * 1 + hashtag.getIn(['history', 1, 'accounts']) * 1}
uses={hashtag.getIn(['history', 0, 'uses']) * 1 + hashtag.getIn(['history', 1, 'uses']) * 1}
history={hashtag.get('history').reverse().map((day) => day.get('uses')).toArray()}
/>
);
ImmutableHashtag.propTypes = {
hashtag: ImmutablePropTypes.map.isRequired,
};
const Hashtag = ({ name, href, to, people, uses, history, className }) => (
<div className={classNames('trends__item', className)}>
<div className='trends__item__name'>
<Permalink
href={hashtag.get('url')}
to={`/tags/${hashtag.get('name')}`}
>
#<span>{hashtag.get('name')}</span>
<Permalink href={href} to={to}>
{name ? <React.Fragment>#<span>{name}</span></React.Fragment> : <Skeleton width={50} />}
</Permalink>
<ShortNumber
value={
hashtag.getIn(['history', 0, 'accounts']) * 1 +
hashtag.getIn(['history', 1, 'accounts']) * 1
}
renderer={accountsCountRenderer}
/>
{typeof people !== 'undefined' ? <ShortNumber value={people} renderer={accountsCountRenderer} /> : <Skeleton width={100} />}
</div>
<div className='trends__item__current'>
<ShortNumber
value={
hashtag.getIn(['history', 0, 'uses']) * 1 +
hashtag.getIn(['history', 1, 'uses']) * 1
}
/>
{typeof uses !== 'undefined' ? <ShortNumber value={uses} /> : <Skeleton width={42} height={36} />}
</div>
<div className='trends__item__sparkline'>
<SilentErrorBoundary>
<Sparklines
width={50}
height={28}
data={hashtag
.get('history')
.reverse()
.map((day) => day.get('uses'))
.toArray()}
>
<Sparklines width={50} height={28} data={history ? history : Array.from(Array(7)).map(() => 0)}>
<SparklinesCurve style={{ fill: 'none' }} />
</Sparklines>
</SilentErrorBoundary>
@ -94,7 +89,13 @@ const Hashtag = ({ hashtag }) => (
);
Hashtag.propTypes = {
hashtag: ImmutablePropTypes.map.isRequired,
name: PropTypes.string,
href: PropTypes.string,
to: PropTypes.string,
people: PropTypes.number,
uses: PropTypes.number,
history: PropTypes.arrayOf(PropTypes.number),
className: PropTypes.string,
};
export default Hashtag;

27
app/javascript/flavours/glitch/components/poll.js

@ -12,8 +12,18 @@ import RelativeTimestamp from './relative_timestamp';
import Icon from 'flavours/glitch/components/icon';
const messages = defineMessages({
closed: { id: 'poll.closed', defaultMessage: 'Closed' },
voted: { id: 'poll.voted', defaultMessage: 'You voted for this answer', description: 'Tooltip of the "voted" checkmark in polls' },
closed: {
id: 'poll.closed',
defaultMessage: 'Closed',
},
voted: {
id: 'poll.voted',
defaultMessage: 'You voted for this answer',
},
votes: {
id: 'poll.votes',
defaultMessage: '{votes, plural, one {# vote} other {# votes}}',
},
});
const makeEmojiMap = record => record.get('emojis').reduce((obj, emoji) => {
@ -148,9 +158,16 @@ class Poll extends ImmutablePureComponent {
data-index={optionIndex}
/>
)}
{showResults && <span className='poll__number'>
{Math.round(percent)}%
</span>}
{showResults && (
<span
className='poll__number'
title={intl.formatMessage(messages.votes, {
votes: option.get('votes_count'),
})}
>
{Math.round(percent)}%
</span>
)}
<span
className='poll__option__text translate'

11
app/javascript/flavours/glitch/components/skeleton.js

@ -0,0 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
const Skeleton = ({ width, height }) => <span className='skeleton' style={{ width, height }}>&zwnj;</span>;
Skeleton.propTypes = {
width: PropTypes.number,
height: PropTypes.number,
};
export default Skeleton;

26
app/javascript/flavours/glitch/containers/admin_component.js

@ -0,0 +1,26 @@
import React from 'react';
import PropTypes from 'prop-types';
import { IntlProvider, addLocaleData } from 'react-intl';
import { getLocale } from 'mastodon/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>
);
}
}

2
app/javascript/flavours/glitch/containers/media_container.js

@ -7,7 +7,7 @@ import { getLocale } from 'mastodon/locales';
import { getScrollbarWidth } from 'flavours/glitch/util/scrollbar';
import MediaGallery from 'flavours/glitch/components/media_gallery';
import Poll from 'flavours/glitch/components/poll';
import Hashtag from 'flavours/glitch/components/hashtag';
import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag';
import ModalRoot from 'flavours/glitch/components/modal_root';
import MediaModal from 'flavours/glitch/features/ui/components/media_modal';
import Video from 'flavours/glitch/features/video';

2
app/javascript/flavours/glitch/features/compose/components/search_results.js

@ -5,7 +5,7 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
import AccountContainer from 'flavours/glitch/containers/account_container';
import StatusContainer from 'flavours/glitch/containers/status_container';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Hashtag from 'flavours/glitch/components/hashtag';
import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag';
import Icon from 'flavours/glitch/components/icon';
import { searchEnabled } from 'flavours/glitch/util/initial_state';
import LoadMore from 'flavours/glitch/components/load_more';

2
app/javascript/flavours/glitch/features/getting_started/components/trends.js

@ -2,7 +2,7 @@ import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Hashtag from 'flavours/glitch/components/hashtag';
import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag';
import { FormattedMessage } from 'react-intl';
export default class Trends extends ImmutablePureComponent {

24
app/javascript/flavours/glitch/packs/admin.js

@ -0,0 +1,24 @@
import 'packs/public-path';
import ready from 'flavours/glitch/util/ready';
ready(() => {
const React = require('react');
const ReactDOM = require('react-dom');
[].forEach.call(document.querySelectorAll('[data-admin-component]'), element => {
const componentName = element.getAttribute('data-admin-component');
const { locale, ...componentProps } = JSON.parse(element.getAttribute('data-props'));
import('flavours/glitch/containers/admin_component').then(({ default: AdminComponent }) => {
return import('flavours/glitch/components/admin/' + componentName).then(({ default: Component }) => {
ReactDOM.render((
<AdminComponent locale={locale}>
<Component {...componentProps} />
</AdminComponent>
), element);
});
}).catch(error => {
console.error(error);
});
});
});

193
app/javascript/flavours/glitch/styles/admin.scss

@ -1,3 +1,5 @@
@use "sass:math";
$no-columns-breakpoint: 600px;
$sidebar-width: 240px;
$content-width: 840px;
@ -925,10 +927,197 @@ a.name-tag,
}
}
.dashboard__counters.admin-account-counters {
margin-top: 10px;
}
.account-badges {
margin: -2px 0;
}
.dashboard__counters.admin-account-counters {
margin-top: 10px;
.retention {
&__table {
&__number {
color: $secondary-text-color;
padding: 10px;
}
&__date {
white-space: nowrap;
padding: 10px 0;
text-align: left;
min-width: 120px;
&.retention__table__average {
font-weight: 700;
}
}
&__size {
text-align: center;
padding: 10px;
}
&__label {
font-weight: 700;
color: $darker-text-color;
}
&__box {
box-sizing: border-box;
background: $ui-highlight-color;
padding: 10px;
font-weight: 500;
color: $primary-text-color;
width: 52px;
margin: 1px;
@for $i from 0 through 10 {
&--#{10 * $i} {
background-color: rgba($ui-highlight-color, 1 * (math.div(max(1, $i), 10)));
}
}
}
}
}
.sparkline {
display: block;
text-decoration: none;
background: lighten($ui-base-color, 4%);
border-radius: 4px;
padding: 0;
position: relative;
padding-bottom: 55px + 20px;
overflow: hidden;
&__value {
display: flex;
line-height: 33px;
align-items: flex-end;
padding: 20px;
padding-bottom: 10px;
&__total {
display: block;
margin-right: 10px;
font-weight: 500;
font-size: 28px;
color: $primary-text-color;
}
&__change {
display: block;
font-weight: 500;
font-size: 18px;
color: $darker-text-color;
margin-bottom: -3px;
&.positive {
color: $valid-value-color;
}
&.negative {
color: $error-value-color;
}
}
}
&__label {
padding: 0 20px;
padding-bottom: 10px;
text-transform: uppercase;
color: $darker-text-color;
font-weight: 500;
}
&__graph {
position: absolute;
bottom: 0;
svg {
display: block;
margin: 0;
}
path:first-child {
fill: rgba($highlight-text-color, 0.25) !important;
fill-opacity: 1 !important;
}
path:last-child {
stroke: lighten($highlight-text-color, 6%) !important;
fill: none !important;
}
}
}
a.sparkline {
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 6%);
}
}
.skeleton {
background-color: lighten($ui-base-color, 8%);
background-image: linear-gradient(90deg, lighten($ui-base-color, 8%), lighten($ui-base-color, 12%), lighten($ui-base-color, 8%));
background-size: 200px 100%;
background-repeat: no-repeat;
border-radius: 4px;
display: inline-block;
line-height: 1;
width: 100%;
animation: skeleton 1.2s ease-in-out infinite;
}
@keyframes skeleton {
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
}
.dimension {
table {
width: 100%;
}
&__item {
border-bottom: 1px solid lighten($ui-base-color, 4%);
&__key {
font-weight: 500;
padding: 11px 10px;
}
&__value {
text-align: right;
color: $darker-text-color;
padding: 11px 10px;
}
&__indicator {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: $ui-highlight-color;
margin-right: 10px;
@for $i from 0 through 10 {
&--#{10 * $i} {
background-color: rgba($ui-highlight-color, 1 * (math.div(max(1, $i), 10)));
}
}
}
&:last-child {
border-bottom: 0;
}
}
}

53
app/javascript/flavours/glitch/styles/components/search.scss

@ -171,7 +171,6 @@
&__current {
flex: 0 0 auto;
font-size: 24px;
line-height: 36px;
font-weight: 500;
text-align: right;
padding-right: 15px;
@ -193,5 +192,57 @@
fill: none !important;
}
}
&--requires-review {
.trends__item__name {
color: $gold-star;
a {
color: $gold-star;
}
}
.trends__item__current {
color: $gold-star;
}
.trends__item__sparkline {
path:first-child {
fill: rgba($gold-star, 0.25) !important;
}
path:last-child {
stroke: lighten($gold-star, 6%) !important;
}
}
}
&--disabled {
.trends__item__name {
color: lighten($ui-base-color, 12%);
a {
color: lighten($ui-base-color, 12%);
}
}
.trends__item__current {
color: lighten($ui-base-color, 12%);
}
.trends__item__sparkline {
path:first-child {
fill: rgba(lighten($ui-base-color, 12%), 0.25) !important;
}
path:last-child {
stroke: lighten(lighten($ui-base-color, 12%), 6%) !important;
}
}
}
}
&--compact &__item {
padding: 10px;
}
}

57
app/javascript/flavours/glitch/styles/dashboard.scss

@ -56,23 +56,56 @@
}
}
.dashboard__widgets {
display: flex;
flex-wrap: wrap;
margin: 0 -5px;
.dashboard {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
grid-gap: 10px;
& > div {
flex: 0 0 33.333%;
margin-bottom: 20px;
&__item {
&--span-double-column {
grid-column: span 2;
}
& > div {
padding: 0 5px;
&--span-double-row {
grid-row: span 2;
}
h4 {
padding-top: 20px;
}
}
a:not(.name-tag) {
color: $ui-secondary-color;
font-weight: 500;
&__quick-access {
display: flex;
align-items: baseline;
border-radius: 4px;
background: $ui-highlight-color;
color: $primary-text-color;
transition: all 100ms ease-in;
font-size: 14px;
padding: 0 16px;
line-height: 36px;
height: 36px;
text-decoration: none;
margin-bottom: 4px;
&:active,
&:focus,
&:hover {
background-color: lighten($ui-highlight-color, 10%);
transition: all 200ms ease-out;
}
span {
flex: 1 1 auto;
}
.fa {
flex: 0 0 auto;
}
strong {
font-weight: 700;
}
}
}

2
app/javascript/flavours/glitch/theme.yml

@ -1,7 +1,7 @@
# (REQUIRED) The location of the pack files.
pack:
about: packs/about.js
admin: packs/public.js
admin: packs/admin.js
auth: packs/public.js
common:
filename: packs/common.js

8
app/javascript/flavours/glitch/util/numbers.js

@ -69,3 +69,11 @@ export function pluralReady(sourceNumber, division) {
return Math.trunc(sourceNumber / closestScale) * closestScale;
}
/**
* @param {number} num
* @returns {number}
*/
export function roundTo10(num) {
return Math.round(num * 0.1) / 0.1;