Add 'Service Dependencies' tab in composition page

 Issue-ID: SDC-1987

Change-Id: Ib5b688c12234c81fe6f89b2b5d37dd16a75b0db9
Signed-off-by: miriame <miriam.eini@amdocs.com>

6 files changed, 58 insertions, 2 deletions

diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json
index 8e43f18bce..1c68091a28 100644
--- a/catalog-ui/src/assets/languages/en_US.json
+++ b/catalog-ui/src/assets/languages/en_US.json
@@ -42,7 +42,6 @@
     "GENERAL_LABEL_SYSTEM_NAME": "System Name:",
     "GENERAL_LABEL_SOURCE_SERVICE_NAME": "Source Service Name:",
     "GENERAL_LABEL_RESOURCE_CUSTOMIZATION_UUID": "Resource Customization UUID:",
-    
 
     "=========== GENERAL_TAB ===========": "",
     "GENERAL_TAB_LABEL_RESOURCE_MODEL_NUMBER":"Vendor Model Number",
@@ -390,7 +389,7 @@
     "DEPLOYMENT_ARTIFACT_BUTTON_ADD_VOLUME_HEAT": "Add Volume HEAT Artifact",
     "DEPLOYMENT_ARTIFACT_BUTTON_ADD_OTHER": "Add Other Artifact"
 
-    ,"=========== IMPORT VF ===========": "",
+,"=========== IMPORT VF ===========": "",
     "IMPORT_VF_MESSAGE_CREATE_TAKES_LONG_TIME_TITLE": "Create VF",
     "IMPORT_VF_MESSAGE_CREATE_TAKES_LONG_TIME_DESCRIPTION": "Your VF is being created.<br/>It can take up to 10 minutes.<br/>When done, you can view it in SDC Catalog.",
     "IMPORT_VF_MESSAGE_CREATE_FINISHED_TITLE": "Create/Update",
@@ -501,6 +500,33 @@
     "PLUGIN_NOT_CONNECTED_ERROR_MAIN": "The \"{{pluginName}}\" plugin is currently unavailable.",
     "PLUGIN_NOT_CONNECTED_ERROR_SUB": "Please try again later.",
 
+    "============SERVICE CONSUMPTION=============" : "",
+    "CONSUMPTION_TYPE": "Type",
+    "CONSUMPTION_SOURCE": "Source",
+    "CONSUMPTION_STATIC_VALUES": "Static Values",
+    "CONSUMPTION_EXPAND_ALL": "Expand All",
+    "CONSUMPTION_COLLAPSE_ALL": "Collapse All",
+    "CONSUMPTION_NO_INPUTS_TO_SHOW": "NO INPUTS TO SHOW",
+    "CONSUMPTION_NO_OPERATIONS_TO_SHOW": "NO OPERATIONS TO SHOW",
+
+    "============= SERVICE DEPENDENCY ============" : "",
+    "SERVICE_DEPENDENCY_ADD_RULE": "Add Rule",
+    "SERVICE_DEPENDENCY_UPDATE_RULE": "Update Rule",
+    "SERVICE_DEPENDENCY_DELETE_RULE": "Delete Rule",
+    "SERVICE_DEPENDENCY_DELETE_RULE_MSG": "Are you sure you want to delete this rule?",
+    "SERVICE_DEPENDENCY_UNCHECK_TITLE": "Remove Dependency",
+    "SERVICE_DEPENDENCY_UNCHECK_TEXT": "Unchecking \"Mark as Dependent\" will remove dependency and erase all the dependency rules. Are you sure you want to remove dependency?",
+
+    "============= COMPOSITION DETAILS TAB ======" : "",
+    "DETAILS_TAB_CHANGE_VERSION_MODAL_TITLE": "Change Version",
+    "DETAILS_TAB_CHANGE_VERSION_MODAL_MSG": "Are you sure you want to change the version?\nIt will affect Service-Consumption and Service-Dependencies data",
+
+    "============= Generic Modal Btn ============" : "",
+    "MODAL_APPROVE" : "Yes",
+    "MODAL_SAVE" : "Save",
+    "MODAL_CREATE" : "Create",
+    "MODAL_CANCEL" : "Cancel",
+    "MODAL_DELETE" : "Delete",
     "=========== POLICY AND GROUPS ===========": "",
     "ADD_TARGETS" : "Add Targets",
     "ADD_MEMBERS" : "Add Members",
diff --git a/catalog-ui/src/assets/styles/images/service-proxy-icons/dependent.png b/catalog-ui/src/assets/styles/images/service-proxy-icons/dependent.png
new file mode 100644
index 0000000000..603093ec62
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/service-proxy-icons/dependent.png
diff --git a/catalog-ui/src/assets/styles/images/service-proxy-icons/uncertified_dependent.png b/catalog-ui/src/assets/styles/images/service-proxy-icons/uncertified_dependent.png
new file mode 100644
index 0000000000..26ebe6016a
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/service-proxy-icons/uncertified_dependent.png
diff --git a/catalog-ui/src/assets/styles/mixins.less b/catalog-ui/src/assets/styles/mixins.less
index e71f3444aa..43bd2a5f44 100644
--- a/catalog-ui/src/assets/styles/mixins.less
+++ b/catalog-ui/src/assets/styles/mixins.less
@@ -220,6 +220,32 @@
     user-select: text;
 }
 
+.multiline-ellipsis(@lineHeight: 1.3em, @lineCount: 2, @bgColor: @main_color_p){
+    overflow: hidden;
+    position: relative;
+    line-height: @lineHeight;
+    max-height: @lineHeight * @lineCount;
+    text-align: left;
+    word-break: normal;
+    white-space: normal;
+    padding-right: 1em;
+    &:before {
+        content: '...';
+        position: absolute;
+        right: 3px;
+        bottom: 0;
+    }
+    &:after {
+        content: '';
+        position: absolute;
+        right: 0;
+        width: 1em;
+        height: 1em;
+        margin-top: 0.2em;
+        background: @bgColor;
+    }
+}
+
 
 .square-icon() {
     display: inline-block;
diff --git a/catalog-ui/src/assets/styles/mixins_old.less b/catalog-ui/src/assets/styles/mixins_old.less
index 29c9574565..7deed223df 100644
--- a/catalog-ui/src/assets/styles/mixins_old.less
+++ b/catalog-ui/src/assets/styles/mixins_old.less
@@ -243,6 +243,7 @@
 .t_15 {.font-color > .t; .font-type > ._15;}
 
 /* Added by ikram - */
+.s_1 {.font-color > .s; .font-type > ._1;}
 .s_12 {.font-color > .s; .font-type > ._12;}
 
 .z_9  {.font-color > .z; .font-type > ._9;}
diff --git a/catalog-ui/src/assets/styles/sprite.less b/catalog-ui/src/assets/styles/sprite.less
index 3e56a0163b..383a830b00 100644
--- a/catalog-ui/src/assets/styles/sprite.less
+++ b/catalog-ui/src/assets/styles/sprite.less
@@ -135,6 +135,9 @@
 .sprite-new.properties:active                   { background-position: -350px -671px; width: 19px;  height: 19px;}
 .active > .sprite-new.properties                { background-position: -350px -671px; width: 19px;  height: 19px;}
 
+.sprite-new.dependencies-icon                     { background-position: -751px -693px; width: 19px;  height: 19px;  opacity: 0.7;}
+.sprite-new.dependencies:active                   { background-position: -751px -693px; width: 19px;  height: 19px;}
+
 .sprite-new.distribution-bth                    { background-position: -399px -716px; width: 55px;  height: 21px;}
 .sprite-new.distribution-bth.disable            { background-position: -464px -716px; width: 55px;  height: 21px;}