Add move data disk

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

.github/workflows/release.yaml

@@ -73,8 +73,7 @@ jobs:
       matrix:
         arch: ["aarch64", "armhf", "armv7", "amd64", "i386"]
         tag:
-          - "3.8-alpine3.12"
-          - "3.9-alpine3.13"
+          - "3.9-alpine3.14"
     steps:
       - name: Download requirements.txt
         uses: actions/download-artifact@v2

build-scripts/gulp/clean.js

@@ -5,32 +5,32 @@ require("./translations");
 
 gulp.task(
   "clean",
-  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([paths.app_output_root, paths.build_dir]);
-  })
+  gulp.parallel("clean-translations", () =>
+    del([paths.app_output_root, paths.build_dir])
+  )
 );
 
 gulp.task(
   "clean-demo",
-  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([paths.demo_output_root, paths.build_dir]);
-  })
+  gulp.parallel("clean-translations", () =>
+    del([paths.demo_output_root, paths.build_dir])
+  )
 );
 
 gulp.task(
   "clean-cast",
-  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([paths.cast_output_root, paths.build_dir]);
-  })
+  gulp.parallel("clean-translations", () =>
+    del([paths.cast_output_root, paths.build_dir])
+  )
 );
 
-gulp.task("clean-hassio", function cleanOutputAndBuildDir() {
-  return del([paths.hassio_output_root, paths.build_dir]);
-});
+gulp.task("clean-hassio", () =>
+  del([paths.hassio_output_root, paths.build_dir])
+);
 
 gulp.task(
   "clean-gallery",
-  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([paths.gallery_output_root, paths.build_dir]);
-  })
+  gulp.parallel("clean-translations", () =>
+    del([paths.gallery_output_root, paths.build_dir])
+  )
 );

build-scripts/gulp/gather-static.js

@@ -12,8 +12,10 @@ const polyPath = (...parts) => path.resolve(paths.polymer_dir, ...parts);
 const copyFileDir = (fromFile, toDir) =>
   fs.copySync(fromFile, path.join(toDir, path.basename(fromFile)));
 
-const genStaticPath = (staticDir) => (...parts) =>
-  path.resolve(staticDir, ...parts);
+const genStaticPath =
+  (staticDir) =>
+  (...parts) =>
+    path.resolve(staticDir, ...parts);
 
 function copyTranslations(staticDir) {
   const staticPath = genStaticPath(staticDir);

build-scripts/gulp/translations.js

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 const crypto = require("crypto");
 const del = require("del");
 const path = require("path");
@@ -26,13 +28,6 @@ gulp.task("translations-enable-merge-backend", (done) => {
   done();
 });
 
-String.prototype.rsplit = function (sep, maxsplit) {
-  var split = this.split(sep);
-  return maxsplit
-    ? [split.slice(0, -maxsplit).join(sep)].concat(split.slice(-maxsplit))
-    : split;
-};
-
 // Panel translations which should be split from the core translations.
 const TRANSLATION_FRAGMENTS = Object.keys(
   require("../../src/translations/en.json").ui.panel
@@ -40,7 +35,7 @@ const TRANSLATION_FRAGMENTS = Object.keys(
 
 function recursiveFlatten(prefix, data) {
   let output = {};
-  Object.keys(data).forEach(function (key) {
+  Object.keys(data).forEach((key) => {
     if (typeof data[key] === "object") {
       output = {
         ...output,
@@ -101,15 +96,19 @@ function lokaliseTransform(data, original, file) {
     if (value instanceof Object) {
       output[key] = lokaliseTransform(value, original, file);
     } else {
-      output[key] = value.replace(re_key_reference, (match, key) => {
-        const replace = key.split("::").reduce((tr, k) => {
+      output[key] = value.replace(re_key_reference, (_match, lokalise_key) => {
+        const replace = lokalise_key.split("::").reduce((tr, k) => {
           if (!tr) {
-            throw Error(`Invalid key placeholder ${key} in ${file.path}`);
+            throw Error(
+              `Invalid key placeholder ${lokalise_key} in ${file.path}`
+            );
           }
           return tr[k];
         }, original);
         if (typeof replace !== "string") {
-          throw Error(`Invalid key placeholder ${key} in ${file.path}`);
+          throw Error(
+            `Invalid key placeholder ${lokalise_key} in ${file.path}`
+          );
         }
         return replace;
       });
@@ -118,9 +117,7 @@ function lokaliseTransform(data, original, file) {
   return output;
 }
 
-gulp.task("clean-translations", function () {
-  return del([workDir]);
-});
+gulp.task("clean-translations", () => del([workDir]));
 
 gulp.task("ensure-translations-build-dir", (done) => {
   if (!fs.existsSync(workDir)) {
@@ -129,7 +126,7 @@ gulp.task("ensure-translations-build-dir", (done) => {
   done();
 });
 
-gulp.task("create-test-metadata", function (cb) {
+gulp.task("create-test-metadata", (cb) => {
   fs.writeFile(
     workDir + "/testMetadata.json",
     JSON.stringify({
@@ -143,17 +140,13 @@ gulp.task("create-test-metadata", function (cb) {
 
 gulp.task(
   "create-test-translation",
-  gulp.series("create-test-metadata", function createTestTranslation() {
-    return gulp
+  gulp.series("create-test-metadata", () =>
+    gulp
       .src(path.join(paths.translations_src, "en.json"))
-      .pipe(
-        transform(function (data, file) {
-          return recursiveEmpty(data);
-        })
-      )
+      .pipe(transform((data, _file) => recursiveEmpty(data)))
       .pipe(rename("test.json"))
-      .pipe(gulp.dest(workDir));
-  })
+      .pipe(gulp.dest(workDir))
+  )
 );
 
 /**
@@ -165,7 +158,7 @@ gulp.task(
  * project is buildable immediately after merging new translation keys, since
  * the Lokalise update to translations/en.json will not happen immediately.
  */
-gulp.task("build-master-translation", function () {
+gulp.task("build-master-translation", () => {
   const src = [path.join(paths.translations_src, "en.json")];
 
   if (mergeBackend) {
@@ -174,11 +167,7 @@ gulp.task("build-master-translation", function () {
 
   return gulp
     .src(src)
-    .pipe(
-      transform(function (data, file) {
-        return lokaliseTransform(data, data, file);
-      })
-    )
+    .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
     .pipe(
       merge({
         fileName: "translationMaster.json",
@@ -187,18 +176,14 @@ gulp.task("build-master-translation", function () {
     .pipe(gulp.dest(workDir));
 });
 
-gulp.task("build-merged-translations", function () {
-  return gulp
+gulp.task("build-merged-translations", () =>
+  gulp
     .src([inFrontendDir + "/*.json", workDir + "/test.json"], {
       allowEmpty: true,
     })
+    .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
     .pipe(
-      transform(function (data, file) {
-        return lokaliseTransform(data, data, file);
-      })
-    )
-    .pipe(
-      foreach(function (stream, file) {
+      foreach((stream, file) => {
         // For each language generate a merged json file. It begins with the master
         // translation as a failsafe for untranslated strings, and merges all parent
         // tags into one file for each specific subtag
@@ -230,17 +215,17 @@ gulp.task("build-merged-translations", function () {
           )
           .pipe(gulp.dest(fullDir));
       })
-    );
-});
+    )
+);
 
-var taskName;
+let taskName;
 
 const splitTasks = [];
 TRANSLATION_FRAGMENTS.forEach((fragment) => {
   taskName = "build-translation-fragment-" + fragment;
-  gulp.task(taskName, function () {
+  gulp.task(taskName, () =>
     // Return only the translations for this fragment.
-    return gulp
+    gulp
       .src(fullDir + "/*.json")
       .pipe(
         transform((data) => ({
@@ -251,18 +236,18 @@ TRANSLATION_FRAGMENTS.forEach((fragment) => {
           },
         }))
       )
-      .pipe(gulp.dest(workDir + "/" + fragment));
-  });
+      .pipe(gulp.dest(workDir + "/" + fragment))
+  );
   splitTasks.push(taskName);
 });
 
 taskName = "build-translation-core";
-gulp.task(taskName, function () {
+gulp.task(taskName, () =>
   // Remove the fragment translations from the core translation.
-  return gulp
+  gulp
     .src(fullDir + "/*.json")
     .pipe(
-      transform((data, file) => {
+      transform((data, _file) => {
         TRANSLATION_FRAGMENTS.forEach((fragment) => {
           delete data.ui.panel[fragment];
         });
@@ -270,14 +255,14 @@ gulp.task(taskName, function () {
         return data;
       })
     )
-    .pipe(gulp.dest(coreDir));
-});
+    .pipe(gulp.dest(coreDir))
+);
 
 splitTasks.push(taskName);
 
-gulp.task("build-flattened-translations", function () {
+gulp.task("build-flattened-translations", () =>
   // Flatten the split versions of our translations, and move them into outDir
-  return gulp
+  gulp
     .src(
       TRANSLATION_FRAGMENTS.map(
         (fragment) => workDir + "/" + fragment + "/*.json"
@@ -285,41 +270,45 @@ gulp.task("build-flattened-translations", function () {
       { base: workDir }
     )
     .pipe(
-      transform(function (data) {
+      transform((data) =>
         // Polymer.AppLocalizeBehavior requires flattened json
-        return flatten(data);
-      })
+        flatten(data)
+      )
     )
     .pipe(
       rename((filePath) => {
         if (filePath.dirname === "core") {
           filePath.dirname = "";
         }
+        // In dev we create the file with the fake hash in the filename
+        if (!env.isProdBuild()) {
+          filePath.basename += "-dev";
+        }
       })
     )
-    .pipe(gulp.dest(outDir));
-});
+    .pipe(gulp.dest(outDir))
+);
 
 const fingerprints = {};
 
-gulp.task(
-  "build-translation-fingerprints",
-  function fingerprintTranslationFiles() {
-    // Fingerprint full file of each language
-    const files = fs.readdirSync(fullDir);
+gulp.task("build-translation-fingerprints", () => {
+  // Fingerprint full file of each language
+  const files = fs.readdirSync(fullDir);
 
-    for (let i = 0; i < files.length; i++) {
-      fingerprints[files[i].split(".")[0]] = {
-        // In dev we create fake hashes
-        hash: env.isProdBuild()
-          ? crypto
-              .createHash("md5")
-              .update(fs.readFileSync(path.join(fullDir, files[i]), "utf-8"))
-              .digest("hex")
-          : "dev",
-      };
-    }
+  for (let i = 0; i < files.length; i++) {
+    fingerprints[files[i].split(".")[0]] = {
+      // In dev we create fake hashes
+      hash: env.isProdBuild()
+        ? crypto
+            .createHash("md5")
+            .update(fs.readFileSync(path.join(fullDir, files[i]), "utf-8"))
+            .digest("hex")
+        : "dev",
+    };
+  }
 
+  // In dev we create the file with the fake hash in the filename
+  if (env.isProdBuild()) {
     mapFiles(outDir, ".json", (filename) => {
       const parsed = path.parse(filename);
 
@@ -335,35 +324,35 @@ gulp.task(
         }`
       );
     });
-
-    const stream = source("translationFingerprints.json");
-    stream.write(JSON.stringify(fingerprints));
-    process.nextTick(() => stream.end());
-    return stream.pipe(vinylBuffer()).pipe(gulp.dest(workDir));
   }
-);
 
-gulp.task("build-translation-fragment-supervisor", function () {
-  return gulp
+  const stream = source("translationFingerprints.json");
+  stream.write(JSON.stringify(fingerprints));
+  process.nextTick(() => stream.end());
+  return stream.pipe(vinylBuffer()).pipe(gulp.dest(workDir));
+});
+
+gulp.task("build-translation-fragment-supervisor", () =>
+  gulp
     .src(fullDir + "/*.json")
     .pipe(transform((data) => data.supervisor))
-    .pipe(gulp.dest(workDir + "/supervisor"));
-});
+    .pipe(gulp.dest(workDir + "/supervisor"))
+);
 
-gulp.task("build-translation-flatten-supervisor", function () {
-  return gulp
+gulp.task("build-translation-flatten-supervisor", () =>
+  gulp
     .src(workDir + "/supervisor/*.json")
     .pipe(
-      transform(function (data) {
+      transform((data) =>
         // Polymer.AppLocalizeBehavior requires flattened json
-        return flatten(data);
-      })
+        flatten(data)
+      )
     )
-    .pipe(gulp.dest(outDir));
-});
+    .pipe(gulp.dest(outDir))
+);
 
-gulp.task("build-translation-write-metadata", function writeMetadata() {
-  return gulp
+gulp.task("build-translation-write-metadata", () =>
+  gulp
     .src(
       [
         path.join(paths.translations_src, "translationMetadata.json"),
@@ -374,13 +363,14 @@ gulp.task("build-translation-write-metadata", function writeMetadata() {
     )
     .pipe(merge({}))
     .pipe(
-      transform(function (data) {
+      transform((data) => {
         const newData = {};
         Object.entries(data).forEach(([key, value]) => {
           // Filter out translations without native name.
           if (value.nativeName) {
             newData[key] = value;
           } else {
+            // eslint-disable-next-line no-console
             console.warn(
               `Skipping language ${key}. Native name was not translated.`
             );
@@ -396,19 +386,26 @@ gulp.task("build-translation-write-metadata", function writeMetadata() {
       }))
     )
     .pipe(rename("translationMetadata.json"))
-    .pipe(gulp.dest(workDir));
-});
+    .pipe(gulp.dest(workDir))
+);
+
+gulp.task(
+  "create-translations",
+  gulp.series(
+    env.isProdBuild() ? (done) => done() : "create-test-translation",
+    "build-master-translation",
+    "build-merged-translations",
+    gulp.parallel(...splitTasks),
+    "build-flattened-translations"
+  )
+);
 
 gulp.task(
   "build-translations",
   gulp.series(
     "clean-translations",
     "ensure-translations-build-dir",
-    env.isProdBuild() ? (done) => done() : "create-test-translation",
-    "build-master-translation",
-    "build-merged-translations",
-    gulp.parallel(...splitTasks),
-    "build-flattened-translations",
+    "create-translations",
     "build-translation-fingerprints",
     "build-translation-write-metadata"
   )

build-scripts/gulp/webpack.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 // Tasks to run webpack.
 const fs = require("fs");
 const gulp = require("gulp");
@@ -44,7 +45,7 @@ const runDevServer = ({
     open: true,
     watchContentBase: true,
     contentBase,
-  }).listen(port, listenHost, function (err) {
+  }).listen(port, listenHost, (err) => {
     if (err) {
       throw err;
     }
@@ -65,6 +66,7 @@ const doneHandler = (done) => (err, stats) => {
   }
 
   if (stats.hasErrors() || stats.hasWarnings()) {
+    // eslint-disable-next-line no-console
     console.log(stats.toString("minimal"));
   }
 
@@ -90,16 +92,10 @@ gulp.task("webpack-watch-app", () => {
     process.env.ES5
       ? bothBuilds(createAppConfig, { isProdBuild: false })
       : createAppConfig({ isProdBuild: false, latestBuild: true })
-  ).watch(
-    {
-      ignored: /build-translations/,
-      poll: isWsl,
-    },
-    doneHandler()
-  );
+  ).watch({ poll: isWsl }, doneHandler());
   gulp.watch(
     path.join(paths.translations_src, "en.json"),
-    gulp.series("build-translations", "copy-translations-app")
+    gulp.series("create-translations", "copy-translations-app")
   );
 });
 

demo/src/configs/arsaboo/lovelace.ts

@@ -29,6 +29,11 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
             },
           ],
         },
+        {
+          title: "Energy distribution today",
+          type: "energy-distribution",
+          link_dashboard: true,
+        },
         {
           type: "thermostat",
           entity: "climate.upstairs",

demo/src/configs/demo-configs.ts

@@ -1,5 +1,6 @@
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { Lovelace } from "../../../src/panels/lovelace/types";
+import { energyEntities } from "../stubs/entities";
 import { DemoConfig } from "./types";
 
 export const demoConfigs: Array<() => Promise<DemoConfig>> = [
@@ -27,6 +28,7 @@ export const setDemoConfig = async (
   selectedDemoConfig = confProm;
 
   hass.addEntities(config.entities(hass.localize), true);
+  hass.addEntities(energyEntities());
   lovelace.saveConfig(config.lovelace(hass.localize));
   hass.mockTheme(config.theme());
 };

demo/src/ha-demo.ts

@@ -20,6 +20,9 @@ import { mockShoppingList } from "./stubs/shopping_list";
 import { mockSystemLog } from "./stubs/system_log";
 import { mockTemplate } from "./stubs/template";
 import { mockTranslations } from "./stubs/translations";
+import { mockEnergy } from "./stubs/energy";
+import { mockConfig } from "./stubs/config";
+import { energyEntities } from "./stubs/entities";
 
 class HaDemo extends HomeAssistantAppEl {
   protected async _initializeHass() {
@@ -47,8 +50,12 @@ class HaDemo extends HomeAssistantAppEl {
     mockEvents(hass);
     mockMediaPlayer(hass);
     mockFrontend(hass);
+    mockEnergy(hass);
+    mockConfig(hass);
     mockPersistentNotification(hass);
 
+    hass.addEntities(energyEntities());
+
     // Once config is loaded AND localize, set entities and apply theme.
     Promise.all([selectedDemoConfig, localizePromise]).then(
       ([conf, localize]) => {

demo/src/stubs/config.ts

@@ -0,0 +1,41 @@
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockConfig = (hass: MockHomeAssistant) => {
+  hass.mockAPI("config/config_entries/entry", () => [
+    {
+      entry_id: "co2signal",
+      domain: "co2signal",
+      title: "CO2 Signal",
+      source: "user",
+      state: "loaded",
+      supports_options: false,
+      supports_unload: true,
+      pref_disable_new_entities: false,
+      pref_disable_polling: false,
+      disabled_by: null,
+      reason: null,
+    },
+  ]);
+  hass.mockWS("config/entity_registry/list", () => [
+    {
+      config_entry_id: "co2signal",
+      device_id: "co2signal",
+      area_id: null,
+      disabled_by: null,
+      entity_id: "sensor.co2_intensity",
+      name: null,
+      icon: null,
+      platform: "co2signal",
+    },
+    {
+      config_entry_id: "co2signal",
+      device_id: "co2signal",
+      area_id: null,
+      disabled_by: null,
+      entity_id: "sensor.grid_fossil_fuel_percentage",
+      name: null,
+      icon: null,
+      platform: "co2signal",
+    },
+  ]);
+};

demo/src/stubs/energy.ts

@@ -0,0 +1,134 @@
+import { format, startOfToday, startOfTomorrow } from "date-fns";
+import { EnergySolarForecasts } from "../../../src/data/energy";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockEnergy = (hass: MockHomeAssistant) => {
+  hass.mockWS("energy/get_prefs", () => ({
+    energy_sources: [
+      {
+        type: "grid",
+        flow_from: [
+          {
+            stat_energy_from: "sensor.energy_consumption_tarif_1",
+            stat_cost: "sensor.energy_consumption_tarif_1_cost",
+            entity_energy_from: "sensor.energy_consumption_tarif_1",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+          {
+            stat_energy_from: "sensor.energy_consumption_tarif_2",
+            stat_cost: "sensor.energy_consumption_tarif_2_cost",
+            entity_energy_from: "sensor.energy_consumption_tarif_2",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+        ],
+        flow_to: [
+          {
+            stat_energy_to: "sensor.energy_production_tarif_1",
+            stat_compensation: "sensor.energy_production_tarif_1_compensation",
+            entity_energy_to: "sensor.energy_production_tarif_1",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+          {
+            stat_energy_to: "sensor.energy_production_tarif_2",
+            stat_compensation: "sensor.energy_production_tarif_2_compensation",
+            entity_energy_to: "sensor.energy_production_tarif_2",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+        ],
+        cost_adjustment_day: 0,
+      },
+      {
+        type: "solar",
+        stat_energy_from: "sensor.solar_production",
+        config_entry_solar_forecast: ["solar_forecast"],
+      },
+      /* {
+        type: "battery",
+        stat_energy_from: "sensor.battery_output",
+        stat_energy_to: "sensor.battery_input",
+      }, */
+      {
+        type: "gas",
+        stat_energy_from: "sensor.energy_gas",
+        stat_cost: "sensor.energy_gas_cost",
+        entity_energy_from: "sensor.energy_gas",
+        entity_energy_price: null,
+        number_energy_price: null,
+      },
+    ],
+    device_consumption: [
+      {
+        stat_consumption: "sensor.energy_car",
+      },
+      {
+        stat_consumption: "sensor.energy_ac",
+      },
+      {
+        stat_consumption: "sensor.energy_washing_machine",
+      },
+      {
+        stat_consumption: "sensor.energy_dryer",
+      },
+      {
+        stat_consumption: "sensor.energy_heat_pump",
+      },
+      {
+        stat_consumption: "sensor.energy_boiler",
+      },
+    ],
+  }));
+  hass.mockWS("energy/info", () => ({ cost_sensors: [] }));
+  const todayString = format(startOfToday(), "yyyy-MM-dd");
+  const tomorrowString = format(startOfTomorrow(), "yyyy-MM-dd");
+  hass.mockWS(
+    "energy/solar_forecast",
+    (): EnergySolarForecasts => ({
+      solar_forecast: {
+        wh_hours: {
+          [`${todayString}T06:00:00`]: 0,
+          [`${todayString}T06:23:00`]: 6,
+          [`${todayString}T06:45:00`]: 39,
+          [`${todayString}T07:00:00`]: 28,
+          [`${todayString}T08:00:00`]: 208,
+          [`${todayString}T09:00:00`]: 352,
+          [`${todayString}T10:00:00`]: 544,
+          [`${todayString}T11:00:00`]: 748,
+          [`${todayString}T12:00:00`]: 1259,
+          [`${todayString}T13:00:00`]: 1361,
+          [`${todayString}T14:00:00`]: 1373,
+          [`${todayString}T15:00:00`]: 1370,
+          [`${todayString}T16:00:00`]: 1186,
+          [`${todayString}T17:00:00`]: 937,
+          [`${todayString}T18:00:00`]: 652,
+          [`${todayString}T19:00:00`]: 370,
+          [`${todayString}T20:00:00`]: 155,
+          [`${todayString}T21:48:00`]: 24,
+          [`${todayString}T22:36:00`]: 0,
+          [`${tomorrowString}T06:01:00`]: 0,
+          [`${tomorrowString}T06:23:00`]: 9,
+          [`${tomorrowString}T06:45:00`]: 47,
+          [`${tomorrowString}T07:00:00`]: 48,
+          [`${tomorrowString}T08:00:00`]: 473,
+          [`${tomorrowString}T09:00:00`]: 827,
+          [`${tomorrowString}T10:00:00`]: 1153,
+          [`${tomorrowString}T11:00:00`]: 1413,
+          [`${tomorrowString}T12:00:00`]: 1590,
+          [`${tomorrowString}T13:00:00`]: 1652,
+          [`${tomorrowString}T14:00:00`]: 1612,
+          [`${tomorrowString}T15:00:00`]: 1438,
+          [`${tomorrowString}T16:00:00`]: 1149,
+          [`${tomorrowString}T17:00:00`]: 830,
+          [`${tomorrowString}T18:00:00`]: 542,
+          [`${tomorrowString}T19:00:00`]: 311,
+          [`${tomorrowString}T20:00:00`]: 140,
+          [`${tomorrowString}T21:47:00`]: 22,
+          [`${tomorrowString}T22:34:00`]: 0,
+        },
+      },
+    })
+  );
+};

demo/src/stubs/entities.ts

@@ -0,0 +1,178 @@
+import { convertEntities } from "../../../src/fake_data/entity";
+
+export const energyEntities = () =>
+  convertEntities({
+    "sensor.grid_fossil_fuel_percentage": {
+      entity_id: "sensor.grid_fossil_fuel_percentage",
+      state: "88.6",
+      attributes: {
+        unit_of_measurement: "%",
+      },
+    },
+    "sensor.solar_production": {
+      entity_id: "sensor.solar_production",
+      state: "88.6",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Solar",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.battery_input": {
+      entity_id: "sensor.battery_input",
+      state: "4",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Battery Input",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.battery_output": {
+      entity_id: "sensor.battery_output",
+      state: "3",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Battery Output",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_consumption_tarif_1": {
+      entity_id: "sensor.energy_consumption_tarif_1	",
+      state: "88.6",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Grid consumption low tariff",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_consumption_tarif_2": {
+      entity_id: "sensor.energy_consumption_tarif_2",
+      state: "88.6",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Grid consumption high tariff",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_production_tarif_1": {
+      entity_id: "sensor.energy_production_tarif_1",
+      state: "88.6",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Returned to grid low tariff",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_production_tarif_2": {
+      entity_id: "sensor.energy_production_tarif_2",
+      state: "88.6",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Returned to grid high tariff",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_consumption_tarif_1_cost": {
+      entity_id: "sensor.energy_consumption_tarif_1_cost",
+      state: "2",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        unit_of_measurement: "EUR",
+      },
+    },
+    "sensor.energy_consumption_tarif_2_cost": {
+      entity_id: "sensor.energy_consumption_tarif_2_cost",
+      state: "2",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        unit_of_measurement: "EUR",
+      },
+    },
+    "sensor.energy_production_tarif_1_compensation": {
+      entity_id: "sensor.energy_production_tarif_1_compensation",
+      state: "2",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        unit_of_measurement: "EUR",
+      },
+    },
+    "sensor.energy_production_tarif_2_compensation": {
+      entity_id: "sensor.energy_production_tarif_2_compensation",
+      state: "2",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        unit_of_measurement: "EUR",
+      },
+    },
+    "sensor.energy_gas_cost": {
+      entity_id: "sensor.energy_gas_cost",
+      state: "2",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        unit_of_measurement: "EUR",
+      },
+    },
+    "sensor.energy_gas": {
+      entity_id: "sensor.energy_gas",
+      state: "4",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Gas",
+        unit_of_measurement: "m³",
+      },
+    },
+    "sensor.energy_car": {
+      entity_id: "sensor.energy_car",
+      state: "4",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Electric car",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_ac": {
+      entity_id: "sensor.energy_ac",
+      state: "3",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Air conditioning",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_washing_machine": {
+      entity_id: "sensor.energy_washing_machine",
+      state: "6",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Washing machine",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_dryer": {
+      entity_id: "sensor.energy_dryer",
+      state: "5.5",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Dryer",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_heat_pump": {
+      entity_id: "sensor.energy_heat_pump",
+      state: "6",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Heat pump",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_boiler": {
+      entity_id: "sensor.energy_boiler",
+      state: "7",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Boiler",
+        unit_of_measurement: "kWh",
+      },
+    },
+  });

demo/src/stubs/history.ts

@@ -1,4 +1,6 @@
+import { addHours, differenceInHours, endOfDay } from "date-fns";
 import { HassEntity } from "home-assistant-js-websocket";
+import { StatisticValue } from "../../../src/data/history";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 interface HistoryQueryParams {
@@ -64,6 +66,215 @@ const generateHistory = (state, deltas) => {
 
 const incrementalUnits = ["clients", "queries", "ads"];
 
+const generateMeanStatistics = (
+  id: string,
+  start: Date,
+  end: Date,
+  initValue: number,
+  maxDiff: number
+) => {
+  const statistics: StatisticValue[] = [];
+  let currentDate = new Date(start);
+  currentDate.setMinutes(0, 0, 0);
+  let lastVal = initValue;
+  const now = new Date();
+  while (end > currentDate && currentDate < now) {
+    const delta = Math.random() * maxDiff;
+    const mean = lastVal + delta;
+    statistics.push({
+      statistic_id: id,
+      start: currentDate.toISOString(),
+      mean,
+      min: mean - Math.random() * maxDiff,
+      max: mean + Math.random() * maxDiff,
+      last_reset: "1970-01-01T00:00:00+00:00",
+      state: mean,
+      sum: null,
+    });
+    lastVal = mean;
+    currentDate = addHours(currentDate, 1);
+  }
+  return statistics;
+};
+
+const generateSumStatistics = (
+  id: string,
+  start: Date,
+  end: Date,
+  initValue: number,
+  maxDiff: number
+) => {
+  const statistics: StatisticValue[] = [];
+  let currentDate = new Date(start);
+  currentDate.setMinutes(0, 0, 0);
+  let sum = initValue;
+  const now = new Date();
+  while (end > currentDate && currentDate < now) {
+    const add = Math.random() * maxDiff;
+    sum += add;
+    statistics.push({
+      statistic_id: id,
+      start: currentDate.toISOString(),
+      mean: null,
+      min: null,
+      max: null,
+      last_reset: "1970-01-01T00:00:00+00:00",
+      state: initValue + sum,
+      sum,
+    });
+    currentDate = addHours(currentDate, 1);
+  }
+  return statistics;
+};
+
+const generateCurvedStatistics = (
+  id: string,
+  start: Date,
+  end: Date,
+  initValue: number,
+  maxDiff: number,
+  metered: boolean
+) => {
+  const statistics: StatisticValue[] = [];
+  let currentDate = new Date(start);
+  currentDate.setMinutes(0, 0, 0);
+  let sum = initValue;
+  const hours = differenceInHours(end, start) - 1;
+  let i = 0;
+  let half = false;
+  const now = new Date();
+  while (end > currentDate && currentDate < now) {
+    const add = Math.random() * maxDiff;
+    sum += i * add;
+    statistics.push({
+      statistic_id: id,
+      start: currentDate.toISOString(),
+      mean: null,
+      min: null,
+      max: null,
+      last_reset: "1970-01-01T00:00:00+00:00",
+      state: initValue + sum,
+      sum: metered ? sum : null,
+    });
+    currentDate = addHours(currentDate, 1);
+    if (!half && i > hours / 2) {
+      half = true;
+    }
+    i += half ? -1 : 1;
+  }
+  return statistics;
+};
+
+const statisticsFunctions: Record<
+  string,
+  (id: string, start: Date, end: Date) => StatisticValue[]
+> = {
+  "sensor.energy_consumption_tarif_1": (id: string, start: Date, end: Date) => {
+    const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
+    const morningLow = generateSumStatistics(id, start, morningEnd, 0, 0.7);
+    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
+    const morningFinalVal = morningLow.length
+      ? morningLow[morningLow.length - 1].sum!
+      : 0;
+    const empty = generateSumStatistics(
+      id,
+      morningEnd,
+      eveningStart,
+      morningFinalVal,
+      0
+    );
+    const eveningLow = generateSumStatistics(
+      id,
+      eveningStart,
+      end,
+      morningFinalVal,
+      0.7
+    );
+    return [...morningLow, ...empty, ...eveningLow];
+  },
+  "sensor.energy_consumption_tarif_2": (id: string, start: Date, end: Date) => {
+    const morningEnd = new Date(start.getTime() + 9 * 60 * 60 * 1000);
+    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
+    const highTarif = generateSumStatistics(
+      id,
+      morningEnd,
+      eveningStart,
+      0,
+      0.3
+    );
+    const highTarifFinalVal = highTarif.length
+      ? highTarif[highTarif.length - 1].sum!
+      : 0;
+    const morning = generateSumStatistics(id, start, morningEnd, 0, 0);
+    const evening = generateSumStatistics(
+      id,
+      eveningStart,
+      end,
+      highTarifFinalVal,
+      0
+    );
+    return [...morning, ...highTarif, ...evening];
+  },
+  "sensor.energy_production_tarif_1": (id, start, end) =>
+    generateSumStatistics(id, start, end, 0, 0),
+  "sensor.energy_production_tarif_1_compensation": (id, start, end) =>
+    generateSumStatistics(id, start, end, 0, 0),
+  "sensor.energy_production_tarif_2": (id, start, end) => {
+    const productionStart = new Date(start.getTime() + 9 * 60 * 60 * 1000);
+    const productionEnd = new Date(start.getTime() + 21 * 60 * 60 * 1000);
+    const dayEnd = new Date(endOfDay(productionEnd));
+    const production = generateCurvedStatistics(
+      id,
+      productionStart,
+      productionEnd,
+      0,
+      0.15,
+      true
+    );
+    const productionFinalVal = production.length
+      ? production[production.length - 1].sum!
+      : 0;
+    const morning = generateSumStatistics(id, start, productionStart, 0, 0);
+    const evening = generateSumStatistics(
+      id,
+      productionEnd,
+      dayEnd,
+      productionFinalVal,
+      0
+    );
+    const rest = generateSumStatistics(id, dayEnd, end, productionFinalVal, 1);
+    return [...morning, ...production, ...evening, ...rest];
+  },
+  "sensor.solar_production": (id, start, end) => {
+    const productionStart = new Date(start.getTime() + 7 * 60 * 60 * 1000);
+    const productionEnd = new Date(start.getTime() + 23 * 60 * 60 * 1000);
+    const dayEnd = new Date(endOfDay(productionEnd));
+    const production = generateCurvedStatistics(
+      id,
+      productionStart,
+      productionEnd,
+      0,
+      0.3,
+      true
+    );
+    const productionFinalVal = production.length
+      ? production[production.length - 1].sum!
+      : 0;
+    const morning = generateSumStatistics(id, start, productionStart, 0, 0);
+    const evening = generateSumStatistics(
+      id,
+      productionEnd,
+      dayEnd,
+      productionFinalVal,
+      0
+    );
+    const rest = generateSumStatistics(id, dayEnd, end, productionFinalVal, 2);
+    return [...morning, ...production, ...evening, ...rest];
+  },
+  "sensor.grid_fossil_fuel_percentage": (id, start, end) =>
+    generateMeanStatistics(id, start, end, 35, 1.3),
+};
+
 export const mockHistory = (mockHass: MockHomeAssistant) => {
   mockHass.mockAPI(
     new RegExp("history/period/.+"),
@@ -133,4 +344,40 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
       return results;
     }
   );
+  mockHass.mockWS("history/list_statistic_ids", () => []);
+  mockHass.mockWS(
+    "history/statistics_during_period",
+    ({ statistic_ids, start_time, end_time }, hass) => {
+      const start = new Date(start_time);
+      const end = end_time ? new Date(end_time) : new Date();
+
+      const statistics: Record<string, StatisticValue[]> = {};
+
+      statistic_ids.forEach((id: string) => {
+        if (id in statisticsFunctions) {
+          statistics[id] = statisticsFunctions[id](id, start, end);
+        } else {
+          const entityState = hass.states[id];
+          const state = entityState ? Number(entityState.state) : 1;
+          statistics[id] =
+            entityState && "last_reset" in entityState.attributes
+              ? generateSumStatistics(
+                  id,
+                  start,
+                  end,
+                  state,
+                  state * (state > 80 ? 0.01 : 0.05)
+                )
+              : generateMeanStatistics(
+                  id,
+                  start,
+                  end,
+                  state,
+                  state * (state > 80 ? 0.05 : 0.1)
+                );
+        }
+      });
+      return statistics;
+    }
+  );
 };

demo/src/stubs/template.ts

@@ -6,7 +6,7 @@ export const mockTemplate = (hass: MockHomeAssistant) => {
       body: { message: "Template dev tool does not work in the demo." },
     })
   );
-  hass.mockWS("render_template", (msg, onChange) => {
+  hass.mockWS("render_template", (msg, _hass, onChange) => {
     onChange!({
       result: msg.template,
       listeners: { all: false, domains: [], entities: [], time: false },

gallery/src/demos/demo-ha-alert.ts

@@ -0,0 +1,150 @@
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../src/components/ha-alert";
+import "../../../src/components/ha-card";
+
+const alerts: {
+  title?: string;
+  description: string | TemplateResult;
+  type: "info" | "warning" | "error" | "success";
+  dismissable?: boolean;
+  action?: string;
+  rtl?: boolean;
+}[] = [
+  {
+    title: "Test info alert",
+    description: "This is a test info alert with a title and description",
+    type: "info",
+  },
+  {
+    title: "Test warning alert",
+    description: "This is a test warning alert with a title and description",
+    type: "warning",
+  },
+  {
+    title: "Test error alert",
+    description: "This is a test error alert with a title and description",
+    type: "error",
+  },
+  {
+    title: "Test warning with long string",
+    description:
+      "sensor.lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum",
+    type: "warning",
+  },
+  {
+    title: "Test success alert",
+    description: "This is a test success alert with a title and description",
+    type: "success",
+  },
+  {
+    description: "This is a test info alert with description only",
+    type: "info",
+  },
+  {
+    description:
+      "This is a test warning alert with a rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really long description only",
+    type: "warning",
+  },
+  {
+    title: "Error with description and list",
+    description: html`<p>
+        This is a test error alert with a title, description and a list
+      </p>
+      <ul>
+        <li>List item #1</li>
+        <li>List item #2</li>
+        <li>List item #3</li>
+      </ul>`,
+    type: "error",
+  },
+  {
+    title: "Test dismissable alert",
+    description: "This is a test success alert that can be dismissable",
+    type: "success",
+    dismissable: true,
+  },
+  {
+    description: "Dismissable information",
+    type: "info",
+    dismissable: true,
+  },
+  {
+    title: "Error with action",
+    description: "This is a test error alert with action",
+    type: "error",
+    action: "restart",
+  },
+  {
+    title: "Unsaved data",
+    description: "You have unsaved data",
+    type: "warning",
+    action: "save",
+  },
+  {
+    description: "Dismissable information (RTL)",
+    type: "info",
+    dismissable: true,
+    rtl: true,
+  },
+  {
+    title: "Error with action",
+    description: "This is a test error alert with action (RTL)",
+    type: "error",
+    action: "restart",
+    rtl: true,
+  },
+  {
+    title: "Test success alert (RTL)",
+    description: "This is a test success alert with a title and description",
+    type: "success",
+    rtl: true,
+  },
+];
+
+@customElement("demo-ha-alert")
+export class DemoHaAlert extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="ha-alert demo">
+        ${alerts.map(
+          (alert) => html`
+            <ha-alert
+              .title=${alert.title || ""}
+              .alertType=${alert.type}
+              .dismissable=${alert.dismissable || false}
+              .actionText=${alert.action || ""}
+              .rtl=${alert.rtl || false}
+            >
+              ${alert.description}
+            </ha-alert>
+          `
+        )}
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .condition {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      span {
+        margin-right: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-alert": DemoHaAlert;
+  }
+}

gallery/src/ha-gallery.js

@@ -172,6 +172,14 @@ class HaGallery extends PolymerElement {
       this.$.notifications.showDialog({ message: ev.detail.message })
     );
 
+    this.addEventListener("alert-dismissed-clicked", () =>
+      this.$.notifications.showDialog({ message: "Alert dismissed clicked" })
+    );
+
+    this.addEventListener("alert-action-clicked", () =>
+      this.$.notifications.showDialog({ message: "Alert action clicked" })
+    );
+
     this.addEventListener("hass-more-info", (ev) => {
       if (ev.detail.entityId) {
         this.$.notifications.showDialog({

hassio/src/addon-view/config/hassio-addon-audio.ts

@@ -13,6 +13,7 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import "web-animations-js/web-animations-next-lite.min";
 import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
 import {
   HassioAddonDetails,
@@ -53,7 +54,9 @@ class HassioAddonAudio extends LitElement {
         .header=${this.supervisor.localize("addon.configuration.audio.header")}
       >
         <div class="card-content">
-          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : ""}
 
           <paper-dropdown-menu
             .label=${this.supervisor.localize(
@@ -117,10 +120,6 @@ class HassioAddonAudio extends LitElement {
         paper-dropdown-menu {
           display: block;
         }
-        .errors {
-          color: var(--error-color);
-          margin-bottom: 16px;
-        }
         paper-item {
           width: 450px;
         }

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -17,6 +17,7 @@ import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../src/components/ha-form/ha-form";
 import "../../../../src/components/ha-formfield";
@@ -135,17 +136,19 @@ class HassioAddonConfig extends LitElement {
                 @value-changed=${this._configChanged}
                 .yamlSchema=${ADDON_YAML_SCHEMA}
               ></ha-yaml-editor>`}
-          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : ""}
           ${!this._yamlMode ||
           (this._canShowSchema && this.addon.schema) ||
           this._valid
             ? ""
             : html`
-                <div class="errors">
+                <ha-alert alert-type="error">
                   ${this.supervisor.localize(
                     "addon.configuration.options.invalid_yaml"
                   )}
-                </div>
+                </ha-alert>
               `}
         </div>
         ${hasHiddenOptions
@@ -324,13 +327,7 @@ class HassioAddonConfig extends LitElement {
           display: flex;
           justify-content: space-between;
         }
-        .errors {
-          color: var(--error-color);
-          margin-top: 16px;
-        }
-        .syntaxerror {
-          color: var(--error-color);
-        }
+
         .card-menu {
           float: right;
           z-index: 3;

hassio/src/addon-view/config/hassio-addon-network.ts

@@ -10,6 +10,7 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
 import {
   HassioAddonDetails,
@@ -62,7 +63,9 @@ class HassioAddonNetwork extends LitElement {
         )}
       >
         <div class="card-content">
-          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : ""}
 
           <table>
             <tbody>
@@ -225,10 +228,6 @@ class HassioAddonNetwork extends LitElement {
         ha-card {
           display: block;
         }
-        .errors {
-          color: var(--error-color);
-          margin-bottom: 16px;
-        }
         .card-actions {
           display: flex;
           justify-content: space-between;

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -1,5 +1,6 @@
 import "../../../../src/components/ha-card";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-markdown";
 import { customElement, property, state } from "lit/decorators";
@@ -38,7 +39,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
     return html`
       <div class="content">
         <ha-card>
-          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : ""}
           <div class="card-content">
             ${this._content
               ? html`<ha-markdown .content=${this._content}></ha-markdown>`

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -23,6 +23,7 @@ import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { navigate } from "../../../../src/common/navigate";
 import "../../../../src/components/buttons/ha-call-api-button";
 import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-label-badge";
 import "../../../../src/components/ha-markdown";
@@ -143,14 +144,14 @@ class HassioAddonInfo extends LitElement {
                       this.addon.arch
                     )
                     ? html`
-                        <p class="warning">
+                        <ha-alert alert-type="warning">
                           ${this.supervisor.localize(
                             "addon.dashboard.not_available_arch"
                           )}
-                        </p>
+                        </ha-alert>
                       `
                     : html`
-                        <p class="warning">
+                        <ha-alert alert-type="warning">
                           ${this.supervisor.localize(
                             "addon.dashboard.not_available_arch",
                             "core_version_installed",
@@ -158,7 +159,7 @@ class HassioAddonInfo extends LitElement {
                             "core_version_needed",
                             addonStoreInfo.homeassistant
                           )}
-                        </p>
+                        </ha-alert>
                       `
                   : ""}
               </div>
@@ -569,21 +570,23 @@ class HassioAddonInfo extends LitElement {
                 : ""}
             </div>
           </div>
-          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : ""}
           ${!this.addon.version && addonStoreInfo && !this.addon.available
             ? !addonArchIsSupported(
                 this.supervisor.info.supported_arch,
                 this.addon.arch
               )
               ? html`
-                  <p class="warning">
+                  <ha-alert alert-type="warning">
                     ${this.supervisor.localize(
                       "addon.dashboard.not_available_arch"
                     )}
-                  </p>
+                  </ha-alert>
                 `
               : html`
-                  <p class="warning">
+                  <ha-alert alert-type="warning">
                     ${this.supervisor.localize(
                       "addon.dashboard.not_available_version",
                       "core_version_installed",
@@ -591,7 +594,7 @@ class HassioAddonInfo extends LitElement {
                       "core_version_needed",
                       addonStoreInfo!.homeassistant
                     )}
-                  </p>
+                  </ha-alert>
                 `
             : ""}
         </div>
@@ -987,7 +990,7 @@ class HassioAddonInfo extends LitElement {
       supervisor: this.supervisor,
       name: this.addon.name,
       version: this.addon.version_latest,
-      snapshotParams: {
+      backupParams: {
         name: `addon_${this.addon.slug}_${this.addon.version}`,
         addons: [this.addon.slug],
         homeassistant: false,
@@ -1149,6 +1152,7 @@ class HassioAddonInfo extends LitElement {
           margin-bottom: 16px;
         }
         img.logo {
+          max-width: 100%;
           max-height: 60px;
           margin: 16px 0;
           display: block;
@@ -1158,10 +1162,10 @@ class HassioAddonInfo extends LitElement {
           display: flex;
         }
         ha-svg-icon.running {
-          color: var(--paper-green-400);
+          color: var(--success-color);
         }
         ha-svg-icon.stopped {
-          color: var(--google-red-300);
+          color: var(--error-color);
         }
         ha-call-api-button {
           font-weight: 500;

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -1,6 +1,7 @@
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
 import {
   fetchHassioAddonLogs,
@@ -34,7 +35,9 @@ class HassioAddonLogs extends LitElement {
     return html`
       <h1>${this.addon.name}</h1>
       <ha-card>
-        ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+        ${this._error
+          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          : ""}
         <div class="card-content">
           ${this._content
             ? html`<hassio-ansi-to-html
@@ -60,10 +63,6 @@ class HassioAddonLogs extends LitElement {
         ha-card {
           display: block;
         }
-        .errors {
-          color: var(--error-color);
-          margin-bottom: 16px;
-        }
       `,
     ];
   }

hassio/src/backups/hassio-backups.ts

@@ -25,12 +25,12 @@ import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-fab";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import {
-  fetchHassioSnapshots,
+  fetchHassioBackups,
   friendlyFolderName,
-  HassioSnapshot,
-  reloadHassioSnapshots,
-  removeSnapshot,
-} from "../../../src/data/hassio/snapshot";
+  HassioBackup,
+  reloadHassioBackups,
+  removeBackup,
+} from "../../../src/data/hassio/backup";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
@@ -40,14 +40,14 @@ import "../../../src/layouts/hass-tabs-subpage-data-table";
 import type { HaTabsSubpageDataTable } from "../../../src/layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
-import { showHassioCreateSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-create-snapshot";
-import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
-import { showSnapshotUploadDialog } from "../dialogs/snapshot/show-dialog-snapshot-upload";
+import { showHassioCreateBackupDialog } from "../dialogs/backup/show-dialog-hassio-create-backup";
+import { showHassioBackupDialog } from "../dialogs/backup/show-dialog-hassio-backup";
+import { showBackupUploadDialog } from "../dialogs/backup/show-dialog-backup-upload";
 import { supervisorTabs } from "../hassio-tabs";
 import { hassioStyle } from "../resources/hassio-style";
 
-@customElement("hassio-snapshots")
-export class HassioSnapshots extends LitElement {
+@customElement("hassio-backups")
+export class HassioBackups extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public supervisor!: Supervisor;
@@ -58,9 +58,9 @@ export class HassioSnapshots extends LitElement {
 
   @property({ type: Boolean }) public isWide!: boolean;
 
-  @state() private _selectedSnapshots: string[] = [];
+  @state() private _selectedBackups: string[] = [];
 
-  @state() private _snapshots?: HassioSnapshot[] = [];
+  @state() private _backups?: HassioBackup[] = [];
 
   @query("hass-tabs-subpage-data-table", true)
   private _dataTable!: HaTabsSubpageDataTable;
@@ -75,26 +75,26 @@ export class HassioSnapshots extends LitElement {
   }
 
   public async refreshData() {
-    await reloadHassioSnapshots(this.hass);
-    await this.fetchSnapshots();
+    await reloadHassioBackups(this.hass);
+    await this.fetchBackups();
   }
 
-  private _computeSnapshotContent = (snapshot: HassioSnapshot): string => {
-    if (snapshot.type === "full") {
-      return this.supervisor.localize("snapshot.full_snapshot");
+  private _computeBackupContent = (backup: HassioBackup): string => {
+    if (backup.type === "full") {
+      return this.supervisor.localize("backup.full_backup");
     }
     const content: string[] = [];
-    if (snapshot.content.homeassistant) {
+    if (backup.content.homeassistant) {
       content.push("Home Assistant");
     }
-    if (snapshot.content.folders.length !== 0) {
-      for (const folder of snapshot.content.folders) {
+    if (backup.content.folders.length !== 0) {
+      for (const folder of backup.content.folders) {
         content.push(friendlyFolderName[folder] || folder);
       }
     }
 
-    if (snapshot.content.addons.length !== 0) {
-      for (const addon of snapshot.content.addons) {
+    if (backup.content.addons.length !== 0) {
+      for (const addon of backup.content.addons) {
         content.push(
           this.supervisor.supervisor.addons.find(
             (entry) => entry.slug === addon
@@ -117,16 +117,16 @@ export class HassioSnapshots extends LitElement {
   private _columns = memoizeOne(
     (narrow: boolean): DataTableColumnContainer => ({
       name: {
-        title: this.supervisor?.localize("snapshot.name") || "",
+        title: this.supervisor?.localize("backup.name") || "",
         sortable: true,
         filterable: true,
         grows: true,
-        template: (entry: string, snapshot: any) =>
-          html`${entry || snapshot.slug}
-            <div class="secondary">${snapshot.secondary}</div>`,
+        template: (entry: string, backup: any) =>
+          html`${entry || backup.slug}
+            <div class="secondary">${backup.secondary}</div>`,
       },
       date: {
-        title: this.supervisor?.localize("snapshot.created") || "",
+        title: this.supervisor?.localize("backup.created") || "",
         width: "15%",
         direction: "desc",
         hidden: narrow,
@@ -143,10 +143,10 @@ export class HassioSnapshots extends LitElement {
     })
   );
 
-  private _snapshotData = memoizeOne((snapshots: HassioSnapshot[]) =>
-    snapshots.map((snapshot) => ({
-      ...snapshot,
-      secondary: this._computeSnapshotContent(snapshot),
+  private _backupData = memoizeOne((backups: HassioBackup[]) =>
+    backups.map((backup) => ({
+      ...backup,
+      secondary: this._computeBackupContent(backup),
     }))
   );
 
@@ -160,11 +160,11 @@ export class HassioSnapshots extends LitElement {
         .hass=${this.hass}
         .localizeFunc=${this.supervisor.localize}
         .searchLabel=${this.supervisor.localize("search")}
-        .noDataText=${this.supervisor.localize("snapshot.no_snapshots")}
+        .noDataText=${this.supervisor.localize("backup.no_backups")}
         .narrow=${this.narrow}
         .route=${this.route}
         .columns=${this._columns(this.narrow)}
-        .data=${this._snapshotData(this._snapshots || [])}
+        .data=${this._backupData(this._backups || [])}
         id="slug"
         @row-click=${this._handleRowClicked}
         @selection-changed=${this._handleSelectionChanged}
@@ -187,12 +187,12 @@ export class HassioSnapshots extends LitElement {
           </mwc-list-item>
           ${atLeastVersion(this.hass.config.version, 0, 116)
             ? html`<mwc-list-item>
-                ${this.supervisor?.localize("snapshot.upload_snapshot")}
+                ${this.supervisor?.localize("backup.upload_backup")}
               </mwc-list-item>`
             : ""}
         </ha-button-menu>
 
-        ${this._selectedSnapshots.length
+        ${this._selectedBackups.length
           ? html`<div
               class=${classMap({
                 "header-toolbar": this.narrow,
@@ -201,8 +201,8 @@ export class HassioSnapshots extends LitElement {
               slot="header"
             >
               <p class="selected-txt">
-                ${this.supervisor.localize("snapshot.selected", {
-                  number: this._selectedSnapshots.length,
+                ${this.supervisor.localize("backup.selected", {
+                  number: this._selectedBackups.length,
                 })}
               </p>
               <div class="header-btns">
@@ -212,7 +212,7 @@ export class HassioSnapshots extends LitElement {
                         @click=${this._deleteSelected}
                         class="warning"
                       >
-                        ${this.supervisor.localize("snapshot.delete_selected")}
+                        ${this.supervisor.localize("backup.delete_selected")}
                       </mwc-button>
                     `
                   : html`
@@ -224,7 +224,7 @@ export class HassioSnapshots extends LitElement {
                         <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
                       </mwc-icon-button>
                       <paper-tooltip animation-delay="0" for="delete-btn">
-                        ${this.supervisor.localize("snapshot.delete_selected")}
+                        ${this.supervisor.localize("backup.delete_selected")}
                       </paper-tooltip>
                     `}
               </div>
@@ -233,8 +233,8 @@ export class HassioSnapshots extends LitElement {
 
         <ha-fab
           slot="fab"
-          @click=${this._createSnapshot}
-          .label=${this.supervisor.localize("snapshot.create_snapshot")}
+          @click=${this._createBackup}
+          .label=${this.supervisor.localize("backup.create_backup")}
           extended
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
@@ -249,7 +249,7 @@ export class HassioSnapshots extends LitElement {
         this.refreshData();
         break;
       case 1:
-        this._showUploadSnapshotDialog();
+        this._showUploadBackupDialog();
         break;
     }
   }
@@ -257,33 +257,33 @@ export class HassioSnapshots extends LitElement {
   private _handleSelectionChanged(
     ev: HASSDomEvent<SelectionChangedEvent>
   ): void {
-    this._selectedSnapshots = ev.detail.value;
+    this._selectedBackups = ev.detail.value;
   }
 
-  private _showUploadSnapshotDialog() {
-    showSnapshotUploadDialog(this, {
-      showSnapshot: (slug: string) =>
-        showHassioSnapshotDialog(this, {
+  private _showUploadBackupDialog() {
+    showBackupUploadDialog(this, {
+      showBackup: (slug: string) =>
+        showHassioBackupDialog(this, {
           slug,
           supervisor: this.supervisor,
-          onDelete: () => this.fetchSnapshots(),
+          onDelete: () => this.fetchBackups(),
         }),
-      reloadSnapshot: () => this.refreshData(),
+      reloadBackup: () => this.refreshData(),
     });
   }
 
-  private async fetchSnapshots() {
-    await reloadHassioSnapshots(this.hass);
-    this._snapshots = await fetchHassioSnapshots(this.hass);
+  private async fetchBackups() {
+    await reloadHassioBackups(this.hass);
+    this._backups = await fetchHassioBackups(this.hass);
   }
 
   private async _deleteSelected() {
     const confirm = await showConfirmationDialog(this, {
-      title: this.supervisor.localize("snapshot.delete_snapshot_title"),
-      text: this.supervisor.localize("snapshot.delete_snapshot_text", {
-        number: this._selectedSnapshots.length,
+      title: this.supervisor.localize("backup.delete_backup_title"),
+      text: this.supervisor.localize("backup.delete_backup_text", {
+        number: this._selectedBackups.length,
       }),
-      confirmText: this.supervisor.localize("snapshot.delete_snapshot_confirm"),
+      confirmText: this.supervisor.localize("backup.delete_backup_confirm"),
     });
 
     if (!confirm) {
@@ -292,44 +292,44 @@ export class HassioSnapshots extends LitElement {
 
     try {
       await Promise.all(
-        this._selectedSnapshots.map((slug) => removeSnapshot(this.hass, slug))
+        this._selectedBackups.map((slug) => removeBackup(this.hass, slug))
       );
     } catch (err) {
       showAlertDialog(this, {
-        title: this.supervisor.localize("snapshot.failed_to_delete"),
+        title: this.supervisor.localize("backup.failed_to_delete"),
         text: extractApiErrorMessage(err),
       });
       return;
     }
-    await reloadHassioSnapshots(this.hass);
-    this._snapshots = await fetchHassioSnapshots(this.hass);
+    await reloadHassioBackups(this.hass);
+    this._backups = await fetchHassioBackups(this.hass);
     this._dataTable.clearSelection();
   }
 
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const slug = ev.detail.id;
-    showHassioSnapshotDialog(this, {
+    showHassioBackupDialog(this, {
       slug,
       supervisor: this.supervisor,
-      onDelete: () => this.fetchSnapshots(),
+      onDelete: () => this.fetchBackups(),
     });
   }
 
-  private _createSnapshot() {
+  private _createBackup() {
     if (this.supervisor!.info.state !== "running") {
       showAlertDialog(this, {
-        title: this.supervisor!.localize("snapshot.could_not_create"),
+        title: this.supervisor!.localize("backup.could_not_create"),
         text: this.supervisor!.localize(
-          "snapshot.create_blocked_not_running",
+          "backup.create_blocked_not_running",
           "state",
           this.supervisor!.info.state
         ),
       });
       return;
     }
-    showHassioCreateSnapshotDialog(this, {
+    showHassioCreateBackupDialog(this, {
       supervisor: this.supervisor!,
-      onCreate: () => this.fetchSnapshots(),
+      onCreate: () => this.fetchBackups(),
     });
   }
 
@@ -378,6 +378,6 @@ export class HassioSnapshots extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hassio-snapshots": HassioSnapshots;
+    "hassio-backups": HassioBackups;
   }
 }

hassio/src/components/hassio-ansi-to-html.ts

@@ -41,16 +41,16 @@ class HassioAnsiToHtml extends LitElement {
         text-decoration: underline line-through;
       }
       .fg-red {
-        color: rgb(222, 56, 43);
+        color: var(--error-color);
       }
       .fg-green {
-        color: rgb(57, 181, 74);
+        color: var(--success-color);
       }
       .fg-yellow {
-        color: rgb(255, 199, 6);
+        color: var(--warning-color);
       }
       .fg-blue {
-        color: rgb(0, 111, 184);
+        color: var(--info-color);
       }
       .fg-magenta {
         color: rgb(118, 38, 113);
@@ -65,16 +65,16 @@ class HassioAnsiToHtml extends LitElement {
         background-color: rgb(0, 0, 0);
       }
       .bg-red {
-        background-color: rgb(222, 56, 43);
+        background-color: var(--error-color);
       }
       .bg-green {
-        background-color: rgb(57, 181, 74);
+        background-color: var(--success-color);
       }
       .bg-yellow {
-        background-color: rgb(255, 199, 6);
+        background-color: var(--warning-color);
       }
       .bg-blue {
-        background-color: rgb(0, 111, 184);
+        background-color: var(--info-color);
       }
       .bg-magenta {
         background-color: rgb(118, 38, 113);

hassio/src/components/hassio-card-content.ts

@@ -80,14 +80,14 @@ class HassioCardContent extends LitElement {
         color: var(--secondary-text-color);
       }
       ha-svg-icon.update {
-        color: var(--paper-orange-400);
+        color: var(--warning-color);
       }
       ha-svg-icon.running,
       ha-svg-icon.installed {
-        color: var(--paper-green-400);
+        color: var(--success-color);
       }
       ha-svg-icon.hassupdate,
-      ha-svg-icon.snapshot {
+      ha-svg-icon.backup {
         color: var(--paper-item-icon-color);
       }
       ha-svg-icon.not_available {
@@ -122,7 +122,7 @@ class HassioCardContent extends LitElement {
       }
       .dot {
         position: absolute;
-        background-color: var(--paper-orange-400);
+        background-color: var(--warning-color);
         width: 12px;
         height: 12px;
         top: 8px;

hassio/src/components/hassio-upload-backup.ts

@@ -8,23 +8,20 @@ import "../../../src/components/ha-circular-progress";
 import "../../../src/components/ha-file-upload";
 import "../../../src/components/ha-svg-icon";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import {
-  HassioSnapshot,
-  uploadSnapshot,
-} from "../../../src/data/hassio/snapshot";
+import { HassioBackup, uploadBackup } from "../../../src/data/hassio/backup";
 import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../../../src/types";
 
 declare global {
   interface HASSDomEvents {
-    "snapshot-uploaded": { snapshot: HassioSnapshot };
+    "backup-uploaded": { backup: HassioBackup };
   }
 }
 
 const MAX_FILE_SIZE = 1 * 1024 * 1024 * 1024; // 1GB
 
-@customElement("hassio-upload-snapshot")
-export class HassioUploadSnapshot extends LitElement {
+@customElement("hassio-upload-backup")
+export class HassioUploadBackup extends LitElement {
   public hass!: HomeAssistant;
 
   @state() public value: string | null = null;
@@ -37,7 +34,7 @@ export class HassioUploadSnapshot extends LitElement {
         .uploading=${this._uploading}
         .icon=${mdiFolderUpload}
         accept="application/x-tar"
-        label="Upload snapshot"
+        label="Upload backup"
         @file-picked=${this._uploadFile}
         auto-open-file-dialog
       ></ha-file-upload>
@@ -49,10 +46,10 @@ export class HassioUploadSnapshot extends LitElement {
 
     if (file.size > MAX_FILE_SIZE) {
       showAlertDialog(this, {
-        title: "Snapshot file is too big",
+        title: "Backup file is too big",
         text: html`The maximum allowed filesize is 1GB.<br />
           <a
-            href="https://www.home-assistant.io/hassio/haos_common_tasks/#restoring-a-snapshot-on-a-new-install"
+            href="https://www.home-assistant.io/hassio/haos_common_tasks/#restoring-a-backup-on-a-new-install"
             target="_blank"
             >Have a look here on how to restore it.</a
           >`,
@@ -64,15 +61,15 @@ export class HassioUploadSnapshot extends LitElement {
     if (!["application/x-tar"].includes(file.type)) {
       showAlertDialog(this, {
         title: "Unsupported file format",
-        text: "Please choose a Home Assistant snapshot file (.tar)",
+        text: "Please choose a Home Assistant backup file (.tar)",
         confirmText: "ok",
       });
       return;
     }
     this._uploading = true;
     try {
-      const snapshot = await uploadSnapshot(this.hass, file);
-      fireEvent(this, "snapshot-uploaded", { snapshot: snapshot.data });
+      const backup = await uploadBackup(this.hass, file);
+      fireEvent(this, "backup-uploaded", { backup: backup.data });
     } catch (err) {
       showAlertDialog(this, {
         title: "Upload failed",
@@ -87,6 +84,6 @@ export class HassioUploadSnapshot extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hassio-upload-snapshot": HassioUploadSnapshot;
+    "hassio-upload-backup": HassioUploadBackup;
   }
 }

hassio/src/components/supervisor-backup-content.ts

@@ -11,10 +11,10 @@ import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-radio";
 import type { HaRadio } from "../../../src/components/ha-radio";
 import {
-  HassioFullSnapshotCreateParams,
-  HassioPartialSnapshotCreateParams,
-  HassioSnapshotDetail,
-} from "../../../src/data/hassio/snapshot";
+  HassioFullBackupCreateParams,
+  HassioPartialBackupCreateParams,
+  HassioBackupDetail,
+} from "../../../src/data/hassio/backup";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { PolymerChangedEvent } from "../../../src/polymer-types";
 import { HomeAssistant } from "../../../src/types";
@@ -64,17 +64,17 @@ const _computeAddons = (addons): AddonCheckboxItem[] =>
     }))
     .sort((a, b) => (a.name > b.name ? 1 : -1));
 
-@customElement("supervisor-snapshot-content")
-export class SupervisorSnapshotContent extends LitElement {
+@customElement("supervisor-backup-content")
+export class SupervisorBackupContent extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public localize?: LocalizeFunc;
 
   @property({ attribute: false }) public supervisor?: Supervisor;
 
-  @property({ attribute: false }) public snapshot?: HassioSnapshotDetail;
+  @property({ attribute: false }) public backup?: HassioBackupDetail;
 
-  @property() public snapshotType: HassioSnapshotDetail["type"] = "full";
+  @property() public backupType: HassioBackupDetail["type"] = "full";
 
   @property({ attribute: false }) public folders?: CheckboxItem[];
 
@@ -82,37 +82,35 @@ export class SupervisorSnapshotContent extends LitElement {
 
   @property({ type: Boolean }) public homeAssistant = false;
 
-  @property({ type: Boolean }) public snapshotHasPassword = false;
+  @property({ type: Boolean }) public backupHasPassword = false;
 
   @property({ type: Boolean }) public onboarding = false;
 
-  @property() public snapshotName = "";
+  @property() public backupName = "";
 
-  @property() public snapshotPassword = "";
+  @property() public backupPassword = "";
 
-  @property() public confirmSnapshotPassword = "";
+  @property() public confirmBackupPassword = "";
 
   public willUpdate(changedProps) {
     super.willUpdate(changedProps);
     if (!this.hasUpdated) {
       this.folders = _computeFolders(
-        this.snapshot
-          ? this.snapshot.folders
+        this.backup
+          ? this.backup.folders
           : ["homeassistant", "ssl", "share", "media", "addons/local"]
       );
       this.addons = _computeAddons(
-        this.snapshot
-          ? this.snapshot.addons
-          : this.supervisor?.supervisor.addons
+        this.backup ? this.backup.addons : this.supervisor?.supervisor.addons
       );
-      this.snapshotType = this.snapshot?.type || "full";
-      this.snapshotName = this.snapshot?.name || "";
-      this.snapshotHasPassword = this.snapshot?.protected || false;
+      this.backupType = this.backup?.type || "full";
+      this.backupName = this.backup?.name || "";
+      this.backupHasPassword = this.backup?.protected || false;
     }
   }
 
   private _localize = (string: string) =>
-    this.supervisor?.localize(`snapshot.${string}`) ||
+    this.supervisor?.localize(`backup.${string}`) ||
     this.localize!(`ui.panel.page-onboarding.restore.${string}`);
 
   protected render(): TemplateResult {
@@ -120,64 +118,64 @@ export class SupervisorSnapshotContent extends LitElement {
       return html``;
     }
     const foldersSection =
-      this.snapshotType === "partial" ? this._getSection("folders") : undefined;
+      this.backupType === "partial" ? this._getSection("folders") : undefined;
     const addonsSection =
-      this.snapshotType === "partial" ? this._getSection("addons") : undefined;
+      this.backupType === "partial" ? this._getSection("addons") : undefined;
 
     return html`
-      ${this.snapshot
+      ${this.backup
         ? html`<div class="details">
-            ${this.snapshot.type === "full"
-              ? this._localize("full_snapshot")
-              : this._localize("partial_snapshot")}
-            (${Math.ceil(this.snapshot.size * 10) / 10 + " MB"})<br />
+            ${this.backup.type === "full"
+              ? this._localize("full_backup")
+              : this._localize("partial_backup")}
+            (${Math.ceil(this.backup.size * 10) / 10 + " MB"})<br />
             ${this.hass
-              ? formatDateTime(new Date(this.snapshot.date), this.hass.locale)
-              : this.snapshot.date}
+              ? formatDateTime(new Date(this.backup.date), this.hass.locale)
+              : this.backup.date}
           </div>`
         : html`<paper-input
-            name="snapshotName"
-            .label=${this.supervisor?.localize("snapshot.name") || "Name"}
-            .value=${this.snapshotName}
+            name="backupName"
+            .label=${this._localize("name")}
+            .value=${this.backupName}
             @value-changed=${this._handleTextValueChanged}
           >
           </paper-input>`}
-      ${!this.snapshot || this.snapshot.type === "full"
+      ${!this.backup || this.backup.type === "full"
         ? html`<div class="sub-header">
-              ${!this.snapshot
+              ${!this.backup
                 ? this._localize("type")
                 : this._localize("select_type")}
             </div>
-            <div class="snapshot-types">
-              <ha-formfield .label=${this._localize("full_snapshot")}>
+            <div class="backup-types">
+              <ha-formfield .label=${this._localize("full_backup")}>
                 <ha-radio
                   @change=${this._handleRadioValueChanged}
                   value="full"
-                  name="snapshotType"
-                  .checked=${this.snapshotType === "full"}
+                  name="backupType"
+                  .checked=${this.backupType === "full"}
                 >
                 </ha-radio>
               </ha-formfield>
-              <ha-formfield .label=${this._localize("partial_snapshot")}>
+              <ha-formfield .label=${this._localize("partial_backup")}>
                 <ha-radio
                   @change=${this._handleRadioValueChanged}
                   value="partial"
-                  name="snapshotType"
-                  .checked=${this.snapshotType === "partial"}
+                  name="backupType"
+                  .checked=${this.backupType === "partial"}
                 >
                 </ha-radio>
               </ha-formfield>
             </div>`
         : ""}
-      ${this.snapshotType === "partial"
+      ${this.backupType === "partial"
         ? html`<div class="partial-picker">
-            ${this.snapshot && this.snapshot.homeassistant
+            ${this.backup && this.backup.homeassistant
               ? html`
                   <ha-formfield
                     .label=${html`<supervisor-formfield-label
                       label="Home Assistant"
                       .iconPath=${mdiHomeAssistant}
-                      .version=${this.snapshot.homeassistant}
+                      .version=${this.backup.homeassistant}
                     >
                     </supervisor-formfield-label>`}
                   >
@@ -233,38 +231,38 @@ export class SupervisorSnapshotContent extends LitElement {
               : ""}
           </div> `
         : ""}
-      ${this.snapshotType === "partial" &&
-      (!this.snapshot || this.snapshotHasPassword)
+      ${this.backupType === "partial" &&
+      (!this.backup || this.backupHasPassword)
         ? html`<hr />`
         : ""}
-      ${!this.snapshot
+      ${!this.backup
         ? html`<ha-formfield
             class="password"
             .label=${this._localize("password_protection")}
           >
             <ha-checkbox
-              .checked=${this.snapshotHasPassword}
+              .checked=${this.backupHasPassword}
               @change=${this._toggleHasPassword}
             >
             </ha-checkbox>
           </ha-formfield>`
         : ""}
-      ${this.snapshotHasPassword
+      ${this.backupHasPassword
         ? html`
             <paper-input
               .label=${this._localize("password")}
               type="password"
-              name="snapshotPassword"
-              .value=${this.snapshotPassword}
+              name="backupPassword"
+              .value=${this.backupPassword}
               @value-changed=${this._handleTextValueChanged}
             >
             </paper-input>
-            ${!this.snapshot
+            ${!this.backup
               ? html` <paper-input
-                  .label=${this.supervisor?.localize("confirm_password")}
+                  .label=${this._localize("confirm_password")}
                   type="password"
-                  name="confirmSnapshotPassword"
-                  .value=${this.confirmSnapshotPassword}
+                  name="confirmBackupPassword"
+                  .value=${this.confirmBackupPassword}
                   @value-changed=${this._handleTextValueChanged}
                 >
                 </paper-input>`
@@ -307,7 +305,7 @@ export class SupervisorSnapshotContent extends LitElement {
         display: block;
         margin: 0 -14px -16px;
       }
-      .snapshot-types {
+      .backup-types {
         display: flex;
         margin-left: -13px;
       }
@@ -317,23 +315,23 @@ export class SupervisorSnapshotContent extends LitElement {
     `;
   }
 
-  public snapshotDetails():
-    | HassioPartialSnapshotCreateParams
-    | HassioFullSnapshotCreateParams {
+  public backupDetails():
+    | HassioPartialBackupCreateParams
+    | HassioFullBackupCreateParams {
     const data: any = {};
 
-    if (!this.snapshot) {
-      data.name = this.snapshotName || formatDate(new Date(), this.hass.locale);
+    if (!this.backup) {
+      data.name = this.backupName || formatDate(new Date(), this.hass.locale);
     }
 
-    if (this.snapshotHasPassword) {
-      data.password = this.snapshotPassword;
-      if (!this.snapshot) {
-        data.confirm_password = this.confirmSnapshotPassword;
+    if (this.backupHasPassword) {
+      data.password = this.backupPassword;
+      if (!this.backup) {
+        data.confirm_password = this.confirmBackupPassword;
       }
     }
 
-    if (this.snapshotType === "full") {
+    if (this.backupType === "full") {
       return data;
     }
 
@@ -415,7 +413,7 @@ export class SupervisorSnapshotContent extends LitElement {
   }
 
   private _toggleHasPassword(): void {
-    this.snapshotHasPassword = !this.snapshotHasPassword;
+    this.backupHasPassword = !this.backupHasPassword;
   }
 
   private _toggleSection(ev): void {
@@ -445,6 +443,6 @@ export class SupervisorSnapshotContent extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "supervisor-snapshot-content": SupervisorSnapshotContent;
+    "supervisor-backup-content": SupervisorBackupContent;
   }
 }

hassio/src/dashboard/hassio-addons.ts

@@ -3,7 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
-import { compare } from "../../../src/common/string/compare";
+import { stringCompare } from "../../../src/common/string/compare";
 import "../../../src/components/ha-card";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../src/resources/styles";
@@ -33,7 +33,7 @@ class HassioAddons extends LitElement {
                 </ha-card>
               `
             : this.supervisor.supervisor.addons
-                .sort((a, b) => compare(a.name, b.name))
+                .sort((a, b) => stringCompare(a.name, b.name))
                 .map(
                   (addon) => html`
                     <ha-card .addon=${addon} @click=${this._addonTapped}>

hassio/src/dashboard/hassio-update.ts

@@ -162,7 +162,7 @@ export class HassioUpdate extends LitElement {
         supervisor: this.supervisor,
         name: "Home Assistant Core",
         version: this.supervisor.core.version_latest,
-        snapshotParams: {
+        backupParams: {
           name: `core_${this.supervisor.core.version}`,
           folders: ["homeassistant"],
           homeassistant: true,

hassio/src/dialogs/backup/dialog-hassio-backup-upload.ts

@@ -6,20 +6,20 @@ import "../../../../src/components/ha-header-bar";
 import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
-import "../../components/hassio-upload-snapshot";
-import { HassioSnapshotUploadDialogParams } from "./show-dialog-snapshot-upload";
+import "../../components/hassio-upload-backup";
+import { HassioBackupUploadDialogParams } from "./show-dialog-backup-upload";
 
-@customElement("dialog-hassio-snapshot-upload")
-export class DialogHassioSnapshotUpload
+@customElement("dialog-hassio-backup-upload")
+export class DialogHassioBackupUpload
   extends LitElement
-  implements HassDialog<HassioSnapshotUploadDialogParams>
+  implements HassDialog<HassioBackupUploadDialogParams>
 {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private _params?: HassioSnapshotUploadDialogParams;
+  @state() private _params?: HassioBackupUploadDialogParams;
 
   public async showDialog(
-    params: HassioSnapshotUploadDialogParams
+    params: HassioBackupUploadDialogParams
   ): Promise<void> {
     this._params = params;
     await this.updateComplete;
@@ -27,8 +27,8 @@ export class DialogHassioSnapshotUpload
 
   public closeDialog(): void {
     if (this._params && !this._params.onboarding) {
-      if (this._params.reloadSnapshot) {
-        this._params.reloadSnapshot();
+      if (this._params.reloadBackup) {
+        this._params.reloadBackup();
       }
     }
     this._params = undefined;
@@ -51,23 +51,23 @@ export class DialogHassioSnapshotUpload
       >
         <div slot="heading">
           <ha-header-bar>
-            <span slot="title"> Upload snapshot </span>
+            <span slot="title"> Upload backup </span>
             <mwc-icon-button slot="actionItems" dialogAction="cancel">
               <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
             </mwc-icon-button>
           </ha-header-bar>
         </div>
-        <hassio-upload-snapshot
-          @snapshot-uploaded=${this._snapshotUploaded}
+        <hassio-upload-backup
+          @backup-uploaded=${this._backupUploaded}
           .hass=${this.hass}
-        ></hassio-upload-snapshot>
+        ></hassio-upload-backup>
       </ha-dialog>
     `;
   }
 
-  private _snapshotUploaded(ev) {
-    const snapshot = ev.detail.snapshot;
-    this._params?.showSnapshot(snapshot.slug);
+  private _backupUploaded(ev) {
+    const backup = ev.detail.backup;
+    this._params?.showBackup(backup.slug);
     this.closeDialog();
   }
 
@@ -94,6 +94,6 @@ export class DialogHassioSnapshotUpload
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dialog-hassio-snapshot-upload": DialogHassioSnapshotUpload;
+    "dialog-hassio-backup-upload": DialogHassioBackupUpload;
   }
 }

hassio/src/dialogs/backup/dialog-hassio-backup.ts

@@ -6,15 +6,16 @@ import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { slugify } from "../../../../src/common/string/slugify";
 import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-header-bar";
 import "../../../../src/components/ha-svg-icon";
 import { getSignedPath } from "../../../../src/data/auth";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
-  fetchHassioSnapshotInfo,
-  HassioSnapshotDetail,
-} from "../../../../src/data/hassio/snapshot";
+  fetchHassioBackupInfo,
+  HassioBackupDetail,
+} from "../../../../src/data/hassio/backup";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -23,44 +24,45 @@ import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { fileDownload } from "../../../../src/util/file_download";
-import "../../components/supervisor-snapshot-content";
-import type { SupervisorSnapshotContent } from "../../components/supervisor-snapshot-content";
-import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
+import "../../components/supervisor-backup-content";
+import type { SupervisorBackupContent } from "../../components/supervisor-backup-content";
+import { HassioBackupDialogParams } from "./show-dialog-hassio-backup";
+import { atLeastVersion } from "../../../../src/common/config/version";
 
-@customElement("dialog-hassio-snapshot")
-class HassioSnapshotDialog
+@customElement("dialog-hassio-backup")
+class HassioBackupDialog
   extends LitElement
-  implements HassDialog<HassioSnapshotDialogParams>
+  implements HassDialog<HassioBackupDialogParams>
 {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _error?: string;
 
-  @state() private _snapshot?: HassioSnapshotDetail;
+  @state() private _backup?: HassioBackupDetail;
 
-  @state() private _dialogParams?: HassioSnapshotDialogParams;
+  @state() private _dialogParams?: HassioBackupDialogParams;
 
-  @state() private _restoringSnapshot = false;
+  @state() private _restoringBackup = false;
 
-  @query("supervisor-snapshot-content")
-  private _snapshotContent!: SupervisorSnapshotContent;
+  @query("supervisor-backup-content")
+  private _backupContent!: SupervisorBackupContent;
 
-  public async showDialog(params: HassioSnapshotDialogParams) {
-    this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
+  public async showDialog(params: HassioBackupDialogParams) {
+    this._backup = await fetchHassioBackupInfo(this.hass, params.slug);
     this._dialogParams = params;
-    this._restoringSnapshot = false;
+    this._restoringBackup = false;
   }
 
   public closeDialog() {
-    this._snapshot = undefined;
+    this._backup = undefined;
     this._dialogParams = undefined;
-    this._restoringSnapshot = false;
+    this._restoringBackup = false;
     this._error = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render(): TemplateResult {
-    if (!this._dialogParams || !this._snapshot) {
+    if (!this._dialogParams || !this._backup) {
       return html``;
     }
     return html`
@@ -72,26 +74,28 @@ class HassioSnapshotDialog
       >
         <div slot="heading">
           <ha-header-bar>
-            <span slot="title">${this._snapshot.name}</span>
+            <span slot="title">${this._backup.name}</span>
             <mwc-icon-button slot="actionItems" dialogAction="cancel">
               <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
             </mwc-icon-button>
           </ha-header-bar>
         </div>
-        ${this._restoringSnapshot
+        ${this._restoringBackup
           ? html` <ha-circular-progress active></ha-circular-progress>`
-          : html`<supervisor-snapshot-content
+          : html`<supervisor-backup-content
               .hass=${this.hass}
               .supervisor=${this._dialogParams.supervisor}
-              .snapshot=${this._snapshot}
+              .backup=${this._backup}
               .onboarding=${this._dialogParams.onboarding || false}
               .localize=${this._dialogParams.localize}
             >
-            </supervisor-snapshot-content>`}
-        ${this._error ? html`<p class="error">Error: ${this._error}</p>` : ""}
+            </supervisor-backup-content>`}
+        ${this._error
+          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          : ""}
 
         <mwc-button
-          .disabled=${this._restoringSnapshot}
+          .disabled=${this._restoringBackup}
           slot="secondaryAction"
           @click=${this._restoreClicked}
         >
@@ -108,8 +112,8 @@ class HassioSnapshotDialog
               <mwc-icon-button slot="trigger" alt="menu">
                 <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
               </mwc-icon-button>
-              <mwc-list-item>Download Snapshot</mwc-list-item>
-              <mwc-list-item class="error">Delete Snapshot</mwc-list-item>
+              <mwc-list-item>Download Backup</mwc-list-item>
+              <mwc-list-item class="error">Delete Backup</mwc-list-item>
             </ha-button-menu>`
           : ""}
       </ha-dialog>
@@ -150,30 +154,30 @@ class HassioSnapshotDialog
   }
 
   private async _restoreClicked() {
-    const snapshotDetails = this._snapshotContent.snapshotDetails();
-    this._restoringSnapshot = true;
-    if (this._snapshotContent.snapshotType === "full") {
-      await this._fullRestoreClicked(snapshotDetails);
+    const backupDetails = this._backupContent.backupDetails();
+    this._restoringBackup = true;
+    if (this._backupContent.backupType === "full") {
+      await this._fullRestoreClicked(backupDetails);
     } else {
-      await this._partialRestoreClicked(snapshotDetails);
+      await this._partialRestoreClicked(backupDetails);
     }
-    this._restoringSnapshot = false;
+    this._restoringBackup = false;
   }
 
-  private async _partialRestoreClicked(snapshotDetails) {
+  private async _partialRestoreClicked(backupDetails) {
     if (
       this._dialogParams?.supervisor !== undefined &&
       this._dialogParams?.supervisor.info.state !== "running"
     ) {
       await showAlertDialog(this, {
-        title: "Could not restore snapshot",
-        text: `Restoring a snapshot is not possible right now because the system is in ${this._dialogParams?.supervisor.info.state} state.`,
+        title: "Could not restore backup",
+        text: `Restoring a backup is not possible right now because the system is in ${this._dialogParams?.supervisor.info.state} state.`,
       });
       return;
     }
     if (
       !(await showConfirmationDialog(this, {
-        title: "Are you sure you want partially to restore this snapshot?",
+        title: "Are you sure you want partially to restore this backup?",
         confirmText: "restore",
         dismissText: "cancel",
       }))
@@ -186,8 +190,12 @@ class HassioSnapshotDialog
         .callApi(
           "POST",
 
-          `hassio/snapshots/${this._snapshot!.slug}/restore/partial`,
-          snapshotDetails
+          `hassio/${
+            atLeastVersion(this.hass.config.version, 2021, 9)
+              ? "backups"
+              : "snapshots"
+          }/${this._backup!.slug}/restore/partial`,
+          backupDetails
         )
         .then(
           () => {
@@ -199,29 +207,29 @@ class HassioSnapshotDialog
         );
     } else {
       fireEvent(this, "restoring");
-      fetch(`/api/hassio/snapshots/${this._snapshot!.slug}/restore/partial`, {
+      fetch(`/api/hassio/backups/${this._backup!.slug}/restore/partial`, {
         method: "POST",
-        body: JSON.stringify(snapshotDetails),
+        body: JSON.stringify(backupDetails),
       });
       this.closeDialog();
     }
   }
 
-  private async _fullRestoreClicked(snapshotDetails) {
+  private async _fullRestoreClicked(backupDetails) {
     if (
       this._dialogParams?.supervisor !== undefined &&
       this._dialogParams?.supervisor.info.state !== "running"
     ) {
       await showAlertDialog(this, {
-        title: "Could not restore snapshot",
-        text: `Restoring a snapshot is not possible right now because the system is in ${this._dialogParams?.supervisor.info.state} state.`,
+        title: "Could not restore backup",
+        text: `Restoring a backup is not possible right now because the system is in ${this._dialogParams?.supervisor.info.state} state.`,
       });
       return;
     }
     if (
       !(await showConfirmationDialog(this, {
         title:
-          "Are you sure you want to wipe your system and restore this snapshot?",
+          "Are you sure you want to wipe your system and restore this backup?",
         confirmText: "restore",
         dismissText: "cancel",
       }))
@@ -233,8 +241,12 @@ class HassioSnapshotDialog
       this.hass
         .callApi(
           "POST",
-          `hassio/snapshots/${this._snapshot!.slug}/restore/full`,
-          snapshotDetails
+          `hassio/${
+            atLeastVersion(this.hass.config.version, 2021, 9)
+              ? "backups"
+              : "snapshots"
+          }/${this._backup!.slug}/restore/full`,
+          backupDetails
         )
         .then(
           () => {
@@ -246,9 +258,9 @@ class HassioSnapshotDialog
         );
     } else {
       fireEvent(this, "restoring");
-      fetch(`/api/hassio/snapshots/${this._snapshot!.slug}/restore/full`, {
+      fetch(`/api/hassio/backups/${this._backup!.slug}/restore/full`, {
         method: "POST",
-        body: JSON.stringify(snapshotDetails),
+        body: JSON.stringify(backupDetails),
       });
       this.closeDialog();
     }
@@ -257,7 +269,7 @@ class HassioSnapshotDialog
   private async _deleteClicked() {
     if (
       !(await showConfirmationDialog(this, {
-        title: "Are you sure you want to delete this snapshot?",
+        title: "Are you sure you want to delete this backup?",
         confirmText: "delete",
         dismissText: "cancel",
       }))
@@ -267,7 +279,14 @@ class HassioSnapshotDialog
 
     this.hass
 
-      .callApi("POST", `hassio/snapshots/${this._snapshot!.slug}/remove`)
+      .callApi(
+        atLeastVersion(this.hass.config.version, 2021, 9) ? "DELETE" : "POST",
+        `hassio/${
+          atLeastVersion(this.hass.config.version, 2021, 9)
+            ? `backups/${this._backup!.slug}`
+            : `snapshots/${this._backup!.slug}/remove`
+        }`
+      )
       .then(
         () => {
           if (this._dialogParams!.onDelete) {
@@ -286,7 +305,11 @@ class HassioSnapshotDialog
     try {
       signedPath = await getSignedPath(
         this.hass,
-        `/api/hassio/snapshots/${this._snapshot!.slug}/download`
+        `/api/hassio/${
+          atLeastVersion(this.hass.config.version, 2021, 9)
+            ? "backups"
+            : "snapshots"
+        }/${this._backup!.slug}/download`
       );
     } catch (err) {
       await showAlertDialog(this, {
@@ -298,7 +321,7 @@ class HassioSnapshotDialog
     if (window.location.href.includes("ui.nabu.casa")) {
       const confirm = await showConfirmationDialog(this, {
         title: "Potential slow download",
-        text: "Downloading snapshots over the Nabu Casa URL will take some time, it is recomended to use your local URL instead, do you want to continue?",
+        text: "Downloading backups over the Nabu Casa URL will take some time, it is recomended to use your local URL instead, do you want to continue?",
         confirmText: "continue",
         dismissText: "cancel",
       });
@@ -310,19 +333,19 @@ class HassioSnapshotDialog
     fileDownload(
       this,
       signedPath.path,
-      `home_assistant_snapshot_${slugify(this._computeName)}.tar`
+      `home_assistant_backup_${slugify(this._computeName)}.tar`
     );
   }
 
   private get _computeName() {
-    return this._snapshot
-      ? this._snapshot.name || this._snapshot.slug
-      : "Unnamed snapshot";
+    return this._backup
+      ? this._backup.name || this._backup.slug
+      : "Unnamed backup";
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dialog-hassio-snapshot": HassioSnapshotDialog;
+    "dialog-hassio-backup": HassioBackupDialog;
   }
 }

hassio/src/dialogs/backup/dialog-hassio-create-backup.ts

@@ -2,41 +2,42 @@ import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/buttons/ha-progress-button";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
-  createHassioFullSnapshot,
-  createHassioPartialSnapshot,
-} from "../../../../src/data/hassio/snapshot";
+  createHassioFullBackup,
+  createHassioPartialBackup,
+} from "../../../../src/data/hassio/backup";
 import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
-import "../../components/supervisor-snapshot-content";
-import type { SupervisorSnapshotContent } from "../../components/supervisor-snapshot-content";
-import { HassioCreateSnapshotDialogParams } from "./show-dialog-hassio-create-snapshot";
+import "../../components/supervisor-backup-content";
+import type { SupervisorBackupContent } from "../../components/supervisor-backup-content";
+import { HassioCreateBackupDialogParams } from "./show-dialog-hassio-create-backup";
 
-@customElement("dialog-hassio-create-snapshot")
-class HassioCreateSnapshotDialog extends LitElement {
+@customElement("dialog-hassio-create-backup")
+class HassioCreateBackupDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private _dialogParams?: HassioCreateSnapshotDialogParams;
+  @state() private _dialogParams?: HassioCreateBackupDialogParams;
 
   @state() private _error?: string;
 
-  @state() private _creatingSnapshot = false;
+  @state() private _creatingBackup = false;
 
-  @query("supervisor-snapshot-content")
-  private _snapshotContent!: SupervisorSnapshotContent;
+  @query("supervisor-backup-content")
+  private _backupContent!: SupervisorBackupContent;
 
-  public showDialog(params: HassioCreateSnapshotDialogParams) {
+  public showDialog(params: HassioCreateBackupDialogParams) {
     this._dialogParams = params;
-    this._creatingSnapshot = false;
+    this._creatingBackup = false;
   }
 
   public closeDialog() {
     this._dialogParams = undefined;
-    this._creatingSnapshot = false;
+    this._creatingBackup = false;
     this._error = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -52,74 +53,76 @@ class HassioCreateSnapshotDialog extends LitElement {
         @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,
-          this._dialogParams.supervisor.localize("snapshot.create_snapshot")
+          this._dialogParams.supervisor.localize("backup.create_backup")
         )}
       >
-        ${this._creatingSnapshot
+        ${this._creatingBackup
           ? html` <ha-circular-progress active></ha-circular-progress>`
-          : html`<supervisor-snapshot-content
+          : html`<supervisor-backup-content
               .hass=${this.hass}
               .supervisor=${this._dialogParams.supervisor}
             >
-            </supervisor-snapshot-content>`}
-        ${this._error ? html`<p class="error">Error: ${this._error}</p>` : ""}
+            </supervisor-backup-content>`}
+        ${this._error
+          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          : ""}
         <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
           ${this._dialogParams.supervisor.localize("common.close")}
         </mwc-button>
         <mwc-button
-          .disabled=${this._creatingSnapshot}
+          .disabled=${this._creatingBackup}
           slot="primaryAction"
-          @click=${this._createSnapshot}
+          @click=${this._createBackup}
         >
-          ${this._dialogParams.supervisor.localize("snapshot.create")}
+          ${this._dialogParams.supervisor.localize("backup.create")}
         </mwc-button>
       </ha-dialog>
     `;
   }
 
-  private async _createSnapshot(): Promise<void> {
+  private async _createBackup(): Promise<void> {
     if (this._dialogParams!.supervisor.info.state !== "running") {
       showAlertDialog(this, {
         title: this._dialogParams!.supervisor.localize(
-          "snapshot.could_not_create"
+          "backup.could_not_create"
         ),
         text: this._dialogParams!.supervisor.localize(
-          "snapshot.create_blocked_not_running",
+          "backup.create_blocked_not_running",
           "state",
           this._dialogParams!.supervisor.info.state
         ),
       });
       return;
     }
-    const snapshotDetails = this._snapshotContent.snapshotDetails();
-    this._creatingSnapshot = true;
+    const backupDetails = this._backupContent.backupDetails();
+    this._creatingBackup = true;
 
     this._error = "";
-    if (snapshotDetails.password && !snapshotDetails.password.length) {
+    if (backupDetails.password && !backupDetails.password.length) {
       this._error = this._dialogParams!.supervisor.localize(
-        "snapshot.enter_password"
+        "backup.enter_password"
       );
-      this._creatingSnapshot = false;
+      this._creatingBackup = false;
       return;
     }
     if (
-      snapshotDetails.password &&
-      snapshotDetails.password !== snapshotDetails.confirm_password
+      backupDetails.password &&
+      backupDetails.password !== backupDetails.confirm_password
     ) {
       this._error = this._dialogParams!.supervisor.localize(
-        "snapshot.passwords_not_matching"
+        "backup.passwords_not_matching"
       );
-      this._creatingSnapshot = false;
+      this._creatingBackup = false;
       return;
     }
 
-    delete snapshotDetails.confirm_password;
+    delete backupDetails.confirm_password;
 
     try {
-      if (this._snapshotContent.snapshotType === "full") {
-        await createHassioFullSnapshot(this.hass, snapshotDetails);
+      if (this._backupContent.backupType === "full") {
+        await createHassioFullBackup(this.hass, backupDetails);
       } else {
-        await createHassioPartialSnapshot(this.hass, snapshotDetails);
+        await createHassioPartialBackup(this.hass, backupDetails);
       }
 
       this._dialogParams!.onCreate();
@@ -127,7 +130,7 @@ class HassioCreateSnapshotDialog extends LitElement {
     } catch (err) {
       this._error = extractApiErrorMessage(err);
     }
-    this._creatingSnapshot = false;
+    this._creatingBackup = false;
   }
 
   static get styles(): CSSResultGroup {
@@ -146,6 +149,6 @@ class HassioCreateSnapshotDialog extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dialog-hassio-create-snapshot": HassioCreateSnapshotDialog;
+    "dialog-hassio-create-backup": HassioCreateBackupDialog;
   }
 }

hassio/src/dialogs/backup/show-dialog-backup-upload.ts

@@ -0,0 +1,19 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "./dialog-hassio-backup-upload";
+
+export interface HassioBackupUploadDialogParams {
+  showBackup: (slug: string) => void;
+  reloadBackup?: () => Promise<void>;
+  onboarding?: boolean;
+}
+
+export const showBackupUploadDialog = (
+  element: HTMLElement,
+  dialogParams: HassioBackupUploadDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-backup-upload",
+    dialogImport: () => import("./dialog-hassio-backup-upload"),
+    dialogParams,
+  });
+};

hassio/src/dialogs/backup/show-dialog-hassio-backup.ts

@@ -2,7 +2,7 @@ import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { LocalizeFunc } from "../../../../src/common/translations/localize";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 
-export interface HassioSnapshotDialogParams {
+export interface HassioBackupDialogParams {
   slug: string;
   onDelete?: () => void;
   onboarding?: boolean;
@@ -10,13 +10,13 @@ export interface HassioSnapshotDialogParams {
   localize?: LocalizeFunc;
 }
 
-export const showHassioSnapshotDialog = (
+export const showHassioBackupDialog = (
   element: HTMLElement,
-  dialogParams: HassioSnapshotDialogParams
+  dialogParams: HassioBackupDialogParams
 ): void => {
   fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-hassio-snapshot",
-    dialogImport: () => import("./dialog-hassio-snapshot"),
+    dialogTag: "dialog-hassio-backup",
+    dialogImport: () => import("./dialog-hassio-backup"),
     dialogParams,
   });
 };

hassio/src/dialogs/backup/show-dialog-hassio-create-backup.ts

@@ -1,18 +1,18 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 
-export interface HassioCreateSnapshotDialogParams {
+export interface HassioCreateBackupDialogParams {
   supervisor: Supervisor;
   onCreate: () => void;
 }
 
-export const showHassioCreateSnapshotDialog = (
+export const showHassioCreateBackupDialog = (
   element: HTMLElement,
-  dialogParams: HassioCreateSnapshotDialogParams
+  dialogParams: HassioCreateBackupDialogParams
 ): void => {
   fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-hassio-create-snapshot",
-    dialogImport: () => import("./dialog-hassio-create-snapshot"),
+    dialogTag: "dialog-hassio-create-backup",
+    dialogImport: () => import("./dialog-hassio-create-backup"),
     dialogParams,
   });
 };

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/common/search/search-input";
-import { compare } from "../../../../src/common/string/compare";
+import { stringCompare } from "../../../../src/common/string/compare";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
 import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
@@ -27,7 +27,7 @@ const _filterDevices = memoizeOne(
               .toLocaleLowerCase()
               .includes(filter))
       )
-      .sort((a, b) => compare(a.name, b.name))
+      .sort((a, b) => stringCompare(a.name, b.name))
 );
 
 @customElement("dialog-hassio-hardware")

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -10,6 +10,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
@@ -251,9 +252,9 @@ export class DialogHassioNetwork
             `
           : ""}
         ${this._dirty
-          ? html`<div class="warning">
+          ? html`<ha-alert alert-type="warning">
               ${this.supervisor.localize("dialog.network.warning")}
-            </div>`
+            </ha-alert>`
           : ""}
       </div>
       <div class="buttons">

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -9,6 +9,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-svg-icon";
@@ -75,7 +76,9 @@ class HassioRepositoriesDialog extends LitElement {
           this._dialogParams!.supervisor.localize("dialog.repositories.title")
         )}
       >
-        ${this._error ? html`<div class="error">${this._error}</div>` : ""}
+        ${this._error
+          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          : ""}
         <div class="form">
           ${repositories.length
             ? repositories.map(

hassio/src/dialogs/snapshot/show-dialog-snapshot-upload.ts

@@ -1,19 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "./dialog-hassio-snapshot-upload";
-
-export interface HassioSnapshotUploadDialogParams {
-  showSnapshot: (slug: string) => void;
-  reloadSnapshot?: () => Promise<void>;
-  onboarding?: boolean;
-}
-
-export const showSnapshotUploadDialog = (
-  element: HTMLElement,
-  dialogParams: HassioSnapshotUploadDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-hassio-snapshot-upload",
-    dialogImport: () => import("./dialog-hassio-snapshot-upload"),
-    dialogParams,
-  });
-};

hassio/src/dialogs/update/dialog-supervisor-update.ts

@@ -2,6 +2,7 @@ import "@material/mwc-button/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-settings-row";
@@ -11,7 +12,7 @@ import {
   extractApiErrorMessage,
   ignoreSupervisorError,
 } from "../../../../src/data/hassio/common";
-import { createHassioPartialSnapshot } from "../../../../src/data/hassio/snapshot";
+import { createHassioPartialBackup } from "../../../../src/data/hassio/backup";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { SupervisorDialogSupervisorUpdateParams } from "./show-dialog-update";
@@ -22,9 +23,9 @@ class DialogSupervisorUpdate extends LitElement {
 
   @state() private _opened = false;
 
-  @state() private _createSnapshot = true;
+  @state() private _createBackup = true;
 
-  @state() private _action: "snapshot" | "update" | null = null;
+  @state() private _action: "backup" | "update" | null = null;
 
   @state() private _error?: string;
 
@@ -41,7 +42,7 @@ class DialogSupervisorUpdate extends LitElement {
 
   public closeDialog(): void {
     this._action = null;
-    this._createSnapshot = true;
+    this._createBackup = true;
     this._error = undefined;
     this._dialogParams = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -84,20 +85,20 @@ class DialogSupervisorUpdate extends LitElement {
               <ha-settings-row>
                 <span slot="heading">
                   ${this._dialogParams.supervisor.localize(
-                    "dialog.update.snapshot"
+                    "dialog.update.backup"
                   )}
                 </span>
                 <span slot="description">
                   ${this._dialogParams.supervisor.localize(
-                    "dialog.update.create_snapshot",
+                    "dialog.update.create_backup",
                     "name",
                     this._dialogParams.name
                   )}
                 </span>
                 <ha-switch
-                  .checked=${this._createSnapshot}
+                  .checked=${this._createBackup}
                   haptic
-                  @click=${this._toggleSnapshot}
+                  @click=${this._toggleBackup}
                 >
                 </ha-switch>
               </ha-settings-row>
@@ -123,27 +124,29 @@ class DialogSupervisorUpdate extends LitElement {
                       this._dialogParams.version
                     )
                   : this._dialogParams.supervisor.localize(
-                      "dialog.update.snapshotting",
+                      "dialog.update.creating_backup",
                       "name",
                       this._dialogParams.name
                     )}
               </p>`}
-        ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+        ${this._error
+          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          : ""}
       </ha-dialog>
     `;
   }
 
-  private _toggleSnapshot() {
-    this._createSnapshot = !this._createSnapshot;
+  private _toggleBackup() {
+    this._createBackup = !this._createBackup;
   }
 
   private async _update() {
-    if (this._createSnapshot) {
-      this._action = "snapshot";
+    if (this._createBackup) {
+      this._action = "backup";
       try {
-        await createHassioPartialSnapshot(
+        await createHassioPartialBackup(
           this.hass,
-          this._dialogParams!.snapshotParams
+          this._dialogParams!.backupParams
         );
       } catch (err) {
         this._error = extractApiErrorMessage(err);

hassio/src/dialogs/update/show-dialog-update.ts

@@ -5,7 +5,7 @@ export interface SupervisorDialogSupervisorUpdateParams {
   supervisor: Supervisor;
   name: string;
   version: string;
-  snapshotParams: any;
+  backupParams: any;
   updateHandler: () => Promise<void>;
 }
 

hassio/src/hassio-my-redirect.ts

@@ -26,7 +26,10 @@ const REDIRECTS: Redirects = {
     redirect: "/hassio/system",
   },
   supervisor_snapshots: {
-    redirect: "/hassio/snapshots",
+    redirect: "/hassio/backups",
+  },
+  supervisor_backups: {
+    redirect: "/hassio/backups",
   },
   supervisor_store: {
     redirect: "/hassio/store",

hassio/src/hassio-panel-router.ts

@@ -9,7 +9,7 @@ import "./addon-store/hassio-addon-store";
 // Don't codesplit it, that way the dashboard always loads fast.
 import "./dashboard/hassio-dashboard";
 // Don't codesplit the others, because it breaks the UI when pushed to a Pi
-import "./snapshots/hassio-snapshots";
+import "./backups/hassio-backups";
 import "./system/hassio-system";
 
 @customElement("hassio-panel-router")
@@ -23,6 +23,8 @@ class HassioPanelRouter extends HassRouterPage {
   @property({ type: Boolean }) public narrow!: boolean;
 
   protected routerOptions: RouterOptions = {
+    beforeRender: (page: string) =>
+      page === "snapshots" ? "backups" : undefined,
     routes: {
       dashboard: {
         tag: "hassio-dashboard",
@@ -30,8 +32,8 @@ class HassioPanelRouter extends HassRouterPage {
       store: {
         tag: "hassio-addon-store",
       },
-      snapshots: {
-        tag: "hassio-snapshots",
+      backups: {
+        tag: "hassio-backups",
       },
       system: {
         tag: "hassio-system",

hassio/src/hassio-router.ts

@@ -23,6 +23,8 @@ class HassioRouter extends HassRouterPage {
   protected routerOptions: RouterOptions = {
     // Hass.io has a page with tabs, so we route all non-matching routes to it.
     defaultPage: "dashboard",
+    beforeRender: (page: string) =>
+      page === "snapshots" ? "backups" : undefined,
     initialLoad: () => this._redirectIngress(),
     showLoading: true,
     routes: {
@@ -30,7 +32,7 @@ class HassioRouter extends HassRouterPage {
         tag: "hassio-panel",
         cache: true,
       },
-      snapshots: "dashboard",
+      backups: "dashboard",
       store: "dashboard",
       system: "dashboard",
       addon: {

hassio/src/hassio-tabs.ts

@@ -13,8 +13,8 @@ export const supervisorTabs: PageNavigation[] = [
     iconPath: mdiStore,
   },
   {
-    translationKey: "panel.snapshots",
-    path: `/hassio/snapshots`,
+    translationKey: "panel.backups",
+    path: `/hassio/backups`,
     iconPath: mdiBackupRestore,
   },
   {

hassio/src/system/hassio-core-info.ts

@@ -165,7 +165,7 @@ class HassioCoreInfo extends LitElement {
       supervisor: this.supervisor,
       name: "Home Assistant Core",
       version: this.supervisor.core.version_latest,
-      snapshotParams: {
+      backupParams: {
         name: `core_${this.supervisor.core.version}`,
         folders: ["homeassistant"],
         homeassistant: true,

hassio/src/system/hassio-host-info.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -19,6 +18,7 @@ import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware";
 import {
   changeHostOptions,
   configSyncOS,
+  dataDiskMove,
   rebootHost,
   shutdownHost,
   updateOS,
@@ -180,21 +180,27 @@ class HassioHostInfo extends LitElement {
               `
             : ""}
 
-          <ha-button-menu
-            corner="BOTTOM_START"
-            @action=${this._handleMenuAction}
-          >
+          <ha-button-menu corner="BOTTOM_START">
             <mwc-icon-button slot="trigger">
               <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
             </mwc-icon-button>
-            <mwc-list-item>
+            <mwc-list-item @click=${() => this._handleMenuAction("hardware")}>
               ${this.supervisor.localize("system.host.hardware")}
             </mwc-list-item>
             ${this.supervisor.host.features.includes("haos")
-              ? html`<mwc-list-item>
+              ? html`<mwc-list-item
+                  @click=${() => this._handleMenuAction("import_from_usb")}
+                >
                   ${this.supervisor.localize("system.host.import_from_usb")}
                 </mwc-list-item>`
               : ""}
+            ${this.supervisor.host.features.includes("agent")
+              ? html`<mwc-list-item
+                  @click=${() => this._handleMenuAction("data_disk_move")}
+                >
+                  ${this.supervisor.localize("system.host.data_disk_move")}
+                </mwc-list-item>`
+              : ""}
           </ha-button-menu>
         </div>
       </ha-card>
@@ -216,14 +222,17 @@ class HassioHostInfo extends LitElement {
     return network_info.interfaces.find((a) => a.primary)?.ipv4?.address![0];
   });
 
-  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
-    switch (ev.detail.index) {
-      case 0:
+  private async _handleMenuAction(action: string) {
+    switch (action) {
+      case "hardware":
         await this._showHardware();
         break;
-      case 1:
+      case "import_from_usb":
         await this._importFromUSB();
         break;
+      case "data_disk_move":
+        await this._dataDiskMove();
+        break;
     }
   }
 
@@ -395,6 +404,34 @@ class HassioHostInfo extends LitElement {
     }
   }
 
+  private async _dataDiskMove(): Promise<void> {
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.supervisor.localize("system.host.data_disk_move"),
+      text: html`${this.supervisor.localize(
+          "dialog.data_disk_move.description",
+          { current_path: this.supervisor.os.data_disk }
+        )} <br /><br />${this.supervisor.localize(
+          "dialog.data_disk_move.confirm_text"
+        )}`,
+      confirmText: this.supervisor.localize("dialog.data_disk_move.move"),
+      dismissText: this.supervisor.localize("dialog.data_disk_move.cancel"),
+    });
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await dataDiskMove(this.hass);
+    } catch (err) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+        showAlertDialog(this, {
+          title: this.supervisor.localize("system.host.failed_to_move"),
+          text: extractApiErrorMessage(err),
+        });
+      }
+    }
+  }
+
   private async _loadData(): Promise<void> {
     if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
       fireEvent(this, "supervisor-collection-refresh", {

hassio/src/system/hassio-supervisor-info.ts

@@ -3,6 +3,7 @@ import { customElement, property, state } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/ha-alert";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-switch";
@@ -170,31 +171,25 @@ class HassioSupervisorInfo extends LitElement {
                     ></ha-switch>
                   </ha-settings-row>`
                 : ""
-              : html`<div class="error">
+              : html`<ha-alert
+                  alert-type="warning"
+                  .actionText=${this.supervisor.localize("common.learn_more")}
+                  @alert-action-clicked=${this._unsupportedDialog}
+                >
                   ${this.supervisor.localize(
                     "system.supervisor.unsupported_title"
                   )}
-                  <button
-                    class="link"
-                    .title=${this.supervisor.localize("common.learn_more")}
-                    @click=${this._unsupportedDialog}
-                  >
-                    Learn more
-                  </button>
-                </div>`}
+                </ha-alert>`}
             ${!this.supervisor.supervisor.healthy
-              ? html`<div class="error">
+              ? html`<ha-alert
+                  alert-type="error"
+                  .actionText=${this.supervisor.localize("common.learn_more")}
+                  @alert-action-clicked=${this._unhealthyDialog}
+                >
                   ${this.supervisor.localize(
                     "system.supervisor.unhealthy_title"
                   )}
-                  <button
-                    class="link"
-                    .title=${this.supervisor.localize("common.learn_more")}
-                    @click=${this._unhealthyDialog}
-                  >
-                    Learn more
-                  </button>
-                </div>`
+                </ha-alert>`
               : ""}
           </div>
           <div class="metrics-block">

hassio/src/system/hassio-supervisor-log.ts

@@ -5,6 +5,7 @@ import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/ha-alert";
 import "../../../src/components/ha-card";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
@@ -67,7 +68,9 @@ class HassioSupervisorLog extends LitElement {
   protected render(): TemplateResult | void {
     return html`
       <ha-card>
-        ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+        ${this._error
+          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          : ""}
         ${this.hass.userData?.showAdvanced
           ? html`
               <paper-dropdown-menu
@@ -154,10 +157,6 @@ class HassioSupervisorLog extends LitElement {
           padding: 0 2%;
           width: 96%;
         }
-        .errors {
-          color: var(--error-color);
-          margin-bottom: 16px;
-        }
       `,
     ];
   }

netlify.toml

@@ -0,0 +1,3 @@
+[build.environment]
+  YARN_VERSION = "1.22.11"
+  NODE_OPTIONS = "--max_old_space_size=4096"

package.json

@@ -17,31 +17,31 @@
     "lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:types",
     "format": "yarn run format:eslint && yarn run format:prettier",
     "mocha": "ts-mocha -p test-mocha/tsconfig.test.json \"test-mocha/**/*.ts\"",
-    "test": "yarn run lint && yarn run mocha"
+    "test": "yarn run mocha"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@braintree/sanitize-url": "^5.0.1",
-    "@codemirror/commands": "^0.18.0",
-    "@codemirror/gutter": "^0.18.0",
-    "@codemirror/highlight": "^0.18.0",
-    "@codemirror/history": "^0.18.0",
-    "@codemirror/legacy-modes": "^0.18.0",
-    "@codemirror/rectangular-selection": "^0.18.0",
-    "@codemirror/search": "^0.18.0",
-    "@codemirror/state": "^0.18.0",
-    "@codemirror/stream-parser": "^0.18.0",
-    "@codemirror/text": "^0.18.0",
-    "@codemirror/view": "^0.18.0",
-    "@formatjs/intl-getcanonicallocales": "^1.5.10",
-    "@formatjs/intl-locale": "^2.4.28",
-    "@formatjs/intl-pluralrules": "^4.0.22",
-    "@fullcalendar/common": "5.1.0",
-    "@fullcalendar/core": "5.1.0",
-    "@fullcalendar/daygrid": "5.1.0",
-    "@fullcalendar/interaction": "5.1.0",
-    "@fullcalendar/list": "5.1.0",
+    "@braintree/sanitize-url": "^5.0.2",
+    "@codemirror/commands": "^0.19.2",
+    "@codemirror/gutter": "^0.19.1",
+    "@codemirror/highlight": "^0.19.2",
+    "@codemirror/history": "^0.19.0",
+    "@codemirror/legacy-modes": "^0.19.0",
+    "@codemirror/rectangular-selection": "^0.19.0",
+    "@codemirror/search": "^0.19.0",
+    "@codemirror/state": "^0.19.1",
+    "@codemirror/stream-parser": "^0.19.1",
+    "@codemirror/text": "^0.19.2",
+    "@codemirror/view": "^0.19.4",
+    "@formatjs/intl-getcanonicallocales": "^1.7.3",
+    "@formatjs/intl-locale": "^2.4.37",
+    "@formatjs/intl-pluralrules": "^4.1.3",
+    "@fullcalendar/common": "5.9.0",
+    "@fullcalendar/core": "5.9.0",
+    "@fullcalendar/daygrid": "5.9.0",
+    "@fullcalendar/interaction": "5.9.0",
+    "@fullcalendar/list": "5.9.0",
     "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch",
     "@material/chips": "12.0.0-canary.22d29cbb4.0",
     "@material/data-table": "12.0.0-canary.22d29cbb4.0",
@@ -61,8 +61,8 @@
     "@material/mwc-tab": "0.22.1",
     "@material/mwc-tab-bar": "0.22.1",
     "@material/top-app-bar": "12.0.0-canary.22d29cbb4.0",
-    "@mdi/js": "5.9.55",
-    "@mdi/svg": "5.9.55",
+    "@mdi/js": "6.1.95",
+    "@mdi/svg": "6.1.95",
     "@polymer/app-layout": "^3.1.0",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
@@ -88,9 +88,9 @@
     "@polymer/paper-toast": "^3.0.1",
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.4.1",
-    "@thomasloven/round-slider": "0.5.2",
-    "@vaadin/vaadin-combo-box": "^20.0.1",
-    "@vaadin/vaadin-date-picker": "^20.0.1",
+    "@thomasloven/round-slider": "0.5.4",
+    "@vaadin/vaadin-combo-box": "^20.0.4",
+    "@vaadin/vaadin-date-picker": "^20.0.4",
     "@vibrant/color": "^3.2.1-alpha.1",
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
@@ -99,36 +99,35 @@
     "chart.js": "^3.3.2",
     "comlink": "^4.3.1",
     "core-js": "^3.15.2",
-    "cropperjs": "^1.5.11",
-    "date-fns": "^2.22.1",
+    "cropperjs": "^1.5.12",
+    "date-fns": "^2.23.0",
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
     "fecha": "^4.2.0",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.0.7",
+    "hls.js": "^1.0.10",
     "home-assistant-js-websocket": "^5.11.1",
-    "idb-keyval": "^5.0.5",
-    "intl-messageformat": "^9.6.16",
+    "idb-keyval": "^5.1.3",
+    "intl-messageformat": "^9.9.1",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
-    "lit": "^2.0.0-rc.2",
+    "lit": "^2.0.0-rc.3",
     "lit-vaadin-helpers": "^0.1.3",
-    "marked": "^2.0.5",
-    "mdn-polyfills": "^5.16.0",
+    "marked": "^3.0.2",
     "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",
-    "proxy-polyfill": "^0.3.1",
+    "proxy-polyfill": "^0.3.2",
     "punycode": "^2.1.1",
     "qrcode": "^1.4.4",
     "regenerator-runtime": "^0.13.8",
     "resize-observer-polyfill": "^1.5.1",
     "roboto-fontface": "^0.10.0",
-    "sortablejs": "^1.10.2",
+    "sortablejs": "^1.14.0",
     "superstruct": "^0.15.2",
     "tinykeys": "^1.1.3",
-    "tsparticles": "^1.19.2",
+    "tsparticles": "^1.34.0",
     "unfetch": "^4.1.0",
     "vis-data": "^7.1.2",
     "vis-network": "^8.5.4",
@@ -164,12 +163,12 @@
     "@rollup/plugin-replace": "^2.3.2",
     "@types/chromecast-caf-receiver": "5.0.12",
     "@types/chromecast-caf-sender": "^1.0.3",
-    "@types/js-yaml": "^4.0.1",
-    "@types/leaflet": "^1.7.0",
-    "@types/leaflet-draw": "^1.0.3",
-    "@types/marked": "^2.0.3",
-    "@types/mocha": "^8.2.2",
-    "@types/sortablejs": "^1.10.6",
+    "@types/js-yaml": "^4",
+    "@types/leaflet": "^1",
+    "@types/leaflet-draw": "^1",
+    "@types/marked": "^2",
+    "@types/mocha": "^8",
+    "@types/sortablejs": "^1",
     "@types/webspeechapi": "^0.0.29",
     "@typescript-eslint/eslint-plugin": "^4.28.3",
     "@typescript-eslint/parser": "^4.28.3",
@@ -233,8 +232,10 @@
   "resolutions": {
     "@polymer/polymer": "patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
     "@webcomponents/webcomponentsjs": "^2.2.10",
-    "lit-html": "2.0.0-rc.3",
-    "lit-element": "3.0.0-rc.2"
+    "lit": "^2.0.0-rc.3",
+    "lit-html": "2.0.0-rc.4",
+    "lit-element": "3.0.0-rc.3",
+    "@lit/reactive-element": "1.0.0-rc.3"
   },
   "main": "src/home-assistant.js",
   "husky": {

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20210730.0",
+    version="20210911.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/frontend",
     author="The Home Assistant Authors",

src/auth/ha-authorize.ts

@@ -8,10 +8,6 @@ import {
   AuthUrlSearchParams,
   fetchAuthProviders,
 } from "../data/auth";
-import {
-  DiscoveryInformation,
-  fetchDiscoveryInformation,
-} from "../data/discovery";
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 import { registerServiceWorker } from "../util/register-service-worker";
 import "./ha-auth-flow";
@@ -29,8 +25,6 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
   @state() private _authProviders?: AuthProvider[];
 
-  @state() private _discovery?: DiscoveryInformation;
-
   constructor() {
     super();
     this.translationFragment = "page-authorize";
@@ -58,17 +52,14 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     // the name with a bold tag.
     const loggingInWith = document.createElement("div");
     loggingInWith.innerText = this.localize(
-      this._discovery?.location_name
-        ? "ui.panel.page-authorize.logging_in_to_with"
-        : "ui.panel.page-authorize.logging_in_with",
-      "locationName",
-      "LOCATION",
+      "ui.panel.page-authorize.logging_in_with",
       "authProviderName",
       "NAME"
     );
-    loggingInWith.innerHTML = loggingInWith.innerHTML
-      .replace("**LOCATION**", `<b>${this._discovery?.location_name}</b>`)
-      .replace("**NAME**", `<b>${this._authProvider!.name}</b>`);
+    loggingInWith.innerHTML = loggingInWith.innerHTML.replace(
+      "**NAME**",
+      `<b>${this._authProvider!.name}</b>`
+    );
 
     const inactiveProviders = this._authProviders.filter(
       (prv) => prv !== this._authProvider
@@ -108,7 +99,6 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     this._fetchAuthProviders();
-    this._fetchDiscoveryInfo();
 
     if (matchMedia("(prefers-color-scheme: dark)").matches) {
       applyThemesOnElement(
@@ -144,10 +134,6 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     }
   }
 
-  private async _fetchDiscoveryInfo() {
-    this._discovery = await fetchDiscoveryInformation();
-  }
-
   private async _fetchAuthProviders() {
     // Fetch auth providers
     try {

src/common/color/colors.ts

@@ -1,5 +1,5 @@
 export const COLORS = [
-  "#377eb8",
+  "#44739e",
   "#984ea3",
   "#00d2d5",
   "#ff7f00",

src/common/const.ts

@@ -56,19 +56,31 @@ export const FIXED_DOMAIN_ICONS = {
 };
 
 export const FIXED_DEVICE_CLASS_ICONS = {
+  aqi: "hass:air-filter",
   current: "hass:current-ac",
   carbon_dioxide: "mdi:molecule-co2",
   carbon_monoxide: "mdi:molecule-co",
+  date: "hass:calendar",
   energy: "hass:lightning-bolt",
+  gas: "hass:gas-cylinder",
   humidity: "hass:water-percent",
   illuminance: "hass:brightness-5",
+  nitrogen_dioxide: "mdi:molecule",
+  nitrogen_monoxide: "mdi:molecule",
+  nitrous_oxide: "mdi:molecule",
+  ozone: "mdi:molecule",
   temperature: "hass:thermometer",
   monetary: "mdi:cash",
+  pm25: "mdi:molecule",
+  pm1: "mdi:molecule",
+  pm10: "mdi:molecule",
   pressure: "hass:gauge",
   power: "hass:flash",
   power_factor: "hass:angle-acute",
   signal_strength: "hass:wifi",
+  sulphur_dioxide: "mdi:molecule",
   timestamp: "hass:clock",
+  volatile_organic_compounds: "mdi:molecule",
   voltage: "hass:sine-wave",
 };
 
@@ -157,66 +169,3 @@ export const UNIT_F = "°F";
 
 /** Entity ID of the default view. */
 export const DEFAULT_VIEW_ENTITY_ID = "group.default_view";
-
-/** HA Color Pallete. */
-export const HA_COLOR_PALETTE = [
-  "ff0029",
-  "66a61e",
-  "377eb8",
-  "984ea3",
-  "00d2d5",
-  "ff7f00",
-  "af8d00",
-  "7f80cd",
-  "b3e900",
-  "c42e60",
-  "a65628",
-  "f781bf",
-  "8dd3c7",
-  "bebada",
-  "fb8072",
-  "80b1d3",
-  "fdb462",
-  "fccde5",
-  "bc80bd",
-  "ffed6f",
-  "c4eaff",
-  "cf8c00",
-  "1b9e77",
-  "d95f02",
-  "e7298a",
-  "e6ab02",
-  "a6761d",
-  "0097ff",
-  "00d067",
-  "f43600",
-  "4ba93b",
-  "5779bb",
-  "927acc",
-  "97ee3f",
-  "bf3947",
-  "9f5b00",
-  "f48758",
-  "8caed6",
-  "f2b94f",
-  "eff26e",
-  "e43872",
-  "d9b100",
-  "9d7a00",
-  "698cff",
-  "d9d9d9",
-  "00d27e",
-  "d06800",
-  "009f82",
-  "c49200",
-  "cbe8ff",
-  "fecddf",
-  "c27eb6",
-  "8cd2ce",
-  "c4b8d9",
-  "f883b0",
-  "a49100",
-  "f48800",
-  "27d0df",
-  "a04a9b",
-];

src/common/datetime/create_duration_data.ts

@@ -0,0 +1,31 @@
+import { HaDurationData } from "../../components/ha-duration-input";
+import { ForDict } from "../../data/automation";
+
+export const createDurationData = (
+  duration: string | number | ForDict | undefined
+): HaDurationData => {
+  if (duration === undefined) {
+    return {};
+  }
+  if (typeof duration !== "object") {
+    if (typeof duration === "string" || isNaN(duration)) {
+      const parts = duration?.toString().split(":") || [];
+      return {
+        hours: Number(parts[0]) || 0,
+        minutes: Number(parts[1]) || 0,
+        seconds: Number(parts[2]) || 0,
+        milliseconds: Number(parts[3]) || 0,
+      };
+    }
+    return { seconds: duration };
+  }
+  const { days, minutes, seconds, milliseconds } = duration;
+  let hours = duration.hours || 0;
+  hours = (hours || 0) + (days || 0) * 24;
+  return {
+    hours,
+    minutes,
+    seconds,
+    milliseconds,
+  };
+};

src/common/datetime/format_date.ts

@@ -3,33 +3,11 @@ import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
 import { toLocaleDateStringSupportsOptions } from "./check_options_support";
 
-const formatDateMem = memoizeOne(
-  (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(locale.language, {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-    })
-);
-
-export const formatDate = toLocaleDateStringSupportsOptions
+// Tuesday, August 10
+export const formatDateWeekday = toLocaleDateStringSupportsOptions
   ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatDateMem(locale).format(dateObj)
-  : (dateObj: Date) => format(dateObj, "longDate");
-
-const formatDateShortMem = memoizeOne(
-  (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(locale.language, {
-      day: "numeric",
-      month: "short",
-    })
-);
-
-export const formatDateShort = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatDateShortMem(locale).format(dateObj)
-  : (dateObj: Date) => format(dateObj, "shortDate");
-
+      formatDateWeekdayMem(locale).format(dateObj)
+  : (dateObj: Date) => format(dateObj, "dddd, MMMM D");
 const formatDateWeekdayMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -39,7 +17,80 @@ const formatDateWeekdayMem = memoizeOne(
     })
 );
 
-export const formatDateWeekday = toLocaleDateStringSupportsOptions
+// August 10, 2021
+export const formatDate = toLocaleDateStringSupportsOptions
   ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatDateWeekdayMem(locale).format(dateObj)
-  : (dateObj: Date) => format(dateObj, "dddd, MMM D");
+      formatDateMem(locale).format(dateObj)
+  : (dateObj: Date) => format(dateObj, "MMMM D, YYYY");
+const formatDateMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    })
+);
+
+// 10/08/2021
+export const formatDateNumeric = toLocaleDateStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateNumericMem(locale).format(dateObj)
+  : (dateObj: Date) => format(dateObj, "M/D/YYYY");
+const formatDateNumericMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric",
+    })
+);
+
+// Aug 10
+export const formatDateShort = toLocaleDateStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateShortMem(locale).format(dateObj)
+  : (dateObj: Date) => format(dateObj, "MMM D");
+const formatDateShortMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      day: "numeric",
+      month: "short",
+    })
+);
+
+// August 2021
+export const formatDateMonthYear = toLocaleDateStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateMonthYearMem(locale).format(dateObj)
+  : (dateObj: Date) => format(dateObj, "MMMM YYYY");
+const formatDateMonthYearMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      month: "long",
+      year: "numeric",
+    })
+);
+
+// August
+export const formatDateMonth = toLocaleDateStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateMonthMem(locale).format(dateObj)
+  : (dateObj: Date) => format(dateObj, "MMMM");
+const formatDateMonthMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      month: "long",
+    })
+);
+
+// 2021
+export const formatDateYear = toLocaleDateStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateYearMem(locale).format(dateObj)
+  : (dateObj: Date) => format(dateObj, "YYYY");
+const formatDateYearMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      year: "numeric",
+    })
+);

src/common/datetime/format_date_time.ts

@@ -4,39 +4,57 @@ import { FrontendLocaleData } from "../../data/translation";
 import { toLocaleStringSupportsOptions } from "./check_options_support";
 import { useAmPm } from "./use_am_pm";
 
+// August 9, 2021, 8:23 AM
+export const formatDateTime = toLocaleStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateTimeMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "MMMM D, YYYY, HH:mm" + useAmPm(locale) ? " A" : "");
 const formatDateTimeMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
       year: "numeric",
       month: "long",
       day: "numeric",
-      hour: "numeric",
+      hour: useAmPm(locale) ? "numeric" : "2-digit",
       minute: "2-digit",
       hour12: useAmPm(locale),
     })
 );
 
-export const formatDateTime = toLocaleStringSupportsOptions
+// August 9, 2021, 8:23:15 AM
+export const formatDateTimeWithSeconds = toLocaleStringSupportsOptions
   ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatDateTimeMem(locale).format(dateObj)
+      formatDateTimeWithSecondsMem(locale).format(dateObj)
   : (dateObj: Date, locale: FrontendLocaleData) =>
-      format(dateObj, "MMMM D, YYYY, HH:mm" + useAmPm(locale) ? " A" : "");
-
+      format(dateObj, "MMMM D, YYYY, HH:mm:ss" + useAmPm(locale) ? " A" : "");
 const formatDateTimeWithSecondsMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
       year: "numeric",
       month: "long",
       day: "numeric",
-      hour: "numeric",
+      hour: useAmPm(locale) ? "numeric" : "2-digit",
       minute: "2-digit",
       second: "2-digit",
       hour12: useAmPm(locale),
     })
 );
 
-export const formatDateTimeWithSeconds = toLocaleStringSupportsOptions
+// 9/8/2021, 8:23 AM
+export const formatDateTimeNumeric = toLocaleStringSupportsOptions
   ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatDateTimeWithSecondsMem(locale).format(dateObj)
+      formatDateTimeNumericMem(locale).format(dateObj)
   : (dateObj: Date, locale: FrontendLocaleData) =>
-      format(dateObj, "MMMM D, YYYY, HH:mm:ss" + useAmPm(locale) ? " A" : "");
+      format(dateObj, "M/D/YYYY, HH:mm" + useAmPm(locale) ? " A" : "");
+const formatDateTimeNumericMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: useAmPm(locale),
+    })
+);

src/common/datetime/format_time.ts

@@ -4,49 +4,49 @@ import { FrontendLocaleData } from "../../data/translation";
 import { toLocaleTimeStringSupportsOptions } from "./check_options_support";
 import { useAmPm } from "./use_am_pm";
 
-const formatTimeMem = memoizeOne(
-  (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(locale.language, {
-      hour: "numeric",
-      minute: "2-digit",
-      hour12: useAmPm(locale),
-    })
-);
-
+// 9:15 PM || 21:15
 export const formatTime = toLocaleTimeStringSupportsOptions
   ? (dateObj: Date, locale: FrontendLocaleData) =>
       formatTimeMem(locale).format(dateObj)
   : (dateObj: Date, locale: FrontendLocaleData) =>
       format(dateObj, "shortTime" + useAmPm(locale) ? " A" : "");
+const formatTimeMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      hour: useAmPm(locale) ? "numeric" : "2-digit",
+      minute: "2-digit",
+      hour12: useAmPm(locale),
+    })
+);
 
+// 9:15:24 PM || 21:15:24
+export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatTimeWithSecondsMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "mediumTime" + useAmPm(locale) ? " A" : "");
 const formatTimeWithSecondsMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
-      hour: "numeric",
+      hour: useAmPm(locale) ? "numeric" : "2-digit",
       minute: "2-digit",
       second: "2-digit",
       hour12: useAmPm(locale),
     })
 );
 
-export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatTimeWithSecondsMem(locale).format(dateObj)
-  : (dateObj: Date, locale: FrontendLocaleData) =>
-      format(dateObj, "mediumTime" + useAmPm(locale) ? " A" : "");
-
-const formatTimeWeekdayMem = memoizeOne(
-  (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(locale.language, {
-      weekday: "long",
-      hour: "numeric",
-      minute: "2-digit",
-      hour12: useAmPm(locale),
-    })
-);
-
+// Tuesday 7:00 PM || Tuesday 19:00
 export const formatTimeWeekday = toLocaleTimeStringSupportsOptions
   ? (dateObj: Date, locale: FrontendLocaleData) =>
       formatTimeWeekdayMem(locale).format(dateObj)
   : (dateObj: Date, locale: FrontendLocaleData) =>
       format(dateObj, "dddd, HH:mm" + useAmPm(locale) ? " A" : "");
+const formatTimeWeekdayMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      weekday: "long",
+      hour: useAmPm(locale) ? "numeric" : "2-digit",
+      minute: "2-digit",
+      hour12: useAmPm(locale),
+    })
+);

src/common/datetime/use_am_pm.ts

@@ -1,6 +1,7 @@
+import memoizeOne from "memoize-one";
 import { FrontendLocaleData, TimeFormat } from "../../data/translation";
 
-export const useAmPm = (locale: FrontendLocaleData): boolean => {
+export const useAmPm = memoizeOne((locale: FrontendLocaleData): boolean => {
   if (
     locale.time_format === TimeFormat.language ||
     locale.time_format === TimeFormat.system
@@ -12,4 +13,4 @@ export const useAmPm = (locale: FrontendLocaleData): boolean => {
   }
 
   return locale.time_format === TimeFormat.am_pm;
-};
+});

src/common/entity/binary_sensor_icon.ts

@@ -22,8 +22,9 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
     case "gas":
     case "problem":
     case "safety":
-    case "smoke":
       return is_off ? "hass:check-circle" : "hass:alert-circle";
+    case "smoke":
+      return is_off ? "hass:check-circle" : "hass:smoke";
     case "heat":
       return is_off ? "hass:thermometer" : "hass:fire";
     case "light":
@@ -44,6 +45,8 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
       return is_off ? "hass:home-outline" : "hass:home";
     case "sound":
       return is_off ? "hass:music-note-off" : "hass:music-note";
+    case "update":
+      return is_off ? "mdi:package" : "mdi:package-up";
     case "vibration":
       return is_off ? "hass:crop-portrait" : "hass:vibrate";
     case "window":

src/common/entity/sensor_icon.ts

@@ -2,6 +2,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { FIXED_DEVICE_CLASS_ICONS, UNIT_C, UNIT_F } from "../const";
 import { batteryIcon } from "./battery_icon";
+import { SENSOR_DEVICE_CLASS_BATTERY } from "../../data/sensor";
 
 export const sensorIcon = (stateObj?: HassEntity): string | undefined => {
   const dclass = stateObj?.attributes.device_class;
@@ -10,7 +11,7 @@ export const sensorIcon = (stateObj?: HassEntity): string | undefined => {
     return FIXED_DEVICE_CLASS_ICONS[dclass];
   }
 
-  if (dclass === "battery") {
+  if (dclass === SENSOR_DEVICE_CLASS_BATTERY) {
     return stateObj ? batteryIcon(stateObj) : "hass:battery";
   }
 

src/common/string/compare.ts

@@ -1,4 +1,4 @@
-export const compare = (a: string, b: string) => {
+export const stringCompare = (a: string, b: string) => {
   if (a < b) {
     return -1;
   }
@@ -9,5 +9,5 @@ export const compare = (a: string, b: string) => {
   return 0;
 };
 
-export const caseInsensitiveCompare = (a: string, b: string) =>
-  compare(a.toLowerCase(), b.toLowerCase());
+export const caseInsensitiveStringCompare = (a: string, b: string) =>
+  stringCompare(a.toLowerCase(), b.toLowerCase());

src/common/string/format_number.ts

@@ -78,7 +78,10 @@ const getDefaultFormatOptions = (
   num: string | number,
   options?: Intl.NumberFormatOptions
 ): Intl.NumberFormatOptions => {
-  const defaultOptions: Intl.NumberFormatOptions = options || {};
+  const defaultOptions: Intl.NumberFormatOptions = {
+    maximumFractionDigits: 2,
+    ...options,
+  };
 
   if (typeof num !== "string") {
     return defaultOptions;

src/common/structs/is-custom-type.ts

@@ -1,6 +1,6 @@
 import { refine, string } from "superstruct";
 
-const isCustomType = (value: string) => value.startsWith("custom:");
+export const isCustomType = (value: string) => value.startsWith("custom:");
 
 export const customType = () =>
   refine(string(), "custom element type", isCustomType);

src/common/util/group-by.ts

@@ -0,0 +1,15 @@
+export const groupBy = <T>(
+  list: T[],
+  keySelector: (item: T) => string
+): { [key: string]: T[] } => {
+  const result = {};
+  for (const item of list) {
+    const key = keySelector(item);
+    if (key in result) {
+      result[key].push(item);
+    } else {
+      result[key] = [item];
+    }
+  }
+  return result;
+};

src/common/util/time-cache-function-promise.ts

@@ -7,14 +7,10 @@ interface ResultCache<T> {
 export const timeCachePromiseFunc = async <T>(
   cacheKey: string,
   cacheTime: number,
-  func: (
-    hass: HomeAssistant,
-    entityId: string,
-    ...args: unknown[]
-  ) => Promise<T>,
+  func: (hass: HomeAssistant, entityId: string, ...args: any[]) => Promise<T>,
   hass: HomeAssistant,
   entityId: string,
-  ...args: unknown[]
+  ...args: any[]
 ): Promise<T> => {
   let cache: ResultCache<T> | undefined = (hass as any)[cacheKey];
 

src/components/chart/chart-date-adapter.ts

@@ -35,7 +35,14 @@ import {
   endOfQuarter,
   endOfYear,
 } from "date-fns";
-import { formatDate, formatDateShort } from "../../common/datetime/format_date";
+import {
+  formatDate,
+  formatDateMonth,
+  formatDateMonthYear,
+  formatDateShort,
+  formatDateWeekday,
+  formatDateYear,
+} from "../../common/datetime/format_date";
 import {
   formatDateTime,
   formatDateTimeWithSeconds,
@@ -53,8 +60,11 @@ const FORMATS = {
   minute: "minute",
   hour: "hour",
   day: "day",
+  date: "date",
+  weekday: "weekday",
   week: "week",
   month: "month",
+  monthyear: "monthyear",
   quarter: "quarter",
   year: "year",
 };
@@ -81,16 +91,22 @@ _adapters._date.override({
         return formatTime(new Date(time), this.options.locale);
       case "hour":
         return formatTime(new Date(time), this.options.locale);
+      case "weekday":
+        return formatDateWeekday(new Date(time), this.options.locale);
+      case "date":
+        return formatDate(new Date(time), this.options.locale);
       case "day":
         return formatDateShort(new Date(time), this.options.locale);
       case "week":
         return formatDate(new Date(time), this.options.locale);
       case "month":
-        return formatDate(new Date(time), this.options.locale);
+        return formatDateMonth(new Date(time), this.options.locale);
+      case "monthyear":
+        return formatDateMonthYear(new Date(time), this.options.locale);
       case "quarter":
         return formatDate(new Date(time), this.options.locale);
       case "year":
-        return formatDate(new Date(time), this.options.locale);
+        return formatDateYear(new Date(time), this.options.locale);
       default:
         return "";
     }

src/components/chart/ha-chart-base.ts

@@ -29,9 +29,11 @@ export default class HaChartBase extends LitElement {
 
   @property({ attribute: false }) public plugins?: any[];
 
-  @state() private _tooltip?: Tooltip;
+  @property({ type: Number }) public height?: number;
 
-  @state() private _height?: string;
+  @state() private _chartHeight?: number;
+
+  @state() private _tooltip?: Tooltip;
 
   @state() private _hiddenDatasets: Set<number> = new Set();
 
@@ -59,6 +61,11 @@ export default class HaChartBase extends LitElement {
       this.chart.config.type = this.chartType;
     }
     if (changedProps.has("data")) {
+      if (this._hiddenDatasets.size) {
+        this.data.datasets.forEach((dataset, index) => {
+          dataset.hidden = this._hiddenDatasets.has(index);
+        });
+      }
       this.chart.data = this.data;
     }
     if (changedProps.has("options")) {
@@ -96,11 +103,8 @@ export default class HaChartBase extends LitElement {
       <div
         class="chartContainer"
         style=${styleMap({
-          height:
-            this.chartType === "timeline"
-              ? `${this.data.datasets.length * 30 + 30}px`
-              : this._height,
-          overflow: this._height ? "initial" : "hidden",
+          height: `${this.height ?? this._chartHeight}px`,
+          overflow: this._chartHeight ? "initial" : "hidden",
         })}
       >
         <canvas></canvas>
@@ -194,7 +198,7 @@ export default class HaChartBase extends LitElement {
       {
         id: "afterRenderHook",
         afterRender: (chart) => {
-          this._height = `${chart.height}px`;
+          this._chartHeight = chart.height;
         },
         legend: {
           ...this.options?.plugins?.legend,
@@ -239,9 +243,19 @@ export default class HaChartBase extends LitElement {
     };
   }
 
-  public updateChart = (): void => {
+  public updateChart = (
+    mode:
+      | "resize"
+      | "reset"
+      | "none"
+      | "hide"
+      | "show"
+      | "normal"
+      | "active"
+      | undefined
+  ): void => {
     if (this.chart) {
-      this.chart.update();
+      this.chart.update(mode);
     }
   };
 
@@ -255,8 +269,8 @@ export default class HaChartBase extends LitElement {
         height: 0;
         transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
       }
-      :host(:not([chart-type="timeline"])) canvas {
-        max-height: 400px;
+      canvas {
+        max-height: var(--chart-max-height, 400px);
       }
       .chartLegend {
         text-align: center;

src/components/chart/state-history-chart-line.ts

@@ -2,7 +2,10 @@ import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import { html, LitElement, PropertyValues } from "lit";
 import { property, state } from "lit/decorators";
 import { getColorByIndex } from "../../common/color/colors";
-import { numberFormatToLocale } from "../../common/string/format_number";
+import {
+  formatNumber,
+  numberFormatToLocale,
+} from "../../common/string/format_number";
 import { LineChartEntity, LineChartState } from "../../data/history";
 import { HomeAssistant } from "../../types";
 import "./ha-chart-base";
@@ -85,7 +88,10 @@ class StateHistoryChartLine extends LitElement {
             mode: "nearest",
             callbacks: {
               label: (context) =>
-                `${context.dataset.label}: ${context.parsed.y} ${this.unit}`,
+                `${context.dataset.label}: ${formatNumber(
+                  context.parsed.y,
+                  this.hass.locale
+                )} ${this.unit}`,
             },
           },
           filler: {

src/components/chart/state-history-chart-timeline.ts

@@ -1,6 +1,6 @@
 import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues } from "lit";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { getColorByIndex } from "../../common/color/colors";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
@@ -99,6 +99,7 @@ export class StateHistoryChartTimeline extends LitElement {
       <ha-chart-base
         .data=${this._chartData}
         .options=${this._chartOptions}
+        .height=${this.data.length * 30 + 30}
         chart-type="timeline"
       ></ha-chart-base>
     `;
@@ -304,6 +305,14 @@ export class StateHistoryChartTimeline extends LitElement {
       datasets: datasets,
     };
   }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-chart-base {
+        --chart-max-height: none;
+      }
+    `;
+  }
 }
 
 declare global {

src/components/chart/statistics-chart.ts

@@ -16,10 +16,15 @@ import { customElement, property, state } from "lit/decorators";
 import { getColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { numberFormatToLocale } from "../../common/string/format_number";
 import {
+  formatNumber,
+  numberFormatToLocale,
+} from "../../common/string/format_number";
+import {
+  getStatisticIds,
   Statistics,
   statisticsHaveType,
+  StatisticsMetaData,
   StatisticType,
 } from "../../data/history";
 import type { HomeAssistant } from "../../types";
@@ -31,8 +36,12 @@ class StatisticsChart extends LitElement {
 
   @property({ attribute: false }) public statisticsData!: Statistics;
 
+  @property({ type: Array }) public statisticIds?: StatisticsMetaData[];
+
   @property() public names: boolean | Record<string, string> = false;
 
+  @property() public unit?: string;
+
   @property({ attribute: false }) public endTime?: Date;
 
   @property({ type: Array }) public statTypes: Array<StatisticType> = [
@@ -46,12 +55,12 @@ class StatisticsChart extends LitElement {
 
   @property({ type: Boolean }) public isLoadingData = false;
 
-  @state() private _chartData?: ChartData;
+  @state() private _chartData: ChartData = { datasets: [] };
 
   @state() private _chartOptions?: ChartOptions;
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
-    return !(changedProps.size === 1 && changedProps.has("hass"));
+    return changedProps.size > 1 || !changedProps.has("hass");
   }
 
   public willUpdate(changedProps: PropertyValues) {
@@ -124,23 +133,35 @@ class StatisticsChart extends LitElement {
           },
         },
         y: {
+          beginAtZero: false,
           ticks: {
             maxTicksLimit: 7,
           },
+          title: {
+            display: this.unit,
+            text: this.unit,
+          },
         },
       },
       plugins: {
         tooltip: {
           mode: "nearest",
           callbacks: {
-            label: (context) => `${context.dataset.label}: ${context.parsed.y}`,
+            label: (context) =>
+              `${context.dataset.label}: ${formatNumber(
+                context.parsed.y,
+                this.hass.locale
+              )} ${
+                // @ts-ignore
+                context.dataset.unit || ""
+              }`,
           },
         },
         filler: {
           propagate: true,
         },
         legend: {
-          display: false,
+          display: true,
           labels: {
             usePointStyle: true,
           },
@@ -154,6 +175,7 @@ class StatisticsChart extends LitElement {
           tension: 0.4,
           borderWidth: 1.5,
         },
+        bar: { borderWidth: 1.5, borderRadius: 4 },
         point: {
           hitRadius: 5,
         },
@@ -163,10 +185,19 @@ class StatisticsChart extends LitElement {
     };
   }
 
-  private _generateData() {
+  private async _getStatisticIds() {
+    this.statisticIds = await getStatisticIds(this.hass);
+  }
+
+  private async _generateData() {
     if (!this.statisticsData) {
       return;
     }
+
+    if (!this.statisticIds) {
+      await this._getStatisticIds();
+    }
+
     let colorIndex = 0;
     const statisticsData = Object.values(this.statisticsData);
     const totalDataSets: ChartDataset<"line">[] = [];
@@ -191,6 +222,8 @@ class StatisticsChart extends LitElement {
       endTime = new Date();
     }
 
+    let unit: string | undefined | null;
+
     const names = this.names || {};
     statisticsData.forEach((stats) => {
       const firstStat = stats[0];
@@ -203,6 +236,19 @@ class StatisticsChart extends LitElement {
           name = firstStat.statistic_id;
         }
       }
+
+      const meta = this.statisticIds!.find(
+        (stat) => stat.statistic_id === firstStat.statistic_id
+      );
+
+      if (!this.unit) {
+        if (unit === undefined) {
+          unit = meta?.unit_of_measurement;
+        } else if (unit !== meta?.unit_of_measurement) {
+          unit = null;
+        }
+      }
+
       // array containing [value1, value2, etc]
       let prevValues: Array<number | null> | null = null;
 
@@ -237,64 +283,54 @@ class StatisticsChart extends LitElement {
       const color = getColorByIndex(colorIndex);
       colorIndex++;
 
-      const addDataSet = (
-        nameY: string,
-        borderColor: string,
-        backgroundColor: string,
-        step = false,
-        fill?: boolean | number | string
-      ) => {
-        statDataSets.push({
-          label: nameY,
-          fill: fill || false,
-          borderColor,
-          backgroundColor: backgroundColor,
-          stepped: step ? "before" : false,
-          pointRadius: 0,
-          data: [],
-        });
-      };
-
       const statTypes: this["statTypes"] = [];
 
-      const sortedTypes = [...this.statTypes].sort((a, _b) => {
-        if (a === "min") {
-          return -1;
-        }
-        if (a === "max") {
-          return +1;
-        }
-        return 0;
-      });
-
       const drawBands =
         this.statTypes.includes("mean") && statisticsHaveType(stats, "mean");
 
+      const sortedTypes = drawBands
+        ? [...this.statTypes].sort((a, b) => {
+            if (a === "min" || b === "max") {
+              return -1;
+            }
+            if (a === "max" || b === "min") {
+              return +1;
+            }
+            return 0;
+          })
+        : this.statTypes;
+
       sortedTypes.forEach((type) => {
         if (statisticsHaveType(stats, type)) {
+          const band = drawBands && (type === "min" || type === "max");
           statTypes.push(type);
-          addDataSet(
-            `${name} (${this.hass.localize(
+          statDataSets.push({
+            label: `${name} (${this.hass.localize(
               `ui.components.statistics_charts.statistic_types.${type}`
-            )})`,
-            drawBands && (type === "min" || type === "max")
-              ? color + "7F"
-              : color,
-            color + "7F",
-            false,
-            drawBands
+            )})
+            `,
+            fill: drawBands
               ? type === "min"
                 ? "+1"
                 : type === "max"
                 ? "-1"
                 : false
-              : false
-          );
+              : false,
+            borderColor: band ? color + "7F" : color,
+            backgroundColor: band ? color + "3F" : color + "7F",
+            pointRadius: 0,
+            data: [],
+            // @ts-ignore
+            unit: meta?.unit_of_measurement,
+            band,
+          });
         }
       });
 
       let prevDate: Date | null = null;
       // Process chart data.
+      let initVal: number | null = null;
+      let prevSum: number | null = null;
       stats.forEach((stat) => {
         const date = new Date(stat.start);
         if (prevDate === date) {
@@ -305,7 +341,12 @@ class StatisticsChart extends LitElement {
         statTypes.forEach((type) => {
           let val: number | null;
           if (type === "sum") {
-            val = stat.state;
+            if (!initVal) {
+              initVal = val = stat.state;
+              prevSum = stat.sum;
+            } else {
+              val = initVal + ((stat.sum || 0) - prevSum!);
+            }
           } else {
             val = stat[type];
           }
@@ -321,6 +362,19 @@ class StatisticsChart extends LitElement {
       Array.prototype.push.apply(totalDataSets, statDataSets);
     });
 
+    if (unit !== null) {
+      this._chartOptions = {
+        ...this._chartOptions,
+        scales: {
+          ...this._chartOptions!.scales,
+          y: {
+            ...(this._chartOptions!.scales!.y as Record<string, unknown>),
+            title: { display: unit, text: unit },
+          },
+        },
+      };
+    }
+
     this._chartData = {
       datasets: totalDataSets,
     };

src/components/currency-datalist.ts

@@ -25,6 +25,7 @@ export const createCurrencyListEl = () => {
     "BSD",
     "BTN",
     "BWP",
+    "BYN",
     "BYR",
     "BZD",
     "CAD",

src/components/data-table/ha-data-table.ts

@@ -62,6 +62,7 @@ export interface DataTableSortColumnData {
   sortable?: boolean;
   filterable?: boolean;
   filterKey?: string;
+  valueColumn?: string;
   direction?: SortingDirection;
 }
 
@@ -76,7 +77,7 @@ export interface DataTableColumnData extends DataTableSortColumnData {
   hidden?: boolean;
 }
 
-type ClonedDataTableColumnData = Omit<DataTableColumnData, "title"> & {
+export type ClonedDataTableColumnData = Omit<DataTableColumnData, "title"> & {
   title?: TemplateResult | string;
 };
 
@@ -455,7 +456,7 @@ export class HaDataTable extends LitElement {
     const prom = this._sortColumn
       ? sortData(
           filteredData,
-          this._sortColumns,
+          this._sortColumns[this._sortColumn],
           this._sortDirection,
           this._sortColumn
         )

src/components/data-table/sort_filter_worker.ts

@@ -2,8 +2,8 @@
 import { expose } from "comlink";
 import "proxy-polyfill";
 import type {
+  ClonedDataTableColumnData,
   DataTableRowData,
-  DataTableSortColumnData,
   SortableColumnContainer,
   SortingDirection,
 } from "./ha-data-table";
@@ -19,7 +19,11 @@ const filterData = (
       const [key, column] = columnEntry;
       if (column.filterable) {
         if (
-          String(column.filterKey ? row[key][column.filterKey] : row[key])
+          String(
+            column.filterKey
+              ? row[column.valueColumn || key][column.filterKey]
+              : row[column.valueColumn || key]
+          )
             .toUpperCase()
             .includes(filter)
         ) {
@@ -33,7 +37,7 @@ const filterData = (
 
 const sortData = (
   data: DataTableRowData[],
-  column: DataTableSortColumnData,
+  column: ClonedDataTableColumnData,
   direction: SortingDirection,
   sortColumn: string
 ) =>
@@ -44,12 +48,12 @@ const sortData = (
     }
 
     let valA = column.filterKey
-      ? a[sortColumn][column.filterKey]
-      : a[sortColumn];
+      ? a[column.valueColumn || sortColumn][column.filterKey]
+      : a[column.valueColumn || sortColumn];
 
     let valB = column.filterKey
-      ? b[sortColumn][column.filterKey]
-      : b[sortColumn];
+      ? b[column.valueColumn || sortColumn][column.filterKey]
+      : b[column.valueColumn || sortColumn];
 
     if (typeof valA === "string") {
       valA = valA.toUpperCase();

src/components/device/ha-area-devices-picker.ts

@@ -20,7 +20,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { compare } from "../../common/string/compare";
+import { stringCompare } from "../../common/string/compare";
 import {
   AreaRegistryEntry,
   subscribeAreaRegistry,
@@ -226,7 +226,10 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
 
       const sorted = Object.keys(devicesByArea)
         .sort((a, b) =>
-          compare(devicesByArea[a].name || "", devicesByArea[b].name || "")
+          stringCompare(
+            devicesByArea[a].name || "",
+            devicesByArea[b].name || ""
+          )
         )
         .map((key) => devicesByArea[key]);
 

src/components/device/ha-device-picker.ts

@@ -15,7 +15,7 @@ import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 import { mdiCheck } from "@mdi/js";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { compare } from "../../common/string/compare";
+import { stringCompare } from "../../common/string/compare";
 import {
   AreaRegistryEntry,
   subscribeAreaRegistry,
@@ -242,7 +242,9 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       if (outputDevices.length === 1) {
         return outputDevices;
       }
-      return outputDevices.sort((a, b) => compare(a.name || "", b.name || ""));
+      return outputDevices.sort((a, b) =>
+        stringCompare(a.name || "", b.name || "")
+      );
     }
   );
 

src/components/entity/ha-state-label-badge.ts

@@ -106,19 +106,24 @@ export class HaStateLabelBadge extends LitElement {
 
   private _computeValue(domain: string, entityState: HassEntity) {
     switch (domain) {
+      case "alarm_control_panel":
       case "binary_sensor":
       case "device_tracker":
       case "person":
-      case "updater":
+      case "scene":
       case "sun":
-      case "alarm_control_panel":
       case "timer":
+      case "updater":
         return null;
+      // @ts-expect-error we don't break and go to default
       case "sensor":
+        if (entityState.attributes.device_class === "moon__phase") {
+          return null;
+        }
+      // eslint-disable-next-line: disable=no-fallthrough
       default:
-        return entityState.attributes.device_class === "moon__phase"
-          ? null
-          : entityState.state === UNKNOWN
+        return entityState.state === UNKNOWN ||
+          entityState.state === UNAVAILABLE
           ? "-"
           : entityState.attributes.unit_of_measurement
           ? formatNumber(entityState.state, this.hass!.locale)
@@ -160,16 +165,19 @@ export class HaStateLabelBadge extends LitElement {
       case "device_tracker":
       case "updater":
       case "person":
+      case "scene":
       case "sun":
         return stateIcon(entityState);
       case "timer":
         return entityState.state === "active"
           ? "hass:timer-outline"
           : "hass:timer-off-outline";
-      default:
-        return entityState?.attributes.device_class === "moon__phase"
+      case "sensor":
+        return entityState.attributes.device_class === "moon__phase"
           ? stateIcon(entityState)
           : null;
+      default:
+        return null;
     }
   }
 
@@ -257,7 +265,7 @@ export class HaStateLabelBadge extends LitElement {
       }
 
       .warning {
-        --ha-label-badge-color: var(--label-badge-yellow, #fce588);
+        --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
       }
     `;
   }

src/components/entity/ha-statistic-picker.ts

@@ -18,7 +18,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { compare } from "../../common/string/compare";
+import { stringCompare } from "../../common/string/compare";
 import { getStatisticIds, StatisticsMetaData } from "../../data/history";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
@@ -165,7 +165,7 @@ export class HaStatisticPicker extends LitElement {
       }
 
       if (output.length > 1) {
-        output.sort((a, b) => compare(a.name || "", b.name || ""));
+        output.sort((a, b) => stringCompare(a.name || "", b.name || ""));
       }
 
       output.push({

src/components/entity/ha-statistics-picker.ts

@@ -27,9 +27,8 @@ class HaStatisticsPicker extends LitElement {
       return html``;
     }
 
-    const currentStatistics = this._currentStatistics;
     return html`
-      ${currentStatistics.map(
+      ${this._currentStatistics.map(
         (statisticId) => html`
           <div>
             <ha-statistic-picker

src/components/entity/state-badge.ts

@@ -129,38 +129,39 @@ export class StateBadge extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        position: relative;
-        display: inline-block;
-        width: 40px;
-        color: var(--paper-item-icon-color, #44739e);
-        border-radius: 50%;
-        height: 40px;
-        text-align: center;
-        background-size: cover;
-        line-height: 40px;
-        vertical-align: middle;
-        box-sizing: border-box;
-      }
-      :host(:focus) {
-        outline: none;
-      }
-      :host(:not([icon]):focus) {
-        border: 2px solid var(--divider-color);
-      }
-      :host([icon]:focus) {
-        background: var(--divider-color);
-      }
-      ha-icon {
-        transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
-      }
-      .missing {
-        color: #fce588;
-      }
-
-      ${iconColorCSS}
-    `;
+    return [
+      iconColorCSS,
+      css`
+        :host {
+          position: relative;
+          display: inline-block;
+          width: 40px;
+          color: var(--paper-item-icon-color, #44739e);
+          border-radius: 50%;
+          height: 40px;
+          text-align: center;
+          background-size: cover;
+          line-height: 40px;
+          vertical-align: middle;
+          box-sizing: border-box;
+        }
+        :host(:focus) {
+          outline: none;
+        }
+        :host(:not([icon]):focus) {
+          border: 2px solid var(--divider-color);
+        }
+        :host([icon]:focus) {
+          background: var(--divider-color);
+        }
+        ha-icon {
+          transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
+        }
+        .missing {
+          color: #fce588;
+        }
+      `,
+    ];
   }
 }
 

src/components/ha-addon-picker.ts

@@ -4,7 +4,7 @@ import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";
-import { compare } from "../common/string/compare";
+import { stringCompare } from "../common/string/compare";
 import { HassioAddonInfo } from "../data/hassio/addon";
 import { fetchHassioSupervisorInfo } from "../data/hassio/supervisor";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
@@ -97,7 +97,7 @@ class HaAddonPicker extends LitElement {
       if (isComponentLoaded(this.hass, "hassio")) {
         const supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
         this._addons = supervisorInfo.addons.sort((a, b) =>
-          compare(a.name, b.name)
+          stringCompare(a.name, b.name)
         );
       } else {
         showAlertDialog(this, {

src/components/ha-alert.ts

@@ -0,0 +1,181 @@
+import "@material/mwc-button/mwc-button";
+import "@material/mwc-icon-button/mwc-icon-button";
+import {
+  mdiAlertCircleOutline,
+  mdiAlertOutline,
+  mdiCheckboxMarkedCircleOutline,
+  mdiClose,
+  mdiInformationOutline,
+} from "@mdi/js";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { fireEvent } from "../common/dom/fire_event";
+import "./ha-svg-icon";
+
+const ALERT_ICONS = {
+  info: mdiInformationOutline,
+  warning: mdiAlertOutline,
+  error: mdiAlertCircleOutline,
+  success: mdiCheckboxMarkedCircleOutline,
+};
+
+declare global {
+  interface HASSDomEvents {
+    "alert-dismissed-clicked": undefined;
+    "alert-action-clicked": undefined;
+  }
+}
+
+@customElement("ha-alert")
+class HaAlert extends LitElement {
+  @property() public title = "";
+
+  @property({ attribute: "alert-type" }) public alertType:
+    | "info"
+    | "warning"
+    | "error"
+    | "success" = "info";
+
+  @property({ attribute: "action-text" }) public actionText = "";
+
+  @property({ type: Boolean }) public dismissable = false;
+
+  @property({ type: Boolean }) public rtl = false;
+
+  public render() {
+    return html`
+      <div
+        class="issue-type ${classMap({
+          rtl: this.rtl,
+          [this.alertType]: true,
+        })}"
+      >
+        <div class="icon">
+          <ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>
+        </div>
+        <div class="content">
+          <div
+            class="main-content ${classMap({
+              "no-title": !this.title,
+            })}"
+          >
+            ${this.title ? html`<div class="title">${this.title}</div>` : ""}
+            <slot></slot>
+          </div>
+          <div class="action">
+            ${this.actionText
+              ? html`<mwc-button
+                  @click=${this._action_clicked}
+                  .label=${this.actionText}
+                ></mwc-button>`
+              : this.dismissable
+              ? html`<mwc-icon-button
+                  @click=${this._dismiss_clicked}
+                  aria-label="Dismiss alert"
+                >
+                  <ha-svg-icon .path=${mdiClose}> </ha-svg-icon>
+                </mwc-icon-button> `
+              : ""}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private _dismiss_clicked() {
+    fireEvent(this, "alert-dismissed-clicked");
+  }
+
+  private _action_clicked() {
+    fireEvent(this, "alert-action-clicked");
+  }
+
+  static styles = css`
+    .issue-type {
+      position: relative;
+      padding: 4px;
+      display: flex;
+      margin: 4px 0;
+    }
+    .issue-type.rtl {
+      flex-direction: row-reverse;
+    }
+    .issue-type::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      opacity: 0.12;
+      pointer-events: none;
+      content: "";
+      border-radius: 4px;
+    }
+    .icon {
+      margin: 4px 8px;
+      width: 24px;
+    }
+    .main-content.no-title {
+      margin-top: 6px;
+    }
+    .issue-type.rtl > .content {
+      flex-direction: row-reverse;
+      text-align: right;
+    }
+    .content {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+    .main-content {
+      overflow-wrap: anywhere;
+    }
+    .title {
+      font-weight: bold;
+      margin-top: 6px;
+    }
+
+    mwc-button {
+      --mdc-theme-primary: var(--primary-text-color);
+    }
+
+    .action {
+      align-self: center;
+    }
+
+    .issue-type.info > .icon {
+      color: var(--info-color);
+    }
+    .issue-type.info::before {
+      background-color: var(--info-color);
+    }
+
+    .issue-type.warning > .icon {
+      color: var(--warning-color);
+    }
+    .issue-type.warning::before {
+      background-color: var(--warning-color);
+    }
+
+    .issue-type.error > .icon {
+      color: var(--error-color);
+    }
+    .issue-type.error::before {
+      background-color: var(--error-color);
+    }
+
+    .issue-type.success > .icon {
+      color: var(--success-color);
+    }
+    .issue-type.success::before {
+      background-color: var(--success-color);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-alert": HaAlert;
+  }
+}

src/components/ha-blueprint-picker.ts

@@ -5,7 +5,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
-import { compare } from "../common/string/compare";
+import { stringCompare } from "../common/string/compare";
 import { Blueprint, Blueprints, fetchBlueprints } from "../data/blueprint";
 import { HomeAssistant } from "../types";
 
@@ -33,7 +33,7 @@ class HaBluePrintPicker extends LitElement {
         ...(blueprint as Blueprint).metadata,
         path,
       }));
-    return result.sort((a, b) => compare(a.name, b.name));
+    return result.sort((a, b) => stringCompare(a.name, b.name));
   });
 
   protected render(): TemplateResult {

src/components/ha-button-toggle-group.ts

@@ -1,7 +1,8 @@
 import "@material/mwc-button/mwc-button";
+import type { Button } from "@material/mwc-button/mwc-button";
 import "@material/mwc-icon-button/mwc-icon-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, queryAll } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../common/dom/fire_event";
 import type { ToggleButton } from "../types";
@@ -15,6 +16,10 @@ export class HaButtonToggleGroup extends LitElement {
 
   @property({ type: Boolean }) public fullWidth = false;
 
+  @property({ type: Boolean }) public dense = false;
+
+  @queryAll("mwc-button") private _buttons?: Button[];
+
   protected render(): TemplateResult {
     return html`
       <div>
@@ -34,6 +39,8 @@ export class HaButtonToggleGroup extends LitElement {
                     ? `${100 / this.buttons.length}%`
                     : "initial",
                 })}
+                outlined
+                .dense=${this.dense}
                 .value=${button.value}
                 ?active=${this.active === button.value}
                 @click=${this._handleClick}
@@ -44,6 +51,16 @@ export class HaButtonToggleGroup extends LitElement {
     `;
   }
 
+  protected updated() {
+    // Work around Safari default margin that is not reset in mwc-button as of aug 2021
+    this._buttons?.forEach(async (button) => {
+      await button.updateComplete;
+      (
+        button.shadowRoot!.querySelector("button") as HTMLButtonElement
+      ).style.margin = "0";
+    });
+  }
+
   private _handleClick(ev): void {
     this.active = ev.currentTarget.value;
     fireEvent(this, "value-changed", { value: this.active });
@@ -56,10 +73,16 @@ export class HaButtonToggleGroup extends LitElement {
         --mdc-icon-button-size: var(--button-toggle-size, 36px);
         --mdc-icon-size: var(--button-toggle-icon-size, 20px);
       }
-      mwc-icon-button,
       mwc-button {
+        --mdc-shape-small: 0;
+        --mdc-button-outline-width: 1px 0 1px 1px;
+      }
+      mwc-icon-button {
         border: 1px solid var(--primary-color);
         border-right-width: 0px;
+      }
+      mwc-icon-button,
+      mwc-button {
         position: relative;
         cursor: pointer;
       }
@@ -82,16 +105,19 @@ export class HaButtonToggleGroup extends LitElement {
       }
       mwc-icon-button:first-child,
       mwc-button:first-child {
+        --mdc-shape-small: 4px 0 0 4px;
         border-radius: 4px 0 0 4px;
       }
       mwc-icon-button:last-child,
       mwc-button:last-child {
         border-radius: 0 4px 4px 0;
         border-right-width: 1px;
+        --mdc-shape-small: 0 4px 4px 0;
+        --mdc-button-outline-width: 1px;
       }
       mwc-icon-button:only-child,
       mwc-button:only-child {
-        border-radius: 4px;
+        --mdc-shape-small: 4px;
         border-right-width: 1px;
       }
     `;

src/components/ha-camera-stream.ts

@@ -8,7 +8,6 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
-import { fireEvent } from "../common/dom/fire_event";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { supportsFeature } from "../common/entity/supports-feature";
 import {
@@ -41,6 +40,32 @@ class HaCameraStream extends LitElement {
 
   @state() private _url?: string;
 
+  @state() private _connected = false;
+
+  public willUpdate(changedProps: PropertyValues): void {
+    if (
+      changedProps.has("stateObj") &&
+      !this._shouldRenderMJPEG &&
+      this.stateObj &&
+      (changedProps.get("stateObj") as CameraEntity | undefined)?.entity_id !==
+        this.stateObj.entity_id
+    ) {
+      this._forceMJPEG = undefined;
+      this._url = undefined;
+      this._getStreamUrl();
+    }
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._connected = true;
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._connected = false;
+  }
+
   protected render(): TemplateResult {
     if (!this.stateObj) {
       return html``;
@@ -50,10 +75,11 @@ class HaCameraStream extends LitElement {
       ${__DEMO__ || this._shouldRenderMJPEG
         ? html`
             <img
-              @load=${this._elementResized}
               .src=${__DEMO__
-                ? this.stateObj!.attributes.entity_picture
-                : computeMJPEGStreamUrl(this.stateObj)}
+                ? this.stateObj!.attributes.entity_picture!
+                : this._connected
+                ? computeMJPEGStreamUrl(this.stateObj)
+                : ""}
               .alt=${`Preview of the ${computeStateName(
                 this.stateObj
               )} camera.`}
@@ -75,13 +101,6 @@ class HaCameraStream extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues): void {
-    if (changedProps.has("stateObj") && !this._shouldRenderMJPEG) {
-      this._forceMJPEG = undefined;
-      this._getStreamUrl();
-    }
-  }
-
   private get _shouldRenderMJPEG() {
     return (
       this._forceMJPEG === this.stateObj!.entity_id ||
@@ -107,10 +126,6 @@ class HaCameraStream extends LitElement {
     }
   }
 
-  private _elementResized() {
-    fireEvent(this, "iron-resize");
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       :host,

src/components/ha-duration-input.ts

@@ -0,0 +1,140 @@
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import "./paper-time-input";
+
+export interface HaDurationData {
+  hours?: number;
+  minutes?: number;
+  seconds?: number;
+  milliseconds?: number;
+}
+
+@customElement("ha-duration-input")
+class HaDurationInput extends LitElement {
+  @property({ attribute: false }) public data!: HaDurationData;
+
+  @property() public label?: string;
+
+  @property() public suffix?: string;
+
+  @property({ type: Boolean }) public required?: boolean;
+
+  @property({ type: Boolean }) public enableMillisecond?: boolean;
+
+  @query("paper-time-input", true) private _input?: HTMLElement;
+
+  public focus() {
+    if (this._input) {
+      this._input.focus();
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <paper-time-input
+        .label=${this.label}
+        .required=${this.required}
+        .autoValidate=${this.required}
+        error-message="Required"
+        enable-second
+        .enableMillisecond=${this.enableMillisecond}
+        format="24"
+        .hour=${this._parseDuration(this._hours)}
+        .min=${this._parseDuration(this._minutes)}
+        .sec=${this._parseDuration(this._seconds)}
+        .millisec=${this._parseDurationMillisec(this._milliseconds)}
+        @hour-changed=${this._hourChanged}
+        @min-changed=${this._minChanged}
+        @sec-changed=${this._secChanged}
+        @millisec-changed=${this._millisecChanged}
+        float-input-labels
+        no-hours-limit
+        always-float-input-labels
+        hour-label="hh"
+        min-label="mm"
+        sec-label="ss"
+        millisec-label="ms"
+      ></paper-time-input>
+    `;
+  }
+
+  private get _hours() {
+    return this.data && this.data.hours ? Number(this.data.hours) : 0;
+  }
+
+  private get _minutes() {
+    return this.data && this.data.minutes ? Number(this.data.minutes) : 0;
+  }
+
+  private get _seconds() {
+    return this.data && this.data.seconds ? Number(this.data.seconds) : 0;
+  }
+
+  private get _milliseconds() {
+    return this.data && this.data.milliseconds
+      ? Number(this.data.milliseconds)
+      : 0;
+  }
+
+  private _parseDuration(value) {
+    return value.toString().padStart(2, "0");
+  }
+
+  private _parseDurationMillisec(value) {
+    return value.toString().padStart(3, "0");
+  }
+
+  private _hourChanged(ev) {
+    this._durationChanged(ev, "hours");
+  }
+
+  private _minChanged(ev) {
+    this._durationChanged(ev, "minutes");
+  }
+
+  private _secChanged(ev) {
+    this._durationChanged(ev, "seconds");
+  }
+
+  private _millisecChanged(ev) {
+    this._durationChanged(ev, "milliseconds");
+  }
+
+  private _durationChanged(ev, unit) {
+    let value = Number(ev.detail.value);
+
+    if (value === this[`_${unit}`]) {
+      return;
+    }
+
+    let hours = this._hours;
+    let minutes = this._minutes;
+
+    if (unit === "seconds" && value > 59) {
+      minutes += Math.floor(value / 60);
+      value %= 60;
+    }
+
+    if (unit === "minutes" && value > 59) {
+      hours += Math.floor(value / 60);
+      value %= 60;
+    }
+
+    fireEvent(this, "value-changed", {
+      value: {
+        hours,
+        minutes,
+        seconds: this._seconds,
+        milliseconds: this._milliseconds,
+        ...{ [unit]: value },
+      },
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-duration-input": HaDurationInput;
+  }
+}

src/components/ha-form/ha-form-float.ts

@@ -32,17 +32,19 @@ export class HaFormFloat extends LitElement implements HaFormElement {
         .autoValidate=${this.schema.required}
         @value-changed=${this._valueChanged}
       >
-        <span suffix="" slot="suffix">${this.suffix}</span>
+        <span suffix slot="suffix">${this.suffix}</span>
       </paper-input>
     `;
   }
 
   private get _value() {
-    return this.data || 0;
+    return this.data;
   }
 
   private _valueChanged(ev: Event) {
-    const value = Number((ev.target as PaperInputElement).value);
+    const value: number | undefined = (ev.target as PaperInputElement).value
+      ? Number((ev.target as PaperInputElement).value)
+      : undefined;
     if (this._value === value) {
       return;
     }

src/components/ha-form/ha-form-positive_time_period_dict.ts

@@ -1,6 +1,6 @@
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import "../ha-time-input";
+import "../ha-duration-input";
 import { HaFormElement, HaFormTimeData, HaFormTimeSchema } from "./ha-form";
 
 @customElement("ha-form-positive_time_period_dict")
@@ -23,11 +23,11 @@ export class HaFormTimePeriod extends LitElement implements HaFormElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-time-input
+      <ha-duration-input
         .label=${this.label}
         .required=${this.schema.required}
         .data=${this.data}
-      ></ha-time-input>
+      ></ha-duration-input>
     `;
   }
 }

src/components/ha-form/ha-form.ts

@@ -2,7 +2,7 @@ import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
-import { HaTimeData } from "../ha-time-input";
+import { HaDurationData } from "../ha-duration-input";
 import "./ha-form-boolean";
 import "./ha-form-constant";
 import "./ha-form-float";
@@ -88,7 +88,7 @@ export type HaFormFloatData = number;
 export type HaFormBooleanData = boolean;
 export type HaFormSelectData = string;
 export type HaFormMultiSelectData = string[];
-export type HaFormTimeData = HaTimeData;
+export type HaFormTimeData = HaDurationData;
 
 export interface HaFormElement extends LitElement {
   schema: HaFormSchema | HaFormSchema[];

src/components/ha-gauge.ts

@@ -1,4 +1,4 @@
-import { css, LitElement, PropertyValues, svg } from "lit";
+import { css, LitElement, PropertyValues, svg, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
@@ -75,9 +75,22 @@ export class Gauge extends LitElement {
           this.levels
             ? this.levels
                 .sort((a, b) => a.level - b.level)
-                .map((level) => {
+                .map((level, idx) => {
+                  let firstPath: TemplateResult | undefined;
+                  if (idx === 0 && level.level !== this.min) {
+                    const angle = getAngle(this.min, this.min, this.max);
+                    firstPath = svg`<path
+                        stroke="var(--info-color)"
+                        class="level"
+                        d="M
+                          ${50 - 40 * Math.cos((angle * Math.PI) / 180)}
+                          ${50 - 40 * Math.sin((angle * Math.PI) / 180)}
+                         A 40 40 0 0 1 90 50
+                        "
+                      ></path>`;
+                  }
                   const angle = getAngle(level.level, this.min, this.max);
-                  return svg`<path
+                  return svg`${firstPath}<path
                       stroke="${level.stroke}"
                       class="level"
                       d="M

src/components/ha-hls-player.ts

@@ -98,6 +98,11 @@ class HaHLSPlayer extends LitElement {
 
     const Hls: typeof HlsType = (await import("hls.js/dist/hls.light.min"))
       .default;
+
+    if (!this.isConnected) {
+      return;
+    }
+
     let hlsSupported = Hls.isSupported();
 
     if (!hlsSupported) {
@@ -115,6 +120,10 @@ class HaHLSPlayer extends LitElement {
     const useExoPlayer = await useExoPlayerPromise;
     const masterPlaylist = await (await masterPlaylistPromise).text();
 
+    if (!this.isConnected) {
+      return;
+    }
+
     // Parse playlist assuming it is a master playlist. Match group 1 is whether hevc, match group 2 is regular playlist url
     // See https://tools.ietf.org/html/rfc8216 for HLS spec details
     const playlistRegexp =

src/components/ha-icon.ts

@@ -29,7 +29,335 @@ interface DeprecatedIcon {
   };
 }
 
-const mdiDeprecatedIcons: DeprecatedIcon = {};
+const mdiDeprecatedIcons: DeprecatedIcon = {
+  "adobe-acrobat": {
+    removeIn: "2021.12",
+  },
+  adobe: {
+    removeIn: "2021.12",
+  },
+  "amazon-alexa": {
+    removeIn: "2021.12",
+  },
+  amazon: {
+    removeIn: "2021.12",
+  },
+  "android-auto": {
+    removeIn: "2021.12",
+  },
+  "android-debug-bridge": {
+    removeIn: "2021.12",
+  },
+  "apple-airplay": {
+    newName: "cast-variant",
+    removeIn: "2021.12",
+  },
+  application: {
+    newName: "application-outline",
+    removeIn: "2021.12",
+  },
+  "application-cog": {
+    newName: "application-cog-outline",
+    removeIn: "2021.12",
+  },
+  "application-settings": {
+    newName: "application-settings-outline",
+    removeIn: "2021.12",
+  },
+  bandcamp: {
+    removeIn: "2021.12",
+  },
+  battlenet: {
+    removeIn: "2021.12",
+  },
+  blogger: {
+    removeIn: "2021.12",
+  },
+  "bolnisi-cross": {
+    newName: "cross-bolnisi",
+    removeIn: "2021.12",
+  },
+  "boom-gate-up": {
+    newName: "boom-gate-arrow-up",
+    removeIn: "2021.12",
+  },
+  "boom-gate-up-outline": {
+    newName: "boom-gate-arrow-up-outline",
+    removeIn: "2021.12",
+  },
+  "boom-gate-down": {
+    newName: "boom-gate-arrow-down",
+    removeIn: "2021.12",
+  },
+  "boom-gate-down-outline": {
+    newName: "boom-gate-arrow-down-outline",
+    removeIn: "2021.12",
+  },
+  buddhism: {
+    newName: "dharmachakra",
+    removeIn: "2021.12",
+  },
+  buffer: {
+    removeIn: "2021.12",
+  },
+  "cash-usd-outline": {
+    removeIn: "2021.12",
+  },
+  "cash-usd": {
+    removeIn: "2021.12",
+  },
+  "cellphone-android": {
+    newName: "cellphone",
+    removeIn: "2021.12",
+  },
+  "cellphone-erase": {
+    newName: "cellphone-remove",
+    removeIn: "2021.12",
+  },
+  "cellphone-iphone": {
+    newName: "cellphone",
+    removeIn: "2021.12",
+  },
+  "celtic-cross": {
+    newName: "cross-celtic",
+    removeIn: "2021.12",
+  },
+  christianity: {
+    newName: "cross",
+    removeIn: "2021.12",
+  },
+  "christianity-outline": {
+    newName: "cross-outline",
+    removeIn: "2021.12",
+  },
+  "concourse-ci": {
+    removeIn: "2021.12",
+  },
+  "currency-usd-circle": {
+    removeIn: "2021.12",
+  },
+  "currency-usd-circle-outline": {
+    removeIn: "2021.12",
+  },
+  "do-not-disturb-off": {
+    newName: "minus-circle-off",
+    removeIn: "2021.12",
+  },
+  "do-not-disturb": {
+    newName: "minus-circle",
+    removeIn: "2021.12",
+  },
+  douban: {
+    removeIn: "2021.12",
+  },
+  face: {
+    newName: "face-man",
+    removeIn: "2021.12",
+  },
+  "face-outline": {
+    newName: "face-man-outline",
+    removeIn: "2021.12",
+  },
+  "face-profile-woman": {
+    newName: "face-woman-profile",
+    removeIn: "2021.12",
+  },
+  "face-shimmer": {
+    newName: "face-man-shimmer",
+    removeIn: "2021.12",
+  },
+  "face-shimmer-outline": {
+    newName: "face-man-shimmer-outline",
+    removeIn: "2021.12",
+  },
+  "file-pdf": {
+    newName: "file-pdf-box",
+    removeIn: "2021.12",
+  },
+  "file-pdf-outline": {
+    newName: "file-pdf-box",
+    removeIn: "2021.12",
+  },
+  "file-pdf-box-outline": {
+    newName: "file-pdf-box",
+    removeIn: "2021.12",
+  },
+  "flash-circle": {
+    newName: "lightning-bolt-circle",
+    removeIn: "2021.12",
+  },
+  "floor-lamp-variant": {
+    newName: "floor-lamp-torchiere-variant",
+    removeIn: "2021.12",
+  },
+  gif: {
+    newName: "file-gif-box",
+    removeIn: "2021.12",
+  },
+  "google-photos": {
+    removeIn: "2021.12",
+  },
+  gradient: {
+    newName: "gradient-vertical",
+    removeIn: "2021.12",
+  },
+  hand: {
+    newName: "hand-front-right",
+    removeIn: "2021.12",
+  },
+  "hand-left": {
+    newName: "hand-back-left",
+    removeIn: "2021.12",
+  },
+  "hand-right": {
+    newName: "hand-back-right",
+    removeIn: "2021.12",
+  },
+  hinduism: {
+    newName: "om",
+    removeIn: "2021.12",
+  },
+  "home-currency-usd": {
+    removeIn: "2021.12",
+  },
+  iframe: {
+    newName: "application-brackets",
+    removeIn: "2021.12",
+  },
+  "iframe-outline": {
+    newName: "application-brackets-outline",
+    removeIn: "2021.12",
+  },
+  "iframe-array": {
+    newName: "application-array",
+    removeIn: "2021.12",
+  },
+  "iframe-array-outline": {
+    newName: "application-array-outline",
+    removeIn: "2021.12",
+  },
+  "iframe-braces": {
+    newName: "application-braces",
+    removeIn: "2021.12",
+  },
+  "iframe-braces-outline": {
+    newName: "application-braces-outline",
+    removeIn: "2021.12",
+  },
+  "iframe-parentheses": {
+    newName: "application-parentheses",
+    removeIn: "2021.12",
+  },
+  "iframe-parentheses-outline": {
+    newName: "application-parentheses-outline",
+    removeIn: "2021.12",
+  },
+  "iframe-variable": {
+    newName: "application-variable",
+    removeIn: "2021.12",
+  },
+  "iframe-variable-outline": {
+    newName: "application-variable-outline",
+    removeIn: "2021.12",
+  },
+  islam: {
+    newName: "star-crescent",
+    removeIn: "2021.12",
+  },
+  judaism: {
+    newName: "star-david",
+    removeIn: "2021.12",
+  },
+  "laptop-chromebook": {
+    newName: "laptop",
+    removeIn: "2021.12",
+  },
+  "laptop-mac": {
+    newName: "laptop",
+    removeIn: "2021.12",
+  },
+  "laptop-windows": {
+    newName: "laptop",
+    removeIn: "2021.12",
+  },
+  "microsoft-edge-legacy": {
+    removeIn: "2021.12",
+  },
+  "microsoft-yammer": {
+    removeIn: "2021.12",
+  },
+  "monitor-clean": {
+    newName: "monitor-shimmer",
+    removeIn: "2021.12",
+  },
+  "pdf-box": {
+    newName: "file-pdf-box",
+    removeIn: "2021.12",
+  },
+  pharmacy: {
+    newName: "mortar-pestle-plus",
+    removeIn: "2021.12",
+  },
+  "plus-one": {
+    newName: "numeric-positive-1",
+    removeIn: "2021.12",
+  },
+  "poll-box": {
+    newName: "chart-box",
+    removeIn: "2021.12",
+  },
+  "poll-box-outline": {
+    newName: "chart-box-outline",
+    removeIn: "2021.12",
+  },
+  sparkles: {
+    newName: "shimmer",
+    removeIn: "2021.12",
+  },
+  "tablet-ipad": {
+    newName: "tablet",
+    removeIn: "2021.12",
+  },
+  teach: {
+    newName: "human-male-board",
+    removeIn: "2021.12",
+  },
+  telegram: {
+    removeIn: "2021.12",
+  },
+  "television-clean": {
+    newName: "television-shimmer",
+    removeIn: "2021.12",
+  },
+  "text-subject": {
+    newName: "text-long",
+    removeIn: "2021.12",
+  },
+  "twitter-retweet": {
+    newName: "repeat-variant",
+    removeIn: "2021.12",
+  },
+  untappd: {
+    removeIn: "2021.12",
+  },
+  vk: {
+    removeIn: "2021.12",
+  },
+  "voice-off": {
+    newName: "account-voice-off",
+    removeIn: "2021.12",
+  },
+  "xamarian-outline": {
+    newName: "xamarian",
+    removeIn: "2021.12",
+  },
+  xing: {
+    removeIn: "2021.12",
+  },
+  "y-combinator": {
+    removeIn: "2021.12",
+  },
+};
 
 const chunks: Chunks = {};
 

src/components/ha-selector/ha-selector-time.ts

@@ -1,12 +1,8 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { useAmPm } from "../../common/datetime/use_am_pm";
-import { fireEvent } from "../../common/dom/fire_event";
 import { TimeSelector } from "../../data/selector";
-import { FrontendLocaleData } from "../../data/translation";
 import { HomeAssistant } from "../../types";
-import "../paper-time-input";
+import "../ha-time-input";
 
 @customElement("ha-selector-time")
 export class HaTimeSelector extends LitElement {
@@ -20,51 +16,17 @@ export class HaTimeSelector extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  private _useAmPmMem = memoizeOne((locale: FrontendLocaleData): boolean =>
-    useAmPm(locale)
-  );
-
   protected render() {
-    const useAMPM = this._useAmPmMem(this.hass.locale);
-
-    const parts = this.value?.split(":") || [];
-    const hours = parts[0];
-
     return html`
-      <paper-time-input
-        .label=${this.label}
-        .hour=${hours &&
-        (useAMPM && Number(hours) > 12 ? Number(hours) - 12 : hours)}
-        .min=${parts[1]}
-        .sec=${parts[2]}
-        .format=${useAMPM ? 12 : 24}
-        .amPm=${useAMPM && (Number(hours) > 12 ? "PM" : "AM")}
+      <ha-time-input
+        .value=${this.value}
+        .locale=${this.hass.locale}
         .disabled=${this.disabled}
-        @change=${this._timeChanged}
-        @am-pm-changed=${this._timeChanged}
         hide-label
         enable-second
-      ></paper-time-input>
+      ></ha-time-input>
     `;
   }
-
-  private _timeChanged(ev) {
-    let value = ev.target.value;
-    const useAMPM = this._useAmPmMem(this.hass.locale);
-    let hours = Number(ev.target.hour || 0);
-    if (value && useAMPM) {
-      if (ev.target.amPm === "PM") {
-        hours += 12;
-      }
-      value = `${hours}:${ev.target.min || "00"}:${ev.target.sec || "00"}`;
-    }
-    if (value === this.value) {
-      return;
-    }
-    fireEvent(this, "value-changed", {
-      value,
-    });
-  }
 }
 
 declare global {

src/components/ha-service-control.ts

@@ -5,15 +5,18 @@ import {
   HassServiceTarget,
 } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeObjectId } from "../common/entity/compute_object_id";
+import {
+  fetchIntegrationManifest,
+  IntegrationManifest,
+} from "../data/integration";
 import { Selector } from "../data/selector";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
-import { documentationUrl } from "../util/documentation-url";
 import "./ha-checkbox";
 import "./ha-selector/ha-selector";
 import "./ha-service-picker";
@@ -53,6 +56,8 @@ export class HaServiceControl extends LitElement {
 
   @state() private _checkedKeys = new Set();
 
+  @state() private _manifest?: IntegrationManifest;
+
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
 
   protected updated(changedProperties: PropertyValues<this>) {
@@ -72,6 +77,19 @@ export class HaServiceControl extends LitElement {
       this.hass.services
     );
 
+    // Fetch the manifest if we have a service selected and the service domain changed.
+    // If no service is selected, clear the manifest.
+    if (this.value?.service) {
+      if (
+        !oldValue?.service ||
+        computeDomain(this.value.service) !== computeDomain(oldValue.service)
+      ) {
+        this._fetchManifest(computeDomain(this.value?.service));
+      }
+    } else {
+      this._manifest = undefined;
+    }
+
     if (
       serviceData &&
       "target" in serviceData &&
@@ -177,12 +195,9 @@ export class HaServiceControl extends LitElement {
       ></ha-service-picker>
       <div class="description">
         <p>${serviceData?.description}</p>
-        ${this.value?.service
+        ${this._manifest
           ? html` <a
-              href="${documentationUrl(
-                this.hass,
-                "/integrations/" + computeDomain(this.value?.service)
-              )}"
+              href="${this._manifest.documentation}"
               title="${this.hass.localize(
                 "ui.components.service-control.integration_doc"
               )}"
@@ -387,6 +402,15 @@ export class HaServiceControl extends LitElement {
     });
   }
 
+  private async _fetchManifest(integration: string) {
+    this._manifest = undefined;
+    try {
+      this._manifest = await fetchIntegrationManifest(this.hass, integration);
+    } catch (err) {
+      // Ignore if loading manifest fails. Probably bad JSON in manifest
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       ha-settings-row {

src/components/ha-sidebar.ts

@@ -29,7 +29,7 @@ import { LocalStorage } from "../common/decorators/local-storage";
 import { fireEvent } from "../common/dom/fire_event";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { computeDomain } from "../common/entity/compute_domain";
-import { compare } from "../common/string/compare";
+import { stringCompare } from "../common/string/compare";
 import { computeRTL } from "../common/util/compute_rtl";
 import { ActionHandlerDetail } from "../data/lovelace";
 import {
@@ -96,7 +96,7 @@ const defaultPanelSorter = (
   }
 
   if (aLovelace && bLovelace) {
-    return compare(a.title!, b.title!);
+    return stringCompare(a.title!, b.title!);
   }
   if (aLovelace && !bLovelace) {
     return -1;
@@ -118,7 +118,7 @@ const defaultPanelSorter = (
     return 1;
   }
   // both not built in, sort by title
-  return compare(a.title!, b.title!);
+  return stringCompare(a.title!, b.title!);
 };
 
 const computePanels = memoizeOne(

src/components/ha-slider.js

@@ -19,14 +19,14 @@ class HaSlider extends PaperSliderClass {
             }
 
             .pin > .slider-knob > .slider-knob-inner {
-              font-size:  var(--ha-slider-pin-font-size, 10px);
+              font-size:  var(--ha-slider-pin-font-size, 15px);
               line-height: normal;
               cursor: pointer;
             }
 
             .disabled.ring > .slider-knob > .slider-knob-inner {
-              background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
-              border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
+              background-color: var(--paper-slider-disabled-knob-color, var(--disabled-text-color));
+              border: 2px solid var(--paper-slider-disabled-knob-color, var(--disabled-text-color));
             }
 
             .pin > .slider-knob > .slider-knob-inner::before {

src/components/ha-time-input.ts

@@ -1,134 +1,78 @@
-import { html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { useAmPm } from "../common/datetime/use_am_pm";
 import { fireEvent } from "../common/dom/fire_event";
 import "./paper-time-input";
-
-export interface HaTimeData {
-  hours?: number;
-  minutes?: number;
-  seconds?: number;
-  milliseconds?: number;
-}
+import { FrontendLocaleData } from "../data/translation";
 
 @customElement("ha-time-input")
-class HaTimeInput extends LitElement {
-  @property() public data!: HaTimeData;
+export class HaTimeInput extends LitElement {
+  @property() public locale!: FrontendLocaleData;
+
+  @property() public value?: string;
 
   @property() public label?: string;
 
-  @property() public suffix?: string;
+  @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public required?: boolean;
+  @property({ type: Boolean, attribute: "hide-label" }) public hideLabel =
+    false;
 
-  @property({ type: Boolean }) public enableMillisecond?: boolean;
+  @property({ type: Boolean, attribute: "enable-second" })
+  public enableSecond = false;
 
-  @query("paper-time-input", true) private _input?: HTMLElement;
+  protected render() {
+    const useAMPM = useAmPm(this.locale);
 
-  public focus() {
-    if (this._input) {
-      this._input.focus();
+    const parts = this.value?.split(":") || [];
+    let hours = parts[0];
+    const numberHours = Number(parts[0]);
+    if (numberHours && useAMPM && numberHours > 12) {
+      hours = String(numberHours - 12).padStart(2, "0");
+    }
+    if (useAMPM && numberHours === 0) {
+      hours = "12";
     }
-  }
 
-  protected render(): TemplateResult {
     return html`
       <paper-time-input
         .label=${this.label}
-        .required=${this.required}
-        .autoValidate=${this.required}
-        error-message="Required"
-        enable-second
-        .enableMillisecond=${this.enableMillisecond}
-        format="24"
-        .hour=${this._parseDuration(this._hours)}
-        .min=${this._parseDuration(this._minutes)}
-        .sec=${this._parseDuration(this._seconds)}
-        .millisec=${this._parseDurationMillisec(this._milliseconds)}
-        @hour-changed=${this._hourChanged}
-        @min-changed=${this._minChanged}
-        @sec-changed=${this._secChanged}
-        @millisec-changed=${this._millisecChanged}
-        float-input-labels
-        no-hours-limit
-        always-float-input-labels
-        hour-label="hh"
-        min-label="mm"
-        sec-label="ss"
-        millisec-label="ms"
+        .hour=${hours}
+        .min=${parts[1]}
+        .sec=${parts[2]}
+        .format=${useAMPM ? 12 : 24}
+        .amPm=${useAMPM && (numberHours >= 12 ? "PM" : "AM")}
+        .disabled=${this.disabled}
+        @change=${this._timeChanged}
+        @am-pm-changed=${this._timeChanged}
+        .hideLabel=${this.hideLabel}
+        .enableSecond=${this.enableSecond}
       ></paper-time-input>
     `;
   }
 
-  private get _hours() {
-    return this.data && this.data.hours ? Number(this.data.hours) : 0;
-  }
-
-  private get _minutes() {
-    return this.data && this.data.minutes ? Number(this.data.minutes) : 0;
-  }
-
-  private get _seconds() {
-    return this.data && this.data.seconds ? Number(this.data.seconds) : 0;
-  }
-
-  private get _milliseconds() {
-    return this.data && this.data.milliseconds
-      ? Number(this.data.milliseconds)
-      : 0;
-  }
-
-  private _parseDuration(value) {
-    return value.toString().padStart(2, "0");
-  }
-
-  private _parseDurationMillisec(value) {
-    return value.toString().padStart(3, "0");
-  }
-
-  private _hourChanged(ev) {
-    this._durationChanged(ev, "hours");
-  }
-
-  private _minChanged(ev) {
-    this._durationChanged(ev, "minutes");
-  }
-
-  private _secChanged(ev) {
-    this._durationChanged(ev, "seconds");
-  }
-
-  private _millisecChanged(ev) {
-    this._durationChanged(ev, "milliseconds");
-  }
-
-  private _durationChanged(ev, unit) {
-    let value = Number(ev.detail.value);
-
-    if (value === this[`_${unit}`]) {
+  private _timeChanged(ev) {
+    let value = ev.target.value;
+    const useAMPM = useAmPm(this.locale);
+    let hours = Number(ev.target.hour || 0);
+    if (value && useAMPM) {
+      if (ev.target.amPm === "PM" && hours < 12) {
+        hours += 12;
+      }
+      if (ev.target.amPm === "AM" && hours === 12) {
+        hours = 0;
+      }
+      value = `${hours.toString().padStart(2, "0")}:${ev.target.min || "00"}:${
+        ev.target.sec || "00"
+      }`;
+    }
+    if (value === this.value) {
       return;
     }
-
-    let hours = this._hours;
-    let minutes = this._minutes;
-
-    if (unit === "seconds" && value > 59) {
-      minutes += Math.floor(value / 60);
-      value %= 60;
-    }
-
-    if (unit === "minutes" && value > 59) {
-      hours += Math.floor(value / 60);
-      value %= 60;
-    }
-
+    this.value = value;
+    fireEvent(this, "change");
     fireEvent(this, "value-changed", {
-      value: {
-        hours,
-        minutes,
-        seconds: this._seconds,
-        milliseconds: this._milliseconds,
-        ...{ [unit]: value },
-      },
+      value,
     });
   }
 }

src/components/trace/ha-trace-path-details.ts

@@ -5,7 +5,6 @@ import { classMap } from "lit/directives/class-map";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import "../ha-code-editor";
 import "../ha-icon-button";
-import type { NodeInfo } from "./hat-graph";
 import "./hat-logbook-note";
 import { LogbookEntry } from "../../data/logbook";
 import {
@@ -17,6 +16,7 @@ import {
 import "../../panels/logbook/ha-logbook";
 import { traceTabStyles } from "./trace-tab-styles";
 import { HomeAssistant } from "../../types";
+import type { NodeInfo } from "./hat-script-graph";
 
 @customElement("ha-trace-path-details")
 export class HaTracePathDetails extends LitElement {
@@ -30,7 +30,7 @@ export class HaTracePathDetails extends LitElement {
 
   @property({ attribute: false }) public selected!: NodeInfo;
 
-  @property() renderedNodes: Record<string, any> = {};
+  @property() public renderedNodes: Record<string, any> = {};
 
   @property() public trackedNodes!: Record<string, any>;
 

src/components/trace/ha-trace-timeline.ts

@@ -1,11 +1,11 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { NodeInfo } from "./hat-graph";
 import "./hat-logbook-note";
 import "./hat-trace-timeline";
 import type { LogbookEntry } from "../../data/logbook";
 import type { TraceExtended } from "../../data/trace";
 import type { HomeAssistant } from "../../types";
+import type { NodeInfo } from "./hat-script-graph";
 
 @customElement("ha-trace-timeline")
 export class HaTraceTimeline extends LitElement {
@@ -15,7 +15,7 @@ export class HaTraceTimeline extends LitElement {
 
   @property({ attribute: false }) public logbookEntries!: LogbookEntry[];
 
-  @property() public selected!: NodeInfo;
+  @property({ attribute: false }) public selected!: NodeInfo;
 
   protected render(): TemplateResult {
     return html`