1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-04 13:48:56 +02:00

fix: health-technical debt trends in emails (#10308)

This commit is contained in:
Tymoteusz Czech 2025-07-04 16:46:59 +02:00 committed by GitHub
parent cb4beb71ac
commit 212c538a75
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 111 additions and 101 deletions

View File

@ -33,7 +33,7 @@ describe('productivityReportViewModel', () => {
});
describe('healthColor', () => {
it('returns RED for health between 0 and 24', () => {
it('returns RED for technical debt between 75 and 100', () => {
const metrics: ProductivityReportMetrics = {
...mockMetrics,
health: 20,
@ -44,10 +44,10 @@ describe('productivityReportViewModel', () => {
metrics,
});
expect(viewModel.healthColor()).toBe('#d93644');
expect(viewModel.technicalDebtColor()).toBe('#d93644');
});
it('returns ORANGE for health between 25 and 74', () => {
it('returns ORANGE for technical debt between 25 and 74', () => {
const metrics: ProductivityReportMetrics = {
...mockMetrics,
health: 50,
@ -58,10 +58,10 @@ describe('productivityReportViewModel', () => {
metrics,
});
expect(viewModel.healthColor()).toBe('#d76500');
expect(viewModel.technicalDebtColor()).toBe('#d76500');
});
it('returns GREEN for health 75 or above', () => {
it('returns GREEN for technical debt below 25', () => {
const metrics: ProductivityReportMetrics = {
...mockMetrics,
health: 80,
@ -72,25 +72,24 @@ describe('productivityReportViewModel', () => {
metrics,
});
expect(viewModel.healthColor()).toBe('#68a611');
expect(viewModel.technicalDebtColor()).toBe('#68a611');
});
});
describe('healthTrendMessage', () => {
describe('technicalDebtTrendMessage', () => {
it('returns correct trend message when technica debt decreased', () => {
const metrics: ProductivityReportMetrics = {
...mockMetrics,
health: 80,
previousMonth: { ...mockMetrics.previousMonth, health: 70 },
};
const viewModel = productivityReportViewModel({
...mockData,
metrics,
});
expect(viewModel.healthTrendMessage()).toBe(
"<span style='color: #68a611'>&#9650;</span> 10% more than previous month",
expect(viewModel.technicalDebtTrendMessage()).toMatchInlineSnapshot(
`"<span style='color: #68a611'>&#9660;</span> 10% less than previous month"`,
);
});
@ -100,14 +99,13 @@ describe('productivityReportViewModel', () => {
health: 60,
previousMonth: { ...mockMetrics.previousMonth, health: 70 },
};
const viewModel = productivityReportViewModel({
...mockData,
metrics,
});
expect(viewModel.healthTrendMessage()).toBe(
"<span style='color: #d93644'>&#9660;</span> 10% less than previous month",
expect(viewModel.technicalDebtTrendMessage()).toMatchInlineSnapshot(
`"<span style='color: #d93644'>&#9650;</span> 10% more than previous month"`,
);
});
@ -117,13 +115,14 @@ describe('productivityReportViewModel', () => {
health: 70,
previousMonth: { ...mockMetrics.previousMonth, health: 70 },
};
const viewModel = productivityReportViewModel({
...mockData,
metrics,
});
expect(viewModel.healthTrendMessage()).toBe('Same as last month');
expect(viewModel.technicalDebtTrendMessage()).toMatchInlineSnapshot(
`"Same as last month"`,
);
});
});
@ -137,18 +136,15 @@ describe('productivityReportViewModel', () => {
flagsCreated: 8,
},
};
const viewModel = productivityReportViewModel({
...mockData,
metrics,
});
expect(viewModel.flagsCreatedTrendMessage()).toBe(
"<span style='color: #68a611'>&#9650;</span> 2 more than previous month",
expect(viewModel.flagsCreatedTrendMessage()).toMatchInlineSnapshot(
`"<span style='color: #68a611'>&#9650;</span> 2 more than previous month"`,
);
});
});
describe('productionUpdatedTrendMessage', () => {
it('returns correct trend message for productionUpdates decrease', () => {
const metrics: ProductivityReportMetrics = {
@ -159,18 +155,17 @@ describe('productivityReportViewModel', () => {
productionUpdates: 8,
},
};
const viewModel = productivityReportViewModel({
...mockData,
metrics,
});
expect(viewModel.productionUpdatedTrendMessage()).toBe(
"<span style='color: #d93644'>&#9660;</span> 3 less than previous month",
expect(
viewModel.productionUpdatedTrendMessage(),
).toMatchInlineSnapshot(
`"<span style='color: #d93644'>&#9660;</span> 3 less than previous month"`,
);
});
});
describe('Missing previous month data', () => {
it('returns no trends messages', () => {
const metrics: ProductivityReportMetrics = {
@ -179,13 +174,12 @@ describe('productivityReportViewModel', () => {
productionUpdates: 5,
previousMonth: null,
};
const viewModel = productivityReportViewModel({
...mockData,
metrics,
});
expect(viewModel.healthTrendMessage()).toBe(null);
expect(viewModel.technicalDebtTrendMessage()).toBe(null);
expect(viewModel.flagsCreatedTrendMessage()).toBe(null);
expect(viewModel.productionUpdatedTrendMessage()).toBe(null);
});
@ -225,8 +219,8 @@ describe('productivityReportViewModel', () => {
metrics,
});
expect(viewModel.actionText()).toBe(
'Remember to archive stale flags to reduce technical debt and keep your project healthy',
expect(viewModel.actionText()).toMatchInlineSnapshot(
`"Remember to archive stale flags to reduce technical debt and keep your project healthy"`,
);
});
@ -245,8 +239,8 @@ describe('productivityReportViewModel', () => {
metrics,
});
expect(viewModel.actionText()).toBe(
'Remember to archive stale flags to reduce technical debt and keep your project healthy',
expect(viewModel.actionText()).toMatchInlineSnapshot(
`"Remember to archive stale flags to reduce technical debt and keep your project healthy"`,
);
});

View File

@ -13,6 +13,9 @@ const RED = '#d93644';
const GREEN = '#68a611';
const ORANGE = '#d76500';
const ARROW_UP = '&#9650;';
const ARROW_DOWN = '&#9660;';
export const productivityReportViewModel = ({
unleashUrl,
userEmail,
@ -23,69 +26,82 @@ export const productivityReportViewModel = ({
userEmail: string;
userName: string;
metrics: ProductivityReportMetrics;
}) => ({
userName,
userEmail,
...metrics,
technicalDebt: Math.max(0, 100 - metrics.health).toString(),
unleashUrl,
healthColor() {
const healthRating = this.health;
const healthColor =
healthRating >= 0 && healthRating <= 24
? RED
: healthRating >= 25 && healthRating <= 74
? ORANGE
: GREEN;
return healthColor;
},
actionText(): string | null {
const improveMessage =
'Remember to archive stale flags to reduce technical debt and keep your project healthy';
const previousHealth = this.previousMonth?.health || 0;
if (this.health <= 74) {
return improveMessage;
}
if (this.health < previousHealth) {
return improveMessage;
}
return null;
},
healthTrendMessage() {
return this.previousMonthText(
'%',
this.health,
this.previousMonth?.health,
);
},
flagsCreatedTrendMessage() {
return this.previousMonthText(
'',
this.flagsCreated,
this.previousMonth?.flagsCreated,
);
},
productionUpdatedTrendMessage() {
return this.previousMonthText(
'',
this.productionUpdates,
this.previousMonth?.productionUpdates,
);
},
previousMonthText(
unit: '' | '%',
currentValue: number,
previousValue?: number,
) {
if (previousValue == null) {
}) => {
const { health, previousMonth, flagsCreated, productionUpdates } = metrics;
const technicalDebt = Math.max(0, 100 - health) || 0;
return {
userName,
userEmail,
flagsCreated,
productionUpdates,
previousMonth,
health,
technicalDebt: technicalDebt.toString(),
unleashUrl,
technicalDebtColor() {
if (technicalDebt < 25) {
return GREEN;
}
if (technicalDebt < 75) {
return ORANGE;
}
return RED;
},
actionText(): string | null {
const improveMessage =
'Remember to archive stale flags to reduce technical debt and keep your project healthy';
const previousHealth = previousMonth?.health || 0;
if (health <= 74) {
return improveMessage;
}
if (health < previousHealth) {
return improveMessage;
}
return null;
}
if (currentValue > previousValue) {
return `<span style='color: ${GREEN}'>&#9650;</span> ${currentValue - previousValue}${unit} more than previous month`;
}
if (previousValue > currentValue) {
return `<span style='color: ${RED}'>&#9660;</span> ${previousValue - currentValue}${unit} less than previous month`;
}
return `Same as last month`;
},
});
},
technicalDebtTrendMessage() {
if (!previousMonth || Number.isNaN(previousMonth.health)) {
return null;
}
const previousTechnicalDebt = Math.max(
0,
100 - previousMonth.health,
);
if (technicalDebt > previousTechnicalDebt) {
return `<span style='color: ${RED}'>${ARROW_UP}</span> ${technicalDebt - previousTechnicalDebt}% more than previous month`;
}
if (previousTechnicalDebt > technicalDebt) {
return `<span style='color: ${GREEN}'>${ARROW_DOWN}</span> ${previousTechnicalDebt - technicalDebt}% less than previous month`;
}
return 'Same as last month';
},
flagsCreatedTrendMessage() {
if (!previousMonth) {
return null;
}
if (flagsCreated > previousMonth.flagsCreated) {
return `<span style='color: ${GREEN}'>${ARROW_UP}</span> ${flagsCreated - previousMonth.flagsCreated} more than previous month`;
}
if (previousMonth.flagsCreated > flagsCreated) {
return `<span style='color: ${RED}'>${ARROW_DOWN}</span> ${previousMonth.flagsCreated - flagsCreated} less than previous month`;
}
return 'Same as last month';
},
productionUpdatedTrendMessage() {
if (!previousMonth) {
return null;
}
if (productionUpdates > previousMonth.productionUpdates) {
return `<span style='color: ${GREEN}'>${ARROW_UP}</span> ${productionUpdates - previousMonth.productionUpdates} more than previous month`;
}
if (previousMonth.productionUpdates > productionUpdates) {
return `<span style='color: ${RED}'>${ARROW_DOWN}</span> ${previousMonth.productionUpdates - productionUpdates} less than previous month`;
}
return 'Same as last month';
},
};
};

View File

@ -146,7 +146,7 @@ test('Can send productivity report email', async () => {
expect(content.html).toContain('localhost/profile');
expect(content.html).toContain('#68a611');
expect(content.html).toContain('1%');
expect(content.html).toContain('10% more than previous month');
expect(content.html).toContain('10% less than previous month');
expect(content.text).toContain('localhost/insights');
expect(content.text).toContain('localhost/profile');
expect(content.text).toContain('localhost/profile');

View File

@ -27,9 +27,9 @@
<div class="shaded"
style="margin: 0;padding: 24px 8px 24px 8px; background: #f0f0f5;border-width: 3px;border-color: #ffffff;border-style: solid;">
<div style="padding-top: 12px;">
<span style="color: {{healthColor}};">{{technicalDebt}}%</span><br>
<span style="color: {{technicalDebtColor}};">{{technicalDebt}}%</span><br>
<span style="font-size: 16px; color: #1A4049; font-weight: 700">your instance technical debt</span><br>
<span style="font-size: 12px; color: #6E6E70; font-weight: 400; line-height: 14px">{{{healthTrendMessage}}}</span>
<span style="font-size: 12px; color: #6E6E70; font-weight: 400; line-height: 14px">{{{technicalDebtTrendMessage}}}</span>
<div style="font-size: 12px; margin-top: 16px; font-weight: 400; line-height: 14px;">{{actionText}}</div>
</div>
</div>
@ -75,8 +75,8 @@
style="color: #1a4049;margin: 0 10px;text-decoration: none;">getunleash.io</a> |
<a href="https://github.com/unleash"
style="color: #1a4049;margin: 0 10px;text-decoration: none;">GitHub</a> |
<a href="https://twitter.com/unleash"
style="color: #1a4049;margin: 0 10px;text-decoration: none;">Twitter</a>
<a href="https://www.linkedin.com/company/getunleash/"
style="color: #1a4049;margin: 0 10px;text-decoration: none;">LinkedIn</a>
</div>
<div class="unsubscribe" style="font-size: 12px;color: #888;margin-top: 10px;">
This email was sent to {{userEmail}}. Youve received this as you are a user of Unleash.<br>