From a31f6881610fc59bda3237c6dd53513fda64d20c Mon Sep 17 00:00:00 2001
From: Deepankumar Loganathan <deepan0433@gmail.com>
Date: Tue, 26 Dec 2023 00:15:03 +0100
Subject: [PATCH] Show Azure site tags in EntityAzureSitesOverviewWidget

Signed-off-by: Deepankumar Loganathan <deepan0433@gmail.com>
---
 .changeset/curvy-dingos-jump.md                |  5 +++++
 .../AzureSitesOverviewTable.tsx                | 18 ++++++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 .changeset/curvy-dingos-jump.md

diff --git a/.changeset/curvy-dingos-jump.md b/.changeset/curvy-dingos-jump.md
new file mode 100644
index 0000000000..280697498a
--- /dev/null
+++ b/.changeset/curvy-dingos-jump.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-azure-sites': minor
+---
+
+Show Azure site tags in EntityAzureSitesOverviewWidget
diff --git a/plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx b/plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx
index 44f5f1697d..c7f8befedb 100644
--- a/plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx
+++ b/plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx
@@ -18,6 +18,7 @@ import React, { Dispatch, useEffect, useState } from 'react';
 import {
   Box,
   Card,
+  Chip,
   IconButton,
   LinearProgress,
   Menu,
@@ -91,6 +92,18 @@ const Kind = ({ value }: { value: Kinds }) => {
   );
 };
 
+const Tags = ({ tags }: { tags: any }) => {
+  return Object.keys(tags).map((key: any) => (
+    <Chip
+      key={key}
+      label={`${key}: ${tags[key]}`}
+      size="small"
+      variant="default"
+      style={{ marginBottom: '1px' }}
+    />
+  ));
+};
+
 type TableProps = {
   data: AzureSite[];
   loading: boolean;
@@ -223,6 +236,11 @@ export const AzureSitesOverviewTable = ({ data, loading }: TableProps) => {
       field: 'status',
       render: (func: AzureSite) => <State value={func.state as States} />,
     },
+    {
+      title: 'Tags',
+      field: 'tags',
+      render: (func: AzureSite) => (func.tags ? <Tags tags={func.tags} /> : ''),
+    },
     {
       title: 'last modified',
       field: 'lastModifiedDate',